@import url('../../css/style.css');

body.panel-body{ background:var(--void); }

/* ---------- Login screen ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; z-index:1;
}
.login-card{
  width:100%; max-width:380px;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--panel); padding:36px 30px;
}
.login-card .logo{ display:block; text-align:center; font-size:32px; margin-bottom:6px; }
.login-card h2{ text-align:center; font-size:16px; font-weight:700; color:var(--text); margin-bottom:2px; }
.login-card p.sub{ text-align:center; color:var(--text-muted); font-size:13px; margin-bottom:26px; }
.login-field{ margin-bottom:14px; }
.login-field label{ display:block; font-size:12px; color:var(--text-muted); margin-bottom:6px; font-weight:600; }
.login-field input{
  width:100%; padding:13px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--void); color:var(--text); font-size:14px;
}
.login-remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); margin:12px 0 20px; }
.login-error{ color:var(--red-glow); font-size:13px; margin-bottom:12px; display:none; }
.login-note{ margin-top:18px; font-size:11.5px; color:var(--text-faint); text-align:center; line-height:1.6; }

/* ---------- App shell ---------- */
.app-shell{ display:none; min-height:100vh; }
.app-shell.active{ display:flex; }
.sidebar{
  width:230px; flex:0 0 auto;
  background:var(--panel); border-right:1px solid var(--border);
  padding:20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .logo{ display:block; padding:8px 10px 22px; font-size:22px; }
.side-link{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:13.5px; font-weight:600;
  margin-bottom:2px; position:relative;
}
.side-link:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.side-link.active{ background:linear-gradient(135deg, var(--red), #b3142a); color:#fff; }
.side-link .badge-count{
  margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:800;
  padding:2px 7px; border-radius:999px;
}
.side-link.active .badge-count{ background:rgba(255,255,255,.25); }
.sidebar hr{ border:none; border-top:1px solid var(--border); margin:14px 0; }

.main{ flex:1; min-width:0; padding:26px 30px 60px; }
.main-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.main-head h1{ font-family:var(--font-display); font-size:28px; letter-spacing:.01em; }

/* ---------- Cards / KPIs ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
.kpi{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); padding:18px 20px; }
.kpi .label{ font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.kpi .value{ font-family:var(--font-mono); font-size:26px; font-weight:700; }
.kpi .delta{ font-size:11.5px; margin-top:6px; font-weight:700; }
.kpi .delta.up{ color:#3ecf8e; }
.kpi .delta.down{ color:var(--red-glow); }
@media (max-width: 960px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }

.panel-card{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--panel); padding:20px; margin-bottom:20px; }
.panel-card h3{ font-size:15px; margin-bottom:14px; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{ text-align:left; color:var(--text-muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td{ padding:12px; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table tr:last-child td{ border-bottom:none; }
.mono{ font-family:var(--font-mono); }

.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.02em; }
.status-pill.on_hold{ background:rgba(212,162,76,.15); color:var(--gold); }
.status-pill.active{ background:rgba(62,207,142,.15); color:#3ecf8e; }
.status-pill.expired{ background:rgba(226,31,58,.15); color:var(--red-glow); }
.status-pill.cancelled{ background:rgba(255,255,255,.08); color:var(--text-faint); }

.row-actions{ display:flex; gap:8px; }
.btn-sm{ padding:8px 14px; font-size:12.5px; border-radius:8px; }
.btn-icon{ padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--border-strong); color:var(--text-muted); }

.filters{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.filters input, .filters select{
  padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--void); color:var(--text); font-size:13px;
}
.filters input{ flex:1; min-width:200px; }
.tabs{ display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.tab{ padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--text-muted); border:1px solid var(--border); }
.tab.active{ background:var(--red); color:#fff; border-color:var(--red); }

.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.form-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.form-field label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--void); color:var(--text); font-size:13.5px; font-family:inherit;
}
.form-field textarea{ min-height:80px; resize:vertical; }
@media (max-width: 700px){ .form-grid, .form-grid.cols-3{ grid-template-columns:1fr; } }

/* Detail drawer */
.detail-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:18px; }
@media (max-width: 900px){ .detail-grid{ grid-template-columns:1fr; } }
.detail-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.detail-row span:first-child{ color:var(--text-muted); }
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:13px; margin-bottom:16px; font-weight:600; }

.notif-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.notif-item:last-child{ border-bottom:none; }
.notif-item .dot{ width:8px; height:8px; border-radius:50%; background:var(--red-glow); margin-top:6px; flex:0 0 auto; }

.mobile-topbar{ display:none; }

@media (max-width: 860px){
  .sidebar{ position:fixed; left:0; top:0; z-index:80; transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.6); }
  .sidebar.open{ transform:translateX(0); }
  .main{ padding:0 16px 60px; }
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:60;
    min-height:72px; padding:12px 0 14px;
    background:linear-gradient(180deg,var(--void) 72%,rgba(5,6,8,0));
  }
  .mobile-topbar .logo{ font-size:22px; }
  .panel-menu-btn{
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px;
    width:50px; height:50px; padding:0;
    border:1px solid var(--border-strong); border-radius:14px;
    background:rgba(255,255,255,.035); color:var(--text);
  }
  .panel-menu-btn span{ display:block; width:24px; height:2px; border-radius:99px; background:var(--text); transition:.2s ease; }
  .panel-menu-btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .panel-menu-btn.active span:nth-child(2){ opacity:0; }
  .panel-menu-btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .sidebar{ padding-top:18px; }
}