/* =========================================================
   Design Tokens
========================================================= */

/* -----------------------------------------------------------
   PROJECT RESPONSIVE STANDARD (mandatory, all future work)
   Desktop-first base styles, narrowed via max-width queries:
     Mobile             : 320px – 430px   → @media (max-width: 430px)
     Tablet              : 768px – 1024px  → @media (max-width: 1024px)
     Laptop/Small Desk.  : 1024px – 1280px → base styles (no query)
     Large Desktop       : 1440px – 1920px → @media (min-width: 1440px)
   Reuse these exact values project-wide; don't introduce new
   breakpoints unless a component genuinely can't be solved
   within this set.
----------------------------------------------------------- */
:root{
    --color-bg: #f4f6fb;
    --color-surface: #ffffff;
    --color-border: #e5e9f2;
    --color-text: #1a2233;
    --color-muted: #6b7488;

    --color-primary: #4f46e5;
    --color-primary-dark: #4338ca;
    --color-primary-soft: #eef2ff;

    --color-success: #16a34a;
    --color-success-soft: #dcfce7;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-info: #0891b2;
    --color-info-soft: #cffafe;

    /* Premium accents — same hues as above, used for buttons, active
       nav states, icon chips and other spots where a flat fill can
       read a little flat. Kept subtle (one hue step of depth) so the
       app still reads as the same product, just with more polish. */
    --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
    --gradient-success: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --gradient-danger:  linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    --gradient-warning: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --gradient-info:    linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
    --shadow-lg: 0 20px 50px rgba(16, 24, 40, .16);
    --shadow-glow-primary: 0 8px 20px -4px rgba(79, 70, 229, .35);

    --ease-premium: cubic-bezier(.16, 1, .3, 1);

    --sidebar-width: 260px;
    --topbar-height: 72px;
}

/* =========================================================
   Base
========================================================= */
*{ margin:0; padding:0; box-sizing:border-box; }

body{
    font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background:var(--color-bg);
    color:var(--color-text);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    scrollbar-width:thin;
    scrollbar-color:#c7cede transparent;
}
body::-webkit-scrollbar{ width:10px; height:10px; }
body::-webkit-scrollbar-thumb{ background:#c7cede; border-radius:99px; border:2px solid var(--color-bg); }
body::-webkit-scrollbar-thumb:hover{ background:#a9b3c9; }

::selection{ background:var(--color-primary-soft); color:var(--color-primary-dark); }

a{ color:var(--color-primary); }
.text-muted{ color:var(--color-muted) !important; }
.link-muted{ color:var(--color-muted); text-decoration:none; font-weight:500; transition:color .15s ease; }
.link-muted:hover{ color:var(--color-primary); }

/* =========================================================
   Buttons
========================================================= */
.btn{ font-weight:600; border-radius:var(--radius-sm); }

.btn-primary{
    background:var(--gradient-primary);
    border-color:transparent;
    box-shadow:0 2px 8px rgba(79,70,229,.25);
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.btn-primary:hover, .btn-primary:focus{
    background:var(--gradient-primary);
    border-color:transparent;
    box-shadow:var(--shadow-glow-primary);
    transform:translateY(-1px);
}
/* Soft diagonal shine that sweeps across on hover — a small, tasteful
   micro-interaction rather than a full ripple (no JS, no click-position
   tracking needed). Disabled under reduced-motion, see animation.css. */
.btn-primary::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
    transform:translateX(-100%);
    transition:transform .5s var(--ease-premium);
    z-index:-1;
}
.btn-primary:hover::before{ transform:translateX(100%); }

.btn-auth{
    width:100%;
    height:50px;
    border-radius:var(--radius-sm);
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.btn-icon-toggle{
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-muted);
    transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-icon-toggle:hover{
    background:var(--color-primary-soft);
    color:var(--color-primary);
    border-color:var(--color-primary-soft);
}

/* =========================================================
   Forms
========================================================= */
.form-label{ font-weight:600; font-size:14px; margin-bottom:6px; color:var(--color-text); }

.form-control{
    height:48px;
    border-radius:var(--radius-sm);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:hover{ border-color:#cbd3e6; }
.form-control:focus{
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px var(--color-primary-soft);
}

.input-group-text{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    color:var(--color-muted);
    transition:color .15s ease, border-color .15s ease;
}
.input-group:focus-within .input-group-text{
    color:var(--color-primary);
    border-color:var(--color-primary);
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
@media (max-width:430px){
    .form-row{ grid-template-columns:1fr; }
}

.field-hint{
    display:block;
    margin-top:6px;
    font-size:13px;
    min-height:18px;
}
.field-hint.text-success{ color:var(--color-success) !important; }
.field-hint.text-danger{ color:var(--color-danger) !important; }

/* =========================================================
   Auth Layout (Login / Register)
========================================================= */
.auth-page{ background:var(--color-bg); }

.auth-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
}
@media (max-width:1024px){
    .auth-shell{ grid-template-columns:1fr; }
    .auth-aside{ display:none; }
}

.auth-aside{
    background:linear-gradient(135deg, var(--color-primary) 0%, #312e81 100%);
    color:#fff;
    display:flex;
    align-items:center;
    padding:60px;
    position:relative;
    overflow:hidden;
}
/* Two soft, oversized glows purely for depth — clipped by overflow:hidden
   so they never affect layout or scroll. */
.auth-aside::before,
.auth-aside::after{
    content:'';
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);
    pointer-events:none;
}
.auth-aside::before{ width:480px; height:480px; top:-160px; right:-140px; }
.auth-aside::after{ width:360px; height:360px; bottom:-140px; left:-100px; }
.auth-aside-inner{ max-width:420px; position:relative; z-index:1; }
.auth-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    font-size:20px;
    margin-bottom:48px;
}
.auth-brand i{
    width:36px; height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.14);
    font-size:18px;
}
.auth-aside h2{ font-size:32px; font-weight:800; line-height:1.3; margin-bottom:16px; }
.auth-aside p{ opacity:.85; font-size:16px; line-height:1.6; }

.auth-main{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
}

.auth-card{
    width:100%;
    max-width:420px;
    background:var(--color-surface);
    border-radius:var(--radius-lg);
    border:1px solid var(--color-border);
    padding:40px;
    box-shadow:var(--shadow-md);
    position:relative;
    overflow:hidden;
}
/* Thin gradient accent along the top edge — reinforces brand color
   without adding another heavy visual element. */
.auth-card::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:var(--gradient-primary);
}
.auth-card-wide{ max-width:520px; }

.auth-card-header{ margin-bottom:28px; }
.auth-card-header h1{ font-size:26px; font-weight:800; margin-bottom:6px; }

.auth-switch{
    text-align:center;
    margin-top:24px;
    font-size:14px;
    color:var(--color-muted);
}
.auth-switch a{ font-weight:600; text-decoration:none; }

.password-strength .progress{ border-radius:99px; background:var(--color-border); }
.password-strength .progress-bar{ transition:width .25s ease, background-color .25s ease; }

/* =========================================================
   Alerts (kept for non-toast inline messages, e.g. server errors above a form)
========================================================= */
.alert{ border-radius:var(--radius-sm); border:none; font-size:14px; }

/* =========================================================
   Cross-app polish
========================================================= */
/* One consistent keyboard-focus treatment for anything that doesn't
   already define its own (buttons, links, nav items, form controls). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
}

.badge{ font-weight:700; letter-spacing:.02em; padding:.4em .7em; border-radius:99px; }