:root{
  --brand:#111827;
  --brand-2:#0f172a;
  --accent:#06b6d4;
  --accent-dark:#0891b2;
  --soft:#f3f6fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#dbe4ef;
  --danger-soft:#fff1f2;
  --warning-soft:#e0f2fe;
  --open-soft:#e0f2fe;
  --open-soft-hover:#d7effc;
  --open-text:#075985;
  --open-border:#bae6fd;
  --success-soft:#ecfdf5;
}

*{box-sizing:border-box}
body{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(6,182,212,.16), transparent 32rem),
    linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell{min-height:100vh;}
.app-navbar{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  box-shadow:0 10px 30px rgba(15,23,42,.18);
}
.navbar-brand{font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:.65rem;}
.brand-icon{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.12);background:#fff;object-fit:cover;}
.app-clockbar{
  background:linear-gradient(90deg,#06b6d4 0%,#22d3ee 55%,#67e8f9 100%);
  color:#06313a;
  border-bottom:1px solid rgba(8,145,178,.22);
}
.app-main{padding-top:1.35rem;padding-bottom:2.5rem;}
.page-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(219,228,239,.9);
  border-radius:1.1rem;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  backdrop-filter:blur(8px);
}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;}
.page-title{font-weight:800;margin:0;color:#111827;}
.page-subtitle{color:var(--muted);margin:.25rem 0 0;}

.card{border-radius:1rem;border:1px solid var(--border);}
.card.shadow-sm{box-shadow:0 12px 28px rgba(15,23,42,.07)!important;}
.stat-card{
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
  height:100%;
}
.stat-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;}
.stat-value{font-size:1.35rem;font-weight:800;color:#111827;line-height:1.1;}
.stat-help{font-size:.88rem;color:var(--muted);}

.btn{border-radius:.7rem;font-weight:650;}
.btn-primary,.btn-secondary{background:var(--accent-dark);border-color:var(--accent-dark);}
.btn-primary:hover,.btn-secondary:hover{background:#0e7490;border-color:#0e7490;}
.btn-success{background:#16a34a;border-color:#16a34a;}
.btn-danger{background:#dc2626;border-color:#dc2626;}
.btn-lg{padding:.9rem 1rem;font-size:1.05rem;}
.form-control,.form-select{border-radius:.7rem;border-color:#cfd9e6;}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 .25rem rgba(6,182,212,.18);}
label.form-label{font-weight:700;color:#374151;font-size:.92rem;}

.table{--bs-table-bg:transparent;}
.table thead th{
  color:#475569;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.055em;
  border-bottom:1px solid #cfd9e6;
  white-space:nowrap;
}
.table tbody td{vertical-align:middle;border-color:#e6edf5;}
.table-hover tbody tr:hover{background-color:#f8fbff;}
.table-responsive{border-radius:.9rem;}
.badge{border-radius:999px;padding:.45em .65em;font-weight:750;}
.alert{border-radius:1rem;border:0;box-shadow:0 10px 24px rgba(15,23,42,.06);}
.alert-info{background:#ecfeff;color:#155e75;}
.alert-warning{background:var(--open-soft);color:var(--open-text);border:1px solid var(--open-border);}
.alert-danger{background:var(--danger-soft);color:#9f1239;}

.clock-panel{
  overflow:hidden;
  position:relative;
  background:linear-gradient(135deg,#ffffff 0%,#f2fbff 100%);
}
.clock-panel:after{
  content:"";
  position:absolute;right:-45px;top:-45px;width:140px;height:140px;
  border-radius:50%;background:rgba(6,182,212,.12);
}
.clock-icon-large{width:74px;height:74px;border-radius:50%;background:#fff;box-shadow:0 8px 25px rgba(15,23,42,.13);}
.action-button{box-shadow:0 12px 25px rgba(15,23,42,.12);}
.admin-actions .btn{background:#fff;color:#475569;border-color:#94a3b8;}
.admin-actions .btn:hover,.admin-actions .btn:focus{background:#ecfeff;color:#075985;border-color:#06b6d4;box-shadow:0 8px 18px rgba(6,182,212,.18);}
.table-warning > *{--bs-table-bg:var(--open-soft);--bs-table-color:#0f172a;border-color:var(--open-border);}
.table-hover tbody tr.table-warning:hover > *{--bs-table-bg:var(--open-soft-hover);color:#0f172a;}

.login-card{max-width:430px;margin-inline:auto;}
.login-brand{width:86px;height:86px;border-radius:50%;box-shadow:0 14px 35px rgba(15,23,42,.16);}

.section-title{font-size:1.05rem;font-weight:800;margin:0;}
.empty-state{border:1px dashed #cbd5e1;border-radius:1rem;padding:1.25rem;text-align:center;color:var(--muted);background:#f8fafc;}

@media (max-width:768px){
  .page-header{display:block;}
  .app-main{padding-top:1rem;}
  .clock-icon-large{width:58px;height:58px;}
  .stat-value{font-size:1.15rem;}
}

.location-hint{
  background:#f0f9ff;
  border:1px solid #bae6fd;
  color:#075985;
  border-radius:.9rem;
  padding:.75rem .9rem;
  font-size:.92rem;
}
.location-hint.location-required{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}

/* Report filters */
.report-filter-row{row-gap:1rem;}
.report-checkbox-nowrap{white-space:nowrap;min-width:130px;}
.report-action-buttons{display:flex;align-items:center;justify-content:flex-start;gap:.55rem;flex-wrap:nowrap;}
.report-action-buttons .btn{white-space:nowrap;flex:0 0 auto;}
@media (min-width: 992px){
  .report-action-buttons{justify-content:flex-start;}
}
@media (max-width: 991.98px){
  .report-action-buttons{display:grid;grid-template-columns:1fr;gap:.6rem;}
  .report-action-buttons .btn{width:100%;}
  .report-checkbox-nowrap{white-space:normal;}
}

/* Reports pagination */
.report-pagination .btn-group .btn{
  min-width: 98px;
}
@media (max-width: 575.98px){
  .report-pagination{
    align-items: stretch !important;
  }
  .report-pagination .btn-group{
    width: 100%;
  }
  .report-pagination .btn-group .btn{
    flex: 1 1 auto;
  }
}

/* Compact manual location editor in admin attendance edit */
.location-cell{
  vertical-align:middle;
  white-space:nowrap;
}
.location-links{
  display:inline-flex;
  align-items:center;
  gap:.18rem;
  margin:0;
  white-space:nowrap;
}
.location-links a{
  font-weight:700;
}
.location-editor{
  display:inline-block;
  margin-left:.35rem;
  vertical-align:baseline;
  white-space:normal;
}
.location-edit-summary{
  cursor:pointer;
  display:inline-block;
  color:var(--accent-dark);
  font-weight:800;
  font-size:.72rem;
  line-height:1;
  padding:.16rem .42rem;
  border:1px solid rgba(8,145,178,.28);
  border-radius:999px;
  background:rgba(224,242,254,.65);
  list-style:none;
}
.location-edit-summary::-webkit-details-marker{
  display:none;
}
.location-editor[open]{
  display:block;
  margin:.35rem 0 0;
}
.location-editor-panel{
  margin-top:.35rem;
  padding:.45rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.78);
  min-width:260px;
}
.location-editor-label{
  font-size:.68rem;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.2rem;
}
.location-editor-row{
  margin-bottom:.35rem;
}
.location-editor .form-control-sm{
  font-size:.72rem;
  min-height:28px;
  padding:.22rem .35rem;
}
.location-editor-help{
  margin-top:.25rem;
  color:var(--muted);
  font-size:.68rem;
}

.audit-table td,
.audit-table th {
  vertical-align: top;
}

.audit-json {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .75rem;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .6rem;
  margin: .25rem 0 0;
}