/* ==========================================================
   iRawda Inventory System — Gen-Z Theme (Purple/Pink/Lime)
   Central theme file: every page pulls from here, so changing
   tokens here re-themes the WHOLE system at once.
   ========================================================== */

:root{
    /* surfaces */
    --bg-deep:#0e0a1a;
    --bg-panel:#171126;
    --bg-card:#1e1730;
    --surface:#251c3a;
    --paper:#1e1730;

    /* accents */
    --purple:#8b5cf6;
    --purple-2:#a855f7;
    --pink:#f0399a;
    --lime:#ccff33;
    --cyan:#22e5d0;

    /* text */
    --text:#f6f3ff;
    --ink:#f6f3ff;
    --muted:#a89cc9;

    /* status */
    --success:#33e39b;
    --success-bg:rgba(51,227,155,.12);
    --danger:#ff4d6d;
    --danger-bg:rgba(255,77,109,.12);
    --warning:#ffb020;
    --warning-bg:rgba(255,176,32,.12);
    --info:#22c1e5;
    --info-bg:rgba(34,193,229,.12);

    /* legacy alias kept so existing inline var(--gold-500) calls stay on-theme */
    --gold-500:#ffb020;
    --gold-400:#ffcf5c;
    --gold-300:#ffe08a;

    --grad-main: linear-gradient(135deg, var(--purple) 0%, var(--pink) 60%, var(--lime) 120%);
    --grad-btn: linear-gradient(135deg, var(--purple-2), var(--pink));

    --radius:16px;
    --glow-purple: 0 0 0 1px rgba(168,85,247,.35), 0 10px 30px rgba(168,85,247,.22);
    --glow-pink: 0 0 0 1px rgba(240,57,154,.35), 0 8px 22px rgba(240,57,154,.28);
    --shadow-card:0 4px 18px rgba(0,0,0,.25);
    --shadow-soft:0 10px 30px rgba(0,0,0,.3);
}

*{ box-sizing:border-box; }

body{
    background:var(--bg-deep);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    position:relative;
}

/* ambient glow blobs = signature Gen-Z touch, sits behind everything */
body::before, body::after{
    content:""; position:fixed; z-index:0; border-radius:50%;
    filter:blur(100px); opacity:.28; pointer-events:none;
}
body::before{ width:460px;height:460px; background:var(--purple); top:-140px; left:-110px; }
body::after{ width:420px;height:420px; background:var(--pink); bottom:-160px; right:-90px; }

h1,h2,h3,h4,h5,h6, .brand-font, .font-pop{
    font-family:'Poppins', Arial, sans-serif;
    font-weight:800;
    color:var(--text);
    letter-spacing:.2px;
}
strong, b, label{ font-family:'Poppins', Arial, sans-serif; font-weight:700; }

a{ color: var(--lime); }
a:hover{ color: var(--pink); }

hr{ border-top:1px solid rgba(168,85,247,.25); }

/* ---------------- Layout ---------------- */
.app-shell{ display:flex; min-height:100vh; position:relative; z-index:1; }

.sidebar{
    width:264px;
    min-width:264px;
    background:var(--bg-panel);
    color:var(--text);
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
    border-right:1px solid rgba(168,85,247,.25);
}

.sidebar-brand{
    padding:24px 20px 20px;
    border-bottom:1px solid rgba(168,85,247,.25);
    display:flex; align-items:center; gap:12px;
}
.sidebar-brand .logo{ display:flex; align-items:center; gap:12px; }
.sidebar-brand .brand-text .name{
    font-family:'Poppins',sans-serif; font-size:18px; font-weight:800; line-height:1.15;
    background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sidebar-brand .tagline{
    font-size:10px; color:var(--muted); letter-spacing:1.6px; text-transform:uppercase; margin-top:2px;
}

/* iRawda logo mark */
.irawda-logo{
    width:42px;height:42px;border-radius:12px;
    background:var(--grad-main);
    display:flex;align-items:center;justify-content:center;
    font-family:'Poppins',sans-serif;font-weight:900;font-size:16px;color:#140a23;
    box-shadow:var(--glow-purple);
    position:relative;flex-shrink:0;
}
.irawda-logo::after{
    content:"✦"; position:absolute; top:-6px; right:-6px; font-size:12px; color:var(--lime);
    text-shadow:0 0 8px var(--lime);
}
.irawda-logo.lg{ width:68px;height:68px;border-radius:20px;font-size:26px; }

.sidebar-nav{ padding:16px 12px; flex:1; overflow-y:auto; }
.sidebar-nav .nav-section-label{
    font-family:'Poppins',sans-serif;
    font-size:10.5px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#6f6488;
    padding:14px 12px 6px;
    font-weight:700;
}
.sidebar-nav a{
    color:#cabfe6;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border-radius:12px;
    margin-bottom:4px;
    font-size:14.5px;
    font-weight:500;
    transition:.18s ease;
}
.sidebar-nav a i{ width:18px; text-align:center; color:#8577a8; transition:.18s ease; }
.sidebar-nav a:hover{ background:rgba(168,85,247,.15); color:#fff; }
.sidebar-nav a:hover i{ color:var(--lime); }
.sidebar-nav a.active{
    background:var(--grad-btn);
    color:#fff;
    box-shadow:var(--glow-pink);
    font-family:'Poppins',sans-serif; font-weight:700;
}
.sidebar-nav a.active i{ color:#fff; }

.sidebar-footer{
    padding:16px 20px 22px;
    border-top:1px solid rgba(168,85,247,.2);
}
.sidebar-footer a{
    color:var(--danger);
    text-decoration:none;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}
.sidebar-footer a:hover{ color:#fff; }

.main-content{ flex:1; padding:32px 36px; min-width:0; position:relative; z-index:1; }

/* ---------------- Topbar ---------------- */
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
    flex-wrap:wrap;
    gap:12px;
}
.user-chip{
    background:var(--bg-card);
    border:1px solid rgba(168,85,247,.4);
    border-radius:999px;
    padding:9px 18px;
    font-size:13.5px;
    font-weight:600;
    color:var(--text);
    display:inline-flex;
    align-items:center;
    gap:9px;
}
.user-chip .role-badge{
    background:var(--grad-btn);
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:10.5px;
    font-weight:700;
    padding:3px 10px;
    border-radius:999px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

/* ---------------- Cards ---------------- */
.card{
    border:1px solid rgba(168,85,247,.25);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    background:var(--bg-card);
    color:var(--text);
}
.card-header{
    background:transparent;
    border-bottom:1px solid rgba(168,85,247,.25);
    border-radius:var(--radius) var(--radius) 0 0 !important;
    font-family:'Poppins',sans-serif;
    font-weight:700;
    color:var(--text);
}

.stat-card{
    border-radius:var(--radius);
    padding:20px 22px;
    box-shadow:var(--shadow-card);
    position:relative;
    overflow:hidden;
    background:var(--bg-card);
    border:1px solid rgba(168,85,247,.3);
    border-left:4px solid var(--purple-2);
}
.stat-card .stat-label{ font-family:'Poppins',sans-serif; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; font-weight:700; }
.stat-card .stat-value{ font-family:'Poppins',sans-serif; font-size:28px; font-weight:800; color:var(--text); margin-top:6px; }
.stat-card .stat-icon{ position:absolute; right:16px; top:16px; font-size:26px; color:var(--pink); opacity:.6; }

.stat-card.dark{
    background:var(--grad-main);
    border:none;
}
.stat-card.dark .stat-label{ color:rgba(20,10,35,.75); }
.stat-card.dark .stat-value{ color:#140a23; }
.stat-card.dark .stat-icon{ color:rgba(20,10,35,.5); }

/* ---------------- Buttons (bigger, bolder, easier to spot) ---------------- */
.btn{
    border-radius:12px;
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:14.5px;
    padding:10px 20px;
    border:none;
    transition:.15s ease;
    letter-spacing:.2px;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-sm{ padding:7px 14px; font-size:13px; border-radius:9px; }

.btn-primary{
    background:var(--grad-btn);
    color:#fff;
    box-shadow:var(--glow-pink);
}
.btn-primary:hover{ filter:brightness(1.1); color:#fff; }

.btn-gold, .btn-warning{
    background:var(--lime);
    color:#12081f !important;
    box-shadow:0 6px 18px rgba(204,255,51,.3);
}
.btn-gold:hover, .btn-warning:hover{ filter:brightness(1.05); color:#12081f !important; }

.btn-success{ background:var(--success); color:#0a2318; box-shadow:0 6px 18px rgba(51,227,155,.3); }
.btn-success:hover{ color:#0a2318; filter:brightness(1.05); }

.btn-danger{ background:var(--danger); color:#fff; box-shadow:0 6px 18px rgba(255,77,109,.3); }
.btn-danger:hover{ color:#fff; filter:brightness(1.08); }

.btn-secondary{ background:#4a4166; color:#fff; }
.btn-secondary:hover{ background:#5c5280; color:#fff; }

.btn-outline-primary{
    color:var(--text);
    border:1.5px solid var(--purple-2);
    background:transparent;
}
.btn-outline-primary:hover{ background:rgba(168,85,247,.18); border-color:var(--purple-2); color:#fff; }
.btn-outline-primary.active, .btn-outline-primary:focus{ background:var(--grad-btn); border-color:transparent; color:#fff; }
.btn-outline-secondary{ color:var(--text); border:1.5px solid rgba(168,85,247,.4); background:transparent; }
.btn-outline-secondary:hover{ background:rgba(168,85,247,.15); color:#fff; }

/* ---------------- Tables ---------------- */
.table{ color:var(--text); }
.table thead th{
    background:var(--surface);
    color:var(--lime);
    font-family:'Poppins',sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-weight:700;
    border:none;
    vertical-align:middle;
}
.table-bordered{ border-color:rgba(168,85,247,.25); }
.table td{ vertical-align:middle; font-size:14px; border-color:rgba(168,85,247,.15); }
.table-hover tbody tr:hover{ background:rgba(168,85,247,.12); }
tr.low-stock, .low-stock{ background-color:rgba(255,77,109,.16) !important; }
.table-light{ background:var(--surface); color:var(--text); }
.table-danger{ --bs-table-bg:rgba(255,77,109,.14); color:var(--text); }
.table-warning{ --bs-table-bg:rgba(255,176,32,.14); color:var(--text); }
.table-info{ --bs-table-bg:rgba(34,193,229,.14); color:var(--text); }
.table-success{ --bs-table-bg:rgba(51,227,155,.14); color:var(--text); }

/* ---------------- Badges ---------------- */
.badge{ font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:.2px; padding:6px 12px; border-radius:999px; font-size:11.5px; }
.bg-success{ background:var(--success) !important; color:#0a2318 !important; }
.bg-danger{ background:var(--danger) !important; color:#fff !important; }
.bg-warning{ background:var(--lime) !important; color:#12081f !important; }
.bg-info{ background:var(--info) !important; color:#052a33 !important; }
.bg-primary{ background:var(--grad-btn) !important; color:#fff !important; }
.bg-secondary{ background:#5c5280 !important; color:#fff !important; }

/* ---------------- Forms ---------------- */
label{ font-weight:700; font-family:'Poppins',sans-serif; font-size:13px; color:var(--lime); margin-bottom:6px; display:inline-block; letter-spacing:.3px; }
.form-control, .form-select{
    border-radius:10px;
    border:1px solid rgba(168,85,247,.4);
    padding:9px 13px;
    font-size:14px;
    background:var(--surface);
    color:var(--text);
}
.form-control::placeholder{ color:#6f6488; }
.form-control:focus, .form-select:focus{
    background:var(--surface); color:var(--text);
    border-color:var(--pink);
    box-shadow:0 0 0 .2rem rgba(240,57,154,.25);
}
.form-select option{ background:var(--surface); color:var(--text); }
.input-group-text{ background:var(--surface); border:1px solid rgba(168,85,247,.4); color:var(--muted); }

/* ---------------- Alerts ---------------- */
.alert{ border-radius:14px; border:1px solid; font-weight:500; }
.alert-success{ background:var(--success-bg); color:#8bf5cf; border-color:rgba(51,227,155,.4); }
.alert-danger{ background:var(--danger-bg); color:#ffb3c1; border-color:rgba(255,77,109,.4); }
.alert-warning{ background:var(--warning-bg); color:#ffd98a; border-color:rgba(255,176,32,.4); }
.alert-info{ background:var(--info-bg); color:#9fe6f7; border-color:rgba(34,193,229,.4); }

/* ---------------- Login page ---------------- */
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    position:relative; z-index:1;
}
.login-card{
    background:var(--bg-panel);
    border-radius:26px;
    box-shadow:var(--glow-purple), 0 30px 70px rgba(0,0,0,.5);
    padding:44px 40px;
    width:100%;
    max-width:420px;
    border:1px solid rgba(168,85,247,.35);
}
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:6px; }
.login-name{ font-size:26px; }
.grad-text{ background:var(--grad-main); -webkit-background-clip:text; background-clip:text; color:transparent; }
.login-sub{ text-align:center; color:var(--muted); font-size:12.5px; margin-bottom:26px; letter-spacing:1.4px; text-transform:uppercase; }
.btn-login{
    background:var(--grad-btn);
    color:#fff;
    border:none;
    font-family:'Poppins',sans-serif;
    font-weight:800;
    padding:13px;
    border-radius:14px;
    box-shadow:var(--glow-pink);
    font-size:15px;
}
.btn-login:hover{ filter:brightness(1.1); color:#fff; }

/* ---------------- Misc ---------------- */
.shadow-soft{ box-shadow:var(--shadow-soft) !important; }
.text-gold{ color:var(--lime) !important; }
.text-muted{ color:var(--muted) !important; }
.risk-chip{ font-size:11px; padding:3px 10px; border-radius:999px; font-weight:700; margin:1px; display:inline-block; background:var(--surface); border:1px solid rgba(168,85,247,.4); color:var(--text); }
.bg-light{ background:var(--surface) !important; color:var(--text) !important; }
.border{ border-color:rgba(168,85,247,.3) !important; }

.nav-tabs{ border-bottom:1px solid rgba(168,85,247,.3); }
.nav-tabs .nav-link{ color:var(--muted); font-family:'Poppins',sans-serif; font-weight:600; border:none; border-radius:10px 10px 0 0; }
.nav-tabs .nav-link.active{ background:var(--bg-card); color:var(--lime); border:1px solid rgba(168,85,247,.3); border-bottom-color:var(--bg-card); }

.modal-content{ background:var(--bg-panel); color:var(--text); border:1px solid rgba(168,85,247,.35); border-radius:var(--radius); }
.modal-header, .modal-footer{ border-color:rgba(168,85,247,.25); }
.btn-close{ filter:invert(1) grayscale(1); }

@media (max-width: 900px){
    .sidebar{ position:fixed; left:-264px; z-index:1000; transition:.25s; }
    .sidebar.open{ left:0; }
    .main-content{ padding:20px 16px; }
}