/* ============================================================
   AramsTech PM — Design System / CSS Variables & Reset
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    /* Colors */
    --color-primary:        hsl(215, 90%, 58%);
    --color-primary-dark:   hsl(215, 85%, 45%);
    --color-primary-light:  hsl(215, 90%, 70%);
    --color-primary-glow:   hsla(215, 90%, 58%, 0.25);

    --color-accent:         hsl(265, 80%, 62%);
    --color-accent-dark:    hsl(265, 75%, 50%);
    --color-accent-light:   hsl(265, 80%, 74%);
    --color-accent-glow:    hsla(265, 80%, 62%, 0.25);

    --color-success:        hsl(145, 63%, 47%);
    --color-success-bg:     hsla(145, 63%, 47%, 0.12);
    --color-success-border: hsla(145, 63%, 47%, 0.30);

    --color-warning:        hsl(38, 95%, 55%);
    --color-warning-bg:     hsla(38, 95%, 55%, 0.12);
    --color-warning-border: hsla(38, 95%, 55%, 0.30);

    --color-danger:         hsl(5, 80%, 58%);
    --color-danger-bg:      hsla(5, 80%, 58%, 0.12);
    --color-danger-border:  hsla(5, 80%, 58%, 0.30);

    --color-info:           hsl(195, 80%, 52%);
    --color-info-bg:        hsla(195, 80%, 52%, 0.12);

    /* Backgrounds */
    --bg-base:      hsl(222, 28%, 7%);
    --bg-surface:   hsl(222, 22%, 10%);
    --bg-card:      hsl(222, 20%, 13%);
    --bg-elevated:  hsl(222, 18%, 17%);
    --bg-input:     hsl(222, 22%, 11%);
    --bg-hover:     hsla(215, 90%, 58%, 0.07);
    --bg-active:    hsla(215, 90%, 58%, 0.12);

    /* Glass effect */
    --glass-bg:     rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur:   blur(12px);

    /* Text */
    --text-primary:   hsl(220, 20%, 96%);
    --text-secondary: hsl(220, 12%, 68%);
    --text-muted:     hsl(220, 10%, 48%);
    --text-disabled:  hsl(220, 8%, 35%);

    /* Borders */
    --border-default: rgba(255, 255, 255, 0.08);
    --border-subtle:  rgba(255, 255, 255, 0.05);
    --border-strong:  rgba(255, 255, 255, 0.15);
    --border-focus:   var(--color-primary);

    /* Sidebar */
    --sidebar-width:         260px;
    --sidebar-width-collapsed: 68px;
    --sidebar-bg:            hsl(222, 30%, 6%);

    /* Topbar */
    --topbar-height: 64px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radius */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
    --shadow-lg:  0 10px 30px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
    --shadow-xl:  0 20px 60px rgba(0,0,0,0.6);
    --shadow-glow-blue:   0 0 20px hsla(215, 90%, 58%, 0.3);
    --shadow-glow-violet: 0 0 20px hsla(265, 80%, 62%, 0.3);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs:  11px;
    --font-size-sm:  13px;
    --font-size-base: 14px;
    --font-size-md:  15px;
    --font-size-lg:  17px;
    --font-size-xl:  20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── Light Mode — AramsTech Brand Colors ───────────────────── */
html[data-theme="light"] {
    /* Brand primary = AramsTech blue */
    --color-primary:        #1DA7D4;
    --color-primary-dark:   #1490B8;
    --color-primary-light:  #4EC1E3;
    --color-primary-glow:   rgba(29, 167, 212, 0.20);

    /* Accent — teal-blue complement */
    --color-accent:         #0E7FC0;
    --color-accent-dark:    #0B6BA3;
    --color-accent-light:   #3E9FD4;
    --color-accent-glow:    rgba(14, 127, 192, 0.20);

    /* Status colors stay readable on light bg */
    --color-success:        #1a9b5e;
    --color-success-bg:     rgba(26, 155, 94, 0.10);
    --color-success-border: rgba(26, 155, 94, 0.25);

    --color-warning:        #d97706;
    --color-warning-bg:     rgba(217, 119, 6, 0.10);
    --color-warning-border: rgba(217, 119, 6, 0.25);

    --color-danger:         #dc2626;
    --color-danger-bg:      rgba(220, 38, 38, 0.10);
    --color-danger-border:  rgba(220, 38, 38, 0.25);

    --color-info:           #1DA7D4;
    --color-info-bg:        rgba(29, 167, 212, 0.10);

    /* Backgrounds — clean whites & light grays */
    --bg-base:      #f0f4f8;
    --bg-surface:   #e8edf3;
    --bg-card:      #ffffff;
    --bg-elevated:  #f8fafc;
    --bg-input:     #ffffff;
    --bg-hover:     rgba(29, 167, 212, 0.07);
    --bg-active:    rgba(29, 167, 212, 0.12);

    /* Glass */
    --glass-bg:     rgba(255, 255, 255, 0.70);
    --glass-border: rgba(29, 167, 212, 0.15);
    --glass-blur:   blur(12px);

    /* Text — AramsTech dark charcoal */
    --text-primary:   #2C3136;
    --text-secondary: #4a5568;
    --text-muted:     #718096;
    --text-disabled:  #a0aec0;

    /* Borders */
    --border-default: rgba(44, 49, 54, 0.10);
    --border-subtle:  rgba(44, 49, 54, 0.06);
    --border-strong:  rgba(44, 49, 54, 0.20);
    --border-focus:   #1DA7D4;

    /* Sidebar — AramsTech dark charcoal (keep it rich) */
    --sidebar-bg: #2C3136;

    /* Shadows — softer on light */
    --shadow-sm:  0 1px 3px rgba(44,49,54,0.10), 0 1px 2px rgba(44,49,54,0.06);
    --shadow-md:  0 4px 12px rgba(44,49,54,0.12), 0 2px 4px rgba(44,49,54,0.08);
    --shadow-lg:  0 10px 30px rgba(44,49,54,0.14), 0 4px 8px rgba(44,49,54,0.08);
    --shadow-xl:  0 20px 60px rgba(44,49,54,0.18);
    --shadow-glow-blue:   0 0 20px rgba(29, 167, 212, 0.25);
    --shadow-glow-violet: 0 0 20px rgba(14, 127, 192, 0.25);
}

/* Light mode sidebar — keep nav text white since bg is dark charcoal */
html[data-theme="light"] .sidebar {
    background: var(--sidebar-bg);
    border-right: none;
}
html[data-theme="light"] .sidebar .nav-item,
html[data-theme="light"] .sidebar .nav-section-label,
html[data-theme="light"] .sidebar .sidebar-brand,
html[data-theme="light"] .sidebar .sidebar-user-name,
html[data-theme="light"] .sidebar .sidebar-user-role,
html[data-theme="light"] .sidebar .sidebar-toggle,
html[data-theme="light"] .sidebar .btn-ghost {
    color: rgba(255,255,255,0.80) !important;
}
html[data-theme="light"] .sidebar .nav-item:hover,
html[data-theme="light"] .sidebar .btn-ghost:hover {
    background: rgba(29, 167, 212, 0.18) !important;
    color: #fff !important;
}
html[data-theme="light"] .sidebar .nav-item.active {
    background: rgba(29, 167, 212, 0.25) !important;
    color: #fff !important;
    border-left-color: #1DA7D4;
}
html[data-theme="light"] .sidebar .nav-item.active svg,
html[data-theme="light"] .sidebar .nav-item:hover svg {
    stroke: #1DA7D4;
}
html[data-theme="light"] .sidebar-footer {
    border-top-color: rgba(255,255,255,0.10);
}

/* Theme transition — smooth but not on images */
html[data-theme="light"] *:not(img):not(video),
html *:not(img):not(video) {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease, box-shadow 0.25s ease;
}

/* Theme toggle button */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--bg-hover);
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: rotate(20deg);
}


/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-light); }

img, svg { display: block; }

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

ul, ol { list-style: none; }

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

p { color: var(--text-secondary); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ── Selection ──────────────────────────────────────────────── */
::selection {
    background: var(--color-primary-glow);
    color: var(--text-primary);
}

/* ── Focus ring ─────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Utilities ──────────────────────────────────────────────── */
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-info      { color: var(--color-info) !important; }
.text-accent    { color: var(--color-accent) !important; }
.text-blue      { color: var(--color-primary) !important; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.fs-xs   { font-size: var(--font-size-xs); }
.fs-sm   { font-size: var(--font-size-sm); }
.fs-base { font-size: var(--font-size-base); }
.fs-lg   { font-size: var(--font-size-lg); }
.fs-xl   { font-size: var(--font-size-xl); }
.fs-2xl  { font-size: var(--font-size-2xl); }
.fs-3xl  { font-size: var(--font-size-3xl); }

.d-flex     { display: flex; }
.d-grid     { display: grid; }
.d-block    { display: block; }
.d-none     { display: none; }
.d-inline-flex { display: inline-flex; }

.align-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col  { flex-direction: column; }
.flex-1    { flex: 1; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.ms-auto { margin-left: auto; }
.me-2 { margin-right: var(--space-2); }
.me-3 { margin-right: var(--space-3); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.rounded    { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.overflow-hidden { overflow: hidden; }
.position-relative { position: relative; }

.cursor-pointer { cursor: pointer; }
.user-select-none { user-select: none; }

.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-100 { opacity: 1; }

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

/* ── Gradient Text ──────────────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Divider ────────────────────────────────────────────────── */
.divider {
    height: 1px;
    background: var(--border-default);
    margin: var(--space-4) 0;
}