/* ============================================================================
 * IRCFG — user-style.css
 * SHARED sidebar + app-shell + RESPONSIVE layer for every USER-panel page.
 * Load in <head> BEFORE the page's own inline <style>:
 *     <link rel="stylesheet" href="user-style.css" />
 *
 * Contains:
 *   1) design helpers shared by all pages (.layout grid, sidebar, drawer)
 *   2) the SHARED TABLE SYSTEM (.table-wrap) — horizontal scrolling tables
 *   3) a full responsive cascade: 1280 / 1024 / 860 / 720 / 640 / 520 / 430 / 360
 *
 * Because each page's inline <style> is parsed AFTER this file, every rule that
 * has to override a page-level declaration uses !important. That is intentional
 * and is the only way to keep the responsive layer in ONE shared file.
 * ==========================================================================*/

:root{
  --sidebar:250px;
  --ease:cubic-bezier(.22,1,.36,1);
  --green-glow:0 0 26px rgba(57,255,20,.28);
}

/* ==========================================================================
 * 0) GLOBAL SAFETY — nothing may push the page wider than the viewport.
 * ==========================================================================*/
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{min-width:0}
img,video,canvas,svg{max-width:100%}
pre,code,textarea{max-width:100%}

.layout{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh;position:relative;z-index:1}
main{min-width:0;max-width:100%}

/* ==========================================================================
 * 1) SIDEBAR
 * ==========================================================================*/
aside{position:sticky;inset-block-start:0;top:0;height:100vh;border-inline-end:1px solid var(--border-soft);
  background:rgba(8,11,17,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;padding:22px 16px}
.side-logo{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.14em;font-size:18px;padding:8px 10px;margin-block-end:6px}
.side-logo .brand{font-family:'Chakra Petch',sans-serif;direction:ltr;unicode-bidi:isolate}
.side-logo .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:var(--green-glow);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.who{font-size:12px;color:var(--text-dim);padding:0 10px 18px;border-block-end:1px solid var(--border-soft);margin-block-end:14px}
.who b{color:var(--text-mid);font-weight:600;word-break:break-word}
.side-nav{display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.nav-menu>button,.nav-menu>.nav-link{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;cursor:pointer;
  color:var(--text-mid);padding:11px 12px;border-radius:10px;font-size:14px;transition:.2s;text-align:start}
.nav-menu>button:hover,.nav-menu>.nav-link:hover{background:rgba(0,163,255,.06);color:var(--text)}
.nav-menu>button.active,.nav-menu>.nav-link.active{background:rgba(0,163,255,.1);color:var(--blue);box-shadow:inset 0 0 0 1px var(--border)}
.nav-menu>button .chev{margin-inline-start:auto;transition:.2s;width:14px;height:14px;flex:0 0 auto}
.nav-menu.open>button .chev{transform:rotate(90deg)}
.nav-subs{display:none;flex-direction:column;gap:2px;padding-inline-start:20px;margin-block:3px}
.nav-menu.open .nav-subs{display:flex}
.nav-subs button,.nav-subs a{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;color:var(--text-dim);
  padding:8px 12px;border-radius:8px;font-size:13px;transition:.15s;text-align:start;width:100%}
.nav-subs button::before,.nav-subs a::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex:0 0 auto}
.nav-subs button:hover,.nav-subs a:hover{color:var(--text);background:rgba(0,163,255,.05)}
.nav-subs button.active,.nav-subs a.active{color:var(--blue)}
.side-foot{margin-block-start:auto;padding-block-start:16px;border-block-start:1px solid var(--border-soft)}
.plink{display:flex;align-items:center;gap:10px;width:100%;background:none;border:1px solid var(--border-soft);
  color:var(--text-mid);padding:11px 12px;border-radius:10px;font-size:13.5px;cursor:pointer;transition:.2s;margin-block-end:8px}
.plink:hover,.plink.active{border-color:var(--blue);color:var(--text)}
.plink svg{width:17px;height:17px;flex:0 0 auto}
.logout{display:flex;align-items:center;gap:10px;width:100%;background:none;border:1px solid var(--border-soft);
  color:var(--text-mid);padding:11px 12px;border-radius:10px;font-size:13.5px;cursor:pointer;transition:.2s}
.logout:hover{border-color:rgba(255,59,59,.35);color:var(--red)}
.logout svg{width:17px;height:17px;flex:0 0 auto}
.mobile-menu{display:none}
.sb-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;background:rgba(3,5,8,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease)}
.sb-backdrop.show{opacity:1;visibility:visible}

/* ==========================================================================
 * 2) SHARED TABLE SYSTEM
 * --------------------------------------------------------------------------
 * Every data table in the panel must be wrapped:
 *
 *     <div class="tw-hint">…</div>            <-- optional mobile hint
 *     <div class="table-wrap">                <-- 6 columns  (default)
 *     <div class="table-wrap wide">           <-- 7+ columns
 *       <table> … </table>
 *     </div>
 *
 * The wrapper is the ONLY horizontally scrollable box; the table keeps a
 * min-width so columns never collapse into unreadable slivers. Cells default
 * to nowrap so a row stays one line and the user scrolls sideways instead of
 * fighting a squashed 3-line column.
 * ==========================================================================*/
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,163,255,.38) transparent;
  padding-block-end:2px;
}
.table-wrap::-webkit-scrollbar{height:9px}
.table-wrap::-webkit-scrollbar-track{background:rgba(230,240,250,.05);border-radius:999px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(0,163,255,.34);border-radius:999px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(0,163,255,.55)}

.table-wrap>table{width:100%;min-width:660px;border-collapse:collapse}
.table-wrap.wide>table{min-width:820px}
.table-wrap.xwide>table{min-width:980px}
.table-wrap.narrow>table{min-width:520px}

/* One row = one line. Horizontal scrolling replaces cell wrapping. */
.table-wrap>table th,
.table-wrap>table td{white-space:nowrap;vertical-align:middle}
/* …except cells explicitly marked, and the full-width "empty / loading" cell. */
.table-wrap>table td[colspan]{white-space:normal}
.table-wrap>table td.wrap,
.table-wrap>table th.wrap{white-space:normal}

/* Long titles/subjects must not blow the row out to 3000px. */
.table-wrap>table td>b,
.table-wrap>table td .ttl{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}

/* Set by the shared script in user-sidebar.php when the table really is wider
   than its box — gives a soft edge glow so the scrollability is visible. */
.table-wrap.is-scrollable{
  box-shadow:inset -16px 0 14px -16px rgba(0,163,255,.45),
             inset  16px 0 14px -16px rgba(0,163,255,.45);
  border-radius:10px;
}

/* Mobile-only "drag the table sideways" hint (auto-hidden when not needed). */
.tw-hint{display:none;font-size:11.5px;color:var(--text-dim);margin-block-end:8px;
  border:1px dashed var(--border-soft);border-radius:9px;padding:6px 10px;line-height:1.8}

/* ==========================================================================
 * 3) RESPONSIVE CASCADE
 * ==========================================================================*/

/* ---- ≤1280px : narrower sidebar, tighter page padding ------------------- */
@media(max-width:1280px){
  :root{--sidebar:225px}
  main{padding-inline:24px}
  .wrap{padding-inline:20px!important}
}

/* ---- ≤1024px : tablets landscape --------------------------------------- */
@media(max-width:1024px){
  :root{--sidebar:210px}
  aside{padding:18px 12px}
  .nav-menu>button,.nav-menu>.nav-link{font-size:13.5px;padding:10px 11px}
  main{padding:24px 20px!important}
  .profile-grid{grid-template-columns:1fr!important}
  .m-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important}
  .table-wrap>table td>b,.table-wrap>table td .ttl{max-width:230px}
}

/* ---- ≤860px : sidebar becomes a drawer ---------------------------------- */
@media(max-width:860px){
  html,body{max-width:100%;overflow-x:hidden}
  .layout{grid-template-columns:1fr}
  aside{position:fixed;top:0;bottom:0;left:0;right:auto;width:min(84vw,272px);z-index:60;
    visibility:hidden;transform:translateX(-100%);
    transition:transform .3s,visibility 0s linear .3s;
    background:rgba(8,11,17,.97)!important}
  html[dir=rtl] aside{left:auto;right:0;transform:translateX(100%);visibility:hidden}
  /* Open state MUST win over html[dir=rtl] aside (higher specificity) — hence
     !important on both properties. Without it the drawer stayed invisible. */
  aside.open,html[dir=rtl] aside.open{visibility:visible!important;transform:translateX(0)!important;
    transition:transform .3s,visibility 0s!important}
  .mobile-menu{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;
    background:none;border:1px solid var(--border);border-radius:9px;padding:8px;color:var(--text-mid);cursor:pointer}
  .mobile-menu svg{width:20px;height:20px}

  main{padding:22px 18px!important}
  .wrap{padding:22px 18px 60px!important;max-width:100%!important}

  /* The table hint shows only where horizontal scrolling actually happens. */
  .tw-hint{display:block}

  /* Card padding is normalised from here down so the "edge-to-edge" table
     bleed below can be driven by a single --card-pad variable instead of a
     different hard-coded offset per page. */
  .card{padding:20px!important;--card-pad:20px}
  /* Let the scroll area bleed to the card edges so the full card width is
     usable for the table, while the rest of the card keeps its padding. */
  .card>.table-wrap{
    margin-inline:calc(var(--card-pad) * -1);
    padding-inline:var(--card-pad);
    width:calc(100% + var(--card-pad) * 2);
    max-width:calc(100% + var(--card-pad) * 2);
  }
}

/* ---- ≤720px : large phones / small tablets ------------------------------ */
@media(max-width:720px){
  main{padding:18px 14px!important}
  .wrap{padding:18px 14px 56px!important}
  .topbar{align-items:flex-start!important;gap:10px!important}
  .topbar h1{font-size:clamp(17px,4.8vw,21px)!important}
  .card{padding:18px!important;border-radius:15px!important;--card-pad:18px}
  .card h2{font-size:15px!important}
  .m-grid{grid-template-columns:1fr!important}
  .kpis{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}
  .table-wrap>table{font-size:13px}
  .table-wrap>table th,.table-wrap>table td{padding:10px 9px!important}
}

/* ---- ≤640px : phones ---------------------------------------------------- */
@media(max-width:640px){
  main{padding:16px 12px!important}
  .wrap{padding:16px 12px 52px!important}
  .card{padding:16px!important;border-radius:14px!important;--card-pad:16px}

  /* Top bar: title on its own line, action links wrap underneath. */
  .topbar{flex-direction:column!important;align-items:stretch!important}
  .tb-links{gap:8px!important;width:100%}
  .lnk{padding:8px 11px!important;font-size:12.5px!important}

  .m-grid,.faq-grid,.profile-grid{grid-template-columns:1fr!important}
  .stat-row .stat{flex:1 1 46%!important}

  /* Modals go near-fullscreen so long forms stay usable. */
  .overlay{padding:10px!important;place-items:start center!important}
  .modal{width:100%!important;max-width:100%!important;max-height:94vh!important;
    padding:18px!important;border-radius:16px!important;margin-block-start:8px}

  /* Form rows stack. */
  .row,.rowf{flex-direction:column!important;gap:0!important}
  .row>.field,.rowf>.field{width:100%!important;min-width:100%!important;flex:1 1 100%!important}

  .table-wrap>table td>b,.table-wrap>table td .ttl{max-width:190px}
  .thread{max-height:52vh!important}
}

/* ---- ≤520px ------------------------------------------------------------- */
@media(max-width:520px){
  .card{padding:14px!important;--card-pad:14px}
  .kpis{grid-template-columns:1fr 1fr!important}
  .kpi{padding:14px!important}
  .kpi .v{font-size:23px!important}
  .actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
  .m-btns,.tabs,.kseg,.mtabs{flex-wrap:wrap!important;gap:8px!important}
  .actions .btn,.actions .mbtn,.m-btns .mbtn{flex:1 1 100%!important;justify-content:center;text-align:center}
  .field,.row>.field,.rowf>.field{flex:1 1 100%!important;min-width:100%!important}
  .reflink{flex-direction:column!important;align-items:stretch!important}
  .reflink input{flex:1 1 auto!important;width:100%!important;text-align:center}
  .reflink .btn{width:100%!important}
  .m-toolbar{justify-content:stretch!important}
  .view-toggle{width:100%}
  .view-toggle button{flex:1 1 0;justify-content:center}
  .table-wrap>table{font-size:12.5px}
  .table-wrap>table th{font-size:11.5px}
  .att-thumb{width:66px;height:50px}
}

/* ---- ≤430px : common modern phone width --------------------------------- */
@media(max-width:430px){
  main{padding:14px 10px!important}
  .wrap{padding:14px 10px 48px!important}
  .card{padding:13px!important;--card-pad:13px}
  .topbar h1{font-size:17px!important}
  .modal{padding:15px!important}
  .kpis{grid-template-columns:1fr!important}
  .stat-row .stat{flex:1 1 100%!important}
  .table-wrap>table th,.table-wrap>table td{padding:9px 8px!important}
  .table-wrap>table td>b,.table-wrap>table td .ttl{max-width:150px}
  aside{width:min(88vw,262px)}
}

/* ---- ≤360px : small/legacy phones --------------------------------------- */
@media(max-width:360px){
  main{padding:12px 8px!important}
  .wrap{padding:12px 8px 44px!important}
  .card{padding:12px!important;--card-pad:12px}
  .topbar h1{font-size:16px!important}
  .lnk{padding:7px 9px!important;font-size:12px!important}
  .table-wrap>table{font-size:12px}
}

/* ---- short landscape phones: keep drawer + modals scrollable ------------ */
@media(max-height:520px) and (max-width:960px){
  aside{overflow-y:auto}
  .modal{max-height:96vh!important}
}

/* ==========================================================================
 * 4) MOBILE HARDENING
 * Xiaomi/MIUI and some older WebViews drop backdrop-filter, which made the
 * translucent drawer unreadable over page content. Provide an opaque fallback.
 * ==========================================================================*/
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  aside{background:rgba(8,11,17,.98)!important}
  .overlay{background:rgba(3,5,8,.92)!important}
}
/* Touch devices: give tap targets a sane minimum and kill hover-only styles. */
@media(hover:none){
  .nav-menu>button,.nav-menu>.nav-link,.plink,.logout,.lnk{min-height:42px}
  .table-wrap>table tr:hover td{background:none}
}

@media print{
  aside,.sb-backdrop,.mobile-menu,.tw-hint{display:none!important}
  .layout{grid-template-columns:1fr}
  .table-wrap{overflow:visible!important}
  .table-wrap>table{min-width:0!important}
}