html, body{ height: 100%; }

:root{
  --bg: #0b1220;
  --bg2:#0f172a;
  --card:#111b34;
  --soft:#0c1630;
  --text:#e8ecff;
  --muted:#a9b2d6;
  --accent:#ef4444;
  --accent2:#fb7185;
  --accent3:#f97316;
  --border: rgba(255,255,255,.08);

  /* Sidebar sizing */
  --sidebar-mini: 88px;
  --sidebar-open-w: 100vw;
  --sidebar-panel: 420px;
}

/* Global scrollbar styling (consistent across app) */
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.10) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track{ background: transparent; }

body.bg-soft{
  overflow-x: hidden;

  background:
    radial-gradient(900px 520px at 18% -10%, rgba(239,68,68,.18), transparent 62%),
    radial-gradient(820px 520px at 100% 0%, rgba(251,113,133,.14), transparent 58%),
    radial-gradient(760px 520px at 70% 115%, rgba(249,115,22,.10), transparent 55%),
    linear-gradient(180deg, #070b16 0%, var(--bg) 36%, var(--bg2) 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
}


.app-shell{
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* === Sidebar: rail + fullscreen overlay (pro) === */
.sidebar{
  width: var(--sidebar-mini);
  background: linear-gradient(180deg, rgba(17,27,52,.92), rgba(12,22,48,.84));
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 10px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 1050;
  overflow: hidden;
  transition: width .18s ease, transform .18s ease, background .18s ease;
  transform: translateX(0);
}

.sidebar-inner{
  width: 100%;
  height: 100%;
  display:flex;
  flex-direction: column;
}

/* Mini rail */
.sidebar-rail{
  height: 100%;
  display:flex;
  flex-direction: column;
}
.rail-brand{
  padding: 8px 6px 10px;
  display:flex;
  justify-content:center;
}
.rail-nav{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
  scrollbar-width: thin;
}
.rail-nav::-webkit-scrollbar{ width: 10px; }
.rail-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.08); border-radius: 999px; }
.rail-nav::-webkit-scrollbar-track{ background: transparent; }

.rail-link{
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 18px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color: #fff;
  transition: background .12s ease, transform .12s ease;
}
.rail-link:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.rail-link i{ font-size: 18px; }

.rail-logout-form{ margin: 8px auto 2px; }
.rail-logout{
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 18px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 0;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.rail-logout:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* Brand bits reused */
.logo{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight:800;
  letter-spacing:.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:white;
  box-shadow: 0 12px 30px rgba(239,68,68,.18);
}
.logo.big{ width:56px;height:56px;border-radius:18px; font-size: 18px;}
.brand-text .name{ font-weight:700; line-height: 1.1; }
.brand-text .sub{ color: rgba(169,178,214,.9); font-size: 12px; margin-top: 1px; }

/* Fullscreen overlay */
.sidebar-overlay{
  display:none;
  width: 100%;
  height: 100%;
  background: rgba(6,10,20,.68);
  backdrop-filter: blur(10px);
}

.app-shell.sidebar-open .sidebar{
  width: var(--sidebar-open-w);
  padding: 0;
  background: rgba(6,10,20,.68);
}
.app-shell.sidebar-open .sidebar-rail{ display:none; }
.app-shell.sidebar-open .sidebar-overlay{
  display:flex;
  flex-direction: column;
}

.overlay-header{
  position: sticky;
  top: 0;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: calc(16px + env(safe-area-inset-top)) 18px 12px;
  background: linear-gradient(180deg, rgba(6,10,20,.86) 0%, rgba(6,10,20,.68) 65%, rgba(6,10,20,0) 100%);
}
.overlay-brand{ display:flex; align-items:center; gap: 14px; }

.overlay-brand{ min-width: 0; }
.overlay-brand .brand-text{ min-width: 0; }
.overlay-brand .brand-text .name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62vw;
}
@media (max-width: 480px){
  .overlay-brand .brand-text .name{ max-width: 52vw; }
}

.overlay-close{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 0;
  background: rgba(17,27,52,.62);
  color: #fff;
  display:grid;
  place-items:center;
  transition: background .12s ease, transform .12s ease;
}
.overlay-close:hover{
  background: rgba(17,27,52,.80);
  transform: translateY(-1px);
}

.overlay-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px 18px 18px;
  scrollbar-width: thin;
}
.overlay-content::-webkit-scrollbar{ width: 12px; }
.overlay-content::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }
.overlay-content::-webkit-scrollbar-track{ background: transparent; }

/* Categories grid */
.menu-cats{
  display:flex;
  flex-direction:column;
  gap: 22px;
  padding: 8px 0 18px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.menu-cat{ min-width: 0; }
.menu-cat-title{
  margin: 6px 6px 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(169,178,214,.82);
}
.menu-cat-items{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.menu-tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: #fff;
  text-decoration:none;
  min-height: 96px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.menu-tile:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.menu-tile.active{
  background: rgba(255,255,255,.085);
  color: #fff;
}

.tile-text{ font-weight: 650; font-size: 13px; letter-spacing: .01em; }
.tile-ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  flex: 0 0 40px;
}
.menu-tile.active .tile-ico{
  background: rgba(239,68,68,.16);
}

/* Footer (not full width) */
.overlay-footer{
  margin-top: 18px;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.overlay-footer-card{
  width: min(520px, 100%);
  border-radius: 24px;
  padding: 14px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.user-chip{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 18px;
  text-decoration:none;
  color: rgba(232,236,255,.95);
  background: rgba(255,255,255,.03);
  transition: background .12s ease;
}
.user-chip:hover{ background: rgba(255,255,255,.05); }
.chip-ava{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  flex: 0 0 44px;
}
.chip-ava img{ width:100%; height:100%; object-fit: cover; display:block; }
.chip-meta{ min-width: 0; }
.chip-meta .c1{ font-weight: 700; line-height: 1.1; }
.chip-meta .c2{ color: rgba(169,178,214,.9); font-size: 12px; margin-top: 2px; }
.chip-gear{
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  color: rgba(232,236,255,.92);
}

.overlay-dock{
  display:flex;
  gap: 10px;
  padding: 12px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.overlay-dock::-webkit-scrollbar{ height: 0; }

.dock-btn{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color: rgba(232,236,255,.94);
  background: rgba(255,255,255,.05);
  transition: background .12s ease, transform .12s ease;
}
.dock-btn:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

.logout-btn{
  width: 100%;
  margin-top: 8px;
  border-radius: 18px;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
}

/* Backdrop is optional. Shown when sidebar is open (see below). */

/* Mobile: hide rail when closed, fullscreen when open */
@media (max-width: 992px){
  .sidebar{
    transform: translateX(-110%);
    width: var(--sidebar-open-w);
    padding: 0;
    background: rgba(6,10,20,.68);
  }
  .app-shell.sidebar-open .sidebar{ transform: translateX(0); }
  .content{ margin-left: 0; }
}
@media (min-width: 993px){
  .content{ margin-left: var(--sidebar-mini); }
}


.content{ margin-left: var(--sidebar-mini); height: 100vh; overflow-y: auto; overflow-x: hidden; }
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 18px 20px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(11,18,32,.35);
  backdrop-filter: blur(12px);
}
.topbar .h1{ font-size: 18px; font-weight: 700; }
.topbar .h2{ font-size: 13px; }

.card-soft{
  background: rgba(17,27,52,.62);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
.kpi-icon{
  width:46px;height:46px;border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: #fff;
}
.kpi-icon i, .kpi-icon svg{ color: currentColor; fill: currentColor; }

.auth-wrap{
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: 24px;
}
.auth-card{
  width: min(460px, 96vw);
  background: rgba(17,27,52,.68);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow:hidden;
}
.auth-head{
  padding: 28px 26px 16px;
  text-align:center;
}
.auth-head h1{ font-size: 22px; margin: 12px 0 6px; }
.tracking{ letter-spacing: .35em; font-weight: 800; font-size: 22px; }
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  box-shadow: 0 12px 30px rgba(239,68,68,.18);
}
.btn-primary:hover{ filter: brightness(1.05); }
.alert{ border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--text);}
.form-control{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 16px;
}
.form-control:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 .2rem rgba(239,68,68,.16);
  color: var(--text);
}
.form-text, label, .text-muted{ color: var(--muted) !important; }


/* Auth extras */
.auth-shell .auth-messages{
  width: min(520px, 96vw);
  margin: 16px auto 0;
}
.phone-group .phone-flag{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-right: 0;
}
.phone-group input.form-control{
  border-left: 0;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }


/* ===== Ultra UI additions (layout like modern dashboards; keep existing palette) ===== */
.nav-section{
  margin: 14px 10px 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(169,178,214,.75);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar-date{
  color: rgba(169,178,214,.85);
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}

.icon-btn{
  position: relative;
  width: 40px; height: 40px;
border-radius: 14px;
  display:grid; place-items:center;
  color: rgba(232,236,255,.9);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.icon-btn:hover{ background: rgba(255,255,255,.06); }

.topbar .user-chip{
  display:flex;
  align-items:center;
  gap: 10px;
  height: 38px;
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.topbar .user-chip .chip-ava{
  width: 30px; height: 30px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  font-weight: 700;
}
.topbar .user-chip .chip-meta .c1{ font-size: 12px; font-weight: 600; line-height: 1.1; }
.topbar .user-chip .chip-meta .c2{ font-size: 11px; color: rgba(169,178,214,.85); line-height: 1.1; }

.card-kpi{
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow: hidden;
}
.card-kpi .card-body{ padding: 16px 16px 14px; }
.kpi-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px;}
.kpi-label{ font-size: 12px; color: rgba(169,178,214,.88); }
.kpi-value{font-size: 26px; font-weight: 800; letter-spacing: .2px; color: #fff; }
.kpi-sub{ font-size: 12px; margin-top: 2px; }
.card-kpi .kpi-icon{
  width: 48px; height: 48px;
  border-radius: 18px;
}
.kpi-links{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  font-size: 12px;
}
.kpi-links a{
  color: rgba(232,236,255,.85);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
.kpi-links a:hover{ background: rgba(255,255,255,.06); }

.kpi-a{ background: radial-gradient(600px 220px at 10% 0%, rgba(239,68,68,.26), transparent 60%), rgba(17,27,52,.65);}
.kpi-b{ background: radial-gradient(600px 220px at 10% 0%, rgba(139,123,255,.30), transparent 60%), rgba(17,27,52,.65);}
.kpi-c{ background: radial-gradient(600px 220px at 10% 0%, rgba(84,214,255,.20), transparent 60%), rgba(17,27,52,.65);}
.kpi-d{ background: radial-gradient(600px 220px at 10% 0%, rgba(80,255,180,.18), transparent 60%), rgba(17,27,52,.65);}

.quick-tile{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  color: rgba(232,236,255,.92);
}
.quick-tile:hover{ background: rgba(255,255,255,.06); }
.qt-ico{
  width: 46px; height: 46px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  font-size: 18px;
}
.qt-title{ font-weight: 700; }
.qt-sub{ font-size: 12px; color: rgba(169,178,214,.9); }
.qt-go{
  margin-left:auto;
  width: 36px; height: 36px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.10);
}

.mini-card{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.10);
  padding: 12px 12px;
}
.mini-title{font-weight: 700; margin-bottom: 10px; color: #fff; }
.mini-row{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  margin-bottom: 8px;
}

.step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  margin-bottom: 10px;
}
.step-num{
  width: 30px; height: 30px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight: 800;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: #fff;}

.pin-grid{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 8px;
}
.pin-cell{
  width: 56px;
  height: 56px;
  text-align:center;
  font-size: 24px;
  font-weight: 800;
  padding: 0;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
}
@media (max-width: 420px){
  .pin-cell{ width: 50px; height: 52px; font-size: 22px; }
}
.pin-cell:focus{
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 0 0 4px rgba(239,68,68,.16);
}


.roles-grid{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  padding: 12px 12px;
}
.roles-grid ul{ margin: 0; padding-left: 0; list-style:none;}
.roles-grid li{ margin-bottom: 8px; }
.roles-grid label{ display:flex; gap: 10px; align-items:center; cursor:pointer; }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }


/* ===== Inline table UX ===== */
.formset-block .table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(16,18,28,.95);
}
.formset-block .btn-sm{
  border-radius: 12px;
}
.formset-block tr.is-deleted{
  display:none;
}


/* ===== Red accent overrides (Bootstrap) ===== */
:root{
  --uw-accent: var(--accent);
}
a{ color: rgba(232,236,255,.95); text-decoration: none; }
a:hover{ color: #fff; }

.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--uw-accent);
  --bs-btn-border-color: var(--uw-accent);
  --bs-btn-hover-bg: #dc2626;
  --bs-btn-hover-border-color:#dc2626;
  --bs-btn-active-bg:#b91c1c;
  --bs-btn-active-border-color:#b91c1c;
  --bs-btn-focus-shadow-rgb: 239,68,68;
}
.btn-outline-light{
  --bs-btn-border-color: rgba(255,255,255,.14);
  --bs-btn-color: rgba(232,236,255,.9);
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}

/* Accent pills / badges */
.badge-accent{
  background: rgba(239,68,68,.16);
  border: 1px solid rgba(239,68,68,.28);
  color: #ffd2d2;
}

/* Modern cards */
.card-soft{
  background: rgba(17,27,52,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.card-soft .card-body{ padding: 18px; }

/* Tables */
.table-dark{
  --bs-table-bg: rgba(8,15,33,.55);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(239,68,68,.07);
  border-color: rgba(255,255,255,.10);
}
.table-dark thead th{
  background: rgba(12,22,48,.95);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Inputs */
.form-control, .form-select, .input-group-text{
  background: rgba(10,18,40,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
}
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(239,68,68,.16) !important;
  border-color: rgba(239,68,68,.45) !important;
}
.form-text{ color: rgba(169,178,214,.9) !important; }

/* Sidebar active */
.nav-link.active{
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.22) !important;
}
.logo{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  box-shadow: 0 12px 30px rgba(239,68,68,.22) !important;
}

/* Topbar search */
.topbar .search{
  width: min(560px, 45vw);
}
.search .form-control{
  padding-left: 38px;
}
.search .bi-search{
  position:absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  opacity: .75;
}

/* Mobile sidebar */
.sidebar-toggle{
  display:inline-flex;
}

/* Buttons perfection */
.btn{
  border-radius: 14px;
  font-weight: 600;
}
.btn-sm{
  border-radius: 12px;
  padding: .42rem .72rem;
}
.btn-lg{
  border-radius: 16px;
  padding: .74rem 1rem;
}
.icon-btn{
  border-radius: 14px !important;
}
.table .btn.btn-sm{
  min-height: 34px;
}


/* Table polish */
.table > :not(caption) > * > *{
  padding: .72rem .8rem;
}
.table td, .table th{
  vertical-align: middle;
}
.mono{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.btn-link{ color: rgba(232,236,255,.9); text-decoration:none; }
.btn-link:hover{ color:#fff; text-decoration: underline; }


.pin-grid-wrap{
  display:flex;
  justify-content:center;
}


/* Layout polish */
.content > section{
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
}
.topbar-date{
  color: rgba(169,178,214,.95);
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(8,15,33,.35);
}

.app-body{ overflow: hidden; }


.sidebar nav{
  flex: 1 1 auto;

  overflow-y: auto;
  padding-bottom: 10px;
}
.sidebar nav::-webkit-scrollbar{ width: 10px; }
.sidebar nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.08); border-radius: 12px; }
.sidebar nav::-webkit-scrollbar-thumb:hover{ background: rgba(239,68,68,.18); }


.search{
  flex: 0 0 auto;
}
.search .form-control{
  height: 34px;
}
.icon-btn{
  width: 40px;
  height: 40px;
  display:inline-grid;
  place-items:center;
}



/* Pixel-perfect buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  white-space: nowrap;
  min-height: 38px;
}
.btn-sm{ min-height: 34px; }
.btn .bi{ line-height: 1; }


/* Standard toolbar rows inside cards/pages */
.uw-toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.uw-toolbar .title{
  display:flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
}
.uw-toolbar .actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.uw-toolbar .actions .btn{ margin: 0; }


/* Table wrapper to keep rounded corners */
.table-wrap{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,15,33,.25);
}
.table-wrap .table{ margin-bottom:0; }
.table-dark thead th{
  font-weight: 700;
  letter-spacing: .2px;
}

h5{ font-size: 15px; font-weight: 800; letter-spacing:.2px; }


.card-soft .table-responsive{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,15,33,.25);
}


/* Form control heights */
.form-control:not(textarea){
  height: 38px;
}
.form-select{
  height: 38px;
}


/* Quick tiles (white) */
.quick-tile,
.quick-tile .qt-title,
.quick-tile .qt-sub,
.quick-tile .qt-go i,
.quick-tile .qt-ico i{
  color: #fff !important;
}
.quick-tile .qt-sub{
  opacity: .82;
}


/* Sidebar collapsed */
.icon-btn-sm{
  width: 34px;
  height: 34px;
  border-radius: 12px !important;
}
/* Prevent horizontal scrolling everywhere */
body, .content, .card, .table-responsive{ max-width: 100%; }
.content{ overflow-x: hidden; }
.sidebar{ overflow-x: hidden; }


/* Sidebar white */
.sidebar .nav-link,
.sidebar .nav-link i,
.sidebar .nav-section,
.sidebar .brand-text .name,
.sidebar .brand-text .sub{
  color: #fff;
}
.sidebar .nav-section,
.sidebar .brand-text .sub{
  opacity: .70;
}


/* Typography white */
.topbar .h1{ color:#fff; }
.topbar .h2{ color: rgba(255,255,255,.72); }
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
h1,h2,h3,h4,h5,h6{
  color:#fff;
}
.text-muted{
  color: rgba(255,255,255,.62) !important;
}
.search .form-control::placeholder,
.form-control::placeholder,
.form-select::placeholder{
  color: rgba(255,255,255,.55) !important;
}
.search .bi-search{ color: rgba(255,255,255,.72); }


/* No horizontal scroll */
.content{ overflow-x: hidden !important; }
.table-responsive{ overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.table td, .table th{ white-space: normal; word-break: break-word; }
.table td.mono, .table th.mono, .mono{ white-space: nowrap; }


/* KPI + secondary text overrides */
.kpi-sub, .kpi-sub.text-muted{
  color: rgba(255,255,255,.70) !important;
}
.text-body-secondary, .text-secondary{
  color: rgba(255,255,255,.66) !important;
}


/* Alerts + errors system */
.alert-uw{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,15,33,.55);
  color: #fff;
}
.alert-uw .alert-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.alert-uw.alert-success{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.10);
}
.alert-uw.alert-success .alert-ico{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.22);
}
.alert-uw.alert-warning{
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.10);
}
.alert-uw.alert-warning .alert-ico{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.22);
}
.alert-uw.alert-danger{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
}
.alert-uw.alert-danger .alert-ico{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.22);
}

.uw-errorlist{
  list-style: none;
  padding-left: 0;
  margin: .35rem 0 0;
}
.uw-errorlist li{
  color: rgba(255,255,255,.92);
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);
  border-radius: 14px;
  padding: .45rem .6rem;
  margin-top: .35rem;
  font-size: .875rem;
}

.is-invalid{
  border-color: rgba(239,68,68,.55) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.14) !important;
}
.invalid-feedback, .errornote{
  color: rgba(255,255,255,.90);
}


/* Toasts */
.uw-toast-container{ z-index: 2500; }
.uw-toast{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,15,33,.75);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  overflow: hidden;
  margin-bottom: 10px;
}
.uw-toast .toast-body{ padding: 12px 12px; }
.uw-toast .toast-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.uw-toast-success{ border-color: rgba(34,197,94,.25); }
.uw-toast-success .toast-ico{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.22); }
.uw-toast-warning{ border-color: rgba(245,158,11,.28); }
.uw-toast-warning .toast-ico{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.22); }
.uw-toast-danger{ border-color: rgba(239,68,68,.28); }
.uw-toast-danger .toast-ico{ background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.22); }
.uw-toast-info{ border-color: rgba(255,255,255,.16); }

.uw-inline-error{
  margin-top: .35rem;
  color: rgba(255,255,255,.92);
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.22);
  border-radius: 14px;
  padding: .35rem .5rem;
  font-size: .84rem;
}
tr.row-invalid{
  outline: 2px solid rgba(239,68,68,.18);
  outline-offset: -2px;
}
tr.row-invalid td{
  background: rgba(239,68,68,.05) !important;
}

.app-shell .uw-toast-container{ top: 76px; }
.auth-shell .uw-toast-container{ top: 12px; }


/* Activity dropdown */
.activity-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(239,68,68,1);
  color:#fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px rgba(8,15,33,.92);
}
.activity-dropdown{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,15,33,.92);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.activity-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  max-height: 360px;
  overflow:auto;
  padding-right: 4px;
}
.activity-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.activity-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.activity-body{ min-width: 0; }
.activity-text{
  color:#fff;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}
.activity-time{
  color: rgba(255,255,255,.60);
  font-size: 12px;
  margin-top: 2px;
}
.activity-item.a-success{ border-color: rgba(34,197,94,.20); background: rgba(34,197,94,.07); }
.activity-item.a-success .activity-ico{ background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.20); }
.activity-item.a-warning{ border-color: rgba(245,158,11,.22); background: rgba(245,158,11,.07); }
.activity-item.a-warning .activity-ico{ background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.20); }
.activity-item.a-danger{ border-color: rgba(239,68,68,.22); background: rgba(239,68,68,.07); }
.activity-item.a-danger .activity-ico{ background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.20); }

.toast-action{
  align-self: center;
  white-space: nowrap;
}



/* =========================================================
   Sidebar perfectionist polish + mobile optimization
   (appended to override earlier rules safely)
   ========================================================= */

/* Sidebar: smooth, scrollable navigation */
.sidebar{
  transition: width .18s ease, padding .18s ease;
}
.sidebar nav{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 10px;
}
.sidebar nav::-webkit-scrollbar{ width: 10px; }
.sidebar nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.06); border-radius: 12px; }
.sidebar nav::-webkit-scrollbar-track{ background: transparent; }

/* Smooth-hide elements in collapsed mode (instead of display:none jumps) */
.brand-text{
  overflow: hidden;
  max-width: 240px;
  transition: max-width .18s ease, opacity .18s ease, transform .18s ease;
}
.nav-label{
  overflow: hidden;
  white-space: nowrap;
  max-width: 240px;
  transition: max-width .18s ease, opacity .18s ease, transform .18s ease;
}
.sidebar-footer .meta{
  overflow: hidden;
  max-width: 240px;
  transition: max-width .18s ease, opacity .18s ease, transform .18s ease;
}

/* Active indicator (pill on the left) */
.sidebar .nav-link{ position: relative; }

/* Dock (quick actions) at the bottom of the sidebar */

/* -------------------------------------------------------------------------- */
/* Sidebar 2.0: mini rail + overlay (50vw desktop / 100vw mobile)              */
/* -------------------------------------------------------------------------- */

.sidebar nav{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.sidebar nav::-webkit-scrollbar{ width: 8px; }
.sidebar nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.08); border-radius: 12px; }

/* Default: compact icon rail */
.app-shell:not(.sidebar-open) .sidebar .brand .d-flex{
  justify-content: center !important;
}
.app-shell:not(.sidebar-open) .sidebar .brand-text{ display:none; }
.app-shell:not(.sidebar-open) .sidebar .nav-section{ display:none; }
.app-shell:not(.sidebar-open) .sidebar .nav-label{ display:none; }
.app-shell:not(.sidebar-open) .sidebar .nav-link{
  justify-content: center;
  padding: 6px 0;
  margin: 4px 8px;
}
/* Footer: compact when closed */
.sidebar-footer{
  margin-top:auto;
  padding: 12px 10px 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  margin-left: 6px;
  margin-right: 6px;
  margin-bottom: 10px;
}

.sidebar-backdrop{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 1040;
}
.app-shell.sidebar-open .sidebar-backdrop{ display:block; }

/* Quick actions row in topbar (mobile): one horizontal line that scrolls */
.topbar-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.topbar-actions::-webkit-scrollbar{ height: 0; }

@media (min-width: 992px){
  .topbar-actions{ display:none; }
}

/* Extra mobile layout polish */
/* TOPBAR_CHIP_SCOPED */
@media (max-width: 576px){
  .topbar{ padding: 14px 14px 10px; }
  .topbar-right{ gap: 8px; align-items: center; }
  .topbar-date{ display:none; }

  .topbar-right .search{
    width: 100%;
    flex: 1 1 100%;
    order: 3;
  }
  .topbar-actions{
    width: 100%;
    order: 4;
  }

  .topbar .user-chip .chip-meta{ display:flex; flex-direction:column; }
}

@media (max-width: 520px){ .topbar .chip-meta{ display:none; } }

/* Bell badge: aligned */

/* Archive/dashboard typography: force white */
.kpi-value{ color: #fff; }
.mini-title{ color: #fff; }
.kpi-icon, .kpi-icon i, .kpi-icon svg{ color:#fff !important; fill:#fff !important; }
/* --- Utilities (project-wide consistency) --- */
.fw-semibold{ color: #fff !important; }
.step-num{ color:#fff !important; }
.kpi-icon, .kpi-icon i{ color:#fff !important; }

/* Slightly nicer table header contrast */
.table-dark thead th{ color: rgba(232,236,255,.92); }

/* Prevent tiles from looking “outlined” too much */
.menu-tile{
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.18);
}


/* Auth: button loading state (PIN auto-submit) */
.btn.is-loading{ position:relative; pointer-events:none; opacity:.88; }
.btn.is-loading::after{
  content:"";
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  margin-left:10px;
  vertical-align:-3px;
  animation: us_spin 1s linear infinite;
}
@keyframes us_spin{ to{ transform: rotate(360deg); } }


/* Timesheet / payroll small inputs */
.hours-input{
  max-width: 120px;
  text-align: right;
}
.payroll-date{ max-width: 150px; }
.payroll-amount{ max-width: 130px; text-align: right; }
.payroll-note{ min-width: 160px; flex: 1 1 160px; }