/* ============================================================
   DFS CERT — Admin Panel Stylesheet
   ============================================================ */

/* ── Admin Layout ────────────────────────────────────────────── */
body.admin-body { background:var(--OW); }
.admin-wrap { display:flex; min-height:calc(100vh - 58px); }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width:210px; background:var(--N); flex-shrink:0;
  position:sticky; top:58px; height:calc(100vh - 58px);
  overflow-y:auto; overflow-x:hidden;
}
.sidebar-brand { padding:16px 16px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand-name { font-family:'DM Serif Display',serif; font-size:15px; color:var(--W); }
.sidebar-brand-name em { color:var(--GL); font-style:normal; }
.sidebar-brand-sub { font-size:9px; color:rgba(255,255,255,.3); letter-spacing:.8px; text-transform:uppercase; margin-top:1px; }
.sidebar-section { font-size:9px; font-weight:700; color:rgba(255,255,255,.25); letter-spacing:1.2px; text-transform:uppercase; padding:14px 16px 4px; }
.sidebar-link {
  display:flex; align-items:center; gap:9px;
  padding:9px 16px; color:rgba(255,255,255,.58); font-size:12.5px;
  cursor:pointer; border:none; background:none; width:100%; text-align:left;
  font-family:'Jost',sans-serif; border-left:2px solid transparent;
  text-decoration:none; transition:all .15s;
}
.sidebar-link:hover { color:var(--W); background:rgba(255,255,255,.05); }
.sidebar-link.active { color:var(--GL); background:rgba(192,139,42,.11); border-left-color:var(--G); }
.sidebar-link .s-icon { font-size:15px; width:18px; flex-shrink:0; }
.sidebar-badge { margin-left:auto; background:var(--G); color:var(--W); border-radius:10px; padding:1px 7px; font-size:10px; font-weight:700; }
.sidebar-link.active .sidebar-badge { background:rgba(255,255,255,.15); }

/* ── Admin Main ──────────────────────────────────────────────── */
.admin-main { flex:1; overflow-x:hidden; }
.admin-topbar {
  background:var(--W); border-bottom:1px solid var(--BD);
  padding:0 22px; height:52px;
  display:flex; align-items:center; justify-content:space-between;
}
.admin-topbar-title { font-family:'DM Serif Display',serif; font-size:1.25rem; color:var(--N); }
.admin-topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-user { font-size:12px; color:var(--M); }
.topbar-logout { color:var(--D); font-size:12px; text-decoration:none; }
.topbar-logout:hover { text-decoration:underline; }
.admin-content { padding:22px; }

/* ── Notification Strip ──────────────────────────────────────── */
.notif-strip { background:var(--GP); border-bottom:2px solid var(--G); padding:10px 22px; display:flex; align-items:center; gap:9px; margin:-22px -22px 22px; }
.notif-dot { width:7px; height:7px; border-radius:50%; background:var(--G); flex-shrink:0; }
.notif-text { font-size:12.5px; color:var(--N); font-weight:500; }
.notif-link { font-size:11.5px; color:var(--G); font-weight:600; margin-left:auto; cursor:pointer; text-decoration:none; }

/* ── Page Header ─────────────────────────────────────────────── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--BD); flex-wrap:wrap; gap:10px; }
.page-header h2 { font-family:'DM Serif Display',serif; font-size:1.4rem; color:var(--N); }
.page-header-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn         { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:4px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:'Jost',sans-serif; border:none; text-decoration:none; transition:opacity .15s; white-space:nowrap; }
.btn:hover   { opacity:.88; }
.btn-primary { background:var(--N); color:var(--W); }
.btn-gold    { background:var(--G); color:var(--W); }
.btn-outline { background:var(--W); color:var(--N); border:1px solid var(--BD); }
.btn-danger  { background:var(--DB); color:var(--D); }
.btn-sm      { padding:5px 12px; font-size:11.5px; }
.btn-xs      { padding:3px 9px; font-size:10.5px; }

/* ── KPI Cards ───────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:18px; }
.kpi-card { background:var(--W); border:1px solid var(--BD); border-radius:var(--radius); padding:16px; position:relative; }
.kpi-label { font-size:9px; font-weight:700; color:var(--M); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; }
.kpi-value { font-family:'DM Serif Display',serif; font-size:2rem; color:var(--N); line-height:1; }
.kpi-value.gold  { color:var(--G); }
.kpi-value.warn  { color:var(--WN); }
.kpi-value.danger { color:var(--D); }
.kpi-sub { font-size:10px; color:var(--S); margin-top:6px; }
.kpi-icon { position:absolute; top:14px; right:14px; font-size:22px; opacity:.25; }

/* ── Charts ──────────────────────────────────────────────────── */
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-bottom:18px; }
.chart-card { background:var(--W); border:1px solid var(--BD); border-radius:var(--radius); padding:16px; }
.chart-title { font-size:12.5px; font-weight:600; color:var(--N); margin-bottom:14px; }
.chart-wrap  { height:190px; position:relative; }

/* ── Tables ──────────────────────────────────────────────────── */
.table-card { background:var(--W); border:1px solid var(--BD); border-radius:var(--radius); overflow:hidden; }
.table-card-head { padding:11px 16px; border-bottom:1px solid var(--BD); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.table-card-title { font-size:13px; font-weight:600; color:var(--N); }
.table-scroll { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; min-width:480px; }
.data-table thead th { background:var(--N); color:rgba(255,255,255,.78); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; padding:10px 14px; text-align:left; white-space:nowrap; }
.data-table tbody td { padding:10px 14px; font-size:12.5px; border-bottom:1px solid var(--BD); color:var(--T); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:nth-child(even) td { background:rgba(249,248,245,.6); }
.data-table tbody tr:hover td { background:var(--GP); }
.data-table .cert-num { font-weight:700; color:var(--G); white-space:nowrap; }
.data-table .row-actions { display:flex; gap:4px; }

/* ── Filters Bar ─────────────────────────────────────────────── */
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.filter-bar input,
.filter-bar select { padding:7px 12px; border:1px solid var(--BD); border-radius:4px; font-size:12px; font-family:'Jost',sans-serif; color:var(--T); background:var(--W); outline:none; }
.filter-bar input:focus,
.filter-bar select:focus { border-color:var(--G); }
.filter-bar input[type="text"] { min-width:200px; }

/* ── Company Logo ────────────────────────────────────────────── */
.co-logo { width:30px; height:30px; background:var(--N); border-radius:4px; display:flex; align-items:center; justify-content:center; font-family:'DM Serif Display',serif; color:var(--GL); font-size:11px; flex-shrink:0; overflow:hidden; }
.co-logo img { width:100%; height:100%; object-fit:contain; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:18px; }
.form-full { grid-column:1/-1; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:10px; font-weight:700; color:var(--M); text-transform:uppercase; letter-spacing:.5px; }
.form-control { padding:9px 13px; border:1px solid var(--BD); border-radius:5px; font-size:13px; font-family:'Jost',sans-serif; color:var(--T); background:var(--W); outline:none; width:100%; }
.form-control:focus { border-color:var(--G); }
.form-control[readonly] { background:var(--OW); color:var(--M); }
textarea.form-control { min-height:90px; resize:vertical; }
.form-hint { font-size:10.5px; color:var(--M); font-style:italic; }
.form-card { background:var(--W); border:1px solid var(--BD); border-radius:var(--radius); padding:22px; margin-bottom:16px; }
.form-card-title { font-size:13px; font-weight:600; color:var(--N); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--BD); }
.form-section-title { font-size:10px; font-weight:700; color:var(--G); letter-spacing:1px; text-transform:uppercase; margin:18px 0 12px; }

/* ── File Upload ─────────────────────────────────────────────── */
.upload-area { border:1.5px dashed var(--BD); border-radius:6px; padding:16px; text-align:center; cursor:pointer; transition:border-color .15s; }
.upload-area:hover { border-color:var(--G); }
.upload-area input[type="file"] { display:none; }
.upload-preview { display:flex; align-items:center; gap:14px; }
.upload-thumb { width:60px; height:40px; background:var(--OW); border-radius:4px; border:1px solid var(--BD); overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--M); font-size:20px; }
.upload-thumb img { width:100%; height:100%; object-fit:contain; }
.upload-btn-group { display:flex; gap:7px; }

/* ── Settings Tabs ───────────────────────────────────────────── */
.settings-tabs { display:flex; border-bottom:1px solid var(--BD); margin-bottom:22px; gap:0; }
.settings-tab { padding:9px 18px; border:none; background:none; font-size:12.5px; font-weight:500; color:var(--M); cursor:pointer; font-family:'Jost',sans-serif; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; display:inline-block; transition:color .15s; }
.settings-tab:hover { color:var(--N); }
.settings-tab.active { color:var(--N); border-bottom-color:var(--G); }

/* ── Accreditation Tags ──────────────────────────────────────── */
.accred-manage { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.accred-manage-tag { display:flex; align-items:center; gap:6px; background:var(--GP); border:1px solid rgba(192,139,42,.2); padding:6px 12px; border-radius:4px; }
.accred-manage-tag-name { font-family:'DM Serif Display',serif; font-size:14px; color:var(--N); letter-spacing:1px; }
.accred-remove { background:none; border:none; color:var(--D); font-size:14px; cursor:pointer; padding:0; line-height:1; }

/* ── Standards Management Grid ───────────────────────────────── */
.std-mgmt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:12px; }
.std-mgmt-card { background:var(--W); border:1px solid var(--BD); border-radius:var(--radius); padding:16px; transition:transform .2s; }
.std-mgmt-card:hover { transform:translateY(-2px); }
.std-mgmt-code { font-size:10px; font-weight:700; color:var(--G); letter-spacing:1px; text-transform:uppercase; margin-bottom:5px; }
.std-mgmt-name { font-size:13px; font-weight:600; color:var(--N); margin-bottom:3px; }
.std-mgmt-cat  { font-size:11.5px; color:var(--M); margin-bottom:11px; font-weight:300; }
.std-mgmt-foot { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--BD); }
.std-mgmt-count { font-size:11px; color:var(--M); }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display:flex; gap:4px; align-items:center; margin-top:16px; }
.page-link { padding:5px 10px; border:1px solid var(--BD); border-radius:4px; font-size:12px; color:var(--T); text-decoration:none; background:var(--W); cursor:pointer; font-family:'Jost',sans-serif; }
.page-link:hover { background:var(--GP); border-color:var(--G); }
.page-link.active { background:var(--N); color:var(--W); border-color:var(--N); }
.page-link.disabled { color:var(--M); cursor:default; pointer-events:none; }

/* ── Alert / Flash Messages ──────────────────────────────────── */
.alert { padding:12px 16px; border-radius:5px; font-size:13px; margin-bottom:16px; display:flex; align-items:flex-start; gap:8px; }
.alert-success { background:var(--SB); border-left:3px solid var(--S); color:var(--S); }
.alert-error   { background:var(--DB); border-left:3px solid var(--D); color:var(--D); }
.alert-warning { background:var(--WNB); border-left:3px solid var(--WN); color:var(--WN); }
.alert-info    { background:var(--IB); border-left:3px solid var(--I); color:var(--I); }

/* ── Toast ───────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--N); color:var(--W); padding:11px 18px; border-radius:6px; font-size:13px; border-left:3px solid var(--G); font-family:'Jost',sans-serif; animation:fadeUp .25s ease; min-width:220px; }
.toast.toast-error { border-left-color:var(--D); }

/* ── Login Page ──────────────────────────────────────────────── */
.login-page { min-height:100vh; background:var(--N); display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { background:var(--W); border-radius:10px; width:100%; max-width:400px; overflow:hidden; border-top:4px solid var(--G); }
.login-head { padding:28px 30px 20px; border-bottom:1px solid var(--BD); }
.login-logo { font-family:'DM Serif Display',serif; font-size:1.5rem; color:var(--N); margin-bottom:8px; }
.login-logo em { color:var(--G); font-style:normal; }
.login-head h1 { font-family:'DM Serif Display',serif; font-size:1.35rem; color:var(--N); margin-bottom:4px; }
.login-head p { font-size:13px; color:var(--M); font-weight:300; }
.login-body { padding:26px 30px; }

/* ── Activity Log ────────────────────────────────────────────── */
.log-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--BD); }
.log-item:last-child { border-bottom:none; }
.log-icon { width:30px; height:30px; background:var(--GP); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.log-action { font-size:12.5px; font-weight:500; color:var(--N); }
.log-meta { font-size:11px; color:var(--M); margin-top:2px; }

/* ── Responsive Admin ────────────────────────────────────────── */
@media (max-width:768px) {
  .sidebar { position:fixed; left:-210px; top:58px; height:100vh; z-index:50; transition:left .2s; }
  .sidebar.open { left:0; }
  .admin-main { margin-left:0; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .chart-grid { grid-template-columns:1fr; }
}