/* ==========================================================================
   SIDEBAR.CSS — single shared stylesheet for the sidebar navigation
   Used by all portals (admin, teacher, student, accountant, etc).
   Load this AFTER style.css. Role CSS files may still add color
   theming on top (e.g. .sidebar background), that is expected and
   does not conflict with the structural rules below.
   ========================================================================== */

:root {
  --sidebar-bg: #1a1a2e;
  --sidebar-hover: #16213e;
  --sidebar-width: 236px;
  --sidebar-width-tablet: 80px;
  --sidebar-width-mobile: 260px;
}

.sidebar {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: #fff;
  overflow-y: auto;
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.sidebar-brand {
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 6px;
}

.sidebar-brand h3 {
  color: #fff;
  font-weight: 600;
  font-size: 15.6px; /* fixed px (2 steps smaller than 17.6px) — sidebar text
                         must stay constant regardless of any page's own
                         html{font-size} override (e.g. admin_dashboard.css) */
  display: flex;
  align-items: center;
}

.sidebar-brand h3 i {
  margin-right: 10px;
  color: var(--success, #4cc9f0);
}

.sidebar .nav {
  padding: 0 15px;
}

.sidebar .position-sticky.pt-3 {
  padding-top: 8px !important; /* was 0.5rem — fixed px, see note above */
}

.sidebar .nav-item {
  margin-bottom: 1px;
}

.sidebar .nav-link {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  transition: var(--transition, all 0.2s ease);
  font-weight: 500;
  font-size: 12px; /* was 14px — 2 steps smaller (see note above) */
  margin-bottom: 1px;
}

.sidebar .nav-link span:not(.badge) {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-link i {
  margin-right: 12px;
  font-size: 14px; /* was 16px — 2 steps smaller (see note above) */
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #fff;
  background: var(--sidebar-hover);
  transform: none !important;
}

.sidebar .nav-link.active {
  background: linear-gradient(to right, var(--primary, #4361ee), var(--secondary, #3a0ca3));
  box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
}

/* Main content area paired with the fixed sidebar */
.main-content {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  transition: all 0.3s ease;
  padding: 20px;
  min-height: 100vh;
}

/* ERP layout wrapper variant (flex-based, non-Bootstrap pages) */
.erp-layout-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.erp-layout-wrapper .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  z-index: 1000;
  flex-shrink: 0;
}

.erp-layout-wrapper .main-content,
.erp-layout-wrapper main {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  min-height: 100vh;
  flex: 1;
  overflow-x: hidden;
}

/* Tablet: collapse to icon-only */
@media (max-width: 992px) {
  .sidebar .nav-link span {
    display: none;
  }

  .sidebar .nav-link i {
    margin-right: 0;
    font-size: 18.8px; /* was 20.8px — 2 steps smaller (see note above) */
  }

  .sidebar-brand h3 span {
    display: none;
  }

  .erp-layout-wrapper .sidebar {
    width: var(--sidebar-width-tablet);
  }

  .erp-layout-wrapper .main-content,
  .erp-layout-wrapper main {
    margin-left: var(--sidebar-width-tablet);
    width: calc(100% - var(--sidebar-width-tablet));
  }
}

/* Mobile: sidebar hidden off-canvas, toggled with .show */
@media (max-width: 768px) {
  .erp-layout-wrapper .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width-mobile);
  }

  .erp-layout-wrapper .sidebar.show {
    transform: translateX(0);
  }

  .erp-layout-wrapper .main-content,
  .erp-layout-wrapper main {
    margin-left: 0;
    width: 100%;
  }
}

/* Print: hide sidebar, let content take full width */
@media print {
  .sidebar {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}