/* ServerHive theme tokens — dark (default) + light. Source: src/styles/style.css */
/*
 * ServerHive Platform — Master Stylesheet
 * ========================================
 * Prefix: sh-
 * Themes: dark (default), light
 * Accent: #e99014 (ServerHive Orange)
 *
 * Sections:
 *   1. Theme Variables
 *   2. Reset & Base
 *   3. Typography
 *   4. Layout (Sidebar + Main)
 *   5. Sidebar Navigation
 *   6. Top Bar
 *   7. Page Structure
 *   8. Cards
 *   9. Buttons
 *  10. Inputs & Forms
 *  11. Tables
 *  12. Badges & Status
 *  13. Progress Bars
 *  14. Stat Cards
 *  15. Hero Banner
 *  16. Server Rack
 *  17. Activity List
 *  18. Modals
 *  19. Web Hosting / Site Cards
 *  20. Email / Mailbox Lists
 *  21. Document Cloud
 *  22. Scrollbars
 *  23. Media Queries
 */


/* ===========================================
   1. THEME VARIABLES
   =========================================== */

/* Dark Theme (default)
 * Inspired by warm charcoal dashboards — near-black sidebar,
 * dark warm grays for content, orange #e99014 accent pops.
 * Reference: "i like this the most.webp"
 */
:root,
html[data-theme='dark'] {
    --sh-bg: #1c1c1c;
    --sh-bg-secondary: #181818;
    --sh-surface: #242424;
    --sh-surface-hover: #2c2c2c;
    --sh-surface-elevated: #2a2a2a;
    --sh-border: rgba(255, 255, 255, 0.07);
    --sh-border-strong: rgba(255, 255, 255, 0.12);

    /* sidebar — darkest element, near-black */
    --sh-sidebar-bg: #141414;
    --sh-sidebar-border: rgba(255, 255, 255, 0.05);
    --sh-sidebar-section: rgba(255, 255, 255, 0.30);
    --sh-sidebar-link: rgba(255, 255, 255, 0.50);
    --sh-sidebar-link-hover: rgba(255, 255, 255, 0.80);
    --sh-sidebar-active-bg: rgba(233, 144, 20, 0.10);
    --sh-sideabr-active-hover: rgba(255, 255, 255, 0.04);
    --sh-sidebar-active-text: #e99014;

    /* topbar — matches sidebar darkness */
    --sh-topbar-bg: var(--sh-sidebar-bg);
    --sh-topbar-border: rgba(255, 255, 255, 0.05);

    /* text — warm whites, not blue-white */
    --sh-text: rgba(255, 255, 255, 0.87);
    --sh-text-secondary: rgba(255, 255, 255, 0.50);
    --sh-text-muted: rgba(255, 255, 255, 0.28);
    --sh-text-inverse: #141414;

    /* accent — ServerHive Orange */
    --sh-accent: #e99014;
    --sh-accent-hover: #d4820f;
    --sh-accent-subtle: rgba(233, 144, 20, 0.12);
    --sh-accent-text: #fff;

    /* inputs */
    --sh-input-bg: rgba(255, 255, 255, 0.05);
    --sh-input-border: rgba(255, 255, 255, 0.10);
    --sh-input-focus-border: #e99014;
    --sh-input-text: rgba(255, 255, 255, 0.87);
    --sh-input-placeholder: rgba(255, 255, 255, 0.25);

    /* status colors */
    --sh-success: #10b981;
    --sh-success-subtle: rgba(16, 185, 129, 0.12);
    --sh-warning: #f59e0b;
    --sh-warning-subtle: rgba(245, 158, 11, 0.12);
    --sh-danger: #ef4444;
    --sh-danger-subtle: rgba(239, 68, 68, 0.12);
    --sh-info: #3b82f6;
    --sh-info-subtle: rgba(59, 130, 246, 0.12);

    /* misc */
    --sh-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    --sh-shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.6);
    --sh-radius: 8px;
    --sh-radius-sm: 5px;
    --sh-radius-lg: 12px;
}

/* Light Theme */
html[data-theme='light'] {
    --sh-bg: #f5f6fa;
    --sh-bg-secondary: #eef0f5;
    --sh-surface: #ffffff;
    --sh-surface-hover: #f8f9fb;
    --sh-surface-elevated: #ffffff;
    --sh-border: rgba(0, 0, 0, 0.08);
    --sh-border-strong: rgba(0, 0, 0, 0.15);

    /* sidebar */
    --sh-sidebar-bg: #ececec;
    --sh-sidebar-border: rgb(0 0 0 / 0.16);
    --sh-sidebar-section: rgba(0, 0, 0, 0.40);
    --sh-sidebar-link: rgba(0, 0, 0, 0.55);
    --sh-sidebar-link-hover: rgba(0, 0, 0, 0.85);
    --sh-sidebar-active-bg: rgba(233, 144, 20, 0.10);
    --sh-sideabr-active-hover: rgb(0 0 0 / 0.09);
    --sh-sidebar-active-text: #c57a0c;

    /* topbar */
    --sh-topbar-bg: var(--sh-sidebar-bg);
    --sh-topbar-border: var(--sh-sidebar-border);

    /* text */
    --sh-text: #1a1a2e;
    --sh-text-secondary: #64748b;
    --sh-text-muted: #94a3b8;
    --sh-text-inverse: #ffffff;

    /* accent */
    --sh-accent: #e99014;
    --sh-accent-hover: #d4820f;
    --sh-accent-subtle: rgba(233, 144, 20, 0.10);
    --sh-accent-text: #fff;

    /* inputs */
    --sh-input-bg: #ffffff;
    --sh-input-border: rgba(0, 0, 0, 0.15);
    --sh-input-focus-border: #e99014;
    --sh-input-text: #1a1a2e;
    --sh-input-placeholder: #94a3b8;

    /* status — same hues, adjusted for light bg */
    --sh-success: #059669;
    --sh-success-subtle: rgba(5, 150, 105, 0.10);
    --sh-warning: #d97706;
    --sh-warning-subtle: rgba(217, 119, 6, 0.10);
    --sh-danger: #dc2626;
    --sh-danger-subtle: rgba(220, 38, 38, 0.10);
    --sh-info: #2563eb;
    --sh-info-subtle: rgba(37, 99, 235, 0.10);

    /* misc */
    --sh-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --sh-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
    --sh-radius: 8px;
    --sh-radius-sm: 5px;
    --sh-radius-lg: 12px;
}
/* ServerHive component styles (sh- prefix). Tokens live in ../tokens/theme.css */

/* ===========================================
   2. RESET & BASE
   =========================================== */

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--sh-text);
    background: var(--sh-bg);
    line-height: 1.5;
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    list-style: none;
}

a {
    color: var(--sh-accent);
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: var(--sh-accent-hover);
}

::placeholder {
    color: var(--sh-input-placeholder);
}

::selection {
    background: var(--sh-accent);
    color: #fff;
}


/* ===========================================
   3. TYPOGRAPHY
   =========================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--sh-text);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

.sh-text-secondary { color: var(--sh-text-secondary); }
.sh-text-muted { color: var(--sh-text-muted); }
.sh-text-accent { color: var(--sh-accent); }
.sh-text-success { color: var(--sh-success); }
.sh-text-warning { color: var(--sh-warning); }
.sh-text-danger { color: var(--sh-danger); }

.sh-mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9em;
}

.sh-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sh-text-secondary);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sh-small {
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
}


/* ===========================================
   4. LAYOUT (Sidebar + Main)
   =========================================== */

.sh-app {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.sh-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--sh-sidebar-bg);
    border-right: 1px solid var(--sh-sidebar-border);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.sh-main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevent flex blowout */
}

.sh-topbar {
    height: 52px;
    background: var(--sh-topbar-bg);
    border-bottom: 1px solid var(--sh-topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.sh-content {
    flex: 1;
    padding: 28px 32px;
    max-width: 1280px;
}


/* ===========================================
   5. SIDEBAR NAVIGATION
   =========================================== */

/* logo / brand area */
.sh-sidebar-brand {
    padding: 8px 0 4px 14px;
  width: 100%;
    border-bottom: 1px solid var(--sh-sidebar-border);
}

.sh-sidebar-logo {
    height: 34px;
    width: auto;
    /* SVG is black by default — invert to white for dark sidebar */
    filter: invert(1) brightness(2);
    opacity: 0.85;
}

html[data-theme='light'] .sh-sidebar-logo {
    filter: none;
    opacity: 0.8;
}

/* scrollable nav area */
.sh-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

/* nav section groups — separated by thin border */
.sh-nav-section {
    padding: 12px 0 6px 0;
}

/* thin separator line between sections (skip first) */
.sh-nav-section + .sh-nav-section {
    border-top: 1px solid var(--sh-sidebar-border);
    margin-top: 4px;
}

.sh-nav-section-label {
    padding: 4px 20px 8px 20px;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--sh-sidebar-section);
}

/* nav links — generous padding, left orange indicator on active */
.sh-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 20px;
    margin: 0;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--sh-sidebar-link);
    transition: color 100ms ease, background 100ms ease;
    text-decoration: none;
}

.sh-nav-link:hover {
    color: var(--sh-sidebar-link-hover);
    background: var(--sh-sideabr-active-hover);
}

.sh-nav-link.active {
    color: var(--sh-sidebar-active-text);
    background: var(--sh-sideabr-active-hover);
    font-weight: 500;
}

/* orange left indicator bar on active link */
.sh-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--sh-accent);
}

/* nav icons — inline svgs or font icons */
.sh-nav-icon {
    width: 16px;
    height: 16px;
    opacity: 0.45;
    flex-shrink: 0;
}

.sh-nav-link:hover .sh-nav-icon {
    opacity: 0.7;
}

.sh-nav-link.active .sh-nav-icon {
    opacity: 1;
    color: var(--sh-accent);
}

/* sidebar footer (user info) */
.sh-sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--sh-sidebar-border);
}

.sh-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sh-sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sh-accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--sh-accent);
    flex-shrink: 0;
}

.sh-sidebar-user-info {
    overflow: hidden;
}

.sh-sidebar-user-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-sidebar-user-role {
    font-size: 0.75rem;
    color: var(--sh-text-muted);
}


/* ===========================================
   6. TOP BAR
   =========================================== */

.sh-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sh-breadcrumb {
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
}

.sh-breadcrumb span {
    color: var(--sh-text);
    font-weight: 500;
}

.sh-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sh-search {
    position: relative;
}

.sh-search input {
    width: 220px;
    padding: 6px 12px 6px 32px;
    background: var(--sh-input-bg);
    border: 1px solid var(--sh-input-border);
    border-radius: var(--sh-radius-sm);
    color: var(--sh-input-text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms ease;
}

.sh-search input:focus {
    border-color: var(--sh-input-focus-border);
}

/* theme toggle button */
.sh-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    background: var(--sh-input-bg);
    color: var(--sh-text-secondary);
    cursor: pointer;
    transition: all 150ms ease;
}

.sh-theme-toggle:hover {
    background: var(--sh-surface-hover);
    color: var(--sh-text);
    border-color: var(--sh-border-strong);
}

.sh-theme-toggle svg {
    width: 18px;
    height: 18px;
}


/* ===========================================
   7. PAGE STRUCTURE
   =========================================== */

.sh-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.sh-page-header h1 {
    font-size: 1.5rem;
}

.sh-page-header p {
    margin-top: 4px;
    font-size: 0.9rem;
    color: var(--sh-text-secondary);
}

.sh-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* grid system — css grid, auto-fit columns */
.sh-grid {
    display: grid;
    gap: 16px;
}

.sh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sh-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sh-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* auto-fit grids — responsive without media queries */
.sh-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sh-grid-auto-sm {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* column spans */
.sh-col-span-2 { grid-column: span 2; }
.sh-col-span-3 { grid-column: span 3; }

/* two-column layout: 2/3 + 1/3 */
.sh-grid-content {
    grid-template-columns: 2fr 1fr;
}

/* section spacing */
.sh-section {
    margin-top: 28px;
}

.sh-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sh-text);
    margin-bottom: 14px;
}


/* ===========================================
   8. CARDS
   =========================================== */

.sh-card {
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    box-shadow: var(--sh-shadow);
}

.sh-card-padded {
    padding: 20px;
}

.sh-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--sh-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sh-card-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
}

.sh-card-body {
    padding: 20px;
}

.sh-card-clickable {
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.sh-card-clickable:hover {
    border-color: var(--sh-accent);
    box-shadow: var(--sh-shadow-lg);
}


/* ===========================================
   9. BUTTONS
   =========================================== */

.sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
    line-height: 1;
}

.sh-btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* primary — orange accent */
.sh-btn-primary {
    background: var(--sh-accent);
    color: var(--sh-accent-text);
    border-color: var(--sh-accent);
}

.sh-btn-primary:hover {
    background: var(--sh-accent-hover);
    border-color: var(--sh-accent-hover);
}

/* secondary — outline/ghost */
.sh-btn-secondary {
    background: transparent;
    color: var(--sh-text);
    border-color: var(--sh-border-strong);
}

.sh-btn-secondary:hover {
    background: var(--sh-surface-hover);
    border-color: var(--sh-text-secondary);
}

/* danger */
.sh-btn-danger {
    background: var(--sh-danger);
    color: #fff;
    border-color: var(--sh-danger);
}

.sh-btn-danger:hover {
    opacity: 0.85;
}

/* ghost — no border, just text */
.sh-btn-ghost {
    background: transparent;
    color: var(--sh-text-secondary);
    border: none;
    padding: 6px 10px;
}

.sh-btn-ghost:hover {
    color: var(--sh-text);
    background: var(--sh-surface-hover);
}

/* small button variant */
.sh-btn-sm {
    padding: 5px 10px;
    font-size: 0.8rem;
}


/* ===========================================
   10. INPUTS & FORMS
   =========================================== */

.sh-input {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: var(--sh-input-bg);
    border: 1px solid var(--sh-input-border);
    border-radius: var(--sh-radius-sm);
    color: var(--sh-input-text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 150ms ease;
}

.sh-input:focus {
    border-color: var(--sh-input-focus-border);
    box-shadow: 0 0 0 2px var(--sh-accent-subtle);
}

.sh-input-error {
    border-color: var(--sh-danger);
}

.sh-input-error:focus {
    box-shadow: 0 0 0 2px var(--sh-danger-subtle);
}

.sh-select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: var(--sh-input-bg);
    border: 1px solid var(--sh-input-border);
    border-radius: var(--sh-radius-sm);
    color: var(--sh-input-text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
}

.sh-field {
    margin-bottom: 16px;
}

.sh-field-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sh-text-secondary);
    margin-bottom: 6px;
}

.sh-field-error {
    font-size: 0.8rem;
    color: var(--sh-danger);
    margin-top: 4px;
}

.sh-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.sh-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--sh-border);
}


/* ===========================================
   11. TABLES
   =========================================== */

.sh-table-wrap {
    overflow-x: auto;
}

.sh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.sh-table th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sh-text-muted);
    border-bottom: 1px solid var(--sh-border);
}

.sh-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sh-border);
    color: var(--sh-text);
}

.sh-table tr:last-child td {
    border-bottom: none;
}

.sh-table-clickable tr {
    cursor: pointer;
    transition: background 100ms ease;
}

.sh-table-clickable tr:hover td {
    background: var(--sh-surface-hover);
}

/* cell helper: name + subtext */
.sh-table-name {
    font-weight: 500;
    color: var(--sh-text);
}

.sh-table-sub {
    font-size: 0.8rem;
    color: var(--sh-text-muted);
    margin-top: 2px;
}


/* ===========================================
   12. BADGES & STATUS
   =========================================== */

.sh-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

/* status dot inside badges */
.sh-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* badge color variants */
.sh-badge-success {
    background: var(--sh-success-subtle);
    color: var(--sh-success);
}
.sh-badge-success .sh-badge-dot { background: var(--sh-success); }

.sh-badge-warning {
    background: var(--sh-warning-subtle);
    color: var(--sh-warning);
}
.sh-badge-warning .sh-badge-dot { background: var(--sh-warning); }

.sh-badge-danger {
    background: var(--sh-danger-subtle);
    color: var(--sh-danger);
}
.sh-badge-danger .sh-badge-dot { background: var(--sh-danger); }

.sh-badge-neutral {
    background: var(--sh-input-bg);
    color: var(--sh-text-secondary);
}
.sh-badge-neutral .sh-badge-dot { background: var(--sh-text-muted); }

.sh-badge-accent {
    background: var(--sh-accent-subtle);
    color: var(--sh-accent);
}
.sh-badge-accent .sh-badge-dot { background: var(--sh-accent); }


/* ===========================================
   13. PROGRESS BARS
   =========================================== */

.sh-progress {
    width: 100%;
    height: 4px;
    background: var(--sh-input-bg);
    border-radius: 2px;
    overflow: hidden;
}

.sh-progress-md {
    height: 6px;
    border-radius: 3px;
}

.sh-progress-bar {
    height: 100%;
    border-radius: inherit;
    transition: width 300ms ease;
}

/* auto-color: green < 75%, yellow 75-89%, red 90%+ */
.sh-progress-bar         { background: var(--sh-accent); }
.sh-progress-bar.success { background: var(--sh-success); }
.sh-progress-bar.warning { background: var(--sh-warning); }
.sh-progress-bar.danger  { background: var(--sh-danger); }


/* ===========================================
   14. STAT CARDS (dashboard overview)
   =========================================== */

/* stat row — single card with dividers between stats (like reference) */
.sh-stat-row {
    display: flex;
}

.sh-stat-row .sh-stat {
    flex: 1;
    border-right: 1px solid var(--sh-border);
}

.sh-stat-row .sh-stat:last-child {
    border-right: none;
}

.sh-stat {
    padding: 18px 20px;
}

.sh-stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sh-text-muted);
}

.sh-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sh-text);
    margin-top: 6px;
    line-height: 1;
}

.sh-stat-sub {
    font-size: 0.8rem;
    color: var(--sh-text-secondary);
    margin-top: 6px;
}


/* ===========================================
   15. HERO BANNER (dashboard welcome)
   =========================================== */

.sh-hero {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d1b4e 50%, #1a1a3e 100%);
    border-radius: var(--sh-radius-lg);
    padding: 32px 36px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

/* decorative dots pattern (like ncloud reference) */
.sh-hero::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 10px;
    bottom: 10px;
    width: 200px;
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    pointer-events: none;
}

.sh-hero-content {
    position: relative;
    z-index: 1;
}

.sh-hero h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.sh-hero p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 500px;
    line-height: 1.6;
}

.sh-hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

/* hero buttons need to stand out on gradient bg */
.sh-hero .sh-btn-secondary {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.sh-hero .sh-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}


/* ===========================================
   16. SERVER RACK
   -------------------------------------------
   Physical rack diagram with realistic server
   bezels. Rack on left, aligned info rows on
   right. Each VM = 2U. Hover syncs both sides.
   =========================================== */

/* outer layout: rack + legend side by side, tops aligned */
.sh-rack-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

/* header spanning both columns */
.sh-rack-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sh-rack-header h2 {
    font-size: 1.1rem;
}

.sh-rack-header-meta {
    font-size: 0.8rem;
    color: var(--sh-text-muted);
}

/* === THE RACK FRAME === */
.sh-rack {
    width: 360px;
    min-width: 360px;
    flex-shrink: 0;
    background: var(--sh-bg-secondary);
    border: 2px solid var(--sh-border-strong);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: var(--sh-shadow);
}

/* rack body holds all U rows */
.sh-rack-body {
    display: flex;
    flex-direction: column;
}

/* single U row: rail label + slot content
 * Height is exactly 28px. No border — use box-shadow
 * for the separator so it doesn't affect layout math.
 */
.sh-rack-row {
    display: flex;
    height: 28px;
    box-shadow: 0 1px 0 var(--sh-border);
}

.sh-rack-row:last-child {
    box-shadow: none;
}

/* U number on the left rail */
.sh-rack-u {
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--sh-text-muted);
    background: var(--sh-bg-secondary);
    border-right: 2px solid var(--sh-border-strong);
    flex-shrink: 0;
    user-select: none;
}

/* === SERVER BEZEL (2U) ===
 * Designed to look like a Dell/HP 1U-2U server faceplate:
 * - Dark brushed metal look
 * - LED indicator
 * - Name plate
 * - Drive bay / vent details
 * - Subtle handle indentation on edges
 */

/* top U of the bezel — main face */
.sh-bezel-top {
    flex: 1;
    background: var(--sh-surface);
    border-top: 1px solid var(--sh-border-strong);
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    cursor: pointer;
    position: relative;
    transition: background 80ms ease;
}

/* left "handle" indent */
.sh-bezel-top::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    background: var(--sh-bg-secondary);
    border-right: 1px solid var(--sh-border);
}

/* bottom U of the bezel — specs plate + drive bay pattern */
.sh-bezel-bottom {
    flex: 1;
    background: var(--sh-bg-secondary);
    border-bottom: 1px solid var(--sh-border-strong);
    display: flex;
    align-items: center;
    padding: 0 10px 0 18px;
    cursor: pointer;
    position: relative;
    transition: background 80ms ease;
}

/* drive bay detail on bottom bezel */
.sh-bezel-bottom::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 5px;
    bottom: 5px;
    width: 80px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--sh-surface) 0px, var(--sh-surface) 5px,
            var(--sh-bg-secondary) 5px, var(--sh-bg-secondary) 7px
        );
    border-radius: 2px;
    border: 1px solid var(--sh-border);
}

/* hover + selected states */
.sh-bezel-top:hover,
.sh-bezel-bottom:hover,
.sh-bezel-top.selected,
.sh-bezel-bottom.selected {
    background: var(--sh-surface-hover);
}

.sh-bezel-top.selected {
    border-top-color: var(--sh-accent);
}
.sh-bezel-bottom.selected {
    border-bottom-color: var(--sh-accent);
}

/* LED indicator */
.sh-bezel-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 6px;
}

.sh-bezel-led.running  { background: var(--sh-success); box-shadow: 0 0 6px var(--sh-success); }
.sh-bezel-led.stopped  { background: var(--sh-border-strong); }
.sh-bezel-led.starting { background: var(--sh-warning); box-shadow: 0 0 6px var(--sh-warning); }
.sh-bezel-led.stopping { background: var(--sh-warning); box-shadow: 0 0 6px var(--sh-warning); }
.sh-bezel-led.error    { background: var(--sh-danger); box-shadow: 0 0 6px var(--sh-danger); }

/* name plate on bezel */
.sh-bezel-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sh-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-bezel-top:hover .sh-bezel-name,
.sh-bezel-top.selected .sh-bezel-name {
    color: var(--sh-text);
}

/* vent holes on top bezel */
.sh-bezel-vents {
    display: flex;
    gap: 3px;
    margin-left: auto;
    margin-right: 4px;
    flex-shrink: 0;
}

.sh-bezel-vents i {
    display: block;
    width: 2px;
    height: 12px;
    background: var(--sh-border);
    border-radius: 1px;
}

/* type badge on bezel */
.sh-bezel-type {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sh-text-muted);
    background: var(--sh-bg-secondary);
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid var(--sh-border);
    flex-shrink: 0;
}

/* managed badge on bezel */
.sh-bezel-managed {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sh-accent);
    background: var(--sh-accent-subtle);
    padding: 1px 4px;
    border-radius: 2px;
    border: 1px solid var(--sh-accent);
    flex-shrink: 0;
    margin-right: 4px;
}

/* managed state — diagonal stripe texture */
.sh-bezel-top.managed,
.sh-bezel-bottom.managed {
    cursor: default;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        var(--sh-border) 4px,
        var(--sh-border) 5px
    );
}

.sh-bezel-top.managed:hover,
.sh-bezel-bottom.managed:hover {
    background-color: var(--sh-surface);
}

.sh-rack-legend-row.managed {
    cursor: default;
    opacity: 0.7;
}

.sh-rack-legend-row.managed:hover {
    background: transparent;
}

/* specs text on bottom bezel */
.sh-bezel-specs {
    font-size: 0.65rem;
    color: var(--sh-text-muted);
    white-space: nowrap;
}

.sh-bezel-top:hover ~ .sh-bezel-bottom .sh-bezel-specs,
.sh-bezel-top.selected ~ .sh-bezel-bottom .sh-bezel-specs {
    color: var(--sh-text-secondary);
}

/* empty U row */
.sh-rack-empty {
    flex: 1;
    background: var(--sh-bg-secondary);
}

/* === LEGEND (right side, pixel-aligned to rack) ===
 * Each rack row = 28px (no border in layout flow).
 * 2U bezel = 56px. Legend rows must be exactly 56px.
 * Legend top is offset by rack frame's 2px border.
 */
.sh-rack-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* offset to align with first rack row inside the 2px frame border */
    margin-top: 2px;
    overflow: hidden;
}

/* legend row — exactly 56px to match 2U (28px * 2) in the rack */
.sh-rack-legend-row {
    display: flex;
    align-items: center;
    height: 56px;
    min-height: 56px;
    padding: 0 16px;
    cursor: pointer;
    transition: background 80ms ease;
    /* use box-shadow for separator so it doesn't affect height */
    box-shadow: 0 1px 0 var(--sh-border);
}

.sh-rack-legend-row:hover,
.sh-rack-legend-row.selected {
    background: var(--sh-surface-hover);
}

/* legend row cells — use fixed widths to align as columns */
.sh-rack-legend-os {
    width: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-text-secondary);
}

.sh-rack-legend-led {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sh-rack-legend-led .sh-bezel-led {
    width: 8px;
    height: 8px;
}

.sh-rack-legend-name {
    flex: 1;
    min-width: 0;
    padding-right: 12px;
}

.sh-rack-legend-name strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sh-text);
}

.sh-rack-legend-name small {
    display: block;
    font-size: 0.78rem;
    color: var(--sh-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-rack-legend-status {
    width: 90px;
    flex-shrink: 0;
}

.sh-rack-legend-specs {
    width: 220px;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
}

.sh-rack-legend-ip {
    width: 110px;
    flex-shrink: 0;
    text-align: right;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--sh-text-secondary);
}

/* empty row in legend (matches 1 empty U slot = 28px) */
.sh-rack-legend-empty {
    height: 28px;
    min-height: 28px;
}

/* rack type badge (reused elsewhere) */
.sh-rack-type {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sh-text-muted);
    background: var(--sh-input-bg);
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* mobile: hide legend, rack goes full width */
@media (max-width: 900px) {
    .sh-rack-layout {
        flex-direction: column;
    }

    .sh-rack {
        width: 100%;
        min-width: unset;
    }

    .sh-rack-legend {
        display: none;
    }
}

/* server detail page — console area */
.sh-console {
    background: #0a0a0a;
    border: 1px solid #222;
    border-radius: var(--sh-radius-sm);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    color: var(--sh-text-muted);
    position: relative;
}

.sh-console-label {
    position: absolute;
    top: 10px;
    left: 14px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sh-text-muted);
    background: #0a0a0a;
    padding: 0 4px;
}

/* power controls toolbar */
.sh-power-controls {
    display: flex;
    gap: 6px;
}

.sh-power-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--sh-border-strong);
    border-radius: var(--sh-radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 100ms ease;
    background: transparent;
    color: var(--sh-text-secondary);
}

.sh-power-btn:hover {
    background: var(--sh-surface-hover);
    color: var(--sh-text);
}

.sh-power-btn.power-on  { color: var(--sh-success); border-color: var(--sh-success); }
.sh-power-btn.power-off { color: var(--sh-danger); border-color: var(--sh-danger); }

.sh-power-btn.power-on:hover  { background: var(--sh-success-subtle); }
.sh-power-btn.power-off:hover { background: var(--sh-danger-subtle); }

/* resource sliders placeholder */
.sh-resource-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--sh-border);
}

.sh-resource-row:last-child {
    border-bottom: none;
}

.sh-resource-label {
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
    min-width: 80px;
}

.sh-resource-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sh-text);
    min-width: 80px;
    text-align: right;
}

.sh-resource-bar {
    flex: 1;
    margin: 0 16px;
}


/* ===========================================
   17. ACTIVITY LIST
   =========================================== */

.sh-activity-list {
    list-style: none;
}

.sh-activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--sh-border);
}

.sh-activity-item:last-child {
    border-bottom: none;
}

.sh-activity-text {
    font-size: 0.9rem;
    color: var(--sh-text);
}

.sh-activity-type {
    font-size: 0.78rem;
    color: var(--sh-text-muted);
    margin-top: 2px;
}

.sh-activity-time {
    font-size: 0.78rem;
    color: var(--sh-text-muted);
    white-space: nowrap;
    margin-left: 16px;
    flex-shrink: 0;
}


/* ===========================================
   16. MODALS
   =========================================== */

.sh-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-modal {
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    box-shadow: var(--sh-shadow-lg);
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}

.sh-modal-header {
    padding: 20px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sh-modal-header h2 {
    font-size: 1.25rem;
}

.sh-modal-close {
    background: none;
    border: none;
    color: var(--sh-text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 4px;
}

.sh-modal-close:hover {
    color: var(--sh-text);
}

.sh-modal-body {
    padding: 20px 24px;
}

.sh-modal-footer {
    padding: 0 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


/* ===========================================
   17. UTILITIES
   =========================================== */

.sh-flex { display: flex; }
.sh-flex-center { display: flex; align-items: center; justify-content: center; }
.sh-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sh-gap-sm { gap: 8px; }
.sh-gap { gap: 12px; }
.sh-gap-lg { gap: 20px; }

.sh-mt-0 { margin-top: 0; }
.sh-mt-sm { margin-top: 8px; }
.sh-mt { margin-top: 16px; }
.sh-mt-lg { margin-top: 24px; }
.sh-mb { margin-bottom: 16px; }

.sh-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sh-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sh-hidden { display: none; }

/* loading spinner */
.sh-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--sh-border);
    border-top-color: var(--sh-accent);
    border-radius: 50%;
    animation: sh-spin 0.6s linear infinite;
}

.sh-spinner-lg {
    width: 36px;
    height: 36px;
    border-width: 4px;
}

@keyframes sh-spin {
    to { transform: rotate(360deg); }
}

/* full-page centered loader */
.sh-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}


/* ===========================================
   18. WEB HOSTING / SITE CARDS
   =========================================== */

.sh-site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.sh-site-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.sh-site-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 12px;
    background: var(--sh-bg-secondary);
    border-bottom: 1px solid var(--sh-border);
}

.sh-site-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sh-surface);
    border-radius: var(--sh-radius-sm);
    border: 1px solid var(--sh-border);
}

.sh-site-card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-site-ssl {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-success);
}

.sh-site-card-body {
    padding: 16px;
    flex: 1;
}

.sh-site-card-domain {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sh-text);
    margin: 0 0 4px;
    word-break: break-all;
}

.sh-site-card-name {
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
    margin: 0;
}

.sh-site-card-version {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--sh-text-muted);
    background: var(--sh-input-bg);
    padding: 2px 8px;
    border-radius: var(--sh-radius-sm);
}

.sh-site-card-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--sh-border);
}

.sh-site-card-storage {
    margin-bottom: 12px;
}

.sh-site-card-storage-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--sh-text-muted);
    margin-bottom: 6px;
}

.sh-site-card-actions {
    display: flex;
    gap: 8px;
}

.sh-site-card-actions .sh-btn {
    flex: 1;
}

/* empty state */
.sh-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--sh-text-secondary);
}

.sh-empty-state p {
    margin-bottom: 16px;
}


/* ===========================================
   19. EMAIL / MAILBOX LISTS
   =========================================== */

/* mailbox user cell with avatar */
.sh-mailbox-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sh-mailbox-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sh-accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-accent);
    flex-shrink: 0;
}

.sh-mailbox-avatar-group {
    background: var(--sh-info-subtle);
    color: var(--sh-info);
}

.sh-mailbox-avatar-shared {
    background: var(--sh-success-subtle);
    color: var(--sh-success);
}

.sh-mailbox-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sh-mailbox-name {
    font-weight: 500;
    color: var(--sh-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-mailbox-email {
    font-size: 0.8rem;
    color: var(--sh-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-mailbox-type {
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
    text-transform: capitalize;
}

.sh-mailbox-storage {
    min-width: 140px;
}

.sh-mailbox-storage-text {
    font-size: 0.78rem;
    color: var(--sh-text-muted);
    margin-bottom: 4px;
}

.sh-dist-list-members {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--sh-text-secondary);
}

.sh-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* page header with actions */
.sh-page-header-content {
    flex: 1;
}

.sh-page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* page loading / error states */
.sh-page-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.sh-page-error {
    padding: 40px 20px;
    text-align: center;
    color: var(--sh-danger);
}

.sh-page-content {
    margin-top: 0;
}


/* ===========================================
   20. DOCUMENT CLOUD
   =========================================== */

.sh-doccloud-header-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sh-doccloud-logo {
    color: var(--sh-accent);
}

.sh-doccloud-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sh-doccloud-card {
    padding: 0;
}

.sh-doccloud-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sh-border);
    font-weight: 500;
    color: var(--sh-text-secondary);
}

.sh-doccloud-card-header svg {
    color: var(--sh-text-muted);
}

.sh-doccloud-card-body {
    padding: 18px;
}

/* status card */
.sh-doccloud-status {
    margin-bottom: 14px;
}

.sh-doccloud-domain {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--sh-text-secondary);
    margin-bottom: 8px;
}

.sh-doccloud-domain a {
    color: var(--sh-accent);
}

.sh-doccloud-domain a:hover {
    text-decoration: underline;
}

.sh-doccloud-users {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--sh-text-muted);
}

/* storage card */
.sh-doccloud-storage-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
}

.sh-doccloud-storage-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sh-text);
}

.sh-doccloud-storage-limit {
    font-size: 0.9rem;
    color: var(--sh-text-muted);
}

.sh-doccloud-storage-stats {
    display: flex;
    gap: 20px;
    margin-top: 14px;
}

.sh-doccloud-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
}

/* backup card */
.sh-doccloud-backup-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sh-doccloud-backup-schedule {
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
}

.sh-doccloud-last-backup {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--sh-text-muted);
}

/* snapshot card */
.sh-doccloud-snapshot-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--sh-text-secondary);
}

/* file types card */
.sh-doccloud-stats-card {
    grid-column: span 2;
}

.sh-doccloud-file-types {
    display: flex;
    justify-content: space-around;
    gap: 16px;
}

.sh-doccloud-file-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-width: 80px;
}

.sh-doccloud-file-type-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--sh-radius);
    background: var(--sh-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-doccloud-file-type-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sh-doccloud-file-type-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--sh-text);
}

.sh-doccloud-file-type-label {
    font-size: 0.75rem;
    color: var(--sh-text-muted);
}

/* responsive */
@media (max-width: 768px) {
    .sh-doccloud-grid {
        grid-template-columns: 1fr;
    }

    .sh-doccloud-stats-card {
        grid-column: span 1;
    }

    .sh-doccloud-file-types {
        flex-wrap: wrap;
    }
}


/* ===========================================
   21. ERROR PAGES
   =========================================== */

/* error page inside app shell */
.sh-error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.sh-error-content {
    text-align: center;
    max-width: 400px;
}

.sh-error-status {
    font-size: 4rem;
    font-weight: 700;
    color: var(--sh-accent);
    line-height: 1;
    margin-bottom: 8px;
}

.sh-error-content h1 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.sh-error-content p {
    margin-bottom: 24px;
}

.sh-error-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* root error page (outside app shell) */
.sh-root-error {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sh-bg);
    padding: 20px;
}

.sh-root-error-card {
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    padding: 48px;
    text-align: center;
    max-width: 420px;
    box-shadow: var(--sh-shadow-lg);
}

.sh-root-error-card h1 {
    font-size: 1.75rem;
    margin-bottom: 12px;
    color: var(--sh-text);
}

.sh-root-error-card p {
    color: var(--sh-text-secondary);
    margin-bottom: 24px;
}

.sh-root-error-card a {
    display: inline-block;
    padding: 10px 20px;
    background: var(--sh-accent);
    color: var(--sh-accent-text);
    border-radius: var(--sh-radius-sm);
    font-weight: 500;
    transition: background 120ms ease;
}

.sh-root-error-card a:hover {
    background: var(--sh-accent-hover);
    color: var(--sh-accent-text);
}


/* ===========================================
   22. SCROLLBARS (dark theme friendly)
   =========================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--sh-border-strong);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sh-text-muted);
}


/* ===========================================
   23. MEDIA QUERIES
   =========================================== */

/* tablets — sidebar collapses */
@media (max-width: 1024px) {
    .sh-sidebar {
        position: fixed;
        left: -240px;
        transition: left 200ms ease;
    }

    .sh-sidebar.open {
        left: 0;
    }

    .sh-content {
        padding: 20px 16px;
    }

    .sh-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sh-grid-content {
        grid-template-columns: 1fr;
    }

    .sh-col-span-2 { grid-column: span 1; }
    .sh-col-span-3 { grid-column: span 1; }
}

/* phones */
@media (max-width: 640px) {
    .sh-grid-2,
    .sh-grid-3,
    .sh-grid-4 {
        grid-template-columns: 1fr;
    }

    .sh-page-header {
        flex-direction: column;
    }

    .sh-content {
        padding: 16px 12px;
    }

    .sh-site-grid {
        grid-template-columns: 1fr;
    }
}