/* =========================================================
   SIGAP - Sistem Informasi Gerbang Aduan Pegawai
   Tema: Premium / Glossy (dark navy + gold-blue accent)
   ========================================================= */

:root{
  --navy-950:#060a17;
  --navy-900:#0a1128;
  --navy-800:#111a3a;
  --navy-700:#182450;
  --navy-600:#22306b;
  --glass-border:rgba(255,255,255,0.08);
  --glass-bg:rgba(255,255,255,0.045);

  --accent-1:#5b7cff;
  --accent-2:#8b5bff;
  --gold-1:#f5c657;
  --gold-2:#f0a93a;

  --text-hi:#f4f6ff;
  --text-mid:#aab2d6;
  --text-low:#6d76a3;

  --green:#3ddc97;
  --amber:#f5c657;
  --red:#ff6b6b;
  --blue:#5b9cff;
  --teal:#3dd6c8;
  --purple:#a68bff;
  --gray:#8f97b8;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;
  --shadow-soft:0 20px 50px -20px rgba(0,0,0,0.55);
  --shadow-glow:0 0 0 1px rgba(255,255,255,0.05), 0 10px 30px -10px rgba(91,124,255,0.35);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; min-height:100%;
}

body{
  font-family:'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  color:var(--text-hi);
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(139,91,255,0.25), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(91,124,255,0.22), transparent 55%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.5;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Sora','Plus Jakarta Sans',sans-serif; font-weight:600; margin:0 0 6px; }

/* ---------------- Glass surfaces ---------------- */

.glass{
  background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  position:relative;
  overflow:hidden;
}

.glass::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  opacity:.5;
}

.card{ padding:24px; }

/* ---------------- Buttons (glossy) ---------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border:none; border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  position:relative; overflow:hidden;
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%);
  opacity:.5; pointer-events:none;
}
.btn:active{ transform:translateY(1px) scale(.99); }

.btn-primary{
  color:#0a0f24;
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2));
  box-shadow:0 10px 24px -8px rgba(240,169,58,0.55);
}
.btn-primary:hover{ filter:brightness(1.07); box-shadow:0 12px 30px -8px rgba(240,169,58,0.7); }

.btn-accent{
  color:#fff;
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow:0 10px 24px -8px rgba(91,124,255,0.55);
}
.btn-accent:hover{ filter:brightness(1.08); }

.btn-ghost{
  color:var(--text-hi);
  background:rgba(255,255,255,0.06);
  border:1px solid var(--glass-border);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.1); }

.btn-danger{
  color:#fff; background:linear-gradient(135deg,#ff6b6b,#c93b3b);
  box-shadow:0 10px 24px -8px rgba(255,107,107,0.5);
}

.btn-block{ width:100%; }
.btn-sm{ padding:7px 14px; font-size:13px; }

/* ---------------- Layout shell ---------------- */

.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:260px; flex-shrink:0;
  padding:26px 18px;
  display:flex; flex-direction:column; gap:26px;
  border-right:1px solid var(--glass-border);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}

.brand{ display:flex; align-items:center; gap:12px; padding:0 8px; }
.brand-mark{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold-1), var(--accent-1));
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; color:#0a0f24; font-size:15px;
  box-shadow:0 8px 20px -6px rgba(91,124,255,.6);
}
.brand-text b{ display:block; font-family:'Sora',sans-serif; font-size:16px; letter-spacing:.5px; }
.brand-text span{ display:block; font-size:11px; color:var(--text-low); }

.nav-group{ display:flex; flex-direction:column; gap:4px; }
.nav-label{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-low); padding:0 12px; margin:10px 0 4px; }

.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--radius-sm);
  color:var(--text-mid); font-size:14px; font-weight:500;
  transition:background .15s, color .15s;
}
.nav-item i{ font-size:18px; width:20px; text-align:center; }
.nav-item:hover{ background:rgba(255,255,255,0.06); color:var(--text-hi); }
.nav-item.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(91,124,255,.35), rgba(139,91,255,.28));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

.sidebar-footer{ margin-top:auto; }
.user-chip{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--radius-sm); background:rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
}
.avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff;
}
.user-chip .meta b{ display:block; font-size:13px; }
.user-chip .meta span{ display:block; font-size:11px; color:var(--text-low); }

.main{ flex:1; min-width:0; padding:30px 36px 60px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:26px; flex-wrap:wrap; gap:14px;
}
.topbar h1{ font-size:22px; }
.topbar p{ color:var(--text-mid); font-size:13px; margin:0; }

/* ---------------- Auth page ---------------- */

.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.auth-card{ width:100%; max-width:400px; padding:36px 32px; text-align:center; }
.auth-card .brand{ justify-content:center; margin-bottom:22px; }
.auth-card h1{ font-size:20px; margin-bottom:4px; }
.auth-card p.sub{ color:var(--text-mid); font-size:13px; margin-bottom:24px; }
.auth-demo{
  margin-top:20px; padding:14px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-border);
  font-size:12px; color:var(--text-mid); text-align:left; line-height:1.7;
}
.auth-demo b{ color:var(--text-hi); }

/* ---------------- Forms ---------------- */

.field{ margin-bottom:16px; text-align:left; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--text-mid); margin-bottom:6px; }
.field .hint{ font-size:11.5px; color:var(--text-low); margin-top:5px; }

input[type=text], input[type=email], input[type=password], input[type=date],
select, textarea{
  width:100%; padding:11px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--glass-border); background:rgba(255,255,255,0.05);
  color:var(--text-hi); font-family:inherit; font-size:14px;
  transition:border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder{ color:var(--text-low); }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent-1); background:rgba(255,255,255,0.08);
}
textarea{ resize:vertical; min-height:110px; }

.radio-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.radio-card{
  border:1px solid var(--glass-border); border-radius:var(--radius-sm);
  padding:12px 14px; cursor:pointer; background:rgba(255,255,255,0.03);
  transition:border-color .15s, background .15s;
}
.radio-card input{ display:none; }
.radio-card b{ display:block; font-size:13.5px; }
.radio-card span{ font-size:11.5px; color:var(--text-low); }
.radio-card:has(input:checked){
  border-color:var(--accent-1);
  background:linear-gradient(135deg, rgba(91,124,255,.16), rgba(139,91,255,.1));
}

/* ---------------- Stat cards ---------------- */

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:26px; }
.stat-card{ padding:20px; }
.stat-card .stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-icon{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px;
}
.stat-card .num{ font-family:'Sora',sans-serif; font-size:28px; font-weight:700; }
.stat-card .label{ font-size:12.5px; color:var(--text-mid); }

.icon-blue{ background:rgba(91,156,255,.15); color:var(--blue); }
.icon-amber{ background:rgba(245,198,87,.15); color:var(--amber); }
.icon-green{ background:rgba(61,220,151,.15); color:var(--green); }
.icon-purple{ background:rgba(166,139,255,.15); color:var(--purple); }
.icon-red{ background:rgba(255,107,107,.15); color:var(--red); }

/* ---------------- Table ---------------- */

.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{
  text-align:left; padding:12px 14px; color:var(--text-low);
  font-size:11px; text-transform:uppercase; letter-spacing:.6px; font-weight:600;
  border-bottom:1px solid var(--glass-border);
}
tbody td{ padding:14px; border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
tbody tr{ transition:background .15s; }
tbody tr:hover{ background:rgba(255,255,255,0.03); }
.row-title{ font-weight:600; font-size:14px; }
.row-sub{ color:var(--text-low); font-size:12px; margin-top:2px; }

/* ---------------- Badges ---------------- */

.badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
}
.badge-gray{ background:rgba(143,151,184,.16); color:#c3c8e0; }
.badge-blue{ background:rgba(91,156,255,.16); color:#8fbcff; }
.badge-teal{ background:rgba(61,214,200,.16); color:#7fe6da; }
.badge-amber{ background:rgba(245,198,87,.18); color:#f5c657; }
.badge-purple{ background:rgba(166,139,255,.18); color:#bda6ff; }
.badge-green{ background:rgba(61,220,151,.16); color:#6ee9b6; }
.badge-red{ background:rgba(255,107,107,.16); color:#ff9494; }

/* ---------------- Timeline ---------------- */

.timeline{ position:relative; padding-left:28px; }
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg, var(--accent-1), transparent);
}
.timeline-item{ position:relative; padding-bottom:22px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:-28px; top:2px; width:19px; height:19px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow:0 0 0 4px rgba(91,124,255,.15);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff;
}
.timeline-item b{ font-size:13.5px; }
.timeline-item .when{ font-size:11.5px; color:var(--text-low); margin-bottom:3px; display:block; }
.timeline-item p{ font-size:13px; color:var(--text-mid); margin:4px 0 0; }

/* ---------------- Progress steps (detail page) ---------------- */

.steps{ display:flex; gap:6px; margin-bottom:26px; flex-wrap:wrap; }
.step{
  flex:1; min-width:110px; padding:10px 12px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
  font-size:11.5px; color:var(--text-low); text-align:center; font-weight:600;
}
.step.done{ background:linear-gradient(135deg, rgba(61,220,151,.18), rgba(61,220,151,.06)); color:#6ee9b6; border-color:rgba(61,220,151,.3); }
.step.active{ background:linear-gradient(135deg, rgba(91,124,255,.3), rgba(139,91,255,.18)); color:#fff; border-color:rgba(91,124,255,.5); }

/* ---------------- Misc ---------------- */

.divider{ height:1px; background:var(--glass-border); margin:20px 0; border:none; }
.empty-state{ text-align:center; padding:60px 20px; color:var(--text-mid); }
.empty-state i{ font-size:40px; color:var(--text-low); margin-bottom:12px; display:block; }

.alert{
  padding:13px 16px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:18px;
  border:1px solid transparent; display:flex; align-items:center; gap:10px;
}
.alert-success{ background:rgba(61,220,151,.12); border-color:rgba(61,220,151,.3); color:#8ff0c6; }
.alert-danger{ background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.3); color:#ffabab; }
.alert-info{ background:rgba(91,156,255,.12); border-color:rgba(91,156,255,.3); color:#a6cbff; }

.grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:20px; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

.info-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:13px; }
.info-row span:first-child{ color:var(--text-low); }
.info-row span:last-child{ font-weight:600; text-align:right; }

.mobile-toggle{ display:none; }

@media (max-width:860px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; align-items:center; padding:14px 18px; border-right:none; border-bottom:1px solid var(--glass-border); }
  .sidebar .nav-group, .sidebar-footer{ display:none; }
  .main{ padding:20px; }
  .radio-cards{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}