/* ═══ MSA ADMIN DASHBOARD — Clean Admin Panel CSS ═══ */
:root{
  --bg:#f1f5f9; --card:#ffffff; --fg:#0f172a; --fg2:#334155; --muted:#64748b;
  --border:#e2e8f0; --accent:#4f46e5; --accent-h:#4338ca; --accent-l:#eef2ff;
  --success:#16a34a; --danger:#dc2626; --warn:#d97706; --info:#0284c7;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --radius:10px; --radius-sm:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ═══ LOGIN ═══ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#4338ca 100%);position:relative;overflow:hidden}
.login-wrap::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;border-radius:50%;
  background:rgba(255,255,255,.05);pointer-events:none}
.login-wrap::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;border-radius:50%;
  background:rgba(255,255,255,.04);pointer-events:none}
.login-card{background:#fff;border-radius:16px;padding:2.5rem;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative;z-index:1}
.login-logo{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem}
.login-logo i{width:44px;height:44px;background:var(--accent);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.login-title{font-size:1.15rem;font-weight:700;color:var(--fg)}
.login-sub{font-size:.75rem;color:var(--muted)}
.login-h2{font-size:1.4rem;font-weight:700;margin-bottom:.25rem}
.login-p{color:var(--muted);font-size:.85rem;margin-bottom:1.5rem}
.login-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:.6rem .8rem;border-radius:var(--radius-sm);font-size:.8rem;margin-top:1rem}
.login-footer{text-align:center;margin-top:1.5rem;font-size:.7rem;color:var(--muted)}

/* ═══ FORMS ═══ */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--fg2);margin-bottom:.35rem}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.85rem;font-family:inherit;background:#fff;color:var(--fg);transition:border .15s,box-shadow .15s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l)}
.form-group textarea{resize:vertical;min-height:80px}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border:1px solid var(--border);
  background:#fff;color:var(--fg2);border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;transition:all .15s;white-space:nowrap}
.btn:hover{background:#f8fafc;border-color:#cbd5e1}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#b91c1c}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{background:#15803d}
.btn-warn{background:var(--warn);color:#fff;border-color:var(--warn)}
.btn-sm{padding:.35rem .65rem;font-size:.75rem}
.btn-block{width:100%;justify-content:center;padding:.7rem}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* ═══ APP SHELL ═══ */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:240px;background:#1e1b4b;color:#cbd5e1;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .25s}
.sidebar.collapsed{transform:translateX(-240px)}
.sidebar-head{padding:1.1rem 1.2rem;display:flex;align-items:center;gap:.6rem;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-head i{width:32px;height:32px;background:var(--accent);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.sidebar-title{font-weight:700;font-size:1rem;color:#fff}
.sidebar-nav{flex:1;overflow-y:auto;padding:.8rem 0}
.nav-section{padding:.6rem 1.2rem .3rem;font-size:.65rem;font-weight:700;color:#64748b;letter-spacing:.08em}
.nav-item{display:flex;align-items:center;gap:.7rem;padding:.6rem 1.2rem;color:#cbd5e1;font-size:.83rem;font-weight:500;transition:all .12s;border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:rgba(79,70,229,.25);color:#fff;border-left-color:var(--accent)}
.nav-item i{width:18px;text-align:center;font-size:.9rem}
.sidebar-foot{padding:.8rem 1.2rem;border-top:1px solid rgba(255,255,255,.08)}
.btn-logout{width:100%;padding:.55rem;background:transparent;color:#cbd5e1;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;transition:all .15s}
.btn-logout:hover{background:rgba(220,38,38,.2);color:#fff;border-color:var(--danger)}

.main-area{flex:1;margin-left:240px;display:flex;flex-direction:column;min-height:100vh;transition:margin .25s}
.main-area.expanded{margin-left:0}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:.7rem 1.2rem;display:flex;align-items:center;gap:.8rem;position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.icon-btn{background:none;border:none;width:36px;height:36px;border-radius:var(--radius-sm);color:var(--fg2);font-size:1rem;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#f1f5f9}
.topbar-title{font-size:1.1rem;font-weight:700;flex:1}
.topbar-right{display:flex;align-items:center;gap:.6rem}
.user-chip{display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;background:#f1f5f9;border-radius:20px;font-size:.8rem;font-weight:600;color:var(--fg2)}
.user-chip i{color:var(--accent)}
.content{padding:1.5rem;flex:1}

/* ═══ DASHBOARD CARDS ═══ */
.page-head{margin-bottom:1.2rem}
.page-head h1{font-size:1.5rem;font-weight:700;color:var(--fg)}
.page-head p{color:var(--muted);font-size:.83rem;margin-top:.15rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.dash-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.dash-card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;margin-bottom:.8rem}
.dash-card h3{font-size:.95rem;font-weight:700;color:var(--fg);margin-bottom:.25rem}
.dash-card p{font-size:.75rem;color:var(--muted);line-height:1.4}
.dash-card .arrow{position:absolute;top:1.2rem;right:1.2rem;color:var(--muted);font-size:.8rem;transition:transform .2s}
.dash-card:hover .arrow{transform:translateX(3px);color:var(--accent)}
.bg-indigo{background:linear-gradient(135deg,#3730a3,#6366f1)}
.bg-teal{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.bg-amber{background:linear-gradient(135deg,#b45309,#f59e0b)}
.bg-green{background:linear-gradient(135deg,#15803d,#22c55e)}
.bg-purple{background:linear-gradient(135deg,#6b21a8,#a855f7)}
.bg-pink{background:linear-gradient(135deg,#9d174d,#ec4899)}
.bg-blue{background:linear-gradient(135deg,#1e40af,#3b82f6)}
.bg-slate{background:linear-gradient(135deg,#334155,#64748b)}

/* ═══ STATS ═══ */
.stats-row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.stat-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;flex:1;min-width:140px}
.stat-box .stat-label{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat-box .stat-value{font-size:1.6rem;font-weight:700;color:var(--fg);margin-top:.2rem}
.stat-box .stat-sub{font-size:.72rem;color:var(--muted);margin-top:.15rem}

/* ═══ PANEL / TABLE ═══ */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.2rem}
.panel-head{padding:1rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.panel-head h3{font-size:.95rem;font-weight:700;color:var(--fg)}
.panel-body{padding:1.2rem}
.panel-body.no-pad{padding:0}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
thead th{background:#f8fafc;padding:.7rem .9rem;text-align:left;font-weight:600;color:var(--fg2);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:.65rem .9rem;border-bottom:1px solid var(--border);color:var(--fg2);vertical-align:middle}
tbody tr:hover{background:#f8fafc}
tbody tr:last-child td{border-bottom:none}
.empty-state{text-align:center;padding:2rem;color:var(--muted);font-size:.85rem}
.empty-state i{font-size:1.8rem;display:block;margin-bottom:.5rem;opacity:.5}

/* ═══ BADGES ═══ */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border-radius:20px;font-size:.7rem;font-weight:600}
.badge-success{background:#dcfce7;color:#166534}
.badge-danger{background:#fee2e2;color:#991b1b}
.badge-warn{background:#fef3c7;color:#92400e}
.badge-info{background:#dbeafe;color:#1e40af}
.badge-muted{background:#f1f5f9;color:#64748b}

/* ═══ MODAL ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:var(--radius);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-head{padding:1rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-head h3{font-size:1rem;font-weight:700}
.modal-body{padding:1.2rem}
.modal-foot{padding:.8rem 1.2rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.5rem}
.modal-close{background:none;border:none;font-size:1.3rem;color:var(--muted);width:30px;height:30px;border-radius:6px}
.modal-close:hover{background:#f1f5f9;color:var(--fg)}

/* ═══ TOAST ═══ */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#1e293b;color:#fff;padding:.8rem 1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-md);z-index:2000;font-size:.83rem;font-weight:500;max-width:380px;display:flex;align-items:center;gap:.5rem;animation:slideUp .25s}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
.toast.warn{background:var(--warn)}
@keyframes slideUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

/* ═══ MISC ═══ */
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:1.5rem}
.mt-1{margin-top:1rem}
.text-muted{color:var(--muted)}
.text-sm{font-size:.78rem}
.text-xs{font-size:.7rem}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.spinner-dark{border:2px solid rgba(0,0,0,.1);border-top-color:var(--accent);color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{padding:2rem;text-align:center;color:var(--muted)}
.breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);margin-bottom:.6rem}
.breadcrumb a{cursor:pointer;color:var(--accent)}
.breadcrumb a:hover{text-decoration:underline}
.checkbox-row{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--fg2);margin-bottom:.3rem}
.checkbox-row input{width:15px;height:15px;accent-color:var(--accent)}
.code-block{background:#1e293b;color:#e2e8f0;padding:.8rem 1rem;border-radius:var(--radius-sm);font-family:'Courier New',monospace;font-size:.75rem;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.alert{padding:.8rem 1rem;border-radius:var(--radius-sm);font-size:.82rem;margin-bottom:1rem;display:flex;gap:.5rem;align-items:flex-start}
.alert-info{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.alert-warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.alert-danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .sidebar{transform:translateX(-240px)}
  .sidebar.show{transform:translateX(0)}
  .main-area{margin-left:0}
  .content{padding:1rem}
  .card-grid{grid-template-columns:1fr}
  .stats-row{flex-direction:column}
  .topbar-title{font-size:.95rem}
}

/* ═══ BREADCRUMB ═══ */
.topbar-breadcrumb{font-size:1rem;font-weight:600;color:var(--fg);flex:1;display:flex;align-items:center;gap:.5rem}
.topbar-breadcrumb .crumb-sep{color:var(--muted);font-size:.8rem}
.topbar-breadcrumb .crumb-parent{color:var(--muted);font-weight:500;cursor:pointer}
.topbar-breadcrumb .crumb-current{color:var(--fg);font-weight:700}

/* ═══ BACK BUTTON ═══ */
.btn-back{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;color:var(--fg2);cursor:pointer}
.btn-back:hover{background:#f8fafc;border-color:#cbd5e1}

/* ═══ CONFIG CARDS (gradient style like main app) ═══ */
.config-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}
.config-card{position:relative;overflow:hidden;border-radius:14px;padding:1rem;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);min-height:120px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;border:1px solid rgba(255,255,255,.15)}
.config-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.config-card::before{content:'';position:absolute;top:-22px;right:-22px;width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.config-card::after{content:'';position:absolute;bottom:-26px;left:-14px;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.config-card-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.config-card-icon{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);font-size:.85rem}
.config-card-arrow{font-size:.7rem;opacity:.55}
.config-card-title{position:relative;z-index:1;margin-top:.6rem;font-size:.85rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.config-card-sub{position:relative;z-index:1;font-size:.68rem;opacity:.78;margin-top:.15rem;line-height:1.35}
.config-card-foot{position:relative;z-index:1;display:flex;align-items:center;gap:.35rem;margin-top:.55rem;padding-top:.45rem;border-top:1px solid rgba(255,255,255,.15)}
.config-card-foot i{font-size:.35rem;opacity:.7}
.config-card-foot span{font-size:.65rem;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase}

/* gradient variants */
.grad-blue{background:linear-gradient(135deg,#1D4ED8 0%,#3B82F6 50%,#60A5FA 100%);box-shadow:0 4px 14px rgba(59,130,246,.22)}
.grad-blue:hover{box-shadow:0 10px 28px rgba(59,130,246,.38)}
.grad-indigo{background:linear-gradient(135deg,#3730A3 0%,#6366F1 50%,#818CF8 100%);box-shadow:0 4px 14px rgba(99,102,241,.22)}
.grad-indigo:hover{box-shadow:0 10px 28px rgba(99,102,241,.38)}
.grad-amber{background:linear-gradient(135deg,#92400E 0%,#F59E0B 50%,#FBBF24 100%);box-shadow:0 4px 14px rgba(245,158,11,.22)}
.grad-amber:hover{box-shadow:0 10px 28px rgba(245,158,11,.38)}
.grad-teal{background:linear-gradient(135deg,#0F766E 0%,#14B8A6 50%,#2DD4BF 100%);box-shadow:0 4px 14px rgba(20,184,166,.22)}
.grad-teal:hover{box-shadow:0 10px 28px rgba(20,184,166,.38)}
.grad-purple{background:linear-gradient(135deg,#3730A3 0%,#6366F1 50%,#818CF8 100%);box-shadow:0 4px 14px rgba(99,102,241,.22)}
.grad-red{background:linear-gradient(135deg,#7F1D1D 0%,#DC2626 50%,#F87171 100%);box-shadow:0 4px 14px rgba(220,38,38,.22)}
.grad-red:hover{box-shadow:0 10px 28px rgba(220,38,38,.38)}
.grad-pink{background:linear-gradient(135deg,#831843 0%,#EC4899 50%,#F9A8D4 100%);box-shadow:0 4px 14px rgba(236,72,153,.22)}
.grad-pink:hover{box-shadow:0 10px 28px rgba(236,72,153,.38)}
.grad-slate{background:linear-gradient(135deg,#1E293B 0%,#475569 50%,#94A3B8 100%);box-shadow:0 4px 14px rgba(71,85,105,.22)}
.grad-slate:hover{box-shadow:0 10px 28px rgba(71,85,105,.38)}

/* ═══ STATS BOX (gradient small) ═══ */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem;margin-bottom:1.2rem}
.stat-tile{background:var(--card);border-radius:12px;padding:1rem 1.1rem;position:relative;overflow:hidden;border:1px solid var(--border)}
.stat-tile .stat-deco{position:absolute;top:-6px;right:-6px;width:40px;height:40px;border-radius:50%}
.stat-tile .stat-label{font-size:.68rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4rem}
.stat-tile .stat-value{font-family:Arial,Helvetica,sans-serif;font-size:1.6rem;font-weight:700;line-height:1.1}
.stat-tile .stat-sub{font-size:.62rem;margin-top:.2rem;display:flex;align-items:center;gap:.2rem}

/* ═══ TABS ═══ */
.tabs-row{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;background:var(--card)}
.tab-btn{flex:1;padding:.7rem .5rem;font-size:.78rem;font-weight:600;border:none;background:var(--card);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;border-bottom:3px solid transparent}
.tab-btn:hover{background:#f8fafc;color:var(--fg)}
.tab-btn.active{background:var(--card);color:var(--accent);border-bottom-color:var(--accent)}
.tab-content{padding:1.2rem;display:none}
.tab-content.active{display:block}

/* ═══ FILTER BAR ═══ */
.filter-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem;align-items:center}
.filter-bar select,.filter-bar input{padding:.4rem .6rem;border-radius:8px;background:var(--card);color:var(--fg);font-size:.78rem;font-family:inherit;outline:none;border:1px solid var(--border)}
.filter-bar input{flex:1;min-width:180px}
.filter-bar select:focus,.filter-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l)}

/* ═══ TABLE ACTIONS CELL ═══ */
td .btn-sm{padding:.25rem .5rem;font-size:.7rem;margin:0 .15rem}

/* ═══ PAGE HEAD (with back button) ═══ */
.page-head-row{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap}
.page-head-row h1{font-size:1.4rem;font-weight:700;color:var(--fg);line-height:1.2}
.page-head-row p{font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* ═══ INFO LIST (for read-only pages like Security Headers) ═══ */
.info-list{display:grid;grid-template-columns:1fr;gap:.6rem}
.info-item{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:8px}
.info-item .info-key{font-size:.78rem;font-weight:600;color:var(--fg2)}
.info-item .info-val{font-size:.78rem;color:var(--fg);font-family:'Courier New',monospace;background:#f1f5f9;padding:.2rem .5rem;border-radius:4px}

/* ═══ SECTION HEADER ═══ */
.section-head{display:flex;align-items:center;gap:.5rem;margin:1.2rem 0 .7rem}
.section-head .section-icon{font-size:1rem}
.section-head .section-title{font-size:.85rem;font-weight:700;color:var(--fg);letter-spacing:.02em}
.section-head .section-line{flex:1;height:1px;background:var(--border);margin-left:.5rem}

/* ═══ SUBMIT BUTTON IN FORM ═══ */
.form-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}