/* Schoolep component architecture: design tokens, fonts, root variables. */
@import url("/assets/css/cms-font.css");

:root {
  --logo-hat-start: #e9d5ff;
  --logo-hat-end: var(--color-sec);
  --logo-string-start: #dbeafe;
  --logo-string-end: var(--primary-light);

  --primary: #1c3f94;
  --primary-light: #4361ee;
  --secondary: #1e293b;
  --bg-light: #f8fafc;
  --text-main: #1b263b;
  --white: #ffffff;

  --color-sec: #9c27b0;
  --color-mid: #ff9800;
  --color-pri: #4CAF50;

  --sidebar-purple-hover: #6a1b9a;
  --sidebar-orange-hover: #ef6c00;
  --sidebar-green-hover: #2e7d32;

  --header-h: 48px;
  --radius: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow: 0 4px 15px rgba(0,0,0,0.08);
  --shadow-hover: 10px 25px rgba(0,0,0,0.12);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --brand-logo-size: 36px;
  --brand-logo-overlap: -10px;

  
  --sidebar-title-pc-ar-font-size: 1.10rem;
  --sidebar-title-pc-fr-font-size: 1.00rem;

  --sidebar-title-pc-collapsed-ar-font-size: 1.00rem;
  --sidebar-title-pc-collapsed-fr-font-size: 0.82rem;

  --sidebar-title-mobile-ar-font-size: 0.90rem;
  --sidebar-title-mobile-fr-font-size: 0.86rem;
}

html.dark-mode,
body.dark-mode {
  --bg-light: #0f172a;
  --text-main: #f1f5f9;
  --white: #1e293b;
  --secondary: #020617;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --sidebar-purple-hover: #b27ad9;
  --sidebar-orange-hover: #ffbf1d;
  --sidebar-green-hover: #44e680;
}

@media (max-width: 480px) {
:root {
    --brand-logo-size: 34px;
    --brand-logo-overlap: -8px;
  }
}

body {
  background: var(--bg-light);
  color: var(--text-main);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 992px) {
.close-btn:hover,
  .close-btn:active {
    background: #eef2ff;
    border-color: rgba(67, 97, 238, 0.28);
    color: var(--primary-light);
    transform: scale(0.95);
  }
.drawer-body {
    --drawer-row-height: 36px;
    --drawer-row-radius: 9px;
    --drawer-icon-column: 20px;
    --drawer-title-column: 76px;
    --drawer-icon-title-gap: 5px;
    --drawer-button-width: 88%;

    flex: 1;
    overflow-y: auto;
    padding: 7px 6px 10px;
    display: grid;
    gap: 6px;
    align-content: flex-start;
  }
.accordion-item {
    width: var(--drawer-button-width);
    justify-self: center;
    min-height: var(--drawer-row-height);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--drawer-row-radius);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
    transition:
      background-color 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }
}