/**
 * Account IT Live – shared portal/sidebar styles (one CSS for all dashboard pages)
 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --safe-top: env(safe-area-inset-top, 0);
    --safe-bottom: env(safe-area-inset-bottom, 0);
    --touch-min: 44px;
    --sidebar-w: 280px;
    --sidebar-collapsed-w: 64px;
    --ink: #0f0e0d;
    --paper: #faf8f4;
    --paper2: #f2ede4;
    --portal-sidebar-bg: #0f766e;
    --ff-head: 'Fraunces', Georgia, serif;
    --ff-body: 'DM Sans', sans-serif;
}
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; overflow-x: hidden; max-width: 100%; }
body { font-family: var(--ff-body); background: var(--paper); color: var(--ink); padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); min-height: 100vh; overflow-x: hidden; max-width: 100%; }
.container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 1rem; min-width: 0; overflow-x: hidden; box-sizing: border-box; }
.container.main-content { overflow-x: hidden; }
.container.main-content-fullwidth { max-width: none; width: 100%; overflow-x: hidden; }
body.has-sidebar .container.main-content { margin-right: auto; margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); max-width: calc(100% - var(--sidebar-w)); padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; }
body.has-sidebar .container.main-content.main-content-fullwidth { max-width: none; width: calc(100% - var(--sidebar-w)); }
body.has-sidebar > div.container.main-content { margin-left: var(--sidebar-w); padding-left: 1.5rem; padding-right: 1.5rem; }
.header { text-align: center; margin-bottom: 1.5rem; }
.header h2 { font-size: 1.75rem; margin-bottom: 0.5rem; color: #1e293b; }
.card { background: white; border-radius: 12px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 1.25rem; }
.card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; color: #1e293b; }
.link-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.link-item { display: flex; align-items: center; min-height: var(--touch-min); padding: 1rem; border: 1px solid #e2e8f0; border-radius: 10px; text-decoration: none; color: #334155; transition: background 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; }
.link-item:hover, .link-item:focus { background: #f1f5f9; border-color: #cbd5e1; }
.link-icon { font-size: 1.5rem; margin-right: 1rem; flex-shrink: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.stat-card { background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); color: white; padding: 1.25rem; border-radius: 12px; text-align: center; }
.stat-number { font-size: 1.5rem; font-weight: bold; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.8rem; opacity: 0.95; }
.btn { display: inline-block; min-height: var(--touch-min); padding: 0.75rem 1.5rem; line-height: 1.3; background: #0d9488; color: white; text-decoration: none; border-radius: 10px; transition: background 0.2s; border: none; font-size: 1rem; cursor: pointer; }
.btn:hover { background: #0f766e; }
.logout-btn { background: #ef4444; }
.logout-btn:hover { background: #dc2626; }
.text-center { text-align: center; }
.mb-1 { margin-bottom: 1rem; }
.portal-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e2e8f0; padding: 0.5rem calc(0.5rem + var(--safe-bottom)); padding-bottom: calc(0.5rem + var(--safe-bottom)); z-index: 100; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); }
.portal-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; text-decoration: none; color: #64748b; font-size: 0.7rem; min-height: var(--touch-min); }
.portal-bottom-nav a:hover, .portal-bottom-nav a:focus { color: #0d9488; }
.main-content { padding-bottom: 4rem; }
.portal-topbar { position: sticky; top: 0; left: 0; right: 0; z-index: 101; background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0.75rem 1rem; padding-left: calc(1rem + var(--safe-top)); padding-right: calc(1rem + env(safe-area-inset-right, 0)); display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); min-height: var(--touch-min); min-width: 0; overflow: hidden; flex-wrap: nowrap; }
.portal-menu-toggle { width: var(--touch-min); height: var(--touch-min); min-width: 44px; min-height: 44px; border: none; background: #f1f5f9; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #475569; transition: background 0.2s; flex-shrink: 0; }
.portal-menu-toggle:hover { background: #e2e8f0; color: #334155; }
.portal-topbar-title { font-weight: 700; font-size: 1.1rem; color: #1e293b; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 102; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.portal-sidebar-overlay.open { display: block; opacity: 1; pointer-events: auto; }
.portal-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); max-width: 85vw; background: var(--portal-sidebar-bg); z-index: 103; box-shadow: 2px 0 12px rgba(0,0,0,0.15); transform: translateX(-100%); transition: transform 0.25s ease, width 0.2s ease; padding-top: calc(var(--safe-top) + 0.5rem); padding-bottom: calc(var(--safe-bottom) + 1rem); overflow-x: hidden; overflow-y: auto; }
.portal-sidebar.open { transform: translateX(0); }
.portal-sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.75rem; }
.portal-sidebar-nav a { display: flex; align-items: center; gap: 0.75rem; min-height: var(--touch-min); padding: 0.75rem 1rem; border-radius: 10px; text-decoration: none; color: rgba(255,255,255,.6); font-size: 0.95rem; transition: background 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.portal-sidebar-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.portal-sidebar-nav a.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 500; }
.portal-sidebar-nav .nav-icon { font-size: 1.35rem; flex-shrink: 0; width: 1.5rem; text-align: center; }
.portal-sidebar-nav .nav-label { flex: 1; min-width: 0; overflow: hidden; }
.portal-sidebar-divider { height: 1px; background: rgba(255,255,255,.15); margin: 0.5rem 0.75rem; }
.portal-sidebar.sidebar-collapsed { width: var(--sidebar-collapsed-w); padding-left: 0; padding-right: 0; }
.portal-sidebar.sidebar-collapsed .sidebar-brand-block, .portal-sidebar.sidebar-collapsed .sidebar-user-block, .portal-sidebar.sidebar-collapsed .sidebar-actions-wrap { max-height: 0; overflow: hidden; opacity: 0; padding: 0; margin: 0; border: none; min-height: 0; }
.portal-sidebar.sidebar-collapsed .nav-label { width: 0; min-width: 0; overflow: hidden; opacity: 0; }
.portal-sidebar.sidebar-collapsed .portal-sidebar-nav a { justify-content: center; padding-left: 0; padding-right: 0; }
.portal-sidebar .sidebar-collapse-btn { border: none; background: transparent; color: rgba(255,255,255,.6); cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-bottom: 0.5rem; min-height: var(--touch-min); }
.portal-sidebar .sidebar-collapse-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
@media (min-width: 768px) {
    .portal-sidebar { transform: translateX(0); padding-top: 0.5rem; }
    .portal-sidebar-overlay { display: none !important; }
    .portal-sidebar.closed-desktop { transform: translateX(-100%); width: 0; min-width: 0; overflow: hidden; padding: 0; }
    body.has-sidebar .main-content { margin-left: 0; }
    body.has-sidebar .portal-topbar { margin-left: var(--sidebar-w); }
    body.has-sidebar .container.main-content { margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); max-width: calc(100% - var(--sidebar-w)); padding-left: 1.5rem; padding-right: 1.5rem; }
    body.has-sidebar > div.container.main-content { margin-left: var(--sidebar-w) !important; width: calc(100% - var(--sidebar-w)) !important; max-width: calc(100% - var(--sidebar-w)) !important; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; }
    body.has-sidebar .container.main-content.main-content-fullwidth { max-width: none; width: calc(100% - var(--sidebar-w)); }
    body.has-sidebar.sidebar-collapsed .portal-topbar { margin-left: var(--sidebar-collapsed-w); }
    body.has-sidebar.sidebar-collapsed .container.main-content { margin-left: var(--sidebar-collapsed-w); width: calc(100% - var(--sidebar-collapsed-w)); max-width: calc(100% - var(--sidebar-collapsed-w)); }
    body.has-sidebar.sidebar-collapsed > div.container.main-content { margin-left: var(--sidebar-collapsed-w) !important; width: calc(100% - var(--sidebar-collapsed-w)) !important; max-width: calc(100% - var(--sidebar-collapsed-w)) !important; }
    body.has-sidebar.closed-sidebar .main-content, body.has-sidebar.closed-sidebar .portal-topbar { margin-left: 0; }
    body.has-sidebar.closed-sidebar .container.main-content { margin-left: 0; width: 100%; max-width: none; }
    .portal-sidebar.sidebar-collapsed:hover { width: var(--sidebar-w); }
    .portal-sidebar.sidebar-collapsed:hover .nav-label { width: auto; opacity: 1; }
}
@media (max-width: 767px) {
    body.has-sidebar .main-content, body.has-sidebar .portal-topbar { margin-left: 0; }
    body.has-sidebar .container.main-content { margin-left: 0; width: 100%; max-width: none; padding-left: calc(0.75rem + env(safe-area-inset-left, 0)); padding-right: calc(0.75rem + env(safe-area-inset-right, 0)); padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0)); overflow-x: hidden; }
    .portal-sidebar { width: 280px; max-width: 85vw; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0)); }
    .portal-topbar { flex-wrap: wrap; padding: 0.5rem 0.75rem; min-height: 48px; }
    .portal-topbar-title { white-space: normal; word-break: break-word; line-height: 1.3; font-size: 0.95rem; flex: 1 1 auto; min-width: 0; }
}
@media (min-width: 600px) { .container { padding: 1.5rem; } .link-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .stats-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .container { padding: 2rem; } .header h2 { font-size: 2.5rem; } .card { padding: 2rem; } .portal-bottom-nav { display: none !important; } .main-content { padding-bottom: 0; } }
@media (max-width: 767px) { .portal-bottom-nav { display: flex; justify-content: space-around; align-items: stretch; } }
.onboarding-step { margin-bottom: 0.5rem; font-size: 0.95rem; }
.onboarding-step a { color: #0d9488; font-weight: 600; }
body.has-sidebar .portal-main-wrap { margin-left: var(--sidebar-w); width: calc(100% - var(--sidebar-w)); min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }
body.has-sidebar .portal-main-wrap .portal-topbar { margin-left: 0; flex-shrink: 0; }
body.has-sidebar .portal-main-wrap .container.main-content { margin-left: 0 !important; width: 100% !important; max-width: none !important; flex: 1; }
@media (min-width: 768px) {
    body.has-sidebar.sidebar-collapsed .portal-main-wrap { margin-left: var(--sidebar-collapsed-w); width: calc(100% - var(--sidebar-collapsed-w)); }
    body.has-sidebar.closed-sidebar .portal-main-wrap { margin-left: 0; width: 100%; }
}
@media (max-width: 767px) { body.has-sidebar .portal-main-wrap { margin-left: 0; width: 100%; } }