/*
 * TebTok unified application shell.
 * One sidebar + mobile bar + drawer, identical across the patient, doctor,
 * operations and system portals. Only the nav items and role label change.
 */
.tbk-app {
    display:grid;
    grid-template-columns:272px minmax(0,1fr);
    min-height:100vh;
    color:var(--tebtok-ink);
    font-family:var(--tebtok-font);
    background:var(--tebtok-bg);
}
.tbk-app *{ box-sizing:border-box; }
.tbk-icon{ flex:0 0 auto; display:inline-block; vertical-align:middle; }

.tbk-skip{ position:fixed; z-index:9999; inset-block-start:8px; inset-inline-start:-999px; padding:9px 15px; border-radius:10px; color:#fff!important; background:var(--tebtok-blue-dark); text-decoration:none; }
.tbk-skip:focus{ inset-inline-start:8px; }

/* ---------- Sidebar (right, full height, brand navy) ---------- */
.tbk-sidebar{
    grid-column:1;
    position:sticky; top:0;
    display:flex; flex-direction:column;
    height:100vh;
    padding:22px 15px 16px;
    color:#e9f0ff;
    background:var(--tebtok-sidebar);
    box-shadow:-12px 0 40px rgba(7,29,50,.11);
    overflow:auto; scrollbar-width:thin;
}
.tbk-close{ display:none; }
.tbk-brand{ display:flex; flex-direction:column; gap:7px; padding:2px 8px 15px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); text-decoration:none; }
.tbk-logo{ width:118px; height:auto; filter:brightness(0) invert(1); }
.tbk-role{ font-size:11px; font-weight:700; color:rgba(255,255,255,.62); }
.tbk-user{ display:flex; align-items:center; gap:11px; margin-bottom:14px; padding:11px 12px; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:rgba(255,255,255,.06); }
.tbk-user.is-link{ color:inherit; text-decoration:none; transition:background-color .2s ease, border-color .2s ease; }
.tbk-user.is-link:hover,.tbk-user.is-link[aria-current="page"]{ border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.12); }
.tbk-user.is-link:focus-visible{ outline:3px solid rgba(255,255,255,.5); outline-offset:2px; }
.tbk-user-avatar{ display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:11px; color:#fff; background:linear-gradient(145deg,var(--tebtok-blue),var(--tebtok-aqua)); font-size:14px; font-weight:900; }
.tbk-user-meta{ display:flex; flex-direction:column; min-width:0; }
.tbk-user-meta b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:#fff; }
.tbk-user-meta small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:rgba(255,255,255,.62); }

.tbk-primary-action{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; margin-bottom:10px; border:1px solid rgba(93,157,255,.32); border-radius:12px; color:#fff!important; background:linear-gradient(90deg,rgba(31,103,237,.58),rgba(29,208,189,.3)); text-decoration:none; font-size:12.5px; font-weight:800; }
.tbk-primary-action:hover{ background:linear-gradient(90deg,rgba(31,103,237,.72),rgba(29,208,189,.4)); }

/* 7.4.28 — کل منوی کناری اسکرول می‌خورد، نه فقط فهرست؛ هیچ گزینه‌ای زیر پیوندهای پایین پنهان نمی‌شود */
.tbk-nav{ display:grid; gap:5px; align-content:start; flex:1 0 auto; padding-bottom:6px; }
.tbk-nav-group{ display:grid; gap:4px; margin-bottom:9px; }
.tbk-nav-group-label{ padding:8px 11px 3px; font-size:10.5px; font-weight:750; color:rgba(255,255,255,.5); }
.tbk-nav-item{ display:flex; align-items:center; gap:11px; width:100%; min-height:44px; padding:9px 12px; border:1px solid transparent; border-radius:12px; color:#b9c9db; text-decoration:none; text-align:right; font-size:13px; font-weight:600; line-height:1.6; transition:color .15s ease, background-color .15s ease, border-color .15s ease; }
.tbk-nav-item .tbk-icon{ width:20px; height:20px; opacity:.92; }
.tbk-nav-label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbk-nav-item:hover{ color:#fff; background:rgba(255,255,255,.07); }
.tbk-nav-item.is-active{ color:#fff; border-color:rgba(93,157,255,.24); background:linear-gradient(90deg,rgba(31,103,237,.34),rgba(29,208,189,.09)); box-shadow:inset -3px 0 0 var(--tebtok-aqua); }
.tbk-nav-item.is-active .tbk-icon{ opacity:1; }
.tbk-nav-item.is-disabled{ color:rgba(255,255,255,.4); background:rgba(7,34,73,.16); cursor:not-allowed; }
.tbk-nav-badge{ flex:0 0 auto; margin-inline-start:auto; padding:1px 8px; border-radius:99px; background:rgba(255,255,255,.15); font-size:10px; font-weight:700; }
.tbk-nav-item.is-active .tbk-nav-badge{ background:rgba(255,255,255,.2); }

.tbk-foot{ display:grid; gap:5px; margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.09); }
.tbk-foot-form{ margin:0; }
.tbk-foot-heading{ padding:2px 11px 4px; color:rgba(255,255,255,.45); font-size:11px; font-weight:600; letter-spacing:0; }
.tbk-foot-sep{ display:block; height:1px; margin:6px 4px; background:rgba(255,255,255,.09); }
.tbk-foot-link{ display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:8px 11px; border:0; border-radius:11px; color:#b9c9db; background:transparent; text-decoration:none; text-align:right; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; }
.tbk-foot-link .tbk-icon{ width:18px; height:18px; }
.tbk-foot-link:hover{ color:#fff; background:rgba(255,255,255,.07); }
.tbk-foot-link.is-danger{ color:#f0b3b0; }
.tbk-foot-link.is-danger:hover{ color:#fff; background:rgba(229,72,77,.22); }

/* ---------- Content ---------- */
.tbk-main{ grid-column:2; min-width:0; padding:28px clamp(20px,3vw,44px) 60px; }
.tbk-main>*{ width:min(1440px,100%); margin-inline:auto; }

/* ---------- Mobile top bar + drawer ---------- */
.tbk-mobilebar{ display:none; }
.tbk-overlay{ display:none; }
.tbk-overlay[hidden]{ display:none!important; }

@media (max-width:980px){
    html.tbk-menu-open{ overflow:hidden; }
    .tbk-app{ display:block; }
    .tbk-mobilebar{
        position:sticky; z-index:90; top:0;
        display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
        height:64px; padding:0 14px;
        border-bottom:1px solid var(--tebtok-line);
        background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
        box-shadow:0 6px 22px rgba(18,62,124,.05);
    }
    .tbk-menu-btn{ justify-self:start; display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:7px 8px; border:0; color:var(--tebtok-blue-dark); background:transparent; cursor:pointer; font-family:inherit; font-size:13px; font-weight:800; }
    .tbk-mobile-brand{ grid-column:2; display:flex; align-items:center; }
    .tbk-mobile-brand img{ display:block; width:104px; height:auto; }
    .tbk-mobile-avatar{ justify-self:end; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:#fff; background:linear-gradient(145deg,var(--tebtok-blue),var(--tebtok-aqua)); font-size:14px; font-weight:900; }

    .tbk-overlay{ position:fixed; z-index:100; inset:0; display:block; border:0; background:rgba(11,29,50,.5); cursor:pointer; }
    .tbk-overlay[hidden]{ display:none!important; }

    .tbk-sidebar{
        position:fixed; z-index:110; inset-block:0; inset-inline-start:0; inset-inline-end:auto;
        width:min(300px,86vw); height:100dvh; padding:20px 15px 16px;
        transform:translateX(105%); transition:transform .22s ease;
        border-radius:0;
    }
    .tbk-sidebar.is-open{ transform:translateX(0); }
    .tbk-close{ position:absolute; inset-block-start:14px; inset-inline-start:14px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:10px; color:#fff; background:rgba(255,255,255,.12); cursor:pointer; }
    .tbk-brand{ padding-inline-end:44px; }
    .tbk-main{ grid-column:auto; padding:20px 14px 46px; }
    .tbk-main>*{ width:100%; }
}

@media (max-width:600px){
    .tbk-main{ padding:16px 12px 40px; }
}

.tbk-app :is(a,button,input,select,textarea,summary):focus-visible{ outline:3px solid var(--tebtok-aqua); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .tbk-sidebar{ transition:none!important; } }

/* 7.4.10 — عکس پروفایل در آواتار شل */
.tbk-user-avatar,.tbk-mobile-avatar{overflow:hidden}
.tbk-user-avatar img,.tbk-mobile-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}