/* assets/css/app.css - Dashboard PRO */
:root{
  --app-bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,.09);
  --border-strong: rgba(15,23,42,.14);
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --primary-soft: rgba(37,99,235,.10);
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 18px;
  --radius-sm: 14px;
  --shadow: 0 18px 45px rgba(15,23,42,.09);
  --shadow-sm: 0 8px 22px rgba(15,23,42,.07);
  --sidebar-bg: #07111f;
  --sidebar-bg-2: #0d1b31;
  --sidebar-text: rgba(255,255,255,.88);
  --sidebar-muted: rgba(226,232,240,.62);
  --sidebar-border: rgba(255,255,255,.10);
}

*{ box-sizing: border-box; }
html, body{ min-height: 100%; }
body.dk-body{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 32rem),
    linear-gradient(180deg, #f8fafc 0%, var(--app-bg) 42%, #eef3f9 100%) !important;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--primary); text-decoration: none; }
a:hover{ color: var(--primary-600); }

.dk-topbar{
  min-height: 64px;
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 6px 22px rgba(15,23,42,.04);
}

.dk-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text) !important;
  font-weight: 800;
  letter-spacing: -.02em;
}
.dk-brand-mark{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #14b8a6);
  box-shadow: 0 10px 25px rgba(37,99,235,.25);
}
.dk-brand-text{ display:flex; flex-direction: column; line-height: 1.08; }
.dk-brand-text small{
  margin-top: 4px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
}

.dk-icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
}
.dk-user-pill{
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
}
.dk-user-avatar{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.dk-user-name{ font-size: .87rem; font-weight: 700; color: #334155; }
.dk-logout-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 8px 13px;
  border: 1px solid rgba(239,68,68,.24);
  color: #dc2626;
  background: #fff;
  font-weight: 700;
}
.dk-logout-btn:hover{ background: rgba(239,68,68,.08); color: #b91c1c; }

.dk-shell{ min-height: calc(100vh - 64px); align-items: flex-start; }
.dk-sidebar{
  background:
    radial-gradient(circle at 30% 0%, rgba(37,99,235,.24), transparent 18rem),
    linear-gradient(180deg, var(--sidebar-bg-2), var(--sidebar-bg)) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  color: #fff;
}
@media (min-width: 992px){
  .dk-sidebar{
    width: 292px;
    position: sticky;
    top: 64px;
    height: calc(100vh - 64px);
  }
}
.dk-sidebar-head{
  border-bottom: 1px solid var(--sidebar-border);
  color: #fff;
}
.dk-sidebar-head small{ color: var(--sidebar-muted); }
.dk-sidebar-inner{ padding: 16px 14px 22px; width: 100%; }
.dk-sidebar-card{
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px;
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 14px;
}
.dk-sidebar-card-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.18);
  color: #93c5fd;
}
.dk-sidebar-card-title{ font-weight: 800; font-size: .92rem; color: #fff; }
.dk-sidebar-card-text{ font-size: .76rem; color: var(--sidebar-muted); }
.dk-nav{ display: grid; gap: 6px; }
.dk-nav-link{
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 15px;
  color: var(--sidebar-text) !important;
  font-weight: 650;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  border: 1px solid transparent;
}
.dk-nav-link:hover{
  background: rgba(255,255,255,.07);
  color: #fff !important;
  transform: translateX(2px);
}
.dk-nav-link.active{
  color: #fff !important;
  background: linear-gradient(135deg, rgba(37,99,235,.42), rgba(20,184,166,.16));
  border-color: rgba(147,197,253,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.dk-nav-icon{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
}
.dk-nav-link.active .dk-nav-icon{ background: rgba(255,255,255,.13); }

.dk-main{ min-height: calc(100vh - 64px); }
.dk-page-wrap{ padding: 24px; }
@media (max-width: 575.98px){ .dk-page-wrap{ padding: 16px; } }

.dk-hero-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(20,184,166,.14), transparent 18rem),
    linear-gradient(135deg, #ffffff, #f8fbff);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--shadow);
}
.dk-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: .78rem;
  margin-bottom: 10px;
}
.dk-hero-card h1{ margin: 0; font-size: clamp(1.6rem, 2vw, 2.15rem); font-weight: 850; letter-spacing: -.04em; }
.dk-hero-card p{ margin: 7px 0 0; color: var(--muted); font-weight: 500; }
.dk-hero-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-action-btn{
  border-radius: 14px;
  font-weight: 800;
  padding: 10px 14px;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
@media (max-width: 767.98px){ .dk-hero-card{ align-items: flex-start; flex-direction: column; } }

.dk-stat-card{
  height: 100%;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.dk-stat-card::after{
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -42px;
  top: -48px;
  border-radius: 50%;
  background: var(--stat-soft, rgba(37,99,235,.10));
}
.dk-stat-top{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; position:relative; z-index:1; }
.dk-stat-label{ color: var(--muted); font-weight: 800; font-size: .86rem; }
.dk-stat-icon{
  width: 42px;
  height: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 15px;
  background: var(--stat-soft, rgba(37,99,235,.10));
  color: var(--stat-color, var(--primary));
  font-size:1.2rem;
}
.dk-stat-value{ margin-top: 8px; font-size: clamp(1.7rem, 2.3vw, 2.25rem); font-weight: 880; letter-spacing: -.045em; position:relative; z-index:1; }
.dk-stat-foot{ margin-top: 7px; color: var(--muted); font-size: .86rem; font-weight: 650; position:relative; z-index:1; }
.dk-stat-foot a{ font-weight: 850; }
.dk-stat-primary{ --stat-color: var(--primary); --stat-soft: rgba(37,99,235,.11); }
.dk-stat-warning{ --stat-color: var(--warning); --stat-soft: rgba(245,158,11,.13); }
.dk-stat-danger{ --stat-color: var(--danger); --stat-soft: rgba(239,68,68,.11); }

.dk-panel{
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--shadow-sm);
}
.dk-panel-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom: 14px; }
.dk-panel-head h2{ margin:0; font-size: 1.05rem; font-weight: 850; letter-spacing: -.025em; }
.dk-panel-head p{ margin: 4px 0 0; color: var(--muted); font-size:.88rem; font-weight: 550; }
.dk-quick-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 575.98px){ .dk-quick-grid{ grid-template-columns: 1fr; } }
.dk-quick-card{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-height: 128px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid var(--border);
  color: var(--text) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dk-quick-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: rgba(37,99,235,.22); }
.dk-quick-card i{ color: var(--primary); font-size: 1.45rem; }
.dk-quick-card span{ font-weight: 850; }
.dk-quick-card small{ color: var(--muted); font-weight: 550; }
.dk-alert-list{ display:grid; gap: 10px; }
.dk-alert-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 13px;
  border-radius: 17px;
  background: #f8fafc;
  border: 1px solid var(--border);
}
.dk-alert-dot{ width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; margin-top: 7px; box-shadow: 0 0 0 5px rgba(15,23,42,.04); }
.dk-alert-item strong{ display:block; font-weight: 850; }
.dk-alert-item small{ color: var(--muted); font-weight: 550; }

.card-soft{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-soft .card-body{ padding: 16px; }
.table{ margin-bottom: 0; }
.table thead th{ color: rgba(15,23,42,.75); font-weight: 700; border-bottom: 1px solid var(--border) !important; white-space: nowrap; }
.table tbody td{ border-top: 1px solid var(--border) !important; }
.table-responsive{ border-radius: var(--radius); }
.btn{ border-radius: 12px; }
.btn-primary{ background: var(--primary); border-color: var(--primary); }
.btn-primary:hover{ background: var(--primary-600); border-color: var(--primary-600); }
.form-control, .form-select{ border-radius: 12px; border-color: rgba(15,23,42,.18); }
.form-control:focus, .form-select:focus{ border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 .25rem rgba(37,99,235,.14); }
.text-secondary{ color: var(--muted) !important; }
.shadow-sm{ box-shadow: var(--shadow-sm) !important; }