:root{
  --brand:#1e3a5f;
  --brand-dark:#132840;
  --brand-light:#2d5a8f;
  --accent:#c9a24b;
  --bg:#f4f6f9;
  --border:#dde3ea;
  --text:#233044;
  --muted:#6c7a89;
  --danger:#d64545;
  --success:#2e9e5b;
}

*{box-sizing:border-box;}
body{
  background:var(--bg);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  min-height:100vh;
}

/* ===== Navbar ===== */
.app-navbar{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  padding:.65rem 0;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.app-navbar .navbar-brand{
  color:#fff;font-weight:800;font-size:1.25rem;letter-spacing:.3px;
}
.app-navbar .navbar-brand span{color:var(--accent);font-weight:800;}
.app-navbar .nav-link{
  color:rgba(255,255,255,.82) !important;
  font-weight:500;font-size:.92rem;padding:.5rem .9rem !important;
  border-radius:6px;transition:.15s;
}
.app-navbar .nav-link:hover{color:#fff !important;background:rgba(255,255,255,.08);}
.app-navbar .nav-link.active{color:#fff !important;background:rgba(255,255,255,.16);}
.navbar-toggler{border-color:rgba(255,255,255,.4);}
.navbar-toggler-icon{filter:invert(1);}

.app-main{padding:1.5rem;padding-bottom:4.5rem;max-width:1400px;margin:0 auto;}
@media (max-width:576px){.app-main{padding:.85rem;padding-bottom:4.25rem;}}

/* ===== Fixed footer (mirrors the sticky top navbar) ===== */
.app-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:1030;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:rgba(255,255,255,.85);
  font-size:.78rem;text-align:center;
  padding:.55rem 1rem;
  box-shadow:0 -2px 10px rgba(0,0,0,.12);
}
.app-footer .app-footer-sep{margin:0 .5rem;opacity:.6;}
@media (max-width:576px){
  .app-footer{font-size:.72rem;padding:.5rem .6rem;}
  .app-footer .app-footer-sep{display:none;}
  .app-footer span{display:block;}
}

/* ===== Auth page ===== */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand) 60%,#3a6ba5);
  padding:1rem;
}
.auth-card{
  background:#fff;border-radius:14px;padding:2.4rem 2.2rem;width:100%;max-width:420px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.auth-card .brand-title{color:var(--brand);font-weight:800;text-align:center;margin-bottom:.2rem;}
.auth-card .brand-sub{color:var(--muted);text-align:center;margin-bottom:1.8rem;font-size:.9rem;}

/* ===== Cards / panels ===== */
.panel{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:1.25rem 1.4rem;margin-bottom:1.25rem;box-shadow:0 1px 3px rgba(20,30,50,.05);
}
.panel-title{
  font-weight:700;font-size:1.05rem;color:var(--brand-dark);
  display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;
}
.page-header{
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-bottom:1.25rem;
}
.page-header h4{font-weight:800;color:var(--brand-dark);margin:0;}
.page-header p{color:var(--muted);margin:0;font-size:.88rem;}

.stat-card{
  background:#fff;border-radius:12px;padding:1.1rem 1.3rem;border:1px solid var(--border);
  display:flex;align-items:center;gap:1rem;box-shadow:0 1px 3px rgba(20,30,50,.05);height:100%;
}
.stat-card .icon{
  width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-light));
  flex-shrink:0;
}
.stat-card .val{font-size:1.5rem;font-weight:800;color:var(--brand-dark);line-height:1;}
.stat-card .lbl{color:var(--muted);font-size:.8rem;margin-top:.2rem;}

/* ===== Buttons ===== */
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;}
.btn-outline-brand{border-color:var(--brand);color:var(--brand);}
.btn-outline-brand:hover{background:var(--brand);color:#fff;}

/* ===== Tables (app grid) ===== */
.table-app thead th{
  background:var(--brand-dark);color:#fff;font-weight:600;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;border:none;
}
.table-app td{vertical-align:middle;font-size:.9rem;}
.table-app tbody tr:hover{background:#f0f4f9;}
.table-app{border-radius:10px;overflow:hidden;}
.badge-status{font-weight:600;font-size:.72rem;padding:.4em .7em;}

/* ===== Skeleton loader ===== */
.skeleton{
  background:linear-gradient(90deg,#e9edf2 25%,#f4f6f9 37%,#e9edf2 63%);
  background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;
  border-radius:6px;display:block;
}
@keyframes skeleton-loading{
  0%{background-position:100% 50%;}
  100%{background-position:0 50%;}
}
.skeleton-text{height:14px;margin:6px 0;width:100%;}
.skeleton-row td{padding:14px 12px;}

/* ===== Loading overlay ===== */
.app-loading-overlay{
  position:fixed;inset:0;background:rgba(20,30,50,.55);z-index:2000;
  display:flex;align-items:center;justify-content:center;
}

/* ===== Dynamic color-block builder (design form) ===== */
.color-block{
  border:1px solid var(--border);border-radius:10px;padding:1rem 1.1rem;margin-bottom:1rem;
  background:#fbfcfe;position:relative;
}
.color-block .color-block-head{
  display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem;flex-wrap:wrap;
}
.color-block .roll-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;}
.color-block .roll-row .roll-index{
  width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;
}
.color-block .roll-summary{font-size:.85rem;color:var(--muted);margin-top:.4rem;}
.color-block .roll-summary b{color:var(--brand-dark);}

.grand-summary{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:#fff;border-radius:12px;padding:1.1rem 1.4rem;
  display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;
}
.grand-summary .gs-item{text-align:center;}
.grand-summary .gs-item .v{font-size:1.35rem;font-weight:800;}
.grand-summary .gs-item .l{font-size:.75rem;opacity:.85;text-transform:uppercase;letter-spacing:.4px;}

/* ===== Export table (matches sample excel output) ===== */
.export-wrap{background:#fff;padding:1.25rem;border-radius:10px;overflow-x:auto;}

/* Info header bar shown ABOVE the table - captured in PDF/Image too */
.export-header{
  border:1px solid #333;border-bottom:none;background:#eef2f7;
  padding:12px 16px;min-width:640px;
}
.export-header .eh-title{
  font-weight:800;font-size:1.05rem;color:var(--brand-dark);text-transform:uppercase;
  letter-spacing:.3px;margin-bottom:6px;text-align:center;
}
.export-header .eh-fields{
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-content:center;
}
.export-header .eh-field{font-size:.88rem;color:var(--text);text-align:center;}
.export-header .eh-field b{color:var(--brand-dark);text-transform:uppercase;font-size:.72rem;letter-spacing:.3px;display:block;opacity:.7;}
.export-header .eh-field span{font-weight:700;font-size:.98rem;}

.export-table{border-collapse:collapse;width:100%;min-width:640px;font-family:Arial,Helvetica,sans-serif;}
.export-table th,.export-table td{
  border:1px solid #333;padding:6px 10px;font-size:.85rem;text-align:center;white-space:nowrap;
}
.export-table th{background:#eef2f7;text-align:center;font-weight:700;}
.export-table td.lbl-col, .export-table th.lbl-col{font-weight:600;background:#f7f9fb;text-align:center;}
.export-table tfoot td{font-weight:700;background:#f0f4f9;text-align:center;}
.export-table .calc-row td{font-weight:600;background:#fff;border-left:1px solid #333;border-right:1px solid #333;text-align:center;}

/* ===== Login-style ===== */
.form-label{font-weight:600;font-size:.85rem;color:var(--text);}
.form-control:focus,.form-select:focus{border-color:var(--brand-light);box-shadow:0 0 0 .2rem rgba(45,90,143,.15);}

.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted);}
.empty-state i{font-size:2.6rem;opacity:.4;}

/* ===== Mobile cards (replace tables on small screens, except export tables) ===== */
.mobile-card-list{display:flex;flex-direction:column;gap:.75rem;}
.mobile-card{
  border:1px solid var(--border);border-radius:10px;background:#fff;
  padding:.9rem 1rem;box-shadow:0 1px 3px rgba(20,30,50,.05);
}
.mobile-card .mc-title{
  font-weight:700;font-size:1rem;color:var(--brand-dark);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;
}
.mobile-card .mc-row{
  display:flex;justify-content:space-between;gap:.75rem;
  font-size:.85rem;padding:.3rem 0;border-top:1px dashed var(--border);
}
.mobile-card .mc-row:first-of-type{border-top:none;}
.mobile-card .mc-row .mc-label{color:var(--muted);}
.mobile-card .mc-row .mc-value{font-weight:600;text-align:right;}
.mobile-card .mc-actions{
  display:flex;gap:.5rem;margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--border);
}
.mobile-card .mc-actions .btn{flex:1;}
.mobile-card .mc-check{display:flex;align-items:center;gap:.6rem;}

/* Skeleton cards for mobile while loading */
.mobile-card.skeleton-card .skeleton-text{margin:5px 0;}