:root{
  --bg-1: #0f1724; /* deep navy */
  --bg-2: #0b1220; /* darker */
  --accent:#6f42c1; /* purple */
  --accent-2:#12b886; /* teal */
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
}
body{
  min-height:100vh;
  align-items:center;
  justify-content:center;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(111,66,193,0.12), transparent 8%),
			  radial-gradient(900px 400px at 90% 85%, rgba(18,184,134,0.08), transparent 8%),
			  linear-gradient(180deg,#0f1723,#071126 65%);
  color: #e6eef8;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}


input.text-white::placeholder { color:#6c757d;}

.tblwf th{
	font-size:0.8rem;
}
.tblwf th,
.tblwf td{
	vertical-align:top;
	padding:5px;
}

.navbar{background:transparent}
.brand{font-weight:700;letter-spacing:.4px}

.card-ghost{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 30px rgba(2,6,23,0.6);
}
.brand-badge{
  display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-radius:999px;font-weight:600;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow: 0 6px 18px rgba(18,184,134,0.12);
  font-size:.95rem;
}
.logo-mark{
  width:34px;height:34px;border-radius:8px;display:inline-grid;place-items:center;background:rgba(255,255,255,0.15);font-weight:700;color:#fff;
  box-shadow:0 4px 10px rgba(111,66,193,0.12);
}
.form-control:focus{box-shadow:none;border-color:rgba(111,66,193,0.65)}
.or-divider{color:rgba(255,255,255,0.45);font-size:.9rem}
.social-btn{border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}
.muted{color:rgba(255,255,255,0.6)}

.btn-accent{
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
}

.brand{font-weight:700;letter-spacing:0.4px;padding:1.4rem 1.25rem;font-size:1.05rem}
.nav-link{color:rgba(230,238,248,0.85)}
.nav-link.active{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-left:3px solid rgba(140,92,246,0.9);}

.app-shell{min-height:100vh;display:flex}
/* Sidebar */
.sidebar{width:260px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(6px);box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02);border-right:1px solid rgba(255,255,255,0.02)}
.nav-link{color:rgba(230,238,248,0.85)}
.nav-link.active{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-left:3px solid rgba(140,92,246,0.9);}
.content{flex:1;padding:1.5rem}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.search{min-width:320px;background:var(--glass);border:1px solid rgba(255,255,255,0.03);padding:.5rem .75rem;border-radius:10px}
.kpi-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);border-radius:12px;padding:1rem}
.card-ghost{background:transparent;border:1px dashed rgba(255,255,255,0.03)}
.chip{background:linear-gradient(90deg,#1f2937, rgba(255,255,255,0.01));border-radius:999px;padding:.35rem .6rem;font-size:.8rem}
.small-muted{color:rgba(230,238,248,0.55);font-size:.85rem}
.table thead th{border-bottom:1px solid rgba(255,255,255,0.03)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* Card */
.dark-card {
  background-color: #11263c;
  border: 1px solid #1e3a5f;
  border-radius: 10px;
}

.dark-card-header {
  background-color: #0f2a44;
  border-bottom: 1px solid #1e3a5f;
  color: #ffffff;
}

/* Table */
.dark-table {
  color: #e6edf3;
}

.dark-table thead th {
  background-color: #0f2a44;
  color: #9fc5ff;
  border-bottom: 1px solid #1e3a5f;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.dark-table tbody tr {
  border-bottom: 1px solid #1e3a5f;
}

.dark-table tbody tr:hover {
  background-color: #163a5f;
}

.dark-table td {
  vertical-align: middle;
}


/* Modal Container */
.modern-modal {
  background: linear-gradient(180deg, #11263c, #0b1c2d);
  border: 1px solid #1e3a5f;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  color: #e6edf3;
}

/* Header */
.modern-modal-header {
  background-color: #0f2a44;
  border-bottom: 1px solid #1e3a5f;
  border-radius: 14px 14px 0 0;
}

/* Footer */
.modern-modal-footer {
  border-top: 1px solid #1e3a5f;
}

/* Divider */
.modal-divider {
  border-color: #1e3a5f;
}

/* Buttons */
.btn-info {
  background-color: #5bc0ff;
  border-color: #5bc0ff;
  color: #0b1c2d;
}

.btn-info:hover {
  background-color: #3aa8f7;
  border-color: #3aa8f7;
}

.btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.btn-close:hover {
  opacity: 1;
}

.form-label {
  color: #9fc5ff;
  font-size: 0.85rem;
}

.modern-input {
  background-color: #0f2a44;
  border: 1px solid #1e3a5f;
  color: #e6edf3;
  border-radius: 8px;
}

.modern-input::placeholder {
  color: #7fa8d8;
}

.modern-input:focus {
  background-color: #0f2a44;
  border-color: #5bc0ff;
  box-shadow: 0 0 0 0.15rem rgba(91, 192, 255, 0.25);
  color: #ffffff;
}

/* Disabled fields */
.modern-input:disabled {
  background-color: #0b1c2d;
  border-color: #1a3552;
  color: #6f8fb3;
  cursor: not-allowed;
  opacity: 1; /* prevent Bootstrap fading */
}

/* Readonly fields */
.modern-input[readonly] {
  background-color: #102b46;
  border-color: #2c4f77;
  color: #c7ddf5;
  cursor: default;
}

/* Remove focus glow for readonly & disabled */
.modern-input:disabled:focus,
.modern-input[readonly]:focus {
  box-shadow: none;
  border-color: inherit;
}

/* Optional: subtle lock icon effect */
.modern-input[readonly] {
  background-image: linear-gradient(
    135deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0)
  );
}

/* FORCE disabled select background */
.form-select.modern-input:disabled {
  background-color: #0b1c2d !important;
  border-color: #1a3552 !important;
  color: #6f8fb3 !important;
  cursor: not-allowed;
  opacity: 1;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Fix arrow color when disabled */
.form-select.modern-input:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236f8fb3' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
}

.tbl-content th,
.tbl-content td{
	vertical-align:top;
}

@media (max-width: 992px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.card-grid{grid-template-columns:1fr}.sidebar{display:none}}
@media (max-width:575px){body{padding:1.25rem}}