/* ===================================================================
   TechNova IT Portal — assets/css/style.css
   Shared: variables, reset, utilities, components
   =================================================================== */

/* ── CSS VARIABLES ──────────────────────────────────────────── */
/* :root {
  --primary:        #1B6B2F;
  --primary-dark:   #0F4A20;
  --primary-light:  #28A745;
  --accent:         #52C96E;
  --accent-light:   #A8E6B5;
  --accent-muted:   #D4EDDA;
  --success:        #20C997;
  --warning:        #FFC107;
  --danger:         #DC3545;
  --info:           #17A2B8;
  --purple:         #8B5CF6;
  --white:          #FFFFFF;
  --body-bg:        #F0FBF3;
  --front-bg:       #F8FFF9;
  --card-bg:        #FFFFFF;
  --sidebar-bg:     #0D3B1E;
  --sidebar-text:   #C8F0D0;
  --text-dark:      #0D3B1E;
  --text-muted:     #6B8F72;
  --border:         rgba(27,107,47,0.10);
  --border-light:   rgba(27,107,47,0.06);
  --shadow:         0 2px 20px rgba(27,107,47,0.08);
  --shadow-md:      0 8px 32px rgba(27,107,47,0.12);
  --shadow-lg:      0 20px 60px rgba(27,107,47,0.14);
  --radius:         16px;
  --radius-sm:      10px;
  --sidebar-w:      265px;
  --header-h:       70px;
  --transition:     0.25s ease;
  --font:           'DM Sans', sans-serif;
  --font-display:   'Syne', sans-serif;
  --nav-h:          72px;
} */

:root {
  /* Core Brand Colors */
  --primary:        #0062FF; /* Tech Blue */
  --primary-dark:   #0047BA;
  --primary-light:  #3385FF;
  --accent:         #00D4FF; /* Cyan / Data vibe */
  --accent-light:   #E0F7FF;
  --accent-muted:   #F0F4F8;
  
  /* Status Colors */
  --success:        #10B981; /* Emerald */
  --warning:        #F59E0B; /* Amber */
  --danger:         #EF4444; /* Rose/Red */
  --info:           #3B82F6; 
  --purple:         #6366F1; /* Indigo - great for IT/AI features */
  
  /* Neutral Colors & Surfaces */
  --white:          #FFFFFF;
  --body-bg:        #F4F7FA; /* Cool light gray */
  --front-bg:       #F9FBFF;
  --card-bg:        #FFFFFF;
  --sidebar-bg:     #0F172A; /* Slate 900 - very "Dev" style */
  --sidebar-text:   #94A3B8;
  --text-dark:      #1E293B; /* Slate 800 */
  --text-muted:     #64748B; /* Slate 500 */
  
  /* Borders & Shadows */
  --border:         rgba(0, 98, 255, 0.08);
  --border-light:   rgba(0, 98, 255, 0.04);
  --shadow:         0 2px 20px rgba(15, 23, 42, 0.05);
  --shadow-md:      0 8px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg:      0 20px 60px rgba(15, 23, 42, 0.12);
  
  /* Layout & Typography */
  --radius:         12px; /* Slightly sharper for tech feel */
  --radius-sm:      8px;
  --sidebar-w:      265px;
  --header-h:       70px;
  --transition:     0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --font:           'Inter', sans-serif; /* Standard IT font */
  --font-display:   'JetBrains Mono', monospace; /* Monospaced for tech feel */
  --nav-h:          72px;
}


/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); color:var(--text-dark); line-height:1.55; font-size:14px; }
img  { max-width:100%; height:auto; display:block; }
a    { text-decoration:none; color:inherit; }
button,input,select,textarea { font-family:var(--font); }

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.badge-success { background: rgba(40,167,69,.12); color: var(--primary); }
.badge-warning { background: rgba(255,193,7,.14); color: #856404; }
.badge-danger  { background: rgba(220,53,69,.12); color: var(--danger); }
.badge-info    { background: rgba(23,162,184,.12); color: var(--info); }
.badge-muted   { background: rgba(107,143,114,.12); color: var(--text-muted); }
.badge-purple  { background: rgba(139,92,246,.12); color: var(--purple); }
.badge-primary { background: var(--accent-muted); color: var(--primary); }

/* ── CARDS ───────────────────────────────────────────────────── */
.card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.card-header h3 { font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.card-header p  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.card-body  { padding: 20px; }
.card-footer{ padding: 14px 20px; border-top: 1px solid var(--border); }

/* ── STAT CARDS ──────────────────────────────────────────────── */
.stat-card {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 20px; border: 1px solid var(--border);
  box-shadow: var(--shadow); transition: all .3s; cursor: pointer;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card .icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.stat-card .val { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.stat-card .lbl { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.stat-card .trend { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.trend-up   { background: rgba(40,167,69,.1); color: var(--primary-light); }
.trend-down { background: rgba(220,53,69,.1); color: var(--danger); }

/* Stat colours */
.stat-green  { border-top: 3px solid var(--primary-light); }
.stat-blue   { border-top: 3px solid var(--info); }
.stat-orange { border-top: 3px solid var(--warning); }
.stat-red    { border-top: 3px solid var(--danger); }
.stat-teal   { border-top: 3px solid var(--success); }
.stat-purple { border-top: 3px solid var(--purple); }
.stat-green  .icon { background: rgba(40,167,69,.1);   color: var(--primary-light); }
.stat-blue   .icon { background: rgba(23,162,184,.1);  color: var(--info); }
.stat-orange .icon { background: rgba(255,193,7,.12);  color: var(--warning); }
.stat-red    .icon { background: rgba(220,53,69,.1);   color: var(--danger); }
.stat-teal   .icon { background: rgba(32,201,151,.1);  color: var(--success); }
.stat-purple .icon { background: rgba(139,92,246,.1);  color: var(--purple); }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; cursor:pointer; border:none;
  transition:all var(--transition); white-space:nowrap; text-decoration:none;
}
.btn-primary   { background:linear-gradient(135deg,var(--primary-light),var(--accent)); color:#fff; box-shadow:0 4px 14px rgba(40,167,69,.25); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(40,167,69,.35); color:#fff; }
.btn-outline   { background:#fff; border:1px solid var(--border); color:var(--text-dark); }
.btn-outline:hover { background:var(--body-bg); border-color:var(--accent); color:var(--primary); }
.btn-danger    { background:rgba(220,53,69,.1); border:1px solid rgba(220,53,69,.2); color:var(--danger); }
.btn-danger:hover  { background:var(--danger); color:#fff; }
.btn-success   { background:rgba(32,201,151,.1); border:1px solid rgba(32,201,151,.2); color:var(--success); }
.btn-success:hover { background:var(--success); color:#fff; }
.btn-warning   { background:rgba(255,193,7,.12); border:1px solid rgba(255,193,7,.3); color:#856404; }
.btn-sm  { padding:6px 12px; font-size:12px; border-radius:8px; }
.btn-lg  { padding:13px 26px; font-size:15px; }
.btn-ico { padding:8px 9px; }
.btn-block { width:100%; justify-content:center; }

/* ── BADGES ──────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-success { background:rgba(40,167,69,.12); color:var(--primary); }
.badge-warning { background:rgba(255,193,7,.15); color:#856404; }
.badge-danger  { background:rgba(220,53,69,.12); color:var(--danger); }
.badge-info    { background:rgba(23,162,184,.12); color:var(--info); }
.badge-muted   { background:rgba(107,143,114,.12); color:var(--text-muted); }
.badge-purple  { background:rgba(139,92,246,.12); color:var(--purple); }
.badge-primary { background:var(--accent-muted); color:var(--primary); }
.badge-dark    { background:rgba(13,59,30,.1); color:var(--text-dark); }

/* ── CARDS ───────────────────────────────────────────────────── */
.card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--border); }
.card-header h3 { font-family:var(--font-display); font-size:15px; font-weight:700; }
.card-header p  { font-size:12px; color:var(--text-muted); margin-top:2px; }
.card-body   { padding:20px; }
.card-footer { padding:13px 20px; border-top:1px solid var(--border); }

/* ── TABLES ──────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th { background:var(--body-bg); padding:11px 14px; text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--text-muted); white-space:nowrap; border-bottom:1px solid var(--border); }
tbody td { padding:12px 14px; border-bottom:1px solid rgba(27,107,47,.05); font-size:13px; vertical-align:middle; }
tbody tr:hover { background:rgba(240,251,243,.6); }
tbody tr:last-child td { border-bottom:none; }
.td-actions { display:flex; gap:5px; }

/* ── AVATAR CELL ─────────────────────────────────────────────── */
.av-cell { display:flex; align-items:center; gap:10px; }
.av      { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--primary)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; flex-shrink:0; overflow:hidden; }
.av img  { width:100%; height:100%; object-fit:cover; }
.av-name { font-weight:600; font-size:13px; }
.av-sub  { font-size:11.5px; color:var(--text-muted); }

/* ── FORM CONTROLS ───────────────────────────────────────────── */
.form-group  { margin-bottom:16px; }
.form-label  { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin-bottom:6px; }
.form-control { width:100%; padding:10px 13px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; color:var(--text-dark); outline:none; transition:all var(--transition); background:#fff; }
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(82,201,110,.1); }
.form-control.is-invalid { border-color:var(--danger); }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.invalid-fb { font-size:11.5px; color:var(--danger); margin-top:4px; display:block; }

/* ── ALERTS ──────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:11px; margin-bottom:16px; display:flex; align-items:flex-start; gap:10px; font-size:13.5px; }
.alert i { font-size:15px; flex-shrink:0; margin-top:1px; }
.alert-success { background:rgba(32,201,151,.1); border:1px solid rgba(32,201,151,.25); color:var(--success); }
.alert-danger  { background:rgba(220,53,69,.1);  border:1px solid rgba(220,53,69,.25);  color:var(--danger); }
.alert-warning { background:rgba(255,193,7,.12); border:1px solid rgba(255,193,7,.3);   color:#856404; }
.alert-info    { background:rgba(23,162,184,.1); border:1px solid rgba(23,162,184,.25); color:var(--info); }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9000; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }
.modal-box { background:#fff; border-radius:20px; width:100%; max-width:560px; box-shadow:0 30px 80px rgba(0,0,0,.2); animation:modalIn .25s ease; overflow:hidden; }
.modal-box.modal-lg { max-width:720px; }
@keyframes modalIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
.modal-header  { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; }
.modal-header h3 { font-family:var(--font-display); font-size:17px; font-weight:700; }
.modal-close   { background:rgba(255,255,255,.18); border:none; color:#fff; width:30px; height:30px; border-radius:7px; cursor:pointer; font-size:15px; transition:background .2s; }
.modal-close:hover { background:rgba(255,255,255,.3); }
.modal-body    { padding:24px; max-height:75vh; overflow-y:auto; }
.modal-footer  { padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* ── TABS ────────────────────────────────────────────────────── */
.tab-nav { display:flex; gap:4px; background:#fff; border-radius:12px; padding:5px; border:1px solid var(--border); margin-bottom:22px; flex-wrap:wrap; }
.tab-btn { padding:8px 18px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; background:none; border:none; color:var(--text-muted); transition:all .2s; }
.tab-btn.active { background:linear-gradient(135deg,var(--primary-light),var(--accent)); color:#fff; box-shadow:0 3px 10px rgba(40,167,69,.25); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── PAGINATION ──────────────────────────────────────────────── */
.pagination { display:flex; gap:5px; margin-top:24px; justify-content:center; flex-wrap:wrap; }
.page-item a, .page-item span { display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1.5px solid var(--border); border-radius:9px; font-size:13px; font-weight:600; color:var(--text-dark); background:#fff; transition:all .2s; }
.page-item a:hover { background:var(--accent-muted); border-color:var(--accent); color:var(--primary); }
.page-item.active a { background:var(--primary-light); border-color:var(--primary-light); color:#fff; }
.page-item.disabled span { opacity:.4; pointer-events:none; }

/* ── PROGRESS BAR ────────────────────────────────────────────── */
.prog-wrap { display:flex; align-items:center; gap:8px; }
.prog-bar  { flex:1; height:7px; background:rgba(27,107,47,.08); border-radius:4px; overflow:hidden; }
.prog-fill { height:100%; border-radius:4px; transition:width .6s ease; }
.prog-val  { font-size:11.5px; font-weight:700; min-width:34px; text-align:right; color:var(--text-muted); }

/* ── LAYOUT HELPERS ──────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.flex-center  { display:flex; align-items:center; gap:10px; }

/* ── SPACING ─────────────────────────────────────────────────── */
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.p-0{padding:0}

/* ── TEXT HELPERS ────────────────────────────────────────────── */
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--text-muted)}.text-primary{color:var(--primary)}.text-danger{color:var(--danger)}.text-success{color:var(--success)}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-11{font-size:11px}
.font-display{font-family:var(--font-display)}

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; gap:14px; flex-wrap:wrap; }
.page-header h1 { font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.5px; }
.page-header p  { color:var(--text-muted); font-size:13px; margin-top:2px; }
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); margin-top:4px; }
.breadcrumb a { color:var(--primary); }
.breadcrumb .sep { color:rgba(27,107,47,.25); }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state { text-align:center; padding:50px 20px; }
.empty-state i { font-size:44px; color:rgba(27,107,47,.15); margin-bottom:14px; display:block; }
.empty-state h3 { font-family:var(--font-display); font-size:17px; font-weight:700; margin-bottom:7px; }
.empty-state p  { font-size:13.5px; color:var(--text-muted); }

/* ── SEARCH BAR ──────────────────────────────────────────────── */
.search-wrap { position:relative; }
.search-wrap input  { padding-left:38px; }
.search-wrap .s-ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:12px; pointer-events:none; }

/* ── STAT CARD ───────────────────────────────────────────────── */
.stat-card { background:var(--card-bg); border-radius:var(--radius); padding:20px; border:1px solid var(--border); box-shadow:var(--shadow); transition:all .3s; cursor:default; }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-card .s-icon { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.stat-card .s-val  { font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1; }
.stat-card .s-lbl  { font-size:12.5px; color:var(--text-muted); margin-top:4px; }
.stat-card .s-trend { font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; }
.s-trend-up   { background:rgba(40,167,69,.1); color:var(--primary-light); }
.s-trend-down { background:rgba(220,53,69,.1); color:var(--danger); }
/* Stat color themes */
.stat-green  { border-top:3px solid var(--primary-light); }
.stat-blue   { border-top:3px solid var(--info); }
.stat-orange { border-top:3px solid var(--warning); }
.stat-red    { border-top:3px solid var(--danger); }
.stat-teal   { border-top:3px solid var(--success); }
.stat-purple { border-top:3px solid var(--purple); }
.stat-green  .s-icon { background:rgba(40,167,69,.1);  color:var(--primary-light); }
.stat-blue   .s-icon { background:rgba(23,162,184,.1); color:var(--info); }
.stat-orange .s-icon { background:rgba(255,193,7,.12); color:#856404; }
.stat-red    .s-icon { background:rgba(220,53,69,.1);  color:var(--danger); }
.stat-teal   .s-icon { background:rgba(32,201,151,.1); color:var(--success); }
.stat-purple .s-icon { background:rgba(139,92,246,.1); color:var(--purple); }

/* ── GRID LAYOUTS ────────────────────────────────────────────── */
.stats-row-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; margin-bottom:24px; }
.chart-row   { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:22px; }
.widget-row  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:22px; }

/* ── RESPONSIVE GRID FALLBACKS ───────────────────────────────── */
@media(max-width:1200px) { .chart-row { grid-template-columns:1fr; } .widget-row { grid-template-columns:1fr 1fr; } }
@media(max-width:900px)  { .grid-3, .form-row-3 { grid-template-columns:1fr 1fr; } .widget-row { grid-template-columns:1fr; } }
@media(max-width:640px)  {
  .grid-2,.grid-3,.grid-4,.form-row-2,.form-row-3 { grid-template-columns:1fr; }
  .page-header { flex-direction:column; }
  .page-actions { width:100%; }
  .stats-row-4 { grid-template-columns:1fr 1fr; }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print { .no-print { display:none!important; } }