/* ================================================================
   CRF Admin Panel  —  main.css  v5
   Mobile-first. Zero horizontal scroll. No Bootstrap.
   Fonts : Inter | Icons : Material Symbols Outlined
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* CRITICAL: prevent any child from causing horizontal scroll */
html{
  font-size:14px;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;       /* hard clip at viewport edge */
}
body{
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.55;
  overflow-x:hidden;       /* belt-and-braces */
  width:100%;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}

/* ── Design tokens — Dark (default) ── */
:root{
  --accent:    #4361ee;
  --accent-h:  #3451d1;
  --accent-s:  rgba(67,97,238,.13);
  --accent-b:  rgba(67,97,238,.32);
  --teal:      #0eb89d;
  --teal-s:    rgba(14,184,157,.13);
  --amber:     #f59e0b;
  --amber-s:   rgba(245,158,11,.13);
  --danger:    #ef4444;
  --danger-s:  rgba(239,68,68,.12);
  --success:   #22c55e;
  --success-s: rgba(34,197,94,.12);

  --bg:    #0c0e13;
  --sur:   #131620;
  --sur2:  #191c29;
  --sur3:  #1f2338;
  --brd:   rgba(255,255,255,.07);
  --brd-s: rgba(255,255,255,.13);
  --txt:   #e3e5f0;
  --txt2:  #8990ab;
  --txt3:  #474d6b;

  --sh-sm: 0 1px 4px rgba(0,0,0,.45);
  --sh-md: 0 4px 20px rgba(0,0,0,.50);
  --sh-lg: 0 14px 50px rgba(0,0,0,.60);

  --sb-w:  230px;
  --hd-h:  54px;
  --ft-h:  40px;
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --ease:  cubic-bezier(.4,0,.2,1);
  --spd:   .16s;
}

/* ── Design tokens — Light ── */
[data-theme="light"]{
  --bg:    #f2f3fa;
  --sur:   #ffffff;
  --sur2:  #eef0f8;
  --sur3:  #e5e8f4;
  --brd:   rgba(0,0,0,.07);
  --brd-s: rgba(0,0,0,.13);
  --txt:   #1a1d2e;
  --txt2:  #585e7a;
  --txt3:  #adb2cc;
  --sh-sm: 0 1px 4px rgba(0,0,0,.07);
  --sh-md: 0 4px 20px rgba(0,0,0,.09);
  --sh-lg: 0 14px 50px rgba(0,0,0,.13);
}

body{
  background:var(--bg);
  color:var(--txt);
  transition:background var(--spd) var(--ease),color var(--spd) var(--ease);
}

/* ── Material Symbols ── */
.mi{
  font-family:'Material Symbols Outlined';
  font-size:20px;font-weight:300;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;user-select:none;font-style:normal;vertical-align:middle;
}
.mi-sm{font-size:16px}
.mi-lg{font-size:24px}


/* ================================================================
   AUTH PAGES
   ================================================================ */
.auth-wrap{
  min-height:100vh;display:grid;place-items:center;
  padding:16px;position:relative;overflow:hidden;
}
.auth-wrap::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--brd) 1px,transparent 1px),
    linear-gradient(90deg,var(--brd) 1px,transparent 1px);
  background-size:44px 44px;
}
.auth-blob{position:fixed;border-radius:50%;filter:blur(88px);opacity:.09;pointer-events:none;z-index:0}
.blob-a{width:260px;height:260px;background:var(--accent);top:-70px;left:-60px}
.blob-b{width:210px;height:210px;background:var(--teal);bottom:-50px;right:-50px}

.auth-card{
  position:relative;z-index:2;
  background:var(--sur);border:1px solid var(--brd-s);
  border-radius:var(--r-xl);padding:28px 20px;
  width:100%;max-width:420px;
  box-shadow:var(--sh-lg);
  animation:card-rise .35s var(--ease) both;
}
@keyframes card-rise{from{opacity:0;transform:translateY(14px) scale(.97)}}

.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.auth-logo{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--teal));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px;
}
.auth-brand-name{font-size:13.5px;font-weight:700;line-height:1.25}
.auth-brand-sub{font-size:10.5px;color:var(--txt2)}

.auth-tabs{display:flex;border-bottom:1px solid var(--brd);margin-bottom:18px}
.auth-tab{
  flex:1;text-align:center;padding:8px 0;
  font-size:13px;font-weight:500;color:var(--txt2);cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color var(--spd),border-color var(--spd);
}
.auth-tab.active{color:var(--accent);border-bottom-color:var(--accent)}

.alert{
  display:flex;align-items:flex-start;gap:8px;
  padding:10px 12px;border-radius:var(--r-sm);
  border-left:3px solid;font-size:12.5px;margin-bottom:14px;
}
.alert-err {background:var(--danger-s); border-color:var(--danger); color:var(--danger)}
.alert-ok  {background:var(--success-s);border-color:var(--success);color:var(--success)}
.alert-info{background:var(--accent-s); border-color:var(--accent); color:var(--accent)}
.alert-warn{background:var(--amber-s);  border-color:var(--amber);  color:var(--amber)}

/* ── Form fields ── */
.field{margin-bottom:14px}
.field>label{
  display:block;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt2);margin-bottom:6px;
}
.inp-wrap{position:relative;display:flex;align-items:center}
.inp-wrap>.mi{
  position:absolute;left:10px;color:var(--txt3);
  pointer-events:none;z-index:1;font-size:16px;
}
.inp-sfx{position:absolute;right:7px;display:flex;align-items:center;justify-content:center}

input[type=text],input[type=email],input[type=password],input[type=date],
input[type=url],input[type=tel],input[type=number],input[type=search],
select,textarea{
  display:block;width:100%;
  background:var(--sur2);border:1px solid var(--brd-s);
  border-radius:var(--r-sm);padding:9px 12px;
  color:var(--txt);outline:none;
  transition:border-color var(--spd),box-shadow var(--spd),background var(--spd);
  appearance:none;-webkit-appearance:none;
  /* prevent inputs overflowing their container */
  max-width:100%;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-s);
}
input::placeholder,textarea::placeholder{color:var(--txt3)}
select option{background:var(--sur);color:var(--txt)}
textarea{resize:vertical;min-height:76px}
.inp-wrap input{padding-left:36px;padding-right:36px}
.inp-wrap.no-sfx input{padding-right:12px}

.ibtn{
  background:none;border:none;cursor:pointer;padding:5px;color:var(--txt2);
  border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;
  transition:color var(--spd),background var(--spd);line-height:1;
}
.ibtn:hover{color:var(--txt);background:var(--sur3)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 17px;border-radius:var(--r-sm);border:none;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:all var(--spd) var(--ease);
}
.btn .mi{font-size:17px}
.btn-sm{padding:7px 12px;font-size:12px}
.btn-sm .mi{font-size:15px}
.btn-full{width:100%}
.btn:disabled{opacity:.44;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-h)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(.9)}
.btn-success{background:var(--success);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--brd-s);color:var(--txt)}
.btn-ghost:hover{background:var(--sur2);border-color:var(--accent-b)}

.theme-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;background:var(--sur2);border:1px solid var(--brd-s);
  border-radius:20px;color:var(--txt2);font-size:12px;cursor:pointer;
  transition:all var(--spd);white-space:nowrap;
}
.theme-btn:hover{border-color:var(--accent-b);color:var(--txt)}


/* ================================================================
   DASHBOARD LAYOUT — mobile-first
   ================================================================ */
.dash-wrap{
  display:flex;
  min-height:100vh;
  /* prevent flex children from overflowing */
  min-width:0;
  overflow-x:hidden;
}

/* ── Sidebar ── */
#sidebar{
  width:var(--sb-w);
  background:var(--sur);
  border-right:1px solid var(--brd);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:200;
  overflow:hidden;
  /* mobile: off-canvas by default */
  transform:translateX(-100%);
  transition:transform var(--spd) var(--ease),width var(--spd) var(--ease);
}
#sidebar.mob-open{transform:translateX(0)}
#sidebar.collapsed{width:52px}

.sb-brand{
  display:flex;align-items:center;gap:9px;
  padding:13px 12px;border-bottom:1px solid var(--brd);
  overflow:hidden;white-space:nowrap;flex-shrink:0;
}
.sb-logo{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--teal));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px;
}
.sb-name{font-size:13px;font-weight:700;overflow:hidden}
.sb-sub{font-size:10px;color:var(--txt2)}

#sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 0}
#sb-nav::-webkit-scrollbar{width:3px}
#sb-nav::-webkit-scrollbar-thumb{background:var(--brd-s);border-radius:2px}

.nav-sec{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt3);padding:10px 14px 3px;
  white-space:nowrap;overflow:hidden;transition:opacity var(--spd);
}
#sidebar.collapsed .nav-sec{opacity:0;pointer-events:none}

.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;color:var(--txt2);cursor:pointer;
  border-radius:var(--r-sm);margin:1px 5px;
  transition:background var(--spd),color var(--spd);
  white-space:nowrap;overflow:hidden;min-height:42px;
}
.nav-item:hover{background:var(--sur2);color:var(--txt)}
.nav-item.active{background:var(--accent-s);color:var(--accent)}
.nav-item .mi{flex-shrink:0;font-size:20px}
.nav-label{font-size:13px;font-weight:500;overflow:hidden}

.sb-foot{border-top:1px solid var(--brd);padding:8px;flex-shrink:0}
.sb-col-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:7px;background:none;border:1px solid var(--brd-s);
  border-radius:var(--r-sm);color:var(--txt2);font-size:12px;cursor:pointer;
  white-space:nowrap;overflow:hidden;transition:all var(--spd);
}
.sb-col-btn:hover{background:var(--sur2);color:var(--txt)}

/* ── Main wrapper ── */
.main-wrap{
  /* mobile: full width — sidebar is off-canvas */
  margin-left:0;
  flex:1;
  min-width:0;         /* CRITICAL: prevents flex child from overflowing */
  display:flex;flex-direction:column;min-height:100vh;
  background:var(--bg);
  transition:margin-left var(--spd) var(--ease),background var(--spd);
  overflow-x:hidden;   /* catch anything that still tries to overflow */
}
.main-wrap *{
  /* every child respects the container width */
  max-width:100%;
}

/* ── Header ── */
#header{
  height:var(--hd-h);
  background:var(--sur);border-bottom:1px solid var(--brd);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;
  position:sticky;top:0;z-index:100;flex-shrink:0;
  gap:6px;
  /* header must never overflow */
  overflow:hidden;
  transition:background var(--spd);
}
.hd-left{
  display:flex;align-items:center;gap:7px;
  min-width:0;flex:1;overflow:hidden;
}
.hd-title{
  font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hd-right{
  display:flex;align-items:center;gap:5px;
  flex-shrink:0;
}

/* hamburger */
.mb-btn{
  display:flex;background:none;border:none;color:var(--txt);
  cursor:pointer;padding:6px;border-radius:var(--r-sm);
  align-items:center;justify-content:center;
  min-width:36px;min-height:36px;flex-shrink:0;
}

.maint-chip{
  display:none;align-items:center;gap:3px;
  padding:2px 7px;background:var(--amber-s);border:1px solid var(--amber);
  border-radius:20px;color:var(--amber);font-size:10.5px;font-weight:600;
  white-space:nowrap;flex-shrink:0;
}
.maint-chip.on{display:flex}

/* hide maint label on mobile to save space */
.maint-chip .maint-txt{display:none}

.user-chip{
  display:flex;align-items:center;gap:0;
  padding:3px;border-radius:50%;
  border:1px solid var(--brd-s);flex-shrink:0;
}
.user-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--amber));
  display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;
}
/* hide name/role on mobile */
.user-info{display:none}
.user-name-hd{font-size:12px;font-weight:600;line-height:1.3}
.user-role-hd{font-size:10px;color:var(--txt2)}

.logout-btn{
  display:flex;align-items:center;gap:4px;
  padding:6px 8px;background:none;
  border:1px solid var(--brd-s);border-radius:var(--r-sm);
  color:var(--danger);font-size:12px;font-weight:500;cursor:pointer;
  transition:all var(--spd);min-height:32px;white-space:nowrap;
}
.logout-btn:hover{background:var(--danger-s);border-color:var(--danger)}
.logout-text{display:none}

/* maintenance toggle row — hide label text on mobile */
.sw-lbl{
  font-size:11px;font-weight:500;color:var(--txt);
  white-space:nowrap;
}

/* ── Content ── */
#content{
  flex:1;
  padding:12px;
  background:var(--bg);
  transition:background var(--spd);
  /* contain children */
  overflow-x:hidden;
  min-width:0;
}

/* ── Footer ── */
#footer{
  height:var(--ft-h);background:var(--sur);border-top:1px solid var(--brd);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;font-size:11px;color:var(--txt3);flex-shrink:0;
  transition:background var(--spd);overflow:hidden;
}
.sess-dot{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
.dot{
  width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0;
  animation:pulse 2.4s ease infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

#sb-overlay{
  display:none;position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.55);
}
#sb-overlay.on{display:block}


/* ================================================================
   PANELS
   ================================================================ */
.panel{display:none}
.panel.active{display:block;animation:pan-in .2s var(--ease) both}
@keyframes pan-in{from{opacity:0;transform:translateY(5px)}}

/* ── Stats ── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;margin-bottom:14px;
}
.stat-card{
  background:var(--sur);border:1px solid var(--brd);
  border-radius:var(--r-lg);padding:12px 11px;
  position:relative;overflow:hidden;
  transition:transform var(--spd),box-shadow var(--spd);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;
  width:100%;height:3px;background:var(--sc,var(--accent));
}
.stat-icon{font-size:20px;color:var(--sc,var(--accent));opacity:.65;margin-bottom:4px}
.stat-num{font-size:18px;font-weight:700;line-height:1;color:var(--txt)}
.stat-lbl{font-size:10px;color:var(--txt2);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}

/* ── Section header ── */
.sec-hd{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:11px;gap:7px;flex-wrap:wrap;
}
.sec-title{font-size:14px;font-weight:700;color:var(--txt)}

.s-box{
  background:var(--sur);border:1px solid var(--brd-s);
  border-radius:var(--r-sm);padding:7px 9px 7px 29px;
  color:var(--txt);outline:none;font-size:13px;
  width:100%;max-width:180px;min-width:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238990ab' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:8px center;
  transition:border-color var(--spd);
}
.s-box:focus{border-color:var(--accent)}


/* ================================================================
   TABLES
   Mobile: card-stack — each row is a self-contained card.
   Tablet+: normal horizontal table, with overflow-x scroll inside
            .tbl-wrap if content is still wide.
   ================================================================ */

/* The wrapper clips overflow at all sizes */
.tbl-wrap{
  border:1px solid var(--brd);
  border-radius:var(--r-lg);
  overflow:hidden;           /* clips rounded corners */
  background:var(--sur);
  width:100%;
  max-width:100%;
}

/* ── MOBILE card-stack ── */
/* Use explicit display:block so no table-layout algorithm runs */
table{
  width:100%;
  font-size:13px;
  /* override any inherited border-collapse */
  border-collapse:separate;
  /* block mode — no column sizing */
  display:block;
  max-width:100%;
}
thead{
  /* visually hidden but readable by screen-readers */
  display:block;
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
tbody{
  display:block;
  width:100%;
}
tbody tr{
  display:block;
  background:var(--sur);
  border-bottom:1px solid var(--brd);
  padding:10px 12px;
  transition:background var(--spd);
}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--sur2)}

td{
  display:flex;
  align-items:baseline;
  gap:7px;
  padding:3px 0;
  border:none;
  color:var(--txt);
  font-size:13px;
  /* CRITICAL: prevent td content from overflowing card */
  min-width:0;
  overflow-wrap:break-word;
  word-break:break-word;
}
/* label shown as inline prefix */
td::before{
  content:attr(data-label);
  display:inline-block;
  min-width:90px;
  max-width:90px;         /* fixed width so value always wraps below */
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--txt3);
  flex-shrink:0;
  line-height:1.5;
}
/* no label for thumbnail / actions cells */
td[data-label=""]::before{display:none}
td[data-label=""]{padding:6px 0}

/* wrap long text in cells, kill white-space:nowrap overrides */
td *{
  white-space:normal !important;
  max-width:100%;
  word-break:break-word;
}
/* but keep badges on one line */
td .badge{white-space:nowrap!important}

/* ── Thumbnails ── */
.tbl-img{
  width:36px;height:36px;border-radius:var(--r-sm);
  object-fit:cover;border:1px solid var(--brd-s);background:var(--sur3);
  flex-shrink:0;
}
.tbl-img-placeholder{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:var(--sur3);border:1px solid var(--brd-s);
  display:flex;align-items:center;justify-content:center;
  color:var(--txt3);font-size:14px;flex-shrink:0;
}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:20px;
  font-size:11px;font-weight:600;white-space:nowrap;
}
.b-blue  {background:var(--accent-s);color:var(--accent)}
.b-teal  {background:var(--teal-s);  color:var(--teal)}
.b-amber {background:var(--amber-s); color:var(--amber)}
.b-red   {background:var(--danger-s);color:var(--danger)}
.b-green {background:var(--success-s);color:var(--success)}

/* ── Row actions ── */
.row-acts{
  display:flex;align-items:center;gap:4px;
  flex-wrap:wrap;margin-top:4px;
}
.ra{
  padding:6px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:500;
  border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;
  transition:all var(--spd);min-height:34px;
}
.ra .mi{font-size:14px}
.ra-edit{background:var(--accent-s);color:var(--accent);border-color:var(--accent-b)}
.ra-edit:hover{background:rgba(67,97,238,.22)}
.ra-del{background:var(--danger-s);color:var(--danger);border-color:rgba(239,68,68,.3)}
.ra-del:hover{background:rgba(239,68,68,.22)}
.ra-warn{background:var(--amber-s);color:var(--amber);border-color:rgba(245,158,11,.3)}
.ra-warn:hover{background:rgba(245,158,11,.22)}

/* ── Pagination ── */
.pager{
  display:flex;align-items:center;gap:5px;
  margin-top:11px;justify-content:center;flex-wrap:wrap;
}
.pg{
  padding:7px 11px;border-radius:var(--r-sm);border:1px solid var(--brd-s);
  background:var(--sur);color:var(--txt2);font-size:13px;cursor:pointer;
  transition:all var(--spd);min-height:36px;
}
.pg:hover,.pg.active{background:var(--accent-s);color:var(--accent);border-color:var(--accent-b)}
.pg:disabled{opacity:.4;cursor:not-allowed}
.pg-info{font-size:11px;color:var(--txt3);width:100%;text-align:center}

/* ── Empty / spinner ── */
.empty{text-align:center;padding:30px 14px;color:var(--txt2);font-size:13px}
.spinner{
  display:inline-block;width:18px;height:18px;
  border:2px solid var(--brd-s);border-top-color:var(--accent);
  border-radius:50%;animation:spin .55s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}


/* ================================================================
   MODAL — bottom-sheet on mobile
   ================================================================ */
#modal-ov{
  display:none;
  position:fixed;inset:0;z-index:1050;
  background:rgba(0,0,0,.66);backdrop-filter:blur(5px);
  align-items:flex-end;justify-content:center;padding:0;
}
#modal-ov.on{display:flex!important}

.modal-box{
  background:var(--sur);border:1px solid var(--brd-s);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  width:100%;max-width:100%;max-height:92vh;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-lg);color:var(--txt);
  animation:sheet-up .22s var(--ease) both;
  /* CRITICAL: prevent modal content from causing overflow */
  overflow:hidden;
}
.modal-box::before{
  content:'';display:block;width:36px;height:4px;
  background:var(--brd-s);border-radius:2px;
  margin:10px auto 0;flex-shrink:0;
}
@keyframes sheet-up{from{opacity:0;transform:translateY(40px)}}

.mo-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 15px 10px;border-bottom:1px solid var(--brd);flex-shrink:0;
  overflow:hidden;
}
.mo-head h3{
  font-size:14px;font-weight:700;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mo-close{
  background:none;border:none;color:var(--txt2);cursor:pointer;
  padding:6px;border-radius:var(--r-sm);display:grid;place-items:center;
  transition:all var(--spd);min-width:34px;min-height:34px;flex-shrink:0;
}
.mo-close:hover{background:var(--danger-s);color:var(--danger)}

.mo-body{
  padding:13px 15px 18px;
  overflow-y:auto;
  overflow-x:hidden;    /* no horizontal scroll inside modal */
  flex:1;
  -webkit-overflow-scrolling:touch;
}
.mo-foot{display:flex;justify-content:flex-end;gap:7px;margin-top:14px;flex-wrap:wrap}

/* form grid — single column mobile */
.fg{display:grid;grid-template-columns:1fr;gap:11px}
.fg .full{grid-column:1}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld label{
  font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--txt2);
}
.fld input,.fld select,.fld textarea{
  background:var(--bg);border:1px solid var(--brd-s);
  border-radius:var(--r-sm);padding:9px 11px;
  color:var(--txt);outline:none;width:100%;min-width:0;
  transition:border-color var(--spd),box-shadow var(--spd);
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-s);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--txt3)}
.fld select option{background:var(--sur);color:var(--txt)}
.fld textarea{resize:vertical;min-height:70px}
.fld input[type=file]{padding:7px 10px;font-size:12px;color:var(--txt2)}
.fld .hint{font-size:10.5px;color:var(--txt2);margin-top:2px}
.slug-prev{font-size:10.5px;color:var(--txt2);margin-top:2px;font-family:monospace;word-break:break-all}
.slug-prev span{color:var(--teal)}


/* ================================================================
   CONFIRM — bottom-sheet mobile
   ================================================================ */
#conf-ov{
  display:none;position:fixed;inset:0;z-index:1100;
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  align-items:flex-end;justify-content:center;
}
#conf-ov.on{display:flex!important}
.conf-box{
  background:var(--sur);border:1px solid var(--brd-s);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:18px 18px 26px;width:100%;
  text-align:center;box-shadow:var(--sh-lg);color:var(--txt);
  animation:sheet-up .18s var(--ease) both;
}
.conf-box::before{
  content:'';display:block;width:36px;height:4px;
  background:var(--brd-s);border-radius:2px;margin:0 auto 14px;
}
.conf-ico{font-size:30px;margin-bottom:7px}
.conf-box h4{font-size:14px;font-weight:700;margin-bottom:5px}
.conf-box p{font-size:12.5px;color:var(--txt2);margin-bottom:16px}
.conf-acts{display:flex;gap:8px;justify-content:center}
.conf-acts .btn{flex:1;max-width:150px}


/* ================================================================
   TOAST
   ================================================================ */
#toast-ct{
  position:fixed;bottom:14px;
  left:50%;transform:translateX(-50%);
  z-index:2000;
  display:flex;flex-direction:column;gap:6px;
  pointer-events:none;
  width:calc(100vw - 24px);max-width:320px;
}
.toast{
  background:var(--sur);border:1px solid var(--brd-s);
  border-radius:var(--r-md);padding:10px 13px;
  font-size:13px;display:flex;align-items:center;gap:8px;
  box-shadow:var(--sh-md);width:100%;
  pointer-events:all;animation:toast-up .26s var(--ease) both;
  word-break:break-word;
}
@keyframes toast-up{from{opacity:0;transform:translateY(10px)}}
.toast.ok {border-left:3px solid var(--success)}
.toast.err{border-left:3px solid var(--danger)}
.toast.ok  .t-ico{color:var(--success)}
.toast.err .t-ico{color:var(--danger)}


/* ================================================================
   TOGGLE SWITCH
   ================================================================ */
.sw-row{display:flex;align-items:center;gap:7px}
.sw{position:relative;width:34px;height:19px;flex-shrink:0}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw-slider{
  position:absolute;inset:0;background:var(--brd-s);
  border-radius:19px;cursor:pointer;transition:background var(--spd);
}
.sw-slider::before{
  content:'';position:absolute;width:13px;height:13px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:transform var(--spd);
}
.sw input:checked + .sw-slider{background:var(--accent)}
.sw input:checked + .sw-slider::before{transform:translateX(15px)}


/* ================================================================
   SETTINGS CARDS
   ================================================================ */
.set-card{
  background:var(--sur);border:1px solid var(--brd);
  border-radius:var(--r-lg);padding:15px;margin-bottom:13px;color:var(--txt);
}
.set-card-title{
  font-size:13px;font-weight:700;margin-bottom:12px;
  display:flex;align-items:center;gap:6px;color:var(--txt);
}
.set-card-title .mi{color:var(--accent)}
.set-maint{border-color:var(--amber);background:var(--amber-s)}
.set-maint .set-card-title{color:var(--amber)}
.set-maint .set-card-title .mi{color:var(--amber)}


/* ================================================================
   SUMMERNOTE — theme + overflow fixes
   ================================================================ */
.note-editor *{box-sizing:border-box}

/* Must NOT use overflow:hidden — it clips the table-picker, colour picker,
   and every other dropdown that extends below the toolbar boundary. */
.note-editor{
  max-width:100% !important;
  overflow:visible !important;
  position:relative;
}
.note-editor.note-airframe,
.note-editor.note-frame{
  border-color:var(--brd-s) !important;
  border-radius:var(--r-sm) !important;
  width:100% !important;
}

/* Toolbar: wrap on small screens. overflow MUST stay visible so
   dropdown panels (table grid, paragraph, colour) can appear.
   NO z-index here — adding one creates a CSS stacking context that
   traps child dropdowns BELOW .note-editable. */
.note-toolbar{
  background:var(--sur2) !important;
  border-color:var(--brd-s) !important;
  flex-wrap:wrap !important;
  overflow:visible !important;
}
.note-toolbar .note-btn{
  background:transparent !important;border-color:transparent !important;
  color:var(--txt2) !important;
}
.note-toolbar .note-btn:hover{background:var(--sur3) !important;color:var(--txt) !important}
.note-toolbar .note-btn-group{flex-shrink:0}

/* Dropdowns must float above the modal overlay (z-index 1050) */
.note-dropdown-menu{
  background:var(--sur) !important;border-color:var(--brd-s) !important;
  color:var(--txt) !important;
  max-height:220px;overflow-y:auto;
  position:absolute !important;
  z-index:1200 !important;
}
.note-dropdown-item:hover{background:var(--sur2) !important;color:var(--txt) !important}

/* Table-size picker and colour palette also need high z-index */
.note-color-palette,.note-color-btn,.note-table-popover,
.note-popover,.note-popover-content{z-index:1200 !important}

.note-editable{
  background:var(--bg) !important;color:var(--txt) !important;
  font-family:'Inter',sans-serif !important;
  font-size:13px !important;line-height:1.6 !important;
  min-height:140px !important;
  overflow-x:hidden;overflow-y:auto;
  /* wrap pasted Word content */
  overflow-wrap:break-word !important;
  word-break:break-word !important;
}
/* Neutralise residual Word/mso styles on pasted content */
.note-editable p{margin:0 0 .6em}
.note-editable [style*="font-family"]{font-family:'Inter',sans-serif !important}
.note-editable img{max-width:100% !important;height:auto !important;border-radius:4px}
.note-editable table{width:100%;border-collapse:collapse;margin:4px 0}
.note-editable td,.note-editable th{
  border:1px solid var(--brd-s);padding:5px 8px;
  word-break:break-word;
}
/* Restore list bullet/number markers stripped by the global ul,ol{list-style:none} reset */
.note-editable ul{list-style:disc !important;padding-left:1.8em !important;margin:.3em 0 .3em !important}
.note-editable ol{list-style:decimal !important;padding-left:1.8em !important;margin:.3em 0 .3em !important}
.note-editable li{display:list-item !important;margin:1px 0}
.note-editable ul ul{list-style:circle !important}
.note-editable ul ul ul{list-style:square !important}
.note-editable ol ol{list-style:lower-alpha !important}

.note-statusbar{background:var(--sur2) !important;border-color:var(--brd-s) !important}
.note-placeholder{color:var(--txt3) !important}


/* ================================================================
   TABLET  ≥ 600px
   ================================================================ */
@media(min-width:600px){

  .auth-card{padding:32px 28px}
  .blob-a{width:300px;height:300px}
  .blob-b{width:240px;height:240px}

  #content{padding:16px}
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:11px}

  /* header: show more info */
  .logout-text{display:inline}
  .user-chip{padding:4px 8px 4px 4px;border-radius:20px;gap:6px}
  .user-info{display:block}
  .maint-chip .maint-txt{display:inline}
  .sw-lbl{font-size:12px}

  /* form: 2-column grid */
  .fg{grid-template-columns:1fr 1fr}
  .fg .full{grid-column:1/-1}

  /* Modal: centred dialog */
  #modal-ov{align-items:center;padding:14px}
  .modal-box{
    border-radius:var(--r-xl);max-width:600px;
    animation:mo-pop .2s var(--ease) both;
  }
  .modal-box.wide{max-width:800px}
  .modal-box::before{display:none}
  @keyframes mo-pop{from{opacity:0;transform:scale(.95) translateY(10px)}}

  /* Confirm: centred */
  #conf-ov{align-items:center}
  .conf-box{
    border-radius:var(--r-lg);max-width:320px;width:90%;padding:22px 18px;
  }
  .conf-box::before{display:none}

  /* Toast: bottom-right */
  #toast-ct{
    left:auto;right:14px;transform:none;
    width:auto;max-width:290px;
  }
  .toast{animation:toast-in .26s var(--ease) both}
  @keyframes toast-in{from{opacity:0;transform:translateX(10px)}}

  /* Pagination */
  .pager{justify-content:flex-end}
  .pg-info{width:auto;text-align:left}

  /* ── Tables: restore normal horizontal layout ── */
  table{
    display:table;
    border-collapse:collapse;
    table-layout:auto;
  }
  thead{
    display:table-header-group;
    position:static;width:auto;height:auto;
    overflow:visible;clip:auto;white-space:normal;
    background:var(--sur2);
  }
  tbody{display:table-row-group}
  tbody tr{display:table-row;border-bottom:none;padding:0}
  tbody tr:last-child{border-bottom:none}

  td{
    display:table-cell;
    padding:9px 11px;
    border-top:1px solid var(--brd);
    vertical-align:middle;
    /* reset mobile overrides */
    min-width:unset;
    overflow-wrap:normal;
    word-break:normal;
  }
  td::before{display:none}  /* hide mobile labels */
  td *{
    white-space:normal;
    max-width:none;
    word-break:normal;
  }
  td .badge{white-space:nowrap}

  th{
    display:table-cell;padding:9px 11px;text-align:left;
    font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--txt2);white-space:nowrap;
  }

  /* tbl-wrap: allow horizontal scroll on tablet when table is wide */
  .tbl-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .row-acts{margin-top:0}
  .ra{min-height:unset;padding:4px 9px;font-size:11.5px}

  .sec-title{font-size:15px}
  .s-box{max-width:200px}
}


/* ================================================================
   DESKTOP  ≥ 900px  — sidebar pushes content
   ================================================================ */
@media(min-width:900px){

  #sidebar{transform:translateX(0)}  /* always visible */
  #sidebar.collapsed{width:52px}

  .main-wrap{margin-left:var(--sb-w)}
  .sidebar-collapsed + .main-wrap{margin-left:52px}

  .mb-btn{display:none}

  #header{padding:0 18px 0 14px}
  #content{padding:20px}
  #footer{padding:0 18px;font-size:12px}

  .stats-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}
  .stat-card{padding:14px 13px}
  .stat-num{font-size:22px}
  .stat-icon{font-size:22px}
  .hd-title{font-size:15px}
  .auth-card{padding:36px 32px}
  .blob-a{width:360px;height:360px}
  .blob-b{width:280px;height:280px}
  .s-box{max-width:220px}
}