/* ═══════════════════════════════════════════════════════════════════
   NEUROCUOLE — 2. App Shell (topbar, sidebar, nav, layout)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell grid ───────────────────────────────────────────────────── */
.nc-shell {
    display: grid;
    grid-template-rows: var(--nc-topbar-h) 1fr;
    grid-template-columns: var(--nc-sidebar-w) 1fr;
    grid-template-areas: "topbar topbar" "sidebar main";
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns var(--nc-transition);
}
.nc-shell.sidebar-collapsed { grid-template-columns: var(--nc-sidebar-w-icon) 1fr; }

/* ── Top bar ──────────────────────────────────────────────────────── */
.nc-topbar {
    grid-area: topbar;
    background: var(--nc-white);
    border-bottom: 1px solid var(--nc-grey-200);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--nc-shadow);
}

.nc-topbar-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--nc-teal-700);
    white-space: nowrap;
    text-decoration: none;
}
.nc-topbar-logo:hover { text-decoration: none; }

.nc-logo-mark {
    width: 28px; height: 28px;
    background: var(--nc-teal-700);
    border-radius: var(--nc-radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--nc-white); font-weight: 800; font-size: .85rem;
}

.nc-topbar-toggle {
    background: none; border: none; cursor: pointer;
    padding: 6px; color: var(--nc-grey-700);
    border-radius: var(--nc-radius);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--nc-transition);
}
.nc-topbar-toggle:hover { background: var(--nc-grey-100); }
.nc-topbar-toggle svg { width: 20px; height: 20px; }

.nc-topbar-search { flex: 1; max-width: 480px; position: relative; }
.nc-topbar-search input {
    width: 100%;
    padding: 6px 12px 6px 36px;
    border: 1px solid var(--nc-grey-300);
    border-radius: 20px;
    font-size: .875rem;
    background: var(--nc-grey-50);
    transition: border-color var(--nc-transition), box-shadow var(--nc-transition);
    outline: none;
}
.nc-topbar-search input:focus {
    border-color: var(--nc-teal-600);
    box-shadow: 0 0 0 3px rgba(13,122,122,.15);
    background: var(--nc-white);
}
.nc-topbar-search .search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--nc-grey-500); pointer-events: none;
}
.nc-search-mode-badge {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: .7rem; background: var(--nc-teal-100); color: var(--nc-teal-700);
    padding: 2px 6px; border-radius: 10px; font-weight: 600; pointer-events: none;
}

.nc-topbar-spacer { flex: 1; }
.nc-topbar-datetime { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-right: .5rem; }
.nc-topbar-date { font-size: .7rem; color: var(--nc-grey-500); }
.nc-topbar-time { font-size: .85rem; font-weight: 600; color: var(--nc-grey-700); }

.nc-user-chip {
    display: flex; align-items: center; gap: .5rem;
    cursor: pointer; padding: 4px 8px; border-radius: var(--nc-radius);
    transition: background var(--nc-transition);
    background: none; border: none; text-decoration: none; color: inherit;
}
.nc-user-chip:hover { background: var(--nc-grey-100); }

.nc-user-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--nc-teal-700); color: var(--nc-white);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.nc-user-info { line-height: 1.2; text-align: left; }
.nc-user-name { font-size: .8rem; font-weight: 600; color: var(--nc-grey-900); }
.nc-user-role { font-size: .7rem; color: var(--nc-grey-500); }

/* ── Sidebar ──────────────────────────────────────────────────────── */
.nc-sidebar {
    grid-area: sidebar;
    background: var(--nc-teal-900);
    color: var(--nc-white);
    display: flex; flex-direction: column;
    overflow: hidden;
    position: sticky; top: var(--nc-topbar-h);
    height: calc(100vh - var(--nc-topbar-h));
    transition: width var(--nc-transition);
    width: var(--nc-sidebar-w);
    z-index: 100;
}
.nc-shell.sidebar-collapsed .nc-sidebar { width: var(--nc-sidebar-w-icon); }

/* Hover-expand: when collapsed, hovering the sidebar temporarily expands it
   as an overlay (position:sticky keeps it in flow but overflow:visible pushes
   the expanded content over main — we switch to fixed for the hover state) */
.nc-shell.sidebar-collapsed .nc-sidebar:hover {
    width: var(--nc-sidebar-w);
    overflow: visible;
    position: fixed;
    top: var(--nc-topbar-h);
    left: 0;
    height: calc(100vh - var(--nc-topbar-h));
    box-shadow: 4px 0 16px rgba(0,0,0,.25);
    z-index: 150;
}
/* When sidebar is expanded via hover, show all text and sections normally */
.nc-shell.sidebar-collapsed .nc-sidebar:hover .nc-nav-link-text { opacity: 1; max-width: 160px; }
.nc-shell.sidebar-collapsed .nc-sidebar:hover .nc-nav-section { opacity: 1; }
.nc-shell.sidebar-collapsed .nc-sidebar:hover .nc-nav { overflow-y: auto; }

/* ── Main area ────────────────────────────────────────────────────── */
.nc-main {
    grid-area: main;
    display: flex; flex-direction: column;
    min-width: 0; min-height: 0; height: 100%; overflow: hidden;
}

.nc-content { padding: 1.5rem; flex: 1; min-height: 0; overflow: auto; }

/* ── Nav links ────────────────────────────────────────────────────── */
.nc-nav {
    display: flex; flex-direction: column;
    padding: .5rem 0; flex: 1;
    overflow-y: auto; overflow-x: hidden;
}
.nc-nav-section {
    padding: .75rem .75rem .25rem;
    font-size: .65rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--nc-teal-400); font-weight: 600;
    white-space: nowrap; overflow: hidden;
    transition: opacity var(--nc-transition);
}
.nc-shell.sidebar-collapsed .nc-nav-section { opacity: 0; }

.nc-nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .75rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    border-radius: var(--nc-radius);
    margin: 1px .5rem;
    font-size: .875rem; white-space: nowrap; overflow: hidden;
    transition: background var(--nc-transition), color var(--nc-transition);
}
.nc-nav-link:hover { background: rgba(255,255,255,.08); color: var(--nc-white); text-decoration: none; }
.nc-nav-link.active { background: rgba(255,255,255,.12); color: var(--nc-white); font-weight: 600; }
.nc-nav-link svg { flex-shrink: 0; width: 18px; height: 18px; }

.nc-nav-link-text {
    overflow: hidden; text-overflow: ellipsis;
    transition: opacity var(--nc-transition), max-width var(--nc-transition);
    max-width: 160px;
}
.nc-shell.sidebar-collapsed .nc-nav-link-text { opacity: 0; max-width: 0; }

.nc-nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: .5rem .75rem; }
.nc-nav-divider--section { height: 1px; background: rgba(255,255,255,.15); margin: .6rem .5rem .4rem; }
.nc-nav-signout { margin-top: auto; padding: .5rem; }

.nc-nav-pin-btn {
    display: flex; align-items: center; gap: .65rem;
    width: calc(100% - 1rem);
    background: none; border: none; cursor: pointer;
    padding: .45rem .75rem;
    color: rgba(255,255,255,.35);
    text-align: left; font-size: .8rem;
    border-radius: var(--nc-radius);
    margin: .25rem .5rem .5rem;
    white-space: nowrap; overflow: hidden;
    transition: color var(--nc-transition), background var(--nc-transition);
}
.nc-nav-pin-btn:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); }
.nc-nav-pin-btn.pinned { color: var(--nc-teal-300); }
.nc-nav-pin-btn svg { flex-shrink: 0; width: 15px; height: 15px; transition: transform var(--nc-transition); }
.nc-nav-pin-btn.pinned svg { transform: rotate(-45deg); }

/* ── Patient context strip ────────────────────────────────────────── */
.nc-patient-strip {
    background: var(--nc-teal-800); color: var(--nc-white);
    height: var(--nc-patient-strip-h);
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0 1.25rem; font-size: .8rem;
    flex-shrink: 0; border-bottom: 1px solid var(--nc-teal-700);
}
.nc-patient-strip-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nc-teal-400); font-weight: 600; }
.nc-patient-strip-name { font-weight: 700; font-size: .9rem; }
.nc-patient-strip-sep { color: var(--nc-teal-600); }
.nc-patient-strip-field { color: var(--nc-teal-100); }
.nc-patient-strip-close { margin-left: auto; background: none; border: none; color: var(--nc-teal-400); cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: var(--nc-radius); transition: color var(--nc-transition); }
.nc-patient-strip-close:hover { color: var(--nc-white); }
.nc-patient-strip-pin { background: none; border: none; color: var(--nc-teal-400); cursor: pointer; padding: 4px 6px; border-radius: var(--nc-radius); display: flex; align-items: center; transition: color var(--nc-transition); }
.nc-patient-strip-pin:hover { color: var(--nc-white); }
.nc-patient-strip-pin.pinned { color: var(--nc-teal-200); }

/* ── Patient/org tab bars ─────────────────────────────────────────── */
.nc-patient-tabs {
    display: flex; align-items: stretch; gap: 0;
    border-bottom: 2px solid var(--nc-grey-200);
    background: var(--nc-white); padding: 0 1.25rem;
    flex-shrink: 0; position: relative;
}
.nc-patient-tabs .patient-tab {
    padding: .55rem 1rem; font-size: .845rem; font-weight: 500;
    color: var(--nc-grey-600); cursor: pointer; border: none; background: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    text-decoration: none; display: flex; align-items: center; gap: .35rem;
    white-space: nowrap; transition: color var(--nc-transition), border-color var(--nc-transition);
}
.nc-patient-tabs .patient-tab:hover { color: var(--nc-teal-700); text-decoration: none; }
.nc-patient-tabs .patient-tab.active { color: var(--nc-teal-700); border-bottom-color: var(--nc-teal-700); font-weight: 600; }
.nc-tab-settings { margin-left: auto; opacity: .5; }
.nc-tab-settings:hover { opacity: 1; }

.nc-tab-more { position: relative; }
.nc-tab-more-btn { border-bottom: 2px solid transparent; }
.nc-tab-more.open .nc-tab-more-btn { color: var(--nc-teal-700); }
.nc-tab-more-dropdown {
    display: none; position: absolute; top: calc(100% + 2px); left: 0;
    background: var(--nc-white); border: 1px solid var(--nc-grey-200);
    border-radius: var(--nc-radius); box-shadow: var(--nc-shadow);
    min-width: 180px; z-index: 200; padding: .35rem 0;
}
.nc-tab-more.open .nc-tab-more-dropdown { display: block; }
.nc-tab-more-item { display: block; padding: .5rem 1rem; font-size: .845rem; color: var(--nc-grey-700); text-decoration: none; transition: background var(--nc-transition); }
.nc-tab-more-item:hover, .nc-tab-more-item.active { background: var(--nc-grey-50); color: var(--nc-teal-700); text-decoration: none; }

.patient-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--nc-grey-200); margin-bottom: 1.25rem; }
.patient-tab { padding: .6rem 1.1rem; font-size: .875rem; font-weight: 500; color: var(--nc-grey-700); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--nc-transition), border-color var(--nc-transition); text-decoration: none; display: inline-block; }
.patient-tab:hover { color: var(--nc-teal-700); text-decoration: none; }
.patient-tab.active { color: var(--nc-teal-700); border-bottom-color: var(--nc-teal-700); }

/* ── Org strip ────────────────────────────────────────────────────── */
.nc-org-strip { display: flex; align-items: center; gap: .65rem; padding: .4rem 1.25rem; background: var(--nc-teal-900); color: rgba(255,255,255,.9); font-size: .82rem; font-weight: 500; flex-shrink: 0; }
.nc-org-strip-logo { width: 22px; height: 22px; border-radius: 4px; background: var(--nc-teal-700); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--nc-white); flex-shrink: 0; overflow: hidden; }
.nc-org-strip-logo img { width: 100%; height: 100%; object-fit: contain; }
.nc-org-strip-name { font-weight: 600; color: var(--nc-white); }

/* ── Responsive ───────────────────────────────────────────────────── */

/* ── Tablet (768px – 1024px) ─────────────────── */
@media (max-width: 1024px) {
    .nc-shell { grid-template-columns: var(--nc-sidebar-w-icon) 1fr; }
    .nc-topbar-datetime { display: none; }
}

/* ── Mobile (≤ 767px) ────────────────────────── */
@media (max-width: 767px) {
    .nc-shell { grid-template-columns: 0 1fr; }
    .nc-shell.mobile-nav-open { grid-template-columns: var(--nc-sidebar-w) 1fr; }
    .nc-sidebar { position: fixed; top: var(--nc-topbar-h); left: 0; height: calc(100vh - var(--nc-topbar-h)); z-index: 300; transform: translateX(-100%); transition: transform var(--nc-transition); width: var(--nc-sidebar-w) !important; }
    .nc-shell.mobile-nav-open .nc-sidebar { transform: translateX(0); }
    .nc-mobile-overlay { display: none; position: fixed; inset: var(--nc-topbar-h) 0 0 0; background: rgba(0,0,0,.4); z-index: 299; }
    .nc-shell.mobile-nav-open .nc-mobile-overlay { display: block; }

    /* Topbar — hide datetime & user text, keep avatar only */
    .nc-topbar-search { max-width: 160px; }
    .nc-topbar-datetime { display: none; }
    .nc-user-info { display: none; }

    /* Content padding */
    .nc-content { padding: .75rem; }
    .form-row { grid-template-columns: 1fr; }
    .admin-table { font-size: .8rem; }

    /* Patient tab bar — horizontal scroll on small screens */
    .nc-patient-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding: 0 .75rem; }
    .nc-patient-tabs .patient-tab { flex-shrink: 0; }

    /* Widget list rows — prevent chip overflow */
    .nc-widget-list li { flex-wrap: wrap; }
}

/* ── Small mobile (≤ 480px) ──────────────────── */
@media (max-width: 480px) {
    .nc-topbar-search { display: none; }
    .nc-content { padding: .5rem; }

    /* Patient header stacks vertically */
    .nc-patient-header { flex-direction: column; }
    .nc-patient-header-actions { width: 100%; justify-content: flex-start; }
}