:root{
  --primary:#172554;
  --primary-2:#1e3a8a;
  --accent:#2563eb;
  --cyan:#06b6d4;
  --bg:#f8fafc;
  --card:#ffffff;
  --muted:#64748b;
  --sidebar-width:292px;
  --sidebar-collapsed:82px;
  --topbar-height:72px;
}

*{box-sizing:border-box}

body{
  background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:#0f172a;
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-shell{
  min-height:100vh;
  background:
    radial-gradient(circle at 25% 20%, rgba(37,99,235,.35), transparent 34%),
    linear-gradient(120deg, rgba(2,6,23,.88), rgba(30,58,138,.82)),
    url("../img/login/bg-login.jpg") center/cover no-repeat;
}

.brand-login-img{
  border-radius:26px;
  box-shadow:0 18px 45px rgba(37,99,235,.35);
}

.login-banner{
  box-shadow:0 12px 36px rgba(15,23,42,.35);
}

.login-main-logo{
  filter:drop-shadow(0 18px 35px rgba(6,182,212,.28));
}

.glass-card{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 24px 80px rgba(15,23,42,.32);
  border-radius:28px;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.app-body{
  min-height:100vh;
  overflow-x:hidden;
  background:#eef2f7;
}

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

.app-sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:var(--sidebar-width);
  z-index:1040;

  background:linear-gradient(
    180deg,
    #0f172a 0%,
    #172554 48%,
    #1e3a8a 100%
  );

  color:#dbeafe;

  box-shadow:18px 0 45px rgba(15,23,42,.18);

  transition:
    width .22s ease,
    transform .22s ease;
}

.sidebar-brand{
  height:var(--topbar-height);

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 18px;

  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand-link{
  display:flex;
  align-items:center;
  gap:12px;

  color:#fff;
  text-decoration:none;

  min-width:0;
}

.brand-link:hover{
  color:#fff;
}

.brand-img{
  border-radius:12px;
  box-shadow:0 8px 24px rgba(6,182,212,.22);
  flex:0 0 auto;
}

.brand-text{
  font-size:1.18rem;
  font-weight:800;
  white-space:nowrap;
  letter-spacing:-.02em;
}

.btn-sidebar-close{
  color:#dbeafe;
  border:0;
}

.btn-sidebar-close:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}

.sidebar-scroll{
  height:calc(100vh - var(--topbar-height));
  overflow-y:auto;

  padding:14px 12px 22px;

  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sidebar-section{
  padding:18px 12px 8px;

  color:#93c5fd;

  text-transform:uppercase;

  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;

  white-space:nowrap;
}

.sidebar-link{
  width:100%;
  border:0;
  background:transparent;

  color:#cbd5e1;
  text-decoration:none;

  display:flex;
  align-items:center;
  gap:12px;

  padding:11px 12px;

  border-radius:14px;

  font-weight:700;
  text-align:left;

  transition:
    background .16s ease,
    color .16s ease;

  min-height:46px;
}

.sidebar-link i:first-child{
  font-size:1.18rem;
  width:22px;
  text-align:center;
  flex:0 0 22px;
}

.sidebar-link span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar-link:hover,
.sidebar-link:focus{
  background:rgba(255,255,255,.10);
  color:#fff;
}

.sidebar-toggle .chevron{
  margin-left:auto;
  font-size:.82rem;
  transition:transform .18s ease;
}

.sidebar-group.open .chevron{
  transform:rotate(180deg);
}

.sidebar-submenu{
  display:none;
  margin:3px 0 7px;
  padding:0;
}

.sidebar-submenu.show{
  display:block;
}

.sidebar-sublink{
  display:block;

  margin:3px 4px 3px 46px;
  padding:8px 10px;

  border-radius:12px;

  color:#bfdbfe;
  text-decoration:none;

  font-size:.92rem;
  font-weight:600;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar-sublink:hover,
.sidebar-sublink.active{
  background:rgba(59,130,246,.24);
  color:#fff;
}

.app-content{
  min-height:100vh;
  width:100%;

  margin-left:var(--sidebar-width);

  transition:margin-left .22s ease;
}

.app-topbar{
  height:var(--topbar-height);

  position:sticky;
  top:0;
  z-index:1030;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(14px);

  border-bottom:1px solid rgba(148,163,184,.25);

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 24px;

  box-shadow:0 8px 26px rgba(15,23,42,.05);
}

.btn-icon{
  height:42px;
  width:42px;

  display:grid;
  place-items:center;

  border-radius:14px;

  border:1px solid #dbe4f0;
  background:#fff;

  color:#1e293b;
}

.btn-icon:hover{
  background:#eff6ff;
  color:var(--accent);
}

.topbar-title{
  font-weight:800;
  color:#0f172a;
  line-height:1.1;
}

.topbar-subtitle{
  font-size:.83rem;
  color:var(--muted);
}

.user-chip{
  align-items:center;
  gap:8px;

  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:999px;

  padding:8px 12px;

  font-weight:700;
}

.user-chip small{
  color:var(--muted);
  font-weight:700;

  border-left:1px solid #cbd5e1;

  padding-left:8px;
}

.app-main{
  padding:24px;
}

.sidebar-backdrop{
  display:none;

  position:fixed;
  inset:0;

  background:rgba(15,23,42,.45);

  z-index:1035;
}

/* =========================================================
   SIDEBAR COLLAPSED
   ========================================================= */

.sidebar-collapsed .app-sidebar{
  width:var(--sidebar-collapsed);
}

.sidebar-collapsed .app-content{
  margin-left:var(--sidebar-collapsed);
}

.sidebar-collapsed .brand-text,
.sidebar-collapsed .sidebar-section,
.sidebar-collapsed .sidebar-link span,
.sidebar-collapsed .sidebar-toggle .chevron,
.sidebar-collapsed .sidebar-submenu{
  display:none;
}

.sidebar-collapsed .sidebar-brand{
  justify-content:center;
  padding:0 10px;
}

.sidebar-collapsed .sidebar-link{
  justify-content:center;
  padding-left:0;
  padding-right:0;
}

.sidebar-collapsed .sidebar-link i:first-child{
  width:auto;
}

/* =========================================================
   CARDS
   ========================================================= */

.metric-card,
.panel-card{
  background:var(--card);
  border:0;
  border-radius:22px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.metric-icon{
  height:46px;
  width:46px;

  border-radius:16px;

  display:grid;
  place-items:center;

  background:#eff6ff;
  color:var(--accent);

  font-size:1.35rem;
}

.table-card{
  border-radius:22px;
  overflow:hidden;

  background:#fff;

  box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.dashboard-hero img{
  width:100%;
  max-height:260px;
  object-fit:cover;
}

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
}

.form-control,
.form-select{
  border-radius:14px;
}

.badge-soft{
  background:#e0f2fe;
  color:#0369a1;
}

/* =========================================================
   TABLES
   ========================================================= */

.table thead th{
  white-space:nowrap;
}

.table td{
  vertical-align:middle;
}

/* =========================================================
   RESPONSIVE CARDS
   ========================================================= */

.desktop-table{
  display:block;
}

.responsive-card-list{
  display:none;
}

.record-card,
.client-card{
  background:#fff;

  border:1px solid #e5e7eb;
  border-radius:20px;

  padding:16px;

  box-shadow:0 10px 26px rgba(15,23,42,.07);

  margin-bottom:14px;
}

.record-card-title,
.client-card-title{
  font-weight:800;
  color:#0f172a;

  font-size:1rem;

  margin-bottom:2px;
}

.card-meta{
  display:grid;
  grid-template-columns:120px 1fr;

  gap:6px 12px;

  margin:12px 0;

  color:#334155;
  font-size:.92rem;
}

.card-meta .label{
  color:#64748b;
  font-weight:700;
}

/* =========================================================
   ACTIONS
   ========================================================= */

.table-actions{
  display:flex;
  flex-direction:column;
  gap:.45rem;

  align-items:flex-end;

  min-width:135px;
}

.table-actions .btn,
.table-actions form,
.table-actions form .btn{
  width:130px;
}

.table-actions .btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:.35rem;

  white-space:nowrap;
}

.table-actions form{
  margin:0;
}

.table-actions > a,
.table-actions > form{
  margin-bottom:.45rem;
}

.table-actions > a:last-child,
.table-actions > form:last-child{
  margin-bottom:.45rem;
}

.mobile-action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;

  margin-top:14px;
}

.mobile-action-grid .btn,
.mobile-action-grid form,
.mobile-action-grid form .btn{
  width:100%;
}

.mobile-action-grid .btn{
  border-radius:14px;
  font-weight:700;
}

/* =========================================================
   MOBILE GRID
   ========================================================= */

.client-mobile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:10px 14px;

  font-size:.92rem;
  margin-top:10px;
}

.client-mobile-grid span{
  display:block;

  color:#64748b;

  font-size:.78rem;
  margin-bottom:2px;

  font-weight:600;
}

.client-mobile-grid strong{
  display:block;

  color:#0f172a;
  font-weight:700;

  word-break:break-word;
  line-height:1.35;
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media(max-width:991.98px){

  .app-sidebar{
    transform:translateX(-100%);
    width:var(--sidebar-width);
  }

  .sidebar-open .app-sidebar{
    transform:translateX(0);
  }

  .sidebar-open .sidebar-backdrop{
    display:block;
  }

  .app-content{
    margin-left:0;
  }

  .app-topbar{
    padding:0 14px;
  }

  .app-main{
    padding:16px 14px;
  }

  .desktop-table{
    display:none!important;
  }

  .responsive-card-list{
    display:block;
  }

  .page-header-responsive{
    flex-direction:column;
    align-items:stretch!important;
    gap:12px;
  }

  .page-header-responsive .btn{
    width:100%;
  }

  .filter-actions .btn{
    width:100%;
  }

  .table-responsive{
    font-size:.92rem;
  }

  .table-actions{
    align-items:stretch;
  }

  .table-actions .btn,
  .table-actions form,
  .table-actions form .btn{
    width:100%;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:575.98px){

  .app-main{
    padding:14px 10px;
  }

  .metric-card,
  .panel-card,
  .table-card,
  .card{
    border-radius:18px;
  }

  .topbar-title{
    font-size:.96rem;
  }

  .client-mobile-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .mobile-action-grid{
    grid-template-columns:1fr;
  }

  .card-meta{
    grid-template-columns:100px 1fr;
    font-size:.9rem;
  }

  .client-mobile-grid strong{
    font-size:.95rem;
  }

  .hide-mobile{
    display:none;
  }

  .container-fluid{
    padding-left:14px;
    padding-right:14px;
  }
}