/* ============================================================
   Tadfeen Trust — Display Density
   ------------------------------------------------------------
   A real 20% density pass, not a browser zoom.

   The previous version leaned on `zoom:.8`, which shrinks the
   painted page uniformly. That works, but it is not a design:
   padding, icons, radii and type all collapse by the same factor,
   so cards end up with cramped gutters and oversized corner radii
   relative to their new size — and any browser without `zoom`
   showed the layout at full size.

   This version sets the sizes explicitly. Every value below is
   real CSS, so it renders identically in every engine and each
   element is tuned on its own terms:

     cards    padding and radius cut harder than the type
     icons    tiles and glyphs stepped down together
     type     reduced, then leading and tracking corrected
     rhythm   gaps and gutters tightened to match

   Loaded last so it wins on specificity.
   ============================================================ */

/* ---------- 0. universal display scale ----------
   A single, browser-independent zoom baseline applied to every
   shell — member, admin and the public (pre-login) pages all load
   this file, so the whole product renders at one consistent scale
   instead of each page depending on the tab's own browser zoom.
   This is what makes the Global-Admin view and the member view sit
   at the same size. Kept modest so the explicit density sizing
   below still reads cleanly. */
:root{ --tt-zoom:.9; }
html{ zoom:var(--tt-zoom); }
/* Engines without `zoom` fall back to an equivalent transform. */
@supports not (zoom:1){
    html{
        transform:scale(var(--tt-zoom));
        transform-origin:top left;
        width:calc(100% / var(--tt-zoom));
        min-height:calc(100% / var(--tt-zoom));
    }
}

/* ---------- 1. layout rhythm ---------- */
:root{
    --radius:13px;          /* was 16 */
    --radius-sm:8px;        /* was 10 */
    --maxw:1420px;          /* smaller content should fill the page, not leave gutters */
}
.container{max-width:var(--maxw);padding:0 22px}

/* ---------- 2. base type ---------- */
body{
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
h1{font-size:30px;line-height:1.18;letter-spacing:-.4px}
h2{font-size:23px;line-height:1.22;letter-spacing:-.3px}
h3{font-size:17px;line-height:1.28;letter-spacing:-.2px}
h4{font-size:14.5px;line-height:1.3}

/* ---------- 3. app shell ---------- */
.app-sidebar{width:248px;flex:0 0 248px}
.side-brand .brand-mark{width:36px;height:36px;flex:0 0 36px}
.side-brand .brand-name{font-size:17.5px}
.side-brand .brand-tag{font-size:8.5px}
.side-nav{gap:4px;margin-top:26px}
.side-link{padding:9px 12px;font-size:12.5px;gap:11px;border-radius:9px}
.side-link svg{width:16px;height:16px;flex:0 0 16px}
.side-sec{font-size:9.5px;letter-spacing:.09em}

.app-main{padding:20px 22px}
.topbar{gap:12px;margin-bottom:18px}
.topbar-search input{font-size:12.5px;padding:8px 12px 8px 34px}
.topbar-search svg{width:15px;height:15px}
.topbar-bell{width:32px;height:32px}
.topbar-bell svg{width:16px;height:16px}
.tu-avatar{width:30px;height:30px;font-size:11.5px}
.tu-role{font-size:12.5px}

.page-title,h1.page-title{font-size:25px;line-height:1.2}
.page-sub{font-size:12.5px}

/* ---------- 4. admin stat cards ----------
   Padding is cut harder than the type so these read as compact
   tiles rather than shrunken copies of the originals. */
.astat-grid{gap:11px}
.astat{padding:12px;border-radius:11px}
.as-top{gap:7px;margin-bottom:8px}
.as-ic{width:26px;height:26px;flex:0 0 26px;border-radius:7px}
.as-ic svg{width:14px;height:14px}
.as-title{font-size:10.5px;line-height:1.25}
.as-val{font-size:19px;letter-spacing:-.4px}
.as-foot{margin-top:5px;gap:5px}
.as-sub{font-size:10px}
.as-trend{font-size:10px}
.as-trend svg{width:10px;height:10px}

/* ---------- 5. member dashboard cards ---------- */
.stat-grid{gap:12px}
.stat-card{padding:14px;border-radius:12px}
.stat-ic{width:34px;height:34px;flex:0 0 34px;border-radius:9px}
.stat-ic svg{width:17px;height:17px}
.stat-num{font-size:21px;letter-spacing:-.4px}
.stat-label{font-size:11px}
.stat-sub{font-size:10.5px}

/* ---------- 6. panels, tables, lists ---------- */
.card,.pcard,.cpanel,.alp-card,.chart-card{border-radius:12px}
.pcard,.cpanel,.chart-card{padding:15px}
.pcard-head,.cpanel-head,.chart-head{margin-bottom:11px}
.pcard-head h3,.cpanel-head h3,.chart-head h3{font-size:15px}
.alp-table{font-size:12.5px}
.alp-th{font-size:10.5px;letter-spacing:.05em;padding:9px 11px}
.alp-td{padding:10px 11px}
.alp-avatar{width:30px;height:30px;flex:0 0 30px;font-size:11px}
.pill,.badge{font-size:10px;padding:3px 8px;border-radius:20px}

/* ---------- 7. buttons and inputs ----------
   Sized down but held above a comfortable tap target. */
.btn,.alp-btn{font-size:12.5px;padding:8px 15px;border-radius:9px;min-height:34px}
.btn svg,.alp-btn svg{width:15px;height:15px}
.btn-sm{font-size:11.5px;padding:6px 11px;min-height:29px}
input,select,textarea{font-size:13px}
input,select{padding:9px 12px;border-radius:9px;min-height:36px}
label,.field-label{font-size:12px}

/* ---------- 8. notifications ---------- */
.ntf-panel{width:340px;border-radius:12px}
.ntf-head h4{font-size:14px}
.ntf-readall{font-size:11.5px}
.ntf-item{padding:10px 12px;gap:10px}
.ntf-ic{width:28px;height:28px;flex:0 0 28px;border-radius:8px}
.ntf-ic svg{width:14px;height:14px}
.ntf-title{font-size:12.5px}
.ntf-text{font-size:11.5px}
.ntf-meta{font-size:10.5px}

/* ---------- 9. small-text legibility ----------
   Below ~12px letterforms crowd; a little tracking restores it.
   Sidebar links are excluded — tracking there pushed the longest
   labels onto a second line. */
.as-title,.as-sub,.stat-label,.stat-sub,.alp-th,
.pill,.badge,.ntf-meta,.page-sub,small,.muted{letter-spacing:.012em}
.side-link{letter-spacing:0}

/* ---------- 10. reading measure ---------- */
.prose,.page-body,.faq-a{max-width:74ch}

/* ---------- 11. phones ----------
   Hand the sizing back: phones are already tight, and shrinking
   further costs legibility for no layout gain. */
@media (max-width:820px){
    html{zoom:1}          /* phones are already tight — no extra zoom-out */
    body{font-size:15px}
    .container{padding:0 16px}
    .btn,.alp-btn{font-size:14px;min-height:42px;padding:10px 16px}
    input,select{font-size:16px;min-height:44px}   /* 16px stops iOS zooming on focus */
    .side-link{font-size:14.5px;padding:11px 14px}
    .app-sidebar{width:264px;flex:0 0 264px}
    .as-val{font-size:22px}
    .stat-num{font-size:23px}
    .ntf-panel{width:auto}
    .prose,.page-body,.faq-a{max-width:none}
}

/* ---------- 12. shared UI toast (ui-controls.js) ---------- */
.ui-toast{
    position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);
    background:var(--green-800);color:#fff;
    padding:10px 17px;border-radius:9px;
    font-size:13px;font-weight:500;letter-spacing:.01em;
    box-shadow:0 12px 30px rgba(12,59,42,.28);
    opacity:0;transition:opacity .28s ease,transform .28s ease;
    z-index:1200;max-width:min(90vw,400px);text-align:center;
}
.ui-toast.in{opacity:1;transform:translate(-50%,0)}
.ui-toast.bad{background:#8c2f2f}

/* ---------- 13. global search dropdown (search.js) ---------- */
.topbar-search{position:relative}
.gs-panel{
    position:absolute;top:calc(100% + 6px);left:0;right:0;
    background:var(--paper);border:1px solid var(--line);
    border-radius:11px;box-shadow:var(--shadow);
    max-height:min(58vh,420px);overflow:auto;z-index:220;padding:5px;
}
.gs-item{
    display:flex;align-items:flex-start;gap:9px;
    padding:8px 9px;border-radius:8px;
    text-decoration:none;color:var(--ink);
}
.gs-item:hover,.gs-item.on{background:var(--green-050)}
.gs-type{
    flex:0 0 auto;font-size:9px;font-weight:700;text-transform:uppercase;
    letter-spacing:.06em;color:var(--green-700);
    background:var(--green-050);border-radius:5px;padding:3px 6px;margin-top:1px;
}
.gs-body{display:flex;flex-direction:column;min-width:0}
.gs-title{font-size:12.5px;font-weight:600;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-sub{font-size:10.5px;color:var(--muted);line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-empty{padding:14px 12px;font-size:12px;color:var(--muted);text-align:center}

/* ============================================================
   14. Top-bar icon cluster
   ------------------------------------------------------------
   Messages, theme and notifications previously sat inside the
   notification dropdown's positioning wrapper, which left them
   with no spacing of their own and crowded against the avatar.
   They are now their own group, sized as a matched set.
   ============================================================ */
.topbar-icons{
    display:flex;align-items:center;gap:10px;flex:0 0 auto;
}

/* One shared size so the three read as a set rather than three
   separate widgets that happen to sit together. */
.topbar-icons .topbar-msg,
.topbar-icons .theme-toggle,
.topbar-icons .topbar-bell{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;flex:0 0 38px;
    border:1px solid var(--line);border-radius:11px;
    background:var(--paper);color:var(--muted);
    cursor:pointer;text-decoration:none;padding:0;
    transition:color .15s ease,border-color .15s ease,
               background .15s ease,transform .12s ease;
}
.topbar-icons .topbar-msg svg,
.topbar-icons .theme-toggle svg,
.topbar-icons .topbar-bell svg{width:18px;height:18px}

/* Distinct hover tints, so the three are told apart at a glance
   instead of behaving identically. */
.topbar-icons .topbar-msg:hover{
    color:var(--green-700);border-color:var(--green-600);background:var(--green-050);
}
.topbar-icons .theme-toggle:hover{
    color:#8a6420;border-color:#d9b166;background:var(--gold-050);
}
.topbar-icons .topbar-bell:hover{
    color:var(--green-800);border-color:var(--green-600);background:var(--green-050);
}
.topbar-icons > *:active,
.topbar-icons .ntf-wrap > .topbar-bell:active{transform:translateY(1px)}

.topbar-icons .topbar-msg:focus-visible,
.topbar-icons .theme-toggle:focus-visible,
.topbar-icons .topbar-bell:focus-visible{
    outline:2px solid var(--green-600);outline-offset:2px;
}

/* The bell keeps its own wrapper because the panel anchors to it. */
.topbar-icons .ntf-wrap{position:relative;display:inline-flex;flex:0 0 auto}

/* Badges: same treatment on both counters. */
.topbar-icons .msg-badge,
.topbar-icons .bell-badge{
    position:absolute;top:-5px;right:-5px;
    min-width:17px;height:17px;padding:0 4px;
    border-radius:20px;background:#c0554d;color:#fff;
    font-size:9.5px;font-weight:700;line-height:1;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--cream);
}

/* A hairline before the avatar so the cluster reads as a unit
   separate from the account control. */
.topbar-user{
    margin-left:10px;padding-left:12px;
    border-left:1px solid var(--line);
}

/* Give the search box room to breathe beside the cluster. */
.topbar-actions{gap:14px}
.topbar-search{margin-right:2px}

@media (max-width:820px){
    .topbar-icons{gap:6px}
    .topbar-icons .topbar-msg,
    .topbar-icons .theme-toggle,
    .topbar-icons .topbar-bell{width:40px;height:40px;flex:0 0 40px}
    .topbar-user{margin-left:6px;padding-left:8px}
}

/* The account name must stay on one line — wrapping it to two rows
   made the whole bar taller and pushed the icons out of alignment.
   The cap is generous enough for a normal name and only truncates a
   genuinely long one. */
.topbar-user .tu-role{
    white-space:nowrap;
    /* The name is a flex child, so the real cause of "Test Us…" was
       flex-shrink, not the width cap. Refusing to shrink fixes it;
       the cap then only bites on a genuinely long name. */
    flex:0 0 auto;
    max-width:210px;overflow:hidden;text-overflow:ellipsis;
}
.topbar-user{align-items:center;flex:0 0 auto;white-space:nowrap}

/* ---------- 15. profile photos in every avatar chip ----------
   avatar_inner() emits an <img> whenever a user has uploaded a
   photo. Most chips already styled that image; the admin list
   chip did not, so photos there overflowed their circle. One rule
   covers every chip, including any added later. */
.tu-avatar,.pa-img,.alp-avatar,.ctree-av,.creq-av,.msg-av,.ccard-mark,.as-ic{overflow:hidden}
.tu-avatar img,.pa-img img,.alp-avatar img,.ctree-av img,
.creq-av img,.msg-av img{
    width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}

/* ---------- 16. view-as (global admin browsing as a member) ---------- */
.viewas-bar{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--gold-050);border:1px solid #e0c48a;
    color:#7a5a22;border-radius:10px;
    padding:9px 13px;margin-bottom:14px;font-size:12.5px;line-height:1.45;
}
.viewas-dot{
    width:8px;height:8px;border-radius:50%;background:#c8a35a;flex:0 0 8px;
}
.viewas-bar form{margin-left:auto}
.viewas-bar button{
    border:1px solid #c8a35a;background:#fff;color:#7a5a22;
    border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;
}
.viewas-bar button:hover{background:#7a5a22;color:#fff;border-color:#7a5a22}

/* switch entries in the account menu */
.tu-switch{margin:0}
.tu-switch-btn{
    display:flex;align-items:center;gap:10px;width:100%;
    background:none;border:0;cursor:pointer;text-align:left;
    padding:9px 11px;border-radius:8px;
    font-size:13px;font-weight:500;color:var(--ink);font-family:inherit;
}
.tu-switch-btn svg{width:17px;height:17px;color:var(--muted);flex:0 0 17px}
.tu-switch-btn:hover{background:var(--green-050);color:var(--green-800)}
.tu-switch-btn:hover svg{color:var(--green-700)}
.tu-switch-btn.admin{color:var(--green-800);font-weight:600}
.tu-switch-btn.admin svg{color:var(--green-700)}