/* custom sidebar color overrides (extracted from sidebar.php)
   Purpose: centralized theme overrides for the app's sidebar/topbar
*/

:root {
   --primary: #2d3748;
   --accent: #f6ad55;
   --surface: #f7fafc;
   --muted: #718096;
   --card-bg: #fff;
   --card-shadow: 0 2px 8px rgba(0,0,0,0.04);
   --sidebar-bg: #23272f;
   --sidebar-active: #f6ad55;
   --sidebar-width: 220px;
   --topbar-height: 56px;
   --brand-font: 'Manrope', 'Nunito', Arial, sans-serif;
}

body {
   background: var(--surface);
   font-family: var(--brand-font);
}

.sidebar {
   background: var(--sidebar-bg) !important;
   color: #fff !important;
   width: var(--sidebar-width);
}
.sidebar .nav {
   padding-top: 12px;
}
.sidebar .nav .nav-link {
   color: #fff !important;
   padding: 10px 18px;
   border-radius: 8px;
   margin-bottom: 2px;
   font-size: 1rem;
   transition: background .12s, color .12s;
}
.sidebar .nav .nav-link.active {
   background: var(--sidebar-active) !important;
   color: #23272f !important;
   box-shadow: 0 2px 8px rgba(246,173,85,0.08);
}
.sidebar .nav .nav-link:hover {
   background: rgba(246,173,85,0.12) !important;
   color: #23272f !important;
}
.sidebar .nav .menu-title {
   font-weight: 600;
}
.navbar {
   height: var(--topbar-height);
   background: #fff;
   color: var(--primary);
   border-bottom: 1px solid #e2e8f0;
}
.navbar .brand-logo svg {
   max-height: 32px;
}
.welcome-text {
   color: var(--primary) !important;
   font-size: 1.1rem;
   font-weight: 600;
}
.welcome-sub-text {
   color: var(--muted) !important;
}
.card {
   background: var(--card-bg);
   box-shadow: var(--card-shadow);
   border-radius: 12px;
   border: none;
}
.card-title {
   font-size: 1.05rem;
   font-weight: 700;
   color: var(--primary);
}
.statistics-title {
   font-size: 0.95rem;
   color: var(--muted);
   font-weight: 500;
}
.rate-percentage {
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--primary);
}
.badge {
   font-size: 0.85rem;
   border-radius: 6px;
   padding: 4px 10px;
}
.badge-warning {
   background: var(--accent);
   color: #23272f;
}
.badge-success {
   background: #38a169;
   color: #fff;
}
.table th, .table td {
   font-size: 0.97rem;
   vertical-align: middle;
}
.form-check-label {
   font-size: 0.95rem;
}

/* Auth page specific styles (login page) */
.auth-topbar {
   background: #1746b0; /* deep blue */
   color: #fff;
   height: 72px;
   display: flex;
   align-items: center;
   box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.auth-topbar .brand-title { font-weight: 700; font-size: 1.25rem; margin-left: 1rem; }
.auth-topbar .brand-sub { font-size: 0.85rem; opacity: 0.9; display:block; }
.auth-topbar .lang-btn { margin-right: 1rem; background:#fff;border-radius:6px;padding:8px; color:#1746b0; }

.auth-card { max-width: 520px; margin: 3.5rem auto; padding: 28px; border-radius: 8px; box-shadow: 0 6px 24px rgba(16,24,40,0.08); background:#fff; }
.auth-card h2 { color: #1746b0; font-weight:800; margin-bottom:0.25rem; font-size:1.4rem; }
.auth-card .subtitle { color: #718096; margin-bottom:1rem; }
.auth-input-group .form-control { border-radius:6px; }
.auth-input-group .input-group-text { background: transparent; border: none; }
.auth-input-group .input-group-text { cursor: pointer; }
.auth-input-group .input-group-text .mdi { color: #6b7280; font-size: 1.05rem; }
.auth-input-group .input-group-text.active .mdi { color: #1746b0; }
.auth-btn { background: #1746b0; color: #fff; border-radius:6px; }

.auth-footer { background:#1746b0; color:#fff; text-align:center; padding:10px 0; position:relative; bottom:0; width:100%; }

/* Dashboard hero and large card styles */
.top-hero {
   background: #1e8f3e; /* green strip */
   color: #fff;
   padding: 8px 0;
}
.hero-banner {
   background: #1746b0; /* deep blue banner */
   color: #fff;
   padding: 28px;
   border-radius: 8px;
}
.kpi-row { margin-top: 18px; }
.kpi-card { background: #fff; border-radius: 8px; padding: 22px; box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
.kpi-value { font-size: 2.2rem; color: #1746b0; font-weight:700; }
.kpi-label { color: #718096; }
.large-chart-card { border-radius: 8px; padding: 18px; color: #fff; min-height: 360px; }
.large-chart-blue { background: #1e73ff; }
.large-chart-red { background: #e53e3e; }

/* New left app sidebar to match reference design */
.app-left {
   width: 220px;
   min-height: 100vh;
   background: #163caa; /* deep blue */
   color: #fff;
   position: fixed;
   left: 0;
   top: 0;
   padding-top: 28px;
   box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}
.app-left .brand-seal {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 10px 8px;
}
.app-left .brand-seal img { width: 72px; height:72px; object-fit:contain; border-radius:50%; background:#fff; padding:6px; }
.app-left .brand-title { text-align:center; margin-top:10px; font-weight:800; color:#fff; line-height:1.05; font-size:1rem; padding:0 6px; }
.app-left .nav-vertical { margin-top:18px; padding: 8px; }
.app-left .nav-vertical .nav-item { margin: 6px 4px; }
.app-left .nav-vertical .nav-link {
   display:flex; align-items:center; gap:10px; color:#dbe7ff; padding:10px 12px; border-radius:8px; text-decoration:none; font-weight:600;
}
.app-left .nav-vertical .nav-link .menu-icon { font-size:18px; }
.app-left .nav-vertical .nav-link:hover { background: rgba(255,255,255,0.06); color:#fff; }
.app-left .nav-vertical .nav-link.active { background: rgba(255,255,255,0.14); color:#fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.03); }
.app-left .nav-vertical .nav-link.active .badge { background: rgba(255,255,255,0.12); color:#fff; }

/* push page content to the right to avoid overlap with fixed sidebar */
.page-body-wrapper { margin-left: 220px; }

/* accessible close button inside sidebar for small screens */
.sidebar-close {
   position: absolute;
   top: 8px;
   right: 8px;
   background: transparent;
   color: #fff;
   font-size: 28px;
   line-height: 1;
   border: none;
   padding: 4px 8px;
}
.sidebar-close:focus { outline: 3px solid rgba(255,255,255,0.18); border-radius:6px; }

/* make focus outlines visible for keyboard users */
.app-left :focus, .topbar-user:focus, .nav-link:focus { outline: 3px solid rgba(255,255,255,0.12); outline-offset: 2px; border-radius:6px; }

/* Responsive behaviour: convert fixed sidebar into off-canvas on small screens */
@media (max-width: 991.98px) {
   .app-left {
      transform: translateX(-100%);
      transition: transform .28s ease-in-out;
      z-index: 1100;
      height: 100vh;
   }
   .app-left.open {
      transform: translateX(0);
   }
   .page-body-wrapper { margin-left: 0; }
   .app-topbar { left: 0; }
    /* make room for the compact topbar on small screens */
    .content-wrapper { padding-top: 56px; }
}

/* smooth transition for topbar when sidebar toggles */
.app-left, .app-topbar { transition: all .18s ease-in-out; }

/* Topbar matching the reference (green) */
.app-topbar {
   background: #1eae3f; /* green */
   color: #fff;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 18px;
   position: fixed;
   left: 220px; /* sit to the right of fixed sidebar */
   right: 0;
   top: 0;
   z-index: 1050;
   box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.app-topbar .topbar-left { display:flex; align-items:center; gap:12px; }
.app-topbar .topbar-left .seal { width:36px; height:36px; border-radius:50%; background:#fff; padding:4px; display:inline-flex; align-items:center; justify-content:center; }
.app-topbar .topbar-left .title { font-weight:800; font-size:1.05rem; color:#fff; }
.app-topbar .topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-btn { background:#fff; color:#1eae3f; padding:6px 10px; border-radius:8px; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.topbar-user { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.12); padding:6px 10px; border-radius:8px; display:inline-flex; align-items:center; gap:8px; }

.topbar-avatar { width:28px; height:28px; object-fit:cover; border-radius:50%; margin-right:8px; }

/* push content down to make space for fixed topbar (reduced when topbar removed) */
.content-wrapper { padding-top: 12px; }

/* small screen: show hamburger */
@media (max-width: 991.98px) {
   #sidebarToggleBtn { display:inline-block !important; }
}

/* Compact topbar visible only on small screens */
.compact-topbar { display:none; }
@media (max-width: 991.98px) {
   .compact-topbar {
      display:flex;
      align-items:center;
      gap:12px;
      position:fixed;
      top:0; left:0; right:0;
      height:56px;
      padding:0 12px;
      background:#1eae3f;
      color:#fff;
      z-index:1060;
   }
   .compact-topbar .compact-title { font-weight:700; font-size:0.95rem; }
   .compact-topbar #sidebarToggleBtn { display:inline-block; font-size:20px; background:transparent; border:none; color:#fff; }
}