/* ====== Al-Nafoora Dark / Glass Theme ====== */
:root{
  --ana1:#0ea5e9;           /* cyan */
  --ana2:#6366f1;           /* indigo */
  --glass: rgba(255,255,255,.08);
  --glass-strong: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.18);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --text-hi:#f8fafc;        /* near white */
  --text-lo:#cbd5e1;        /* slate-300 */
  --table-header: rgba(255,255,255,.06);
}

html,body{height:100%}
.bg-gradient-anafoora{
  min-height:100%;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(99,102,241,0.20), transparent 45%),
    linear-gradient(135deg, #0b5aa5 0%, #0ea5e9 25%, #6366f1 100%);
  color: var(--text-hi);
}

/* ====== Glass cards ====== */
.card-glass{
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.card-glass .card-header{
  background: var(--glass-strong);
  border-bottom: 1px solid var(--stroke);
}

/* ====== Typography tweaks ====== */
.navbar-brand{ color: var(--text-hi) !important; }
.text-white-75{ color: rgba(255,255,255,.75) !important; }
.text-white-50{ color: rgba(255,255,255,.55) !important; }

/* ====== Buttons ====== */
.btn-ana{
  background: linear-gradient(135deg, #22d3ee, #818cf8);
  border: 0;
  color:#fff !important;
  box-shadow: 0 6px 14px rgba(129,140,248,.35);
}
.btn-ana:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.btn-ana:active{ transform: translateY(0); }

.btn-ghost{
  background: var(--glass);
  color: var(--text-hi);
  border: 1px solid var(--stroke);
  box-shadow: none;
}
.btn-ghost:hover{ background: var(--glass-strong); }

/* Override bootstrap default primary look in dark */
.btn-primary{
  background: linear-gradient(135deg, #22d3ee, #818cf8) !important;
  border: 0 !important;
}

/* Form controls rounded & dark */
.form-control, .form-select{
  border-radius: 12px;
  color: var(--text-hi);
  background-color: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
}
.form-control::placeholder{ color: rgba(255,255,255,.45); }
.form-control:focus, .form-select:focus{
  background-color: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 .25rem rgba(99,102,241,.25);
}

/* ====== DataTables dark skin ====== */
.table{
  color: var(--text-hi);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  border-color: var(--stroke);
}
.table thead th{
  background: var(--table-header) !important;
  color: var(--text-hi);
  border-bottom: 1px solid var(--stroke) !important;
}
.table>:not(caption)>*>*{ border-bottom-width: 0; }

/* DataTables wrapper bits */
.dataTables_wrapper .dataTables_filter label{
  color: var(--text-lo);
}
.dataTables_wrapper .dataTables_filter input{
  color: var(--text-hi);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: .25rem .5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color: var(--text-hi) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: rgba(255,255,255,.10) !important;
  border-color: var(--stroke) !important;
  border-radius: 8px;
}

/* ====== Print window: keep it light but minimal ====== */
@media print{
  body{ background:#fff; color:#000; }
  .table thead th{ background:#f5f5f5 !important; color:#000; }
}

/* Footer subtle */
footer{ color: var(--text-lo); }
footer strong{ color: var(--text-hi); }


/* ============ Light dashboard tiles (like your screenshot) ============ */
.dash-light { background: #f4f6f9; border-radius: 18px; padding: 18px; }

/* tile container spacing */
.g-tiles { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

/* base tile */
.tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:160px; padding:22px;
  text-decoration:none;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e9eef5;
  box-shadow: 0 8px 22px rgba(13, 38, 76, 0.08);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  color: #1f2937; /* text-slate-800 */
}
.tile:hover, .tile:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(13, 38, 76, 0.12);
  border-color: #e2e8f0;
}

/* icon + label */
.tile-icon {
  font-size: clamp(52px, 6vw, 72px);
  line-height: 1;
  margin-bottom: 14px;
}
.tile-label {
  font-size: 1.02rem;
  font-weight: 500;
  text-align: center;
}

/* color variants (match screenshot vibes) */
.icon-blue  { color: #1a73e8; }   /* Google blue */
.icon-green { color: #25d366; }   /* WhatsApp green */
.icon-red   { color: #ef4444; }   /* red for lock/logout */
.icon-indigo{ color: #3b82f6; }   /* nice alt blue */
.icon-teal  { color: #0ea5a4; }
.icon-amber { color: #f59e0b; }

/* subtle badge (optional counters) */
.tile-badge{
  margin-top:10px; padding:.3rem .6rem; border-radius:999px;
  background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; font-size:.75rem;
}

/* make page background light on dashboards only */
body.dashboard-light { background: #f4f6f9 !important; }