/* ════════════════════════════════════════════════════
   POSIDIUS FINANCE — STYLESHEET v2
   Dark Navy + Electric Blue · Posidius Digital Services
   ════════════════════════════════════════════════════ */
:root {
  --blue-primary: #3d8ef5;
  --blue-light:   #5ba4ff;
  --blue-dark:    #1a3c6e;
  --navy-900: #06090f;
  --navy-800: #0b1220;
  --navy-700: #101d30;
  --navy-600: #162840;
  --navy-500: #1d3454;
  --navy-400: #274570;
  --text-primary:   #e8f0fe;
  --text-secondary: #94a3b8;
  --text-muted:     #546880;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #06b6d4;
  --sidebar-w: 258px;
  --radius:    12px;
  --radius-sm:  8px;
  --radius-lg: 16px;
  --border: 1px solid rgba(61,142,245,0.12);
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --transition: 0.18s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--navy-900);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--navy-800); }
::-webkit-scrollbar-thumb { background:var(--navy-500); border-radius:3px; }

/* ── APP ── */
.app-wrapper { display:flex; min-height:100vh; }

/* ══ SIDEBAR ══ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--navy-800);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 200;
  transition: transform var(--transition);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-logo {
  padding: 18px 18px 14px;
  border-bottom: var(--border);
  background: var(--navy-900);
  flex-shrink: 0;
}
.logo-img { width: 175px; max-width:100%; display:block; }

.sidebar-nav { flex:1; padding:12px 10px; }

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 8px 5px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: all var(--transition);
  margin-bottom: 1px;
  border-left: 3px solid transparent;
}
.nav-item:hover  { background:rgba(61,142,245,.09); color:var(--blue-light); }
.nav-item.active {
  background: rgba(61,142,245,.15);
  color: var(--blue-light);
  border-left-color: var(--blue-primary);
  font-weight: 600;
}
.nav-icon { width:18px; text-align:center; font-size:14px; flex-shrink:0; }

.sidebar-footer {
  flex-shrink: 0;
  padding: 10px;
  border-top: var(--border);
  background: var(--navy-900);
}
.user-card { display:flex; align-items:center; gap:10px; }
.user-avatar {
  width:36px; height:36px;
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-dark));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff; flex-shrink:0;
}
.user-info  { flex:1; overflow:hidden; }
.user-name  { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role  { font-size:11px; color:var(--text-muted); }
.logout-btn {
  color:var(--text-muted); padding:6px; border-radius:6px;
  text-decoration:none; transition:all var(--transition);
}
.logout-btn:hover { color:var(--danger); background:rgba(239,68,68,.1); }

/* ── MOBILE OVERLAY ── */
.sidebar-overlay {
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:190; backdrop-filter:blur(2px);
}

/* ══ MAIN CONTENT ══ */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }

.top-bar {
  height:60px;
  background:var(--navy-800);
  border-bottom:var(--border);
  display:flex; align-items:center; padding:0 24px; gap:14px;
  position:sticky; top:0; z-index:100;
}
.menu-toggle { background:none; border:none; color:var(--text-secondary); font-size:17px; cursor:pointer; display:none; padding:6px; }
.top-bar-title { font-family:'Syne',sans-serif; font-size:17px; font-weight:700; color:var(--text-primary); flex:1; }
.top-bar-right { display:flex; align-items:center; gap:14px; }
.top-date { color:var(--text-muted); font-size:12.5px; display:flex; align-items:center; gap:6px; }
.top-logout { color:var(--text-muted); font-size:15px; text-decoration:none; transition:color var(--transition); }
.top-logout:hover { color:var(--danger); }

.page-content { padding:26px; flex:1; }

/* ══ CARDS ══ */
.card {
  background:var(--navy-800);
  border:var(--border);
  border-radius:var(--radius-lg);
  padding:22px;
  margin-bottom:22px;
}
.card-title {
  font-family:'Syne',sans-serif;
  font-size:15px; font-weight:700;
  color:var(--text-primary);
  display:flex; align-items:center; gap:9px;
  margin-bottom:16px;
}
.card-title i { color:var(--blue-primary); }

/* ══ STAT CARDS ══ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px; }

.stat-card {
  background:var(--navy-700);
  border:var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  position:relative; overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(61,142,245,.12); }
.stat-card::after {
  content:''; position:absolute; top:-20px; right:-20px;
  width:80px; height:80px; border-radius:50%; opacity:.07;
}
.stat-card.blue::after { background:var(--blue-primary); }
.stat-card.green::after { background:var(--success); }
.stat-card.orange::after { background:var(--warning); }
.stat-card.red::after { background:var(--danger); }

.stat-icon { width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:17px; margin-bottom:10px; }
.stat-icon.blue   { background:rgba(61,142,245,.15); color:var(--blue-primary); }
.stat-icon.green  { background:rgba(34,197,94,.15);  color:var(--success); }
.stat-icon.orange { background:rgba(245,158,11,.15); color:var(--warning); }
.stat-icon.red    { background:rgba(239,68,68,.15);  color:var(--danger); }

.stat-value { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:var(--text-primary); line-height:1.1; margin-bottom:4px; }
.stat-label { font-size:11.5px; color:var(--text-muted); font-weight:500; }

/* ══ TABLE ══ */
.table-container { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
thead th {
  background:var(--navy-700);
  padding:11px 14px;
  text-align:left;
  font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted);
  border-bottom:var(--border);
  white-space:nowrap;
}
tbody tr { border-bottom:1px solid rgba(61,142,245,.06); transition:background var(--transition); }
tbody tr:hover { background:rgba(61,142,245,.05); }
tbody td { padding:12px 14px; color:var(--text-secondary); font-size:13.5px; }
tbody td strong { color:var(--text-primary); }
tfoot td { font-size:13px; }

/* ══ BADGES ══ */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:20px;
  font-size:11px; font-weight:600; letter-spacing:.02em;
}
.badge-success { background:rgba(34,197,94,.14);  color:var(--success); }
.badge-warning { background:rgba(245,158,11,.14); color:var(--warning); }
.badge-danger  { background:rgba(239,68,68,.14);  color:var(--danger); }
.badge-info    { background:rgba(6,182,212,.14);  color:var(--info); }
.badge-blue    { background:rgba(61,142,245,.14); color:var(--blue-light); }

/* ══ BUTTONS ══ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px;
  border-radius:var(--radius-sm); border:none;
  cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13.5px; font-weight:600;
  transition:all var(--transition);
  text-decoration:none; white-space:nowrap;
}
.btn-primary { background:var(--blue-primary); color:#fff; }
.btn-primary:hover { background:var(--blue-light); box-shadow:0 4px 14px rgba(61,142,245,.35); }
.btn-outline { background:transparent; color:var(--blue-primary); border:1px solid rgba(61,142,245,.4); }
.btn-outline:hover { background:rgba(61,142,245,.1); border-color:var(--blue-primary); }
.btn-danger  { background:transparent; color:var(--danger); border:1px solid rgba(239,68,68,.35); }
.btn-danger:hover { background:rgba(239,68,68,.1); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { filter:brightness(1.1); }
.btn-sm   { padding:5px 11px; font-size:12px; }
.btn-icon { padding:6px; border-radius:6px; }

/* ══ FORMS ══ */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-label { font-size:11.5px; font-weight:600; color:var(--text-secondary); letter-spacing:.04em; }
.form-control {
  background:var(--navy-700);
  border:1px solid rgba(61,142,245,.2);
  border-radius:var(--radius-sm);
  padding:9px 13px;
  color:var(--text-primary);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13.5px; width:100%;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus { outline:none; border-color:var(--blue-primary); box-shadow:0 0 0 3px rgba(61,142,245,.12); }
.form-control::placeholder { color:var(--text-muted); }
select.form-control option { background:var(--navy-700); }
textarea.form-control { resize:vertical; min-height:72px; }

/* ══ PAGE HEADER ══ */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
.page-header-title { font-family:'Syne',sans-serif; font-size:21px; font-weight:800; }
.page-header-sub { font-size:12.5px; color:var(--text-muted); margin-top:2px; }

/* ══ ALERTS ══ */
.alert {
  padding:11px 15px; border-radius:var(--radius-sm);
  margin-bottom:16px; font-size:13.5px;
  display:flex; align-items:center; gap:9px;
}
.alert-success { background:rgba(34,197,94,.09);  border:1px solid rgba(34,197,94,.3);  color:var(--success); }
.alert-danger  { background:rgba(239,68,68,.09);  border:1px solid rgba(239,68,68,.3);  color:var(--danger); }
.alert-info    { background:rgba(61,142,245,.09); border:1px solid rgba(61,142,245,.3); color:var(--blue-light); }
.flash-alert { animation:slideIn .3s ease; }
@keyframes slideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

/* ══ MODAL ══ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(6,9,15,.8); backdrop-filter:blur(4px);
  z-index:300; display:none;
}
.modal-overlay.active { display:block; }
.modal-container {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:301; width:92%; max-width:540px;
  max-height:90vh; overflow-y:auto;
  background:var(--navy-700);
  border:var(--border); border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:modalIn .2s ease;
}
@keyframes modalIn { from{opacity:0;transform:translate(-50%,-52%)} to{opacity:1;transform:translate(-50%,-50%)} }
.modal-header { padding:18px 22px 14px; border-bottom:var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.modal-close { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; padding:4px; transition:color var(--transition); }
.modal-close:hover { color:var(--danger); }
.modal-body { padding:18px 22px; }
.modal-footer { padding:14px 22px; border-top:var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* ══ AUTH ══ */
.auth-page {
  min-height:100vh; background:var(--navy-900);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.auth-page::before {
  content:''; position:absolute; width:700px; height:700px;
  background:radial-gradient(circle, rgba(61,142,245,.07) 0%, transparent 70%);
  top:-200px; left:-150px; pointer-events:none;
}
.auth-page::after {
  content:''; position:absolute; width:400px; height:400px;
  background:radial-gradient(circle, rgba(61,142,245,.05) 0%, transparent 70%);
  bottom:-100px; right:-100px; pointer-events:none;
}
.auth-card {
  background:var(--navy-800); border:var(--border); border-radius:var(--radius-lg);
  padding:38px; width:100%; max-width:420px;
  position:relative; z-index:1;
  box-shadow:0 32px 80px rgba(0,0,0,.5);
}
.auth-logo { text-align:center; margin-bottom:26px; }
.auth-logo img { width:195px; }
.auth-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; text-align:center; margin-bottom:4px; }
.auth-subtitle { font-size:13px; color:var(--text-muted); text-align:center; margin-bottom:26px; }
.auth-form .form-group { margin-bottom:14px; }
.auth-form .btn { width:100%; justify-content:center; padding:11px; font-size:14.5px; margin-top:4px; }
.auth-links { text-align:center; margin-top:14px; font-size:13px; color:var(--text-muted); }
.auth-links a { color:var(--blue-primary); text-decoration:none; }
.auth-links a:hover { text-decoration:underline; }

/* ══ PROGRESS ══ */
.progress-bar-wrap { height:5px; background:var(--navy-600); border-radius:3px; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--blue-primary),var(--blue-light)); }

/* ══ QUICK ACTIONS ══ */
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.quick-action-btn {
  display:flex; align-items:center; gap:7px;
  background:var(--navy-700); border:var(--border); border-radius:var(--radius-sm);
  padding:9px 14px; color:var(--text-secondary);
  cursor:pointer; font-size:13px; font-weight:500;
  font-family:'Plus Jakarta Sans',sans-serif;
  transition:all var(--transition); text-decoration:none;
}
.quick-action-btn:hover { border-color:var(--blue-primary); color:var(--blue-light); background:rgba(61,142,245,.08); }
.quick-action-btn i { color:var(--blue-primary); }

/* ══ PAGINATION ══ */
.pagination { display:flex; justify-content:center; gap:5px; margin-top:18px; flex-wrap:wrap; }
.page-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:6px;
  background:var(--navy-700); border:var(--border);
  color:var(--text-secondary); text-decoration:none; font-size:13px; font-weight:500;
  transition:all var(--transition);
}
.page-btn:hover, .page-btn.active { background:var(--blue-primary); color:#fff; border-color:var(--blue-primary); }

/* ══ UTILITIES ══ */
.text-success { color:var(--success)!important; }
.text-danger  { color:var(--danger)!important; }
.text-warning { color:var(--warning)!important; }
.text-muted   { color:var(--text-muted)!important; }
.text-right   { text-align:right; }
.d-flex       { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.mt-16  { margin-top:16px; }
.mb-16  { margin-bottom:16px; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }

/* ══ RESPONSIVE ══ */
@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:8px 0 40px rgba(0,0,0,.5); }
  .sidebar-overlay { display:block; opacity:0; pointer-events:none; transition:opacity var(--transition); }
  .sidebar.open + .sidebar-overlay { opacity:1; pointer-events:auto; }
  .main-content { margin-left:0; }
  .menu-toggle { display:block; }
  .page-content { padding:16px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .stats-grid { grid-template-columns:1fr; }
  .auth-card { padding:24px 18px; margin:12px; }
  .quick-actions .quick-action-btn span { display:none; }
}

/* ══ PRINT ══ */
@media print {
  .sidebar,.top-bar,.btn,.quick-actions,.modal-overlay,.modal-container { display:none!important; }
  .main-content { margin-left:0!important; }
  .card { border:1px solid #ccc!important; background:#fff!important; color:#000!important; box-shadow:none!important; }
  body,html { background:#fff!important; color:#000!important; }
  .stat-value,.card-title,.stat-label { color:#000!important; }
  thead th,tbody td { color:#333!important; border-color:#ccc!important; }
}