/* TIMU.PK Member Portal — shell styles. Colors come from :root vars
   emitted by the theme system (lib/helpers.php), so admin theme changes
   restyle the whole portal at render time. */
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100vh;color:var(--text);font-size:15px;line-height:1.55;display:flex;flex-direction:column}
a{color:var(--brand)}
h1,h2,h3{color:var(--ink);line-height:1.2}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:26px 20px 40px;flex:1}
.narrow{max-width:480px}

/* ---- Top bar ---- */
.topbar{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(15,23,42,.06)}
.topbar-in{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-logo{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.12)}
.brand-logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand-name{font-size:21px;font-weight:900;letter-spacing:-.5px;color:var(--header-text)}
.topnav{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--panel);color:var(--header-text);text-decoration:none;font-weight:700;font-size:13.5px;border:1px solid var(--line);transition:.2s}
.pill:hover,.pill.on{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(37,99,235,.28)}
.pill-cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}

/* ---- Footer ---- */
.foot{background:var(--footer-bg);color:#e2e8f0;margin-top:auto}
.foot-in{max-width:1080px;margin:0 auto;padding:18px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
.foot a{color:#fff;font-weight:600}

/* ---- Cards / forms ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 34px rgba(15,23,42,.07);padding:26px}
.card + .card{margin-top:18px}
.card h2{margin:0 0 6px;font-size:21px}
.card .sub{margin:0 0 18px;color:var(--muted);font-size:13.5px}
.field{margin-bottom:15px}
.field label{display:block;font-weight:700;color:var(--ink);font-size:13.5px;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#0f172a;font:inherit;font-size:14.5px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 22px;border:0;border-radius:11px;cursor:pointer;text-decoration:none;font:inherit;font-size:14.5px;font-weight:800;transition:.2s;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff!important;box-shadow:0 10px 24px rgba(37,99,235,.30)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ghost{background:#fff;color:var(--brand);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-danger{background:#dc2626;color:#fff}
.btn-sm{min-height:36px;padding:7px 14px;font-size:13px;border-radius:9px}
.btn-block{width:100%}
.flash{padding:12px 16px;border-radius:11px;font-weight:700;font-size:14px;margin-bottom:18px}
.flash-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.flash-error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.muted{color:var(--muted);font-size:13.5px}
.center{text-align:center}
.auth-logo{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 10px 26px rgba(15,23,42,.14)}
.auth-logo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Dashboard ---- */
.hero{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:20px;color:#fff;padding:28px 30px;box-shadow:0 18px 40px rgba(37,99,235,.30);margin-bottom:22px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
.hero h1{color:#fff;margin:0 0 6px;font-size:clamp(24px,4vw,32px);letter-spacing:-.6px}
.hero p{margin:0;opacity:.92;max-width:560px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center;box-shadow:0 10px 26px rgba(15,23,42,.06);transition:.2s;display:flex;flex-direction:column;gap:8px}
.tool-card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 16px 34px rgba(15,23,42,.10)}
.tool-card .ticon{font-size:38px;line-height:1}
.tool-card h3{margin:0;font-size:17px}
.tool-card p{margin:0;color:var(--muted);font-size:13px;flex:1}
.section-title{margin:26px 0 14px;font-size:19px}
.plan-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.plan-row:last-child{border-bottom:0}
.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800}
.badge-ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.badge-warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.badge-bad{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.empty{padding:30px;text-align:center;color:var(--muted)}
.empty .big{font-size:40px;margin-bottom:8px}

/* ---- Tables (admin) ---- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;padding:10px 12px;color:var(--ink);border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.inline-form{display:inline}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat .num{font-size:28px;font-weight:900;color:var(--ink)}
.stat .lbl{color:var(--muted);font-size:13px;font-weight:600}

/* ---- Admin layout ---- */
.admin-layout{display:flex;min-height:100vh}
.sidebar{width:250px;flex:0 0 250px;background:var(--footer-bg);color:#e2e8f0;padding:22px 16px;display:flex;flex-direction:column;gap:20px}
.side-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font-weight:900;font-size:18px}
.side-brand small{display:block;font-size:11px;font-weight:700;opacity:.7;letter-spacing:1px;text-transform:uppercase}
.side-nav{display:flex;flex-direction:column;gap:6px}
.side-link{display:block;padding:10px 13px;border-radius:10px;color:#e2e8f0;text-decoration:none;font-weight:600;font-size:14px}
.side-link:hover{background:rgba(255,255,255,.10)}
.side-link.on{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-size:13px}
.admin-main{flex:1;padding:28px 30px;max-width:1060px}
.admin-title{margin:0 0 20px;font-size:26px;letter-spacing:-.5px}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.preset{border:2px solid var(--line);border-radius:13px;padding:11px;cursor:pointer;background:var(--card)}
.preset.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.preset .sw{height:34px;border-radius:8px;margin-bottom:8px}
.preset .nm{font-weight:800;font-size:13.5px;color:var(--ink)}
.preset input{position:absolute;opacity:0}
.color-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.color-row input[type=color]{width:100%;height:42px;padding:3px;cursor:pointer}
/* ---- Admin sidebar dropdown menu (v3) ---- */
.side-section{display:flex;flex-direction:column;gap:2px}
.side-sec-head{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 13px;border:0;border-radius:10px;background:transparent;color:#fff;font:inherit;font-weight:800;font-size:13px;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;text-align:left}
.side-sec-head:hover{background:rgba(255,255,255,.10)}
.side-caret{transition:transform .2s;font-size:11px;opacity:.8}
.side-section.open .side-caret{transform:rotate(180deg)}
.side-sec-items{display:none;flex-direction:column;gap:2px;padding:2px 0 6px 10px;border-left:2px solid rgba(255,255,255,.16);margin-left:13px}
.side-section.open .side-sec-items{display:flex}
.side-sec-items .side-link{padding:8px 12px;font-size:13.5px}

/* ---- v3: search, tool images, tickets, misc ---- */
.search-bar{display:flex;gap:0;background:var(--card);border:2px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(15,23,42,.06);margin-bottom:18px}
.search-bar input{flex:1;border:0;padding:13px 16px;font:inherit;font-size:15px;background:transparent;color:var(--ink);min-width:0}
.search-bar input:focus{outline:none}
.search-bar button{border:0;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font:inherit;font-weight:800;padding:0 22px;cursor:pointer}
.tool-img{height:110px;border-radius:12px;overflow:hidden;background:var(--panel);display:flex;align-items:center;justify-content:center}
.tool-img img{width:100%;height:100%;object-fit:cover;display:block}
.tool-img .ticon{font-size:38px}
.cat-title{margin:26px 0 4px;font-size:19px}
.cat-desc{margin:0 0 14px;color:var(--muted);font-size:13.5px}
.ticket-msg{border:1px solid var(--line);border-radius:13px;padding:14px 16px;margin-bottom:12px;background:var(--card)}
.ticket-msg.admin-msg{background:var(--panel)}
.ticket-msg .meta{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.ticket-msg .meta strong{color:var(--ink)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.check-grid label{display:flex;gap:8px;align-items:center;font-weight:600;font-size:13.5px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 11px;cursor:pointer}
pre.codebox{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:16px;overflow-x:auto;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.health-ok{color:#065f46;font-weight:800}
.health-bad{color:#991b1b;font-weight:800}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabs a{padding:8px 16px;border-radius:999px;background:var(--panel);border:1px solid var(--line);text-decoration:none;font-weight:700;font-size:13.5px;color:var(--header-text)}
.tabs a.on{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
/* ---- v3 member dashboard (reference structure, Ocean Blue tokens) ---- */
.r-hero{position:relative;padding:36px 28px 32px;margin-bottom:22px;border-radius:28px;text-align:center;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 34px rgba(15,23,42,.07);overflow:hidden}
.r-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--brand-2));opacity:.7}
.r-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:6px 18px 6px 14px;border-radius:999px;background:var(--panel);color:var(--header-text);font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--line);margin-bottom:14px}
.r-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.12);animation:r-pulse 2s ease-in-out infinite}
@keyframes r-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}
.r-title{position:relative;z-index:1;margin:0;font-size:clamp(30px,4.2vw,46px);font-weight:900;line-height:1.08;letter-spacing:-1.5px;color:var(--ink)}
.r-title strong{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.r-sub{position:relative;z-index:1;max-width:580px;margin:10px auto 0;color:var(--text);font-size:15px;line-height:1.7}
.r-search{margin-bottom:24px}
.r-search-box{position:relative;display:flex;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:20px;box-shadow:0 10px 26px rgba(15,23,42,.06);overflow:hidden;transition:.2s}
.r-search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.r-search-icon{padding:0 0 0 18px;font-size:18px;opacity:.6}
.r-search-box input{flex:1;min-height:54px;padding:12px 16px 12px 12px;border:0;background:transparent;color:var(--ink);font-size:15px;font-weight:500;font-family:inherit;outline:none;min-width:0}
.r-search-box button{flex-shrink:0;margin:4px;padding:10px 24px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
.r-search-box button:hover{transform:scale(1.02)}
.r-counter{display:none;margin-top:12px;font-size:13px;color:var(--muted);font-weight:500;text-align:center}
.r-counter.visible{display:block}
.r-counter strong{color:var(--ink)}
.r-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch;margin-bottom:8px}
.r-card{position:relative;height:100%;display:flex;flex-direction:column;border-radius:28px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 26px rgba(15,23,42,.06);transition:.25s;overflow:hidden}
.r-card:hover{transform:translateY(-6px);border:2px solid var(--brand);box-shadow:0 16px 40px rgba(37,99,235,.16)}
.r-img{position:relative;min-height:140px;padding:16px 14px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid var(--line)}
.r-img img{width:100%;max-width:180px;max-height:120px;object-fit:contain;transition:transform .3s}
.r-card:hover .r-img img{transform:scale(1.05)}
.r-img-fallback{font-size:52px;line-height:1;display:flex;align-items:center;justify-content:center;min-height:110px}
.r-premium{position:absolute;top:10px;right:10px;z-index:5;display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;box-shadow:0 2px 12px rgba(37,99,235,.25)}
.r-body{padding:16px 16px 4px;text-align:center;flex:1}
.r-name{display:block;width:100%;padding:10px 16px;margin:0;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.2px;line-height:1.3;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:12px;box-shadow:0 4px 16px rgba(37,99,235,.20);box-sizing:border-box;text-align:center}
.r-desc{margin:10px auto 0;padding:8px 14px;background:var(--panel);border-radius:12px;color:var(--header-text);font-size:14px;font-weight:600;line-height:1.5;text-align:center}
.r-desc:empty{display:none}
.r-divider{width:32px;height:3px;margin:12px auto 0;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));opacity:.5}
.r-foot{padding:12px 18px 16px;text-align:center}
.r-open{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:9px 24px;border-radius:999px;color:#fff!important;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 4px 16px rgba(37,99,235,.20);font-size:13px;font-weight:700;letter-spacing:.2px;text-decoration:none;transition:.2s}
.r-open:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,99,235,.35);color:#fff!important}
.r-noresults{display:none;padding:40px 20px;text-align:center;border-radius:20px;background:var(--card);border:2px dashed var(--line);color:var(--muted);font-size:15px;font-weight:600;margin-bottom:18px}
.r-empty{max-width:560px;margin:30px auto;padding:0 18px}
.r-empty-card{padding:48px 32px 40px;text-align:center;border-radius:28px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 34px rgba(15,23,42,.07)}
.r-empty-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel);color:var(--brand);font-size:32px;font-weight:900}
.r-empty-card h2{margin:0 0 8px;font-size:26px;font-weight:800}
.r-empty-card p{margin:0 auto 24px;max-width:380px;color:var(--text);font-size:15px;line-height:1.7}
.r-empty-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 32px;border-radius:999px;color:#fff!important;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 4px 20px rgba(37,99,235,.25);text-decoration:none;font-size:14px;font-weight:700}
.r-empty-btn:hover{transform:translateY(-2px)}
@media (max-width:1200px){.r-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.r-grid{grid-template-columns:repeat(2,1fr);gap:18px}.r-img{min-height:130px}}
@media (max-width:600px){.r-grid{grid-template-columns:1fr;gap:16px}.r-hero{padding:24px 16px 20px}.r-title{font-size:26px}.r-img{min-height:120px}}
@media (max-width:760px){
  .admin-layout{flex-direction:column}
  .sidebar{width:100%;flex:none}
  .field-row{grid-template-columns:1fr}
  .topbar-in{flex-direction:column;align-items:stretch}
  .topnav{justify-content:center}
}

/* ---- v4 admin shell: dark-navy sidebar + light-grey content (appended; earlier rules untouched) ---- */
.admin-topbar{position:sticky;top:0;z-index:60;background:#0f172a;color:#e2e8f0;border-bottom:1px solid #1e293b;box-shadow:0 6px 20px rgba(15,23,42,.25)}
.admin-topbar-in{max-width:1440px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.admin-hamburger{border:1px solid #334155;background:#1e293b;color:#fff;border-radius:9px;width:38px;height:38px;font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto}
.admin-hamburger:hover{background:#334155}
.admin-top-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font-weight:900;font-size:18px}
.admin-top-brand small{display:block;font-size:11px;font-weight:700;opacity:.7;letter-spacing:1px;text-transform:uppercase}
.admin-top-brand .brand-logo{width:38px;height:38px}
.admin-top-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.admin-lookup{display:flex;gap:0;border:1px solid #334155;border-radius:10px;overflow:hidden;background:#1e293b}
.admin-lookup input{border:0;background:transparent;color:#fff;padding:9px 12px;font:inherit;font-size:14px;min-width:190px}
.admin-lookup input::placeholder{color:#94a3b8}
.admin-lookup input:focus{outline:none}
.admin-lookup button{border:0;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font:inherit;font-weight:800;font-size:13.5px;padding:0 16px;cursor:pointer}
.admin-loggedin{font-size:13.5px;color:#cbd5e1}
.admin-loggedin strong{color:#fff}
.admin-logout{color:#f87171!important;font-weight:800;text-decoration:none;font-size:14px}
.admin-logout:hover{text-decoration:underline}
body.sidebar-collapsed .sidebar{display:none}
.sidebar{background:#0f172a;color:#e2e8f0;border-right:1px solid #1e293b}
.side-link{color:#cbd5e1}
.side-link:hover{background:rgba(255,255,255,.08);color:#fff}
.side-sec-head{color:#fff}
.side-sec-items{border-left-color:rgba(255,255,255,.14)}
.admin-main{background:#f1f5f9;max-width:none}
.admin-title{margin-bottom:6px}
.admin-subtitle{margin:0 0 20px;color:var(--muted);font-size:13.5px}
.admin-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.admin-foot a{color:var(--brand);font-weight:700;text-decoration:none}
.admin-foot a:hover{text-decoration:underline}
/* ---- v4 dashboard tiles + chart ---- */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 10px 26px rgba(15,23,42,.05)}
.tile .t-label{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.tile .t-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px}
.tile .t-num{font-size:26px;font-weight:900;color:var(--ink)}
.tile .t-sub{font-size:13px;color:var(--muted);font-weight:600}
.tile .t-sub strong{color:var(--ink);font-size:16px}
.chart{display:flex;align-items:flex-end;gap:3px;height:150px;padding:10px 4px 0;border-bottom:2px solid var(--line);overflow-x:auto}
.chart-bar{flex:1 1 0;min-width:14px;background:linear-gradient(180deg,var(--brand-2),var(--brand));border-radius:5px 5px 0 0;position:relative}
.chart-bar span{position:absolute;left:50%;transform:translateX(-50%);top:-18px;font-size:11px;font-weight:800;color:var(--ink)}
.chart-labels{display:flex;gap:3px;overflow-x:auto;font-size:11px;color:var(--muted);padding-top:6px}
.chart-labels span{flex:1 1 0;min-width:14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- v4 browse users ---- */
.grey-bar{background:#e8edf3;border:1px solid #dbe2ea;border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.grey-bar input[type=text],.grey-bar input[type=search]{flex:1;min-width:220px;padding:10px 13px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;font-size:14px;background:#fff;color:#0f172a}
.adv-panel{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.adv-panel.open{display:block}
.adv-panel select,.adv-panel input{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:14px;background:#fff;color:#0f172a}
.row-actions{display:flex;gap:5px;flex-wrap:wrap}
.row-actions .btn-sm{padding:5px 10px;min-height:30px;font-size:12.5px}
.bulk-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bulk-bar select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;background:#fff;color:#0f172a}
.lock-ico{color:#b45309;margin-left:5px}
.sort-link{color:var(--ink);text-decoration:none;font-weight:800}
.sort-link:hover{text-decoration:underline}
.pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--muted)}
.pager a{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;font-weight:700}
.pager a.on{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.form-section{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
.form-section h3{margin:0 0 14px;font-size:17px}
.form-section:first-child{border-top:0;margin-top:0;padding-top:0}
.check-line{display:flex;gap:9px;align-items:center;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:12px}
.check-line input{width:18px;height:18px}
.gen-link{font-size:13px;font-weight:700;cursor:pointer}
.return-link{display:inline-block;margin-bottom:14px;font-weight:700;text-decoration:none}
@media (max-width:760px){
  .admin-top-right{margin-left:0}
  .admin-lookup input{min-width:130px}
  .admin-main{padding:20px 14px}
}

/* ---- v5 admin visual layer (Portal v5, Workstream B) ----
   Fresh CSS reimplementing the aMember-admin look. EVERY rule is scoped
   under body.admin so member-side styles are untouched. The admin keeps
   these FIXED values regardless of the member theme settings: the shell
   no longer emits theme vars, so this block defines the full var set
   the shared component rules consume. Palette (from studying the
   reference admin stylesheet's visual language, reimplemented here):
   charcoal header/footer #24292e, slate-blue section bars #335571,
   hover/active #4e80a7, content grey #f2f3f4, grid header #e8e8e8,
   borders #ced4da/#d6d6d6, error red #ba2727, logout red #ec645a,
   TIMU Ocean Blue #2563eb kept as the fixed primary-action accent. */
body.admin{--brand:#2563eb;--brand-2:#0ea5e9;--bg:#f2f3f4;--card:#ffffff;--panel:#eef1f3;--line:#d6d6d6;--ink:#313131;--text:#313131;--muted:#6b7280;--header-bg:#24292e;--header-text:#ffffff;--footer-bg:#24292e;background:#f2f3f4;color:#313131;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px}
body.admin a{color:#2f6db3}
body.admin h1,body.admin h2,body.admin h3{color:#313131}
/* Top bar: charcoal, compact; brand left, identity + red logout + lookup right */
body.admin .admin-topbar{position:sticky;top:0;z-index:60;background:#24292e;color:#e2e8f0;border-bottom:1px solid #111417;box-shadow:0 1px 4px rgba(0,0,0,.35)}
body.admin .admin-topbar-in{max-width:none;margin:0;padding:8px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.admin .admin-hamburger{border:1px solid #4b5563;background:#31373d;color:#fff;border-radius:4px;width:34px;height:34px;font-size:17px;line-height:1;cursor:pointer;flex:0 0 auto}
body.admin .admin-hamburger:hover{background:#4b5563}
body.admin .admin-top-brand{font-size:17px;font-weight:800;color:#fff}
body.admin .admin-top-brand small{font-size:10px;letter-spacing:1.5px}
body.admin .admin-top-brand .brand-logo{width:34px;height:34px}
body.admin .admin-top-right{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.admin .admin-loggedin{font-size:13.5px;color:#d1d5db}
body.admin .admin-loggedin strong{color:#fff}
body.admin .admin-logout{color:#ec645a!important;font-weight:700;font-size:13.5px}
body.admin .admin-lookup{display:flex;border:1px solid #4b5563;border-radius:4px;overflow:hidden;background:#fff}
body.admin .admin-lookup input{border:0;background:#fff;color:#111827;padding:8px 11px;font:inherit;font-size:13.5px;min-width:190px}
body.admin .admin-lookup input::placeholder{color:#9ca3af}
body.admin .admin-lookup input:focus{outline:2px solid #5897fb;outline-offset:-2px}
body.admin .admin-lookup button{border:0;border-left:1px solid #ced4da;background:linear-gradient(#ffffff,#eeeeee);color:#555960;font:inherit;font-weight:700;font-size:13px;padding:0 14px;cursor:pointer}
body.admin .admin-lookup button:hover{background:#e8e8e8}
/* Layout + sidebar: 205px dark rail, slate-blue section bars, collapsible groups */
body.admin .admin-layout{display:flex;min-height:calc(100vh - 97px)}
body.admin .sidebar{width:205px;flex:0 0 205px;background:#2f353b;color:#d1d5db;border-right:1px solid #24292e;padding:0;display:flex;flex-direction:column;gap:0}
body.admin .side-nav{display:flex;flex-direction:column;gap:0;padding:0 0 20px}
body.admin .side-link{display:block;padding:9px 14px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.05);color:#d1d5db;text-decoration:none;font-weight:600;font-size:13.5px}
body.admin .side-link:hover{background:#4e80a7;color:#fff}
body.admin .side-link.on{background:#4e80a7;color:#fff;font-weight:800;box-shadow:inset 3px 0 0 #9cb7c8}
body.admin .side-section{display:flex;flex-direction:column;gap:0}
body.admin .side-sec-head{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;background:#335571;color:#fff;font:inherit;font-weight:800;font-size:13px;letter-spacing:.4px;text-transform:none;cursor:pointer;text-align:left}
body.admin .side-sec-head:hover{background:#3d6484}
body.admin .side-caret{transition:transform .2s;font-size:11px;opacity:.85}
body.admin .side-section.open .side-caret{transform:rotate(180deg)}
body.admin .side-sec-items{display:none;flex-direction:column;gap:0;padding:0;border-left:0;margin-left:0;background:rgba(0,0,0,.22)}
body.admin .side-section.open .side-sec-items{display:flex}
body.admin .side-sec-items .side-link{padding:8px 14px 8px 28px;font-size:13px;font-weight:600}
body.admin .admin-menu-item-alert{display:inline-block;padding:.15em .6em;border-radius:1.2em;background:#ffe;color:#333;font-size:70%;font-weight:800;margin-left:6px}
body.admin.sidebar-collapsed .sidebar{display:none}
/* Content area: light grey, H1 + grey count sub-line */
body.admin .admin-main{flex:1;background:#f2f3f4;padding:24px 28px 30px;max-width:none;min-width:0}
body.admin .admin-title{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:0;color:#313131}
body.admin .admin-subtitle{margin:0 0 18px;color:#777;font-size:13px}
/* Cards: white, small radius, thin border */
body.admin .card{background:#fff;border:1px solid #d6d6d6;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.05);padding:20px 22px}
body.admin .card + .card{margin-top:16px}
body.admin .card h2{margin:0 0 6px;font-size:17px}
body.admin .card .sub{margin:0 0 16px;color:#666;font-size:13px}
body.admin .card h3{font-size:15px}
/* Grid tables: grey header row, thin rules, row hover */
body.admin .table-wrap{border:1px solid #ddd;border-radius:4px;background:#fff}
body.admin table.tbl{font-size:13.5px}
body.admin .tbl th{text-align:left;padding:8px 10px;color:#333;background:#e8e8e8;border-bottom:1px solid #ccc;font-size:13px;white-space:nowrap}
body.admin .tbl td{padding:8px 10px;border-bottom:1px solid #e6e6e6;vertical-align:middle}
body.admin .tbl tbody tr:hover td{background:#f7f7f7}
body.admin .tbl tr:last-child td{border-bottom:0}
body.admin .sort-link{color:#313131;text-decoration:none;font-weight:800}
body.admin .sort-link:hover{text-decoration:underline}
body.admin .row-actions{display:flex;gap:5px;flex-wrap:wrap}
body.admin .lock-ico{color:#b45309;margin-left:5px}
/* Buttons in the admin idiom: small radius, compact; primary keeps fixed TIMU blue */
body.admin .btn{min-height:38px;padding:8px 16px;border-radius:4px;font-size:13.5px;box-shadow:none}
body.admin .btn-primary{background:#2563eb;color:#fff!important;box-shadow:none}
body.admin .btn-primary:hover{transform:none;filter:none;background:#1d4ed8}
body.admin .btn-ghost{background:linear-gradient(#ffffff,#eeeeee);color:#555960!important;border:1px solid #ced4da}
body.admin .btn-ghost:hover{border-color:#aaa;background:#e8e8e8}
body.admin .btn-danger{background:#ba2727;color:#fff}
body.admin .btn-danger:hover{background:#a02222}
body.admin .btn-sm{min-height:30px;padding:5px 11px;font-size:12.5px;border-radius:4px}
body.admin button:disabled,body.admin .btn:disabled{opacity:.55;cursor:not-allowed}
/* Forms: field rows, section headings, Save + return link */
body.admin .field{margin-bottom:14px}
body.admin .field label{font-size:13px;color:#313131}
body.admin .field input,body.admin .field select,body.admin .field textarea{padding:9px 11px;border:1px solid #ced4da;border-radius:3px;background:#fff;color:#111827;font-size:14px}
body.admin .field input:focus,body.admin .field select:focus,body.admin .field textarea:focus{outline:2px solid #5897fb;outline-offset:0;border-color:#5897fb}
body.admin .field .hint{font-size:12.5px;color:#777}
body.admin .form-section{border-top:1px solid #ddd;margin-top:20px;padding-top:16px}
body.admin .form-section h3{margin:0 0 12px;font-size:15px}
body.admin .check-line{font-size:13.5px}
body.admin .return-link{display:inline-block;margin-bottom:14px;font-weight:700;text-decoration:none;color:#2f6db3}
body.admin .return-link:hover{text-decoration:underline}
body.admin .gen-link{font-size:13px;font-weight:700;cursor:pointer}
/* Flash messages: pale ok / pale red, square corners */
body.admin .flash{padding:10px 14px;border-radius:4px;font-weight:600;font-size:13.5px;margin-bottom:16px}
body.admin .flash-ok{background:#e6ffed;border:1px solid #a5d6a7;color:#2e7d32}
body.admin .flash-error{background:#f3dcdc;border:1px solid #e0a8a8;color:#ba2727}
/* Grey search bar, bulk bar, pager */
body.admin .grey-bar{background:#e8edf3;border:1px solid #dbe2ea;border-radius:6px;padding:12px 14px}
body.admin .grey-bar input[type=text],body.admin .grey-bar input[type=search]{border:1px solid #cbd5e1;border-radius:4px}
body.admin .adv-panel{border-radius:6px}
body.admin .bulk-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border:1px solid #ddd;border-radius:4px;background:#f7f7f7}
body.admin .bulk-bar select{padding:8px 10px;border:1px solid #ced4da;border-radius:3px;font:inherit;font-size:13.5px;background:#fff;color:#111827}
body.admin .pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:#666}
body.admin .pager a{padding:6px 12px;border:1px solid #ced4da;border-radius:4px;background:#fff;text-decoration:none;font-weight:700;color:#2f6db3}
body.admin .pager a.on{background:#335571;color:#fff;border-color:#335571}
body.admin .pager .btn{margin:0}
/* Dashboard tiles + chart */
body.admin .tile-grid{gap:14px;margin-bottom:16px}
body.admin .tile{background:#fff;border:1px solid #d6d6d6;border-radius:6px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
body.admin .tile .t-label{font-size:12px;color:#777}
body.admin .tile .t-num{font-size:28px;color:#313131}
body.admin .tile .t-sub{font-size:13px;color:#777}
body.admin .tile .t-sub strong{color:#313131;font-size:16px}
body.admin .stat{background:#fff;border:1px solid #d6d6d6;border-radius:6px;padding:16px 18px}
body.admin .stat .num{font-size:26px;color:#313131}
body.admin .stat .lbl{color:#777}
body.admin .chart{border-bottom:2px solid #ddd}
body.admin .chart-bar{background:linear-gradient(180deg,#5897fb,#3875d7);border-radius:3px 3px 0 0}
body.admin .chart-bar span{color:#313131}
body.admin .chart-labels{color:#777}
body.admin .chart-legend{display:flex;align-items:center;gap:8px;font-size:13px;color:#555960;margin:0 0 6px}
body.admin .legend-swatch{display:inline-block;width:14px;height:10px;border-radius:2px;background:linear-gradient(180deg,#5897fb,#3875d7)}
body.admin .admin-dash-note{margin:-8px 0 18px;color:#666;font-size:13px}
body.admin .income-tabs{margin-bottom:14px}
body.admin .tabs a{padding:7px 14px;border-radius:4px;background:#e8e8e8;border:1px solid #ccc;color:#333}
body.admin .tabs a.on{background:#335571;color:#fff;border-color:#335571}
/* Empty states, badges, misc admin surfaces */
body.admin .empty{padding:24px;text-align:center;color:#777;background:#fbfbfb;border:1px dashed #ccc;border-radius:4px}
body.admin .empty .big{font-size:32px}
body.admin .muted{color:#777}
body.admin .badge{border-radius:4px}
body.admin .check-grid label{border-radius:4px;background:#f7f7f7;border:1px solid #ddd}
body.admin pre.codebox{border-radius:6px}
body.admin .preset{border-radius:6px}
body.admin .preset.on{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
body.admin .ticket-msg{border-radius:6px}
body.admin .ticket-msg.admin-msg{background:#eef1f3}
body.admin .search-bar{border-radius:6px}
body.admin .search-bar button{background:#2563eb}
/* Footer: dark bar, grey text, back-to-top link only */
body.admin .admin-foot{margin:0;padding:14px 20px;border-top:1px solid #111417;background:#24292e;color:#919191;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px}
body.admin .admin-foot a{color:#aaa;font-weight:600;text-decoration:none}
body.admin .admin-foot a:hover{color:#fff;text-decoration:underline}
/* Admin login: pale blue-grey diagonal wash, centred white card */
body.admin-login{background-color:#e9ecf0;background-image:linear-gradient(-45deg,#c1def5,#c1def5 50%,#bbd7ed 50%,#bbd7ed 100%);background-size:120px 120px}
body.admin-login .wrap{max-width:480px}
body.admin-login .card{border-radius:8px;box-shadow:0 10px 30px rgba(15,23,42,.12)}
body.admin-login .auth-logo{width:76px;height:76px}
@media (max-width:760px){
  body.admin .admin-layout{flex-direction:column;min-height:0}
  body.admin .sidebar{width:100%;flex:none}
  body.admin .admin-main{padding:20px 14px}
  body.admin .admin-top-right{margin-left:0}
  body.admin .admin-lookup input{min-width:130px}
  body.admin .field-row{grid-template-columns:1fr}
}

/* ---- v6 layout polish (Portal v6, Workstream C) ----
   Closer to the captured aMember admin: inline SVG icons in the
   sidebar/top bar/widget headings, icon-only grid row actions, subtle
   zebra striping + small-caps grid headers, visible focus states.
   Scoped under body.admin; palette and structure unchanged. */
body.admin .admin-icon{width:18px;height:18px;flex:0 0 auto;vertical-align:middle}
body.admin .row-act .admin-icon{width:16px;height:16px}
/* Sidebar: icon + label rows; sub-items stay text-only, as in aMember */
body.admin .side-link{display:flex;align-items:center;gap:9px}
body.admin .side-sec-items .side-link{display:block}
body.admin .side-sec-title{display:flex;align-items:center;gap:9px;min-width:0}
body.admin .side-sec-title>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Top bar: icon hamburger, search icon inside the lookup box, logout icon */
body.admin .admin-hamburger{display:inline-flex;align-items:center;justify-content:center;padding:0}
body.admin .admin-logout{display:inline-flex;align-items:center;gap:6px}
body.admin .admin-logout .admin-icon{width:16px;height:16px}
body.admin .admin-lookup{align-items:center}
body.admin .admin-lookup-ico{display:inline-flex;align-items:center;padding-left:9px;color:#6b7280}
body.admin .admin-lookup-ico .admin-icon{width:16px;height:16px}
body.admin .admin-lookup input{padding-left:7px}
/* Dashboard widget headings carry a small icon */
body.admin .widget-h{display:flex;align-items:center;gap:8px}
body.admin .widget-h .admin-icon{color:#335571}
/* Icon row actions: compact, muted, hover lift; danger turns red on hover */
body.admin .row-actions{display:inline-flex;gap:4px;flex-wrap:nowrap;align-items:center;vertical-align:middle}
body.admin .row-actions .inline-form{display:inline-flex;align-items:center}
body.admin .tbl td:has(>.row-actions){white-space:nowrap}
body.admin .row-act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;margin:1px;border:1px solid transparent;border-radius:4px;background:transparent;color:#5e6e7a;cursor:pointer;text-decoration:none;font:inherit;line-height:1}
body.admin a.row-act:hover,body.admin button.row-act:hover{background:#e8eef3;color:#2f6db3;border-color:#d3dce3}
body.admin .row-act-danger:hover{background:#f3dcdc!important;color:#ba2727!important;border-color:#e0a8a8!important}
body.admin .row-act:disabled{opacity:.4;cursor:not-allowed}
body.admin .row-act:disabled:hover{background:transparent;color:#5e6e7a;border-color:transparent}
/* Visible keyboard focus on every interactive control */
body.admin a:focus-visible,body.admin button:focus-visible,body.admin input:focus-visible,body.admin select:focus-visible,body.admin textarea:focus-visible{outline:2px solid #5897fb;outline-offset:1px}
body.admin .row-act:focus-visible{outline-offset:0;border-color:#5897fb}
/* Grid polish: gentle zebra + small-caps headers, as in the admin theme */
body.admin .tbl th{font-variant:small-caps;text-transform:lowercase;letter-spacing:.2px;font-weight:700}
body.admin .tbl tr:nth-child(even) td{background:#f6f7f8}
body.admin .tbl tbody tr:hover td{background:#e9eff4}
