/* Gentelella-inspired theme for SGH WebAdmin (Bootstrap 5.3 + light/dark via data-bs-theme).
   Visual/colors only — markup & class hooks are kept so every page keeps working.
   Signature Gentelella look: dark navy sidebar (#2A3F54) + teal accent (#1ABB9C),
   white top bar, light-grey canvas, x_panel-style cards. */

:root {
  /* Gentelella palette */
  --gen-teal:        #1ABB9C;
  --gen-teal-hover:  #169F85;
  --gen-teal-light:  #E8F8F4;
  --gen-dark:        #2A3F54;   /* sidebar */
  --gen-dark-2:      #25374B;   /* sidebar gradient bottom */
  --gen-dark-3:      #172736;   /* sidebar footer / deep */
  --gen-success:     #26B99A;
  --gen-info:        #3498DB;
  --gen-warning:     #F39C12;
  --gen-danger:      #E74C3C;

  /* Shell */
  --sb-bg:           #2A3F54;
  --sb-link:         #E7E7E7;
  --sb-link-muted:   #C8CDD3;
  --sb-section:      #8A96A4;
  --content-bg:      #F7F7F7;
  --topbar-bg:       #ffffff;
  --card-bg:         #ffffff;
  --card-shadow:     0 1px 1px rgba(0, 0, 0, .05);
  --border-soft:     #E6E9ED;
  --muted:           #73879C;
  --accent:          #1ABB9C;

  /* Bootstrap overrides (drive buttons/badges/utilities/forms) */
  --bs-primary:        #1ABB9C;  --bs-primary-rgb: 26, 187, 156;
  --bs-success:        #26B99A;  --bs-success-rgb: 38, 185, 154;
  --bs-info:           #3498DB;  --bs-info-rgb: 52, 152, 219;
  --bs-warning:        #F39C12;  --bs-warning-rgb: 243, 156, 18;
  --bs-danger:         #E74C3C;  --bs-danger-rgb: 231, 76, 60;
  --bs-body-bg:        #F7F7F7;  --bs-body-color: #73879C;
  --bs-secondary-color: #73879C;
  --bs-border-color:   #E6E9ED;
  --bs-border-radius:  3px; --bs-border-radius-sm: 3px; --bs-border-radius-lg: 4px;
  --bs-link-color:     #1ABB9C; --bs-link-color-rgb: 26, 187, 156;
  --bs-link-hover-color: #169F85; --bs-link-hover-color-rgb: 22, 159, 133;

  /* Subtle/emphasis tints so alerts & *-subtle utilities match the palette */
  --bs-primary-bg-subtle: #E8F8F4; --bs-primary-border-subtle: #C4EDE4; --bs-primary-text-emphasis: #169F85;
  --bs-success-bg-subtle: #E9F7F2; --bs-success-border-subtle: #C6ECE0; --bs-success-text-emphasis: #1E9C82;
  --bs-info-bg-subtle:    #EAF4FB; --bs-info-border-subtle:    #C7E2F5; --bs-info-text-emphasis:    #2A7DB4;
  --bs-warning-bg-subtle: #FDF2E1; --bs-warning-border-subtle: #FADFB4; --bs-warning-text-emphasis: #C87F0A;
  --bs-danger-bg-subtle:  #FCEBE9; --bs-danger-border-subtle:  #F6CFCA; --bs-danger-text-emphasis:  #C0392B;
}

[data-bs-theme="dark"] {
  --content-bg:      #17222E;
  --topbar-bg:       #1E2C3A;
  --card-bg:         #22303F;
  --card-shadow:     0 1px 3px rgba(0, 0, 0, .45);
  --border-soft:     #2E4256;
  --muted:           #93A2B4;
  --accent:          #1ABB9C;

  --bs-body-bg:        #17222E;  --bs-body-color: #C6D2DE;
  --bs-secondary-color: #93A2B4;
  --bs-border-color:   #2E4256;
  --bs-emphasis-color: #EAF1F6;

  --bs-primary-bg-subtle: #133A33; --bs-primary-border-subtle: #1C554A; --bs-primary-text-emphasis: #5BE0C6;
  --bs-success-bg-subtle: #14382F; --bs-success-border-subtle: #1E5648; --bs-success-text-emphasis: #63DCBF;
  --bs-info-bg-subtle:    #12303F; --bs-info-border-subtle:    #1D4A63; --bs-info-text-emphasis:    #7FBEE8;
  --bs-warning-bg-subtle: #3A2C10; --bs-warning-border-subtle: #5A4417; --bs-warning-text-emphasis: #F5BE63;
  --bs-danger-bg-subtle:  #3A1E1A; --bs-danger-border-subtle:  #5A2E28; --bs-danger-text-emphasis:  #F0958B;
}

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--content-bg);
  color: var(--bs-body-color);
  font-size: .9rem;
}
h1, h2, h3, h4, h5, .display-font { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 600; color: var(--bs-emphasis-color, #2A3F54); }

/* ---- Shell ---- */
.admin-shell { display: flex; }
.admin-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 15rem; z-index: 1045;
  background: var(--gen-dark);
  background: linear-gradient(180deg, var(--gen-dark) 0%, var(--gen-dark-2) 100%);
  color: var(--sb-link); display: flex; flex-direction: column; overflow-y: auto;
  transition: transform .2s ease;
}
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }
.admin-main {
  margin-left: 15rem; min-height: 100vh; width: calc(100% - 15rem);
  display: flex; flex-direction: column; transition: margin .2s ease, width .2s ease;
}
body.nav-collapsed .admin-sidebar { transform: translateX(-100%); }
body.nav-collapsed .admin-main { margin-left: 0; width: 100%; }
@media (max-width: 991.98px) {
  .admin-main { margin-left: 0; width: 100%; }
  .admin-sidebar { box-shadow: 0 0 2rem rgba(0, 0, 0, .35); }
}

/* ---- Sidebar brand (Gentelella site_title) ---- */
.sidebar-brand {
  display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.15rem; color: #fff;
  text-decoration: none; font-weight: 600; letter-spacing: .01rem; font-size: 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07); min-height: 4.1rem;
}
.sidebar-brand img { height: 60px; max-width: 100%; width: auto; opacity: .97; }
.sidebar-brand span { line-height: 1.15; }
.sidebar-brand small { display: block; font-size: .6rem; opacity: .55; font-weight: 500; letter-spacing: .05rem; text-transform: uppercase; }
.sidebar-divider { display: none; }

/* Profile block (pinned to the bottom of the sidebar) */
.sidebar-profile {
  display: flex; align-items: center; gap: .7rem; padding: .9rem 1.15rem 1rem;
  margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .07);
}
.sidebar-profile .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gen-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 600;
}
.sidebar-profile .who { min-width: 0; }
.sidebar-profile .who span { display: block; font-size: .66rem; color: var(--sb-section); text-transform: uppercase; letter-spacing: .04rem; }
.sidebar-profile .who strong { color: #ECF0F3; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Section title */
.menu-section {
  color: var(--sb-section); font-size: .66rem; font-weight: 700; letter-spacing: .09rem;
  text-transform: uppercase; padding: .9rem 1.4rem .35rem;
}

/* ---- Sidebar nav ---- */
.admin-nav { list-style: none; padding: 0 0 1rem; margin: 0; flex: 1 1 auto; }
.admin-nav .nav-item { margin-bottom: 0; }
.admin-nav .nav-link {
  color: var(--sb-link-muted); border-radius: 0; padding: .72rem 1.4rem;
  display: flex; align-items: center; gap: .8rem; font-weight: 500; font-size: .875rem;
  border-right: 3px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.admin-nav .nav-link > i:first-child { width: 1.25rem; text-align: center; font-size: .95rem; }
.admin-nav .nav-link:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .06));
}
.admin-nav .nav-link.active {
  color: #fff;
  background: linear-gradient(#334556, #2C4257);
  box-shadow: rgba(0, 0, 0, .25) 0 1px 0, inset rgba(255, 255, 255, .16) 0 1px 0;
  border-right-color: var(--gen-teal);
}
.admin-nav .nav-link.active > i { color: var(--gen-teal); }

/* Submenu (child) */
.admin-nav .collapse-inner {
  background: rgba(0, 0, 0, .18);
  display: flex; flex-direction: column;
  padding: .25rem 0;
}
.admin-nav .collapse-inner .nav-link {
  font-weight: 400; font-size: .82rem; padding: .5rem 1.4rem .5rem 3.05rem;
  color: var(--sb-link-muted);
}
.admin-nav .collapse-inner .nav-link > i:first-child { display: none; }
.admin-nav .collapse-inner .nav-link:hover { background: transparent; color: #fff; }
.admin-nav .collapse-inner .nav-link.active {
  background: transparent; box-shadow: none; color: var(--gen-teal); border-right-color: transparent;
}
.nav-caret { margin-left: auto; transition: transform .2s; font-size: .7rem; opacity: .6; }
.nav-link.collapsed .nav-caret { transform: rotate(-90deg); }

/* ---- Topbar ---- */
.admin-topbar {
  height: 4.1rem; background: var(--topbar-bg); border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .04);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 1030;
}
.topbar-title { font-size: 1.02rem; font-weight: 600; margin: 0; color: var(--gen-dark); }
[data-bs-theme="dark"] .topbar-title { color: var(--bs-body-color); }
.icon-btn {
  border: none; background: transparent; color: var(--muted); font-size: 1.05rem;
  width: 2.4rem; height: 2.4rem; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--gen-teal-light); color: var(--gen-teal); }
[data-bs-theme="dark"] .icon-btn:hover { background: rgba(26, 187, 156, .15); }
.admin-topbar .dropdown-toggle::after { display: none; }
.admin-topbar .user-toggle { color: var(--muted); font-weight: 600; font-size: .88rem; text-decoration: none; display: flex; align-items: center; gap: .55rem; }
.admin-topbar .user-toggle i { font-size: 1.7rem; color: var(--gen-teal); }

/* ---- Content / footer ---- */
#content { flex: 1 1 auto; padding: 1.6rem 1.75rem; }
.admin-footer { background: var(--topbar-bg); border-top: 1px solid var(--border-soft); padding: .9rem 1.5rem; text-align: left; color: var(--muted); font-size: .8rem; }

/* ---- Cards (Gentelella x_panel) ---- */
.card {
  background: var(--card-bg); border: 1px solid var(--border-soft); border-top: 2px solid var(--gen-teal);
  border-radius: 3px; box-shadow: var(--card-shadow);
}
.card-header {
  background: transparent; border-bottom: 1px solid var(--border-soft);
  font-weight: 600; color: var(--gen-dark); letter-spacing: .01rem;
}
[data-bs-theme="dark"] .card-header { color: var(--bs-body-color); }

/* Coloured stat tiles: soft tinted background + solid rounded icon badge. */
.card.border-left-primary, .card.border-left-success,
.card.border-left-info, .card.border-left-warning {
  border: 1px solid var(--border-soft); border-top-width: 2px; box-shadow: var(--card-shadow);
}
.card.border-left-primary { border-top-color: var(--gen-teal); }
.card.border-left-success { border-top-color: var(--gen-success); }
.card.border-left-info    { border-top-color: var(--gen-info); }
.card.border-left-warning { border-top-color: var(--gen-warning); }
.stat-label { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .04rem; }
.stat-value { font-weight: 700; font-size: 1.7rem; line-height: 1.2; color: var(--bs-emphasis-color, #2A3F54); }
.stat-icon {
  width: 3rem; height: 3rem; border-radius: 50%; opacity: 1; color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.border-left-primary .stat-icon { background: var(--gen-teal); }
.border-left-success .stat-icon { background: var(--gen-success); }
.border-left-info    .stat-icon { background: var(--gen-info); }
.border-left-warning .stat-icon { background: var(--gen-warning); }
.card.border-left-primary .small, .card.border-left-success .small,
.card.border-left-info .small, .card.border-left-warning .small { color: var(--muted); font-weight: 600; text-decoration: none; }
.card.border-left-primary .small:hover { color: var(--gen-teal); }
.card.border-left-success .small:hover { color: var(--gen-success); }
.card.border-left-info    .small:hover { color: var(--gen-info); }
.card.border-left-warning .small:hover { color: var(--gen-warning); }

/* ---- Tables ---- */
.table { --bs-table-border-color: var(--border-soft); color: var(--bs-body-color); }
.table > thead {
  --bs-table-bg: transparent;
  text-transform: uppercase; font-size: .74rem; letter-spacing: .03rem; color: var(--muted);
}
.table > thead th { border-bottom: 2px solid var(--border-soft); font-weight: 700; }
.table-light { --bs-table-bg: #F5F7FA; --bs-table-color: #2A3F54; --bs-table-border-color: var(--border-soft); }
[data-bs-theme="dark"] .table-light { --bs-table-bg: #1E2C3A; --bs-table-color: #C6D2DE; --bs-table-border-color: #2E4256; }
[data-bs-theme="dark"] .text-bg-light { background-color: #1E2C3A !important; color: #C6D2DE !important; }

/* ---- Forms ---- */
.form-control, .form-select { border-color: var(--border-soft); border-radius: 3px; }
.form-control:focus, .form-select:focus {
  border-color: var(--gen-teal);
  box-shadow: 0 0 0 .2rem rgba(26, 187, 156, .18);
}
.form-check-input:checked { background-color: var(--gen-teal); border-color: var(--gen-teal); }
.form-check-input:focus { border-color: var(--gen-teal); box-shadow: 0 0 0 .2rem rgba(26, 187, 156, .18); }
.form-label { font-weight: 600; color: var(--gen-dark); font-size: .85rem; }
[data-bs-theme="dark"] .form-label { color: var(--bs-body-color); }

/* ---- Buttons ---- */
a { color: var(--accent); }
.btn { --bs-btn-border-radius: 3px; --bs-btn-border-radius-sm: 3px; --bs-btn-border-radius-lg: 4px; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--gen-teal); --bs-btn-border-color: var(--gen-teal);
  --bs-btn-hover-bg: var(--gen-teal-hover); --bs-btn-hover-border-color: var(--gen-teal-hover);
  --bs-btn-active-bg: var(--gen-teal-hover); --bs-btn-active-border-color: var(--gen-teal-hover);
  --bs-btn-disabled-bg: var(--gen-teal); --bs-btn-disabled-border-color: var(--gen-teal);
}
.btn-outline-primary {
  --bs-btn-color: var(--gen-teal); --bs-btn-border-color: var(--gen-teal);
  --bs-btn-hover-bg: var(--gen-teal); --bs-btn-hover-border-color: var(--gen-teal);
  --bs-btn-active-bg: var(--gen-teal); --bs-btn-active-border-color: var(--gen-teal);
}
.btn-success {
  --bs-btn-bg: var(--gen-success); --bs-btn-border-color: var(--gen-success);
  --bs-btn-hover-bg: #1E9C82; --bs-btn-hover-border-color: #1E9C82;
  --bs-btn-active-bg: #1E9C82; --bs-btn-active-border-color: #1E9C82; --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--gen-danger); --bs-btn-border-color: var(--gen-danger);
  --bs-btn-hover-bg: #C0392B; --bs-btn-hover-border-color: #C0392B;
  --bs-btn-active-bg: #C0392B; --bs-btn-active-border-color: #C0392B;
}
.btn-outline-danger {
  --bs-btn-color: var(--gen-danger); --bs-btn-border-color: var(--gen-danger);
  --bs-btn-hover-bg: var(--gen-danger); --bs-btn-hover-border-color: var(--gen-danger);
}
.btn-warning { --bs-btn-bg: var(--gen-warning); --bs-btn-border-color: var(--gen-warning); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #D9880C; --bs-btn-hover-border-color: #D9880C; }
.btn-info { --bs-btn-bg: var(--gen-info); --bs-btn-border-color: var(--gen-info); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2A7DB4; --bs-btn-hover-border-color: #2A7DB4; }
.btn-link { --bs-btn-color: var(--gen-teal); --bs-btn-hover-color: var(--gen-teal-hover); }

/* Dark topbar-flavoured button seen in Gentelella */
.btn-dark { --bs-btn-bg: var(--gen-dark); --bs-btn-border-color: var(--gen-dark); --bs-btn-hover-bg: var(--gen-dark-2); --bs-btn-hover-border-color: var(--gen-dark-2); }

/* Badges using the palette */
.badge.text-bg-primary { color: #fff !important; }

/* Nav-tabs / pills flavour */
.nav-tabs .nav-link.active { color: var(--gen-teal); border-bottom-color: var(--card-bg); }
.nav-pills .nav-link.active { background-color: var(--gen-teal); }

/* Dropdowns */
.dropdown-menu { border-color: var(--border-soft); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--gen-teal); }

/* Pagination */
.page-link { color: var(--gen-teal); }
.page-item.active .page-link { background-color: var(--gen-teal); border-color: var(--gen-teal); }

/* Progress */
.progress-bar { background-color: var(--gen-teal); }

/* ---- Login ---- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gen-dark) 0%, var(--gen-dark-2) 55%, var(--gen-dark-3) 100%);
  padding: 1rem; position: relative;
}
[data-bs-theme="dark"] .login-wrap { background: linear-gradient(135deg, #12202D 0%, #17222E 100%); }
.login-card { width: 100%; max-width: 420px; border-top: 3px solid var(--gen-teal); }
.login-theme-toggle { position: absolute; top: 1rem; right: 1rem; color: rgba(255, 255, 255, .8); }
.login-theme-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }