/* =========================================================
   GUSTOLIX ATTENDANCE — ENTERPRISE DARK UI
   ========================================================= */

/* -------------------------
   ROOT THEME VARIABLES
------------------------- */
:root{
  --bg0:#070A12;
  --bg1:#0B1224;

  --card:#0f1933cc;
  --stroke:#22325f;

  --text:#EAF0FF;
  --muted:#AEB9DA;

  --brand1:#2BE7C8;
  --brand2:#5E7BFF;

  --warn:#FFB020;
  --danger:#FF4D6D;
  --ok:#36D399;

  --radius:18px;

  --shadow:
    0 18px 70px rgba(0,0,0,.65);
  --shadow-soft:
    0 10px 40px rgba(0,0,0,.35);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono","Courier New", monospace;
}

/* -------------------------
   BASE / RESET
------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(94,123,255,.25), transparent 55%),
    radial-gradient(900px 600px at 90% 20%, rgba(43,231,200,.18), transparent 60%),
    radial-gradient(800px 500px at 50% 100%, rgba(255,176,32,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family:
    ui-sans-serif, system-ui, -apple-system,
    Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji","Segoe UI Emoji";
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
hr{border:0; border-top:1px solid rgba(34,50,95,.6)}

/* -------------------------
   APP SHELL
------------------------- */
.app-shell{
  min-height:100%;
  display:flex;
}

/* -------------------------
   SIDEBAR
------------------------- */
.sidebar{
  width:270px;
  flex:0 0 270px;
  height:100vh;
  position:sticky;
  top:0;

  padding:18px 14px;

  background:
    linear-gradient(180deg,
      rgba(15,25,51,.95),
      rgba(11,18,36,.80)
    );

  border-right:1px solid rgba(34,50,95,.65);
  backdrop-filter: blur(14px);
}

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

  padding:12px;
  margin-bottom:16px;

  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow-soft);
}
.brand .logo{
  width:36px;
  height:36px;
  border-radius:12px;
  background:
    radial-gradient(circle at 30% 30%, var(--brand1), var(--brand2));
  box-shadow: 0 0 0 4px rgba(94,123,255,.12);
}
.brand .name{font-weight:800; letter-spacing:.3px}
.brand .tag{
  font-size:.78rem;
  color:var(--muted);
}

/* NAV */
.nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:10px 12px;
  margin-bottom:6px;

  border-radius:14px;
  color:rgba(234,240,255,.92);
  border:1px solid transparent;
}
.nav a:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(94,123,255,.35);
}
.nav a.active{
  background:
    linear-gradient(135deg,
      rgba(94,123,255,.25),
      rgba(43,231,200,.12)
    );
  border-color: rgba(94,123,255,.45);
}

/* BADGE */
.badge-mini{
  font-size:.72rem;
  padding:.22rem .55rem;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

/* -------------------------
   MAIN CONTENT
------------------------- */
.main{
  flex:1;
  padding:22px;
}

/* TOP BAR */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

/* -------------------------
   CARDS
------------------------- */
.cardx{
  background:
    linear-gradient(180deg,
      rgba(15,25,51,.92),
      rgba(8,12,22,.82)
    );
  border:1px solid rgba(94,123,255,.22);
  border-radius: var(--radius);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(43,231,200,.10) inset;
  backdrop-filter: blur(14px);
}

.cardx .cardx-h{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.01)
    );
  border-bottom:1px solid rgba(94,123,255,.20);
}

.cardx .cardx-b{
  padding:16px;
  background: rgba(7,10,18,.22);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* RIGHT PANEL HIGHLIGHT */
.cardx.is-right{
  position:relative;
}
.cardx.is-right::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: calc(var(--radius) + 12px);
  background:
    radial-gradient(600px 240px at 60% 10%,
      rgba(94,123,255,.22),
      transparent 65%
    );
  z-index:-1;
  pointer-events:none;
}

/* -------------------------
   BUTTONS
------------------------- */
.btn-glow{
  border:none;
  background:
    linear-gradient(135deg, var(--brand2), var(--brand1));
  color:#061027;
  font-weight:800;
  padding:10px 16px;
  border-radius:14px;
  box-shadow: 0 12px 40px rgba(94,123,255,.30);
  cursor:pointer;
}
.btn-soft{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(234,240,255,.92);
  padding:10px 14px;
  border-radius:14px;
}

/* -------------------------
   FORMS
------------------------- */
.form-control,
.form-select{
  background: rgba(7,10,18,.55);
  border:1px solid rgba(34,50,95,.85);
  color:rgba(234,240,255,.95);
  border-radius:14px;
}
.form-control:focus,
.form-select:focus{
  background: rgba(7,10,18,.65);
  border-color: rgba(94,123,255,.85);
  box-shadow: 0 0 0 .25rem rgba(94,123,255,.18);
  color:rgba(234,240,255,.95);
}
.small-muted{
  color:var(--muted);
  font-size:.9rem;
}

/* -------------------------
   TABLES (FIXED VISIBILITY)
------------------------- */
.table{
  width:100%;
  margin:0;

  background: rgba(7,10,18,.30);
  border-radius:14px;
  overflow:hidden;

  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-hover-bg: rgba(94,123,255,.10);
}
.table thead th{
  background: rgba(7,10,18,.45);
  color:rgba(234,240,255,.95);
  font-weight:700;
  border-color: rgba(94,123,255,.25) !important;
}
.table td{
  color:rgba(234,240,255,.92);
  border-color: rgba(94,123,255,.12) !important;
}
.table tbody tr:hover{
  background: rgba(94,123,255,.08);
}

/* -------------------------
   STATUS BADGES
------------------------- */
.status{
  font-size:.78rem;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.status.ok{
  border-color: rgba(54,211,153,.45);
  background: rgba(54,211,153,.12);
}
.status.warn{
  border-color: rgba(255,176,32,.45);
  background: rgba(255,176,32,.12);
}
.status.danger{
  border-color: rgba(255,77,109,.45);
  background: rgba(255,77,109,.12);
}

/* -------------------------
   KPI / INFO BLOCKS
------------------------- */
.kpi{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.kpi .dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background: var(--brand2);
  box-shadow: 0 0 0 6px rgba(94,123,255,.12);
}

/* -------------------------
   TOAST / ALERT
------------------------- */
.toastx{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,25,51,.75);
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 992px){
  .sidebar{display:none}
  .main{padding:16px}
}