/* Modernize-inspired theme for SGH WebAdmin (Bootstrap 5.3 + light/dark via data-bs-theme).
   Visual/colors only — markup & behaviour are unchanged. Palette follows adminmart "Modernize". */

:root {
  /* Modernize palette */
  --mod-primary:        #5D87FF;
  --mod-primary-hover:  #4570EA;
  --mod-primary-light:  #ECF2FF;
  --mod-success:        #13DEB9;
  --mod-info:           #539BFF;
  --mod-warning:        #FFAE1F;
  --mod-danger:         #FA896B;

  /* Shell */
  --sb-bg:           #ffffff;
  --sb-link:         #2A3547;
  --sb-link-muted:   #5A6A85;
  --content-bg:      #F4F7FB;
  --topbar-bg:       #ffffff;
  --card-bg:         #ffffff;
  --card-shadow:     rgba(145, 158, 171, .12) 0 12px 24px -4px, rgba(145, 158, 171, .10) 0 0 2px 0;
  --border-soft:     #E5EAEF;
  --muted:           #5A6A85;
  --accent:          #5D87FF;

  /* Bootstrap overrides (drive buttons/badges/utilities/forms) */
  --bs-primary:        #5D87FF;  --bs-primary-rgb: 93, 135, 255;
  --bs-success:        #13DEB9;  --bs-success-rgb: 19, 222, 185;
  --bs-info:           #539BFF;  --bs-info-rgb: 83, 155, 255;
  --bs-warning:        #FFAE1F;  --bs-warning-rgb: 255, 174, 31;
  --bs-danger:         #FA896B;  --bs-danger-rgb: 250, 137, 107;
  --bs-body-bg:        #F4F7FB;  --bs-body-color: #2A3547;
  --bs-secondary-color: #5A6A85;
  --bs-border-color:   #E5EAEF;
  --bs-border-radius:  7px; --bs-border-radius-sm: 6px; --bs-border-radius-lg: 9px;
  --bs-link-color:     #5D87FF; --bs-link-color-rgb: 93, 135, 255;
  --bs-link-hover-color: #4570EA; --bs-link-hover-color-rgb: 69, 112, 234;

  /* Subtle/emphasis tints so alerts & *-subtle utilities match the palette */
  --bs-primary-bg-subtle: #ECF2FF; --bs-primary-border-subtle: #D5E1FF; --bs-primary-text-emphasis: #4570EA;
  --bs-success-bg-subtle: #E6FBF5; --bs-success-border-subtle: #B8F2E6; --bs-success-text-emphasis: #0FB39A;
  --bs-info-bg-subtle:    #EBF3FF; --bs-info-border-subtle:    #CFE2FF; --bs-info-text-emphasis:    #3A7BD5;
  --bs-warning-bg-subtle: #FEF5E5; --bs-warning-border-subtle: #FDE6BE; --bs-warning-text-emphasis: #C98A12;
  --bs-danger-bg-subtle:  #FDEDE8; --bs-danger-border-subtle:  #FDD8CE; --bs-danger-text-emphasis:  #E16A4C;
}

[data-bs-theme="dark"] {
  --sb-bg:           #2A3547;
  --sb-link:         #DFE5EF;
  --sb-link-muted:   #7C8FAC;
  --content-bg:      #1A2233;
  --topbar-bg:       #2A3547;
  --card-bg:         #2A3547;
  --card-shadow:     0 .15rem 1.25rem 0 rgba(0, 0, 0, .45);
  --border-soft:     #333F55;
  --muted:           #7C8FAC;
  --accent:          #5D87FF;

  --bs-body-bg:        #1A2233;  --bs-body-color: #DFE5EF;
  --bs-secondary-color: #7C8FAC;
  --bs-border-color:   #333F55;
  --bs-emphasis-color: #EAEFF4;

  --bs-primary-bg-subtle: #253356; --bs-primary-border-subtle: #2F4170; --bs-primary-text-emphasis: #A9C0FF;
  --bs-success-bg-subtle: #16352F; --bs-success-border-subtle: #1C4D43; --bs-success-text-emphasis: #5BE6CD;
  --bs-info-bg-subtle:    #1B3047; --bs-info-border-subtle:    #244262; --bs-info-text-emphasis:    #9BC4FF;
  --bs-warning-bg-subtle: #3A2E12; --bs-warning-border-subtle: #574419; --bs-warning-text-emphasis: #FFD27A;
  --bs-danger-bg-subtle:  #3A211B; --bs-danger-border-subtle:  #5A3228; --bs-danger-text-emphasis:  #FFB6A2;
}

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--content-bg);
  color: var(--bs-body-color);
}
h1, h2, h3, h4, h5, .display-font { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 700; }

/* ---- Shell ---- */
.admin-shell { display: flex; }
.admin-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 15rem; z-index: 1045;
  background: var(--sb-bg); border-right: 1px solid var(--border-soft);
  color: var(--sb-link); display: flex; flex-direction: column; overflow-y: auto;
  transition: transform .2s ease;
}
.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, .25); }
}

/* ---- Sidebar ---- */
.sidebar-brand {
  display: flex; align-items: center; gap: .6rem; padding: 1.35rem 1.25rem; color: var(--sb-link);
  text-decoration: none; font-weight: 700; letter-spacing: .02rem; font-size: 1.05rem;
}
.sidebar-brand img { height: 34px; width: auto; }
.sidebar-brand small { display: block; font-size: .62rem; opacity: .7; font-weight: 600; letter-spacing: .02rem; }
.sidebar-divider { border-color: var(--border-soft); margin: 0 1.25rem .25rem; opacity: 1; }
.admin-nav { list-style: none; padding: .5rem .85rem; margin: 0; flex: 1 1 auto; }
.admin-nav .nav-item { margin-bottom: .12rem; }
.admin-nav .nav-link {
  color: var(--sb-link-muted); border-radius: 7px; padding: .68rem .85rem;
  display: flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .85rem;
  transition: background-color .15s ease, color .15s ease;
}
.admin-nav .nav-link > i:first-child { width: 1.2rem; text-align: center; font-size: .95rem; }
.admin-nav .nav-link:hover { color: var(--mod-primary); background: var(--mod-primary-light); }
[data-bs-theme="dark"] .admin-nav .nav-link:hover { background: rgba(93, 135, 255, .15); }
.admin-nav .nav-link.active { color: #fff; background: var(--mod-primary); box-shadow: 0 4px 10px -3px rgba(93, 135, 255, .55); }
.admin-nav .nav-link.active > i { color: #fff; }
.admin-nav .collapse-inner { margin: .1rem 0 .35rem 1.65rem; display: flex; flex-direction: column; gap: .1rem; }
.admin-nav .collapse-inner .nav-link { font-weight: 500; font-size: .82rem; padding: .48rem .7rem; }
.nav-caret { margin-left: auto; transition: transform .2s; font-size: .7rem; }
.nav-link.collapsed .nav-caret { transform: rotate(-90deg); }

/* ---- Topbar ---- */
.admin-topbar {
  height: 4.375rem; background: var(--topbar-bg); border-bottom: 1px solid var(--border-soft);
  box-shadow: rgba(145, 158, 171, .1) 0 2px 6px 0;
  display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 1030;
}
.topbar-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--bs-body-color); }
.icon-btn {
  border: none; background: transparent; color: var(--muted); font-size: 1rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--mod-primary-light); color: var(--mod-primary); }
[data-bs-theme="dark"] .icon-btn:hover { background: rgba(93, 135, 255, .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: .5rem; }
.admin-topbar .user-toggle i { font-size: 1.7rem; color: var(--accent); }

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

/* ---- Cards & stat utilities ---- */
.card { background: var(--card-bg); border: none; border-radius: 9px; box-shadow: var(--card-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--border-soft); font-weight: 700; }
/* Modernize-style 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-left: 0 !important; box-shadow: none; }
.card.border-left-primary { background: var(--bs-primary-bg-subtle); }
.card.border-left-success { background: var(--bs-success-bg-subtle); }
.card.border-left-info    { background: var(--bs-info-bg-subtle); }
.card.border-left-warning { background: var(--bs-warning-bg-subtle); }
.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-body-color); }
.stat-icon {
  width: 3.1rem; height: 3.1rem; border-radius: 50%; opacity: 1; color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.border-left-primary .stat-icon { background: var(--mod-primary); }
.border-left-success .stat-icon { background: var(--mod-success); }
.border-left-info    .stat-icon { background: var(--mod-info); }
.border-left-warning .stat-icon { background: var(--mod-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(--mod-primary); }
.card.border-left-success .small:hover { color: var(--mod-success); }
.card.border-left-info    .small:hover { color: var(--mod-info); }
.card.border-left-warning .small:hover { color: var(--mod-warning); }

/* ---- Tables ---- */
.table { --bs-table-border-color: var(--border-soft); }
.table > thead { --bs-table-bg: transparent; }
.table-light { --bs-table-bg: #F4F7FB; --bs-table-color: #2A3547; --bs-table-border-color: var(--border-soft); }
[data-bs-theme="dark"] .table-light { --bs-table-bg: #222C3D; --bs-table-color: #DFE5EF; --bs-table-border-color: #333F55; }
[data-bs-theme="dark"] .text-bg-light { background-color: #222C3D !important; color: #DFE5EF !important; }

/* ---- Forms ---- */
.form-control, .form-select { border-color: var(--border-soft); border-radius: 7px; }
.form-control:focus, .form-select:focus {
  border-color: var(--mod-primary);
  box-shadow: 0 0 0 .2rem rgba(93, 135, 255, .22);
}
.form-check-input:checked { background-color: var(--mod-primary); border-color: var(--mod-primary); }
.form-check-input:focus { border-color: var(--mod-primary); box-shadow: 0 0 0 .2rem rgba(93, 135, 255, .22); }

/* ---- Buttons ---- */
a { color: var(--accent); }
.btn { --bs-btn-border-radius: 7px; --bs-btn-border-radius-sm: 6px; --bs-btn-border-radius-lg: 9px; font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--mod-primary); --bs-btn-border-color: var(--mod-primary);
  --bs-btn-hover-bg: var(--mod-primary-hover); --bs-btn-hover-border-color: var(--mod-primary-hover);
  --bs-btn-active-bg: var(--mod-primary-hover); --bs-btn-active-border-color: var(--mod-primary-hover);
  --bs-btn-disabled-bg: var(--mod-primary); --bs-btn-disabled-border-color: var(--mod-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--mod-primary); --bs-btn-border-color: var(--mod-primary);
  --bs-btn-hover-bg: var(--mod-primary); --bs-btn-hover-border-color: var(--mod-primary);
  --bs-btn-active-bg: var(--mod-primary); --bs-btn-active-border-color: var(--mod-primary);
}
.btn-success {
  --bs-btn-bg: var(--mod-success); --bs-btn-border-color: var(--mod-success);
  --bs-btn-hover-bg: #0FB39A; --bs-btn-hover-border-color: #0FB39A;
  --bs-btn-active-bg: #0FB39A; --bs-btn-active-border-color: #0FB39A; --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--mod-danger); --bs-btn-border-color: var(--mod-danger);
  --bs-btn-hover-bg: #E16A4C; --bs-btn-hover-border-color: #E16A4C;
  --bs-btn-active-bg: #E16A4C; --bs-btn-active-border-color: #E16A4C;
}
.btn-outline-danger {
  --bs-btn-color: var(--mod-danger); --bs-btn-border-color: var(--mod-danger);
  --bs-btn-hover-bg: var(--mod-danger); --bs-btn-hover-border-color: var(--mod-danger);
}
.btn-link { --bs-btn-color: var(--mod-primary); --bs-btn-hover-color: var(--mod-primary-hover); }

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

/* Dropdowns */
.dropdown-menu { border-color: var(--border-soft); border-radius: 9px; box-shadow: var(--card-shadow); }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--content-bg); padding: 1rem; position: relative; }
.login-card { width: 100%; max-width: 420px; }
.login-theme-toggle { position: absolute; top: 1rem; right: 1rem; }