/* ===================================================================
   LAYOUT — layout.css
   App wrapper, sidebar, topbar, main content area.
   =================================================================== */

/* ── App Wrapper ──────────────────────────────────────────────────── */
.app-wrapper {
    display: flex;
    height:  100vh;  /* contain everything — body stays at viewport height */
    overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.sidebar {
    width:            var(--sidebar-width);
    min-height:       100vh;
    background:       linear-gradient(180deg, #13114a 0%, #1a1740 40%, #1e1b4b 100%);
    display:          flex;
    flex-direction:   column;
    position:         fixed;
    top: 0; left: 0; bottom: 0;
    z-index:          1000;
    transition:       transform var(--transition);
    overflow:         hidden;
    box-shadow:       4px 0 24px rgba(0,0,0,.25);
    border-right:     1px solid rgba(255,255,255,.05);
}

/* ── Logo / Header ─────────────────────────────────────────────────── */
.sidebar-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         22px 18px 18px;
    flex-shrink:     0;
}

.sidebar-brand {
    display:         flex;
    align-items:     center;
    text-decoration: none;
    flex:            1;
}

.sidebar-logo {
    display:       block;
    max-width:     155px;
    height:        auto;
    background:    #ffffff;
    padding:       8px 16px;
    border-radius: 12px;
    box-shadow:    0 4px 16px rgba(0,0,0,.40),
                   0 1px  4px rgba(0,0,0,.20);
    transition:    transform var(--transition), box-shadow var(--transition);
}
.sidebar-logo:hover {
    transform:  translateY(-1px);
    box-shadow: 0 6px 22px rgba(0,0,0,.50);
}

.sidebar-toggle-btn {
    color:     rgba(255,255,255,.55);
    padding:   6px;
    font-size: 18px;
    line-height: 1;
    transition: color var(--transition);
}
.sidebar-toggle-btn:hover { color: #fff; }

/* ── User block ────────────────────────────────────────────────────── */
.sidebar-user {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin:        8px 12px 0;
    padding:       14px 16px;
    background:    rgba(255,255,255,.06);
    border-radius: 14px;
    border:        1px solid rgba(255,255,255,.08);
    flex-shrink:   0;
}

.user-avatar {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow:      0 3px 10px rgba(79,70,229,.45);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #fff;
    font-weight:     700;
    font-size:       16px;
    flex-shrink:     0;
}

.user-info { min-width: 0; flex: 1; }

.user-name {
    color:         #ffffff;
    font-weight:   600;
    font-size:     13px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    line-height:   1.3;
}

.user-role-label {
    color:     rgba(199,210,254,.75);
    font-size: 11.5px;
    margin-top: 2px;
}

/* superadmin badge is defined in components.css; keep styles there */

/* ── Divider ───────────────────────────────────────────────────────── */
.sidebar-divider {
    height:      1px;
    background:  rgba(255,255,255,.07);
    margin:      14px 12px 6px;
    flex-shrink: 0;
}

/* ── Navigation ────────────────────────────────────────────────────── */
.sidebar-nav {
    list-style:  none;
    margin:      0;
    padding:     4px 0 12px;
    flex:        1;
    min-height:  0;          /* allow flex child to shrink so overflow-y kicks in */
    overflow-y:  auto;
    overflow-x:  hidden;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
}

/* Custom scrollbar inside sidebar nav */
.sidebar-nav::-webkit-scrollbar       { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

.nav-label {
    padding:        12px 20px 5px;
    color:          rgba(255,255,255,.28);
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.sidebar-nav .nav-link {
    display:         flex;
    align-items:     center;
    gap:             10px;
    margin:          2px 10px;
    padding:         10px 14px;
    color:           rgba(199,210,254,.80);
    text-decoration: none;
    font-size:       13.5px;
    font-weight:     500;
    border-radius:   10px;
    transition:      background var(--transition), color var(--transition);
    cursor:          pointer;
}

.sidebar-nav .nav-link i {
    font-size:   17px;
    flex-shrink: 0;
    color:       rgba(165,180,252,.65);
    transition:  color var(--transition);
}

.sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,.08);
    color:      #ffffff;
}
.sidebar-nav .nav-link:hover i { color: #a5b4fc; }

.sidebar-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(99,102,241,.40) 0%, rgba(79,70,229,.18) 100%);
    color:      #ffffff;
    box-shadow: inset 0 0 0 1px rgba(99,102,241,.30),
                0 2px  8px rgba(0,0,0,.20);
}
.sidebar-nav .nav-link.active i { color: #818cf8; }

/* Collapsible nav groups */
.nav-group-toggle .nav-arrow { transition: transform .2s ease; font-size: 12px; opacity: .55; }
.nav-group-toggle[aria-expanded="true"] .nav-arrow { transform: rotate(-180deg); }

.nav-sub { list-style: none; padding: 2px 0 4px; margin: 0; }

.nav-sub-link {
    display:         flex;
    align-items:     center;
    gap:             8px;
    margin:          1px 10px 1px 22px;
    padding:         8px 14px;
    color:           rgba(199,210,254,.65);
    text-decoration: none;
    font-size:       13px;
    font-weight:     400;
    border-radius:   9px;
    transition:      background var(--transition), color var(--transition);
    line-height:     1.4;
}

.nav-sub-link i {
    font-size: 15px;
    color:     rgba(255,255,255,.22);
    flex-shrink: 0;
    transition: color var(--transition);
}
.nav-sub-link:hover         { background: rgba(255,255,255,.07); color: #fff; }
.nav-sub-link:hover i       { color: rgba(165,180,252,.7); }
.nav-sub-link.active        { color: #a5b4fc; font-weight: 500; background: rgba(99,102,241,.15); }
.nav-sub-link.active i      { color: #a5b4fc; }

/* ── Footer ────────────────────────────────────────────────────────── */
.sidebar-footer {
    border-top:  1px solid rgba(255,255,255,.07);
    padding:     8px 0 12px;
    flex-shrink: 0;
}

.sidebar-footer .nav-link {
    display:         flex;
    align-items:     center;
    gap:             10px;
    margin:          2px 10px;
    padding:         10px 14px;
    color:           rgba(199,210,254,.65);
    font-size:       13.5px;
    font-weight:     500;
    border-radius:   10px;
    transition:      background var(--transition), color var(--transition);
    text-decoration: none;
    cursor:          pointer;
}

.sidebar-footer .nav-link:hover {
    background: rgba(239,68,68,.15);
    color:      #fca5a5;
}
.sidebar-footer .nav-link i { font-size: 17px; flex-shrink: 0; }

/* ── Overlay (mobile) ──────────────────────────────────────────────── */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    z-index:    999;
}

/* ── Main Content ─────────────────────────────────────────────────── */
.main-content {
    margin-left:    var(--sidebar-width);
    flex:           1;
    height:         100vh;      /* fixed height so .page-content scroll works */
    height:         100dvh;     /* dynamic viewport height — adjusts for mobile browser toolbars */
    display:        flex;
    flex-direction: column;
    transition:     margin-left var(--transition);
    min-width:      0;          /* prevents flex child from overflowing on narrow screens */
    overflow:       hidden;     /* clip — only .page-content scrolls */
}

/* ── Topbar ───────────────────────────────────────────────────────── */
.topbar {
    height:         var(--topbar-height);
    background:     var(--topbar-bg);
    border-bottom:  1px solid var(--border-color);
    display:        flex;
    align-items:    center;
    padding:        0 20px;
    gap:            12px;
    position:       sticky;
    top:            0;
    z-index:        100;
    box-shadow:     var(--shadow-sm);
}

.topbar-toggle {
    color:     var(--text-secondary);
    font-size: 22px;
    padding:   4px 6px;
    display:   none;
}

.topbar-breadcrumb { flex: 1; font-size: 13px; color: var(--text-secondary); }
.topbar-breadcrumb a { color: var(--primary); text-decoration: none; }
.topbar-breadcrumb a:hover { text-decoration: underline; }

.topbar-avatar {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      var(--primary);
    color:           #fff;
    font-weight:     600;
    font-size:       13px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.topbar-user {
    display:     flex;
    align-items: center;
    gap:         8px;
    color:       var(--text-primary);
    font-size:   13px;
    font-weight: 500;
    text-decoration: none;
    padding:     4px 8px;
    border-radius: var(--radius-sm);
    transition:  background var(--transition);
}

.topbar-user:hover { background: var(--primary-light); color: var(--primary); }

.topbar-company {
    display:         flex;
    align-items:     center;
    gap:             5px;
    font-size:       13px;
    font-weight:     500;
    color:           var(--text-secondary);
    text-decoration: none;
    padding:         5px 10px;
    border:          1px solid var(--border-color);
    border-radius:   var(--radius-sm);
    margin-right:    8px;
    transition:      all var(--transition);
    max-width:       320px;         /* wider cap so long names fit */
    min-width:       0;
    white-space:     nowrap;
}

/* ellipsis must be on the text node, not the flex container */
.topbar-company > span {
    overflow:      hidden;
    text-overflow: ellipsis;
    min-width:     0;
}

.topbar-company:hover {
    border-color: var(--primary);
    color:        var(--primary);
    background:   var(--primary-light);
}

/* Ensure topbar-actions flex row doesn't clip its children */
.topbar-actions {
    display:     flex;
    align-items: center;
    gap:         4px;
    min-width:   0;
    flex-shrink: 0;
}

/* ── Page Content ─────────────────────────────────────────────────── */
.page-content {
    padding:   24px;
    flex:      1;
    min-height: 0;          /* required for flex child to respect parent height */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain; /* no pull-to-refresh within this container */
    min-width:  0;
}

@media (max-width: 767.98px) {
    .page-content {
        /* extra bottom padding so content clears the browser's bottom navigation bar */
        padding-bottom: 80px;
    }
}

.page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   24px;
    flex-wrap:       wrap;
    gap:             12px;
}

.page-title    { font-size: 22px; font-weight: 700; margin: 0; }
.page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* ── Mobile: shrink the empty invoice preview panel ─────────────────── */
@media (max-width: 767.98px) {
    #attachmentPreview {
        min-height: 220px !important; /* overrides the inline 480px set in the view */
    }
}