/*
  Modern UI Theme (override)
  - Safe: only CSS overrides, no PHP logic changes.
  - Loaded AFTER bootstrap + sb-admin.
*/

:root{
  --ui-bg: #f6f7fb;
  --ui-surface: #ffffff;
  --ui-text: #111827;
  --ui-muted: rgba(17,24,39,.62);
  --ui-border: rgba(17,24,39,.12);
  --ui-border-strong: rgba(17,24,39,.18);
  --ui-shadow-sm: 0 6px 18px rgba(0,0,0,.08);
  --ui-shadow-md: 0 10px 28px rgba(0,0,0,.12);
  --ui-radius: 16px;
  --ui-radius-sm: 12px;
  --sidebar-w: 240px;
}

/* Anti-clickjacking: shown back in footer.php if self == top */
html{ display:none; }

body{
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  /* SB-Admin sets margin-top; we override to a more modern/consistent spacing */
  margin-top: 64px;
}

@media(min-width:768px){
  body{ margin-top: 56px; }
}

/* Make the overall content look like a modern "surface" card */
#page-wrapper{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
  margin: 12px;
  padding: 16px;
  /* prevent fixed footer overlay */
  padding-bottom: 90px;
}

@media(max-width:767px){
  #page-wrapper{
    margin: 10px;
    padding: 14px;
    padding-bottom: 96px;
    border-radius: var(--ui-radius-sm);
  }
}

/* Reduce the very dark background from sb-admin */
#wrapper{
  background: transparent;
}

/* Fallback: sidebar width (if nav css not loaded) */
@media(min-width:768px){
  #wrapper{ padding-left: var(--sidebar-w); }
  .side-nav{ width: var(--sidebar-w); left: 0; margin-left: 0; }
  .side-nav>li>a{ width: var(--sidebar-w); }
}

/* Navbar (keep Bootstrap 3 structure, just "skin" it) */
.navbar.navbar-inverse{
  background-color: #111827;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-brand{
  color: rgba(255,255,255,.88);
}

.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus{
  color: #ffffff;
  background: rgba(255,255,255,.08);
}

.navbar-inverse .navbar-nav>li.active>a,
.navbar-inverse .navbar-nav>li.active>a:hover,
.navbar-inverse .navbar-nav>li.active>a:focus{
  color: #ffffff;
  background: rgba(255,255,255,.14);
  border-radius: 10px;
  margin: 6px 4px;
}

/* Dropdown menus: subtle rounding + shadow */
.dropdown-menu{
  border-radius: 12px;
  box-shadow: var(--ui-shadow-md);
  border: 1px solid var(--ui-border);
}

/* Links */
a{ color: #2563eb; }
a:hover, a:focus{ color: #1d4ed8; }

/* Inputs: modern focus ring */
.form-control{
  border-radius: 10px;
  border-color: var(--ui-border);
}
.form-control:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

/* Panels still used widely in SB-Admin; give them a softer modern look without changing HTML */
.panel{
  border-radius: 14px;
  border-color: var(--ui-border);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.panel-heading{
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Tables: slightly more spacious by default */
.table>thead>tr>th{
  border-bottom: 1px solid var(--ui-border-strong);
}
.table>tbody>tr>td{
  border-top: 1px solid var(--ui-border);
}

/* =========================================================
   Legacy inline styles moved from dulieu/header.php
   (kept to preserve current behaviour)
   ========================================================= */

/* Fixed sidenav, full height */
.sidenav{
  height: 100%;
  width: 225px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn{
  padding: 0px 0px 0px 16px;
  text-decoration: none;
  font-size: 15px;
  color: #999;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover{
  background-color: #000;
  color: #f1f1f1;
}

/* Main content (legacy) */
.main{
  margin-left: 225px;
  font-size: 20px;
  padding: 0px 10px;
}

/* Legacy active class (used in multiple places) */
.active{
  background-color: #000;
  color: #fff;
}

/* Dropdown container (hidden by default) */
.dropdown-container{
  display: none;
  background-color: #262626;
  padding-left: 8px;
}

/* Caret icon */
.fa-caret-down{
  float: right;
  padding-right: 8px;
}

/* Select options: legacy hack for long text */
select option{ width:0; }
select option:hover{ width:auto; }

@media screen and (max-height: 450px){
  .sidenav{ padding-top: 15px; }
  .sidenav a{ font-size: 18px; }
}

.footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #222222;
  color: #ffffff;
  text-align: center;
  z-index: 1000;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Checkbox pill */
.cb-inline{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  line-height: 1.2;
  padding: .25rem .5rem;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.cb-inline:hover{
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.18);
}

.cb-inline:focus{
  background: rgba(0,0,255,1);
}

/* Selected state (modern browsers support :has) */
.cb-inline:has(input[type="checkbox"]:checked){
  background: #eefbf3;
  border-color: #34c36b;
  box-shadow: 0 3px 10px rgba(22,163,74,.18);
  color: #0b6b34;
}

.cb-inline:has(input[type="checkbox"]:checked):hover{
  background: #eefbf3;
  border-color: #34c36b;
  box-shadow: 0 3px 10px rgba(22,163,74,.18);
}

.cb-inline input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
}