:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --text: #182230;
  --muted: #667085;
  --border: #e4e7ec;
  --primary: #1f5eff;
  --primary-soft: #eaf0ff;
  --danger: #c01824;
  --success: #087443;
  --radius: 12px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Lato, Arial, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
h1, h2, h3 { margin: 0; }
h2 { font-size: 22px; margin-bottom: 16px; }

.hidden { display: none !important; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px;
  display: grid;
  gap: 14px;
  box-shadow: 0 18px 48px rgba(16,24,40,.08);
}
.brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #182230;
  color: #fff;
  border-radius: 14px;
  font-weight: 900;
}
.login-card p { margin: 0; color: var(--muted); line-height: 1.5; }

.landing-page {
  min-height: 100vh;
  background: #f7f5ef;
  color: #172033;
}
.landing-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(20px, 5vw, 72px);
}
.landing-nav strong { font-size: 24px; }
.landing-nav a {
  color: #172033;
  margin-left: 22px;
  text-decoration: none;
  font-weight: 700;
}
.landing-hero {
  min-height: 78vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 42px;
  align-items: center;
  padding: 26px clamp(20px, 5vw, 72px) 64px;
}
.landing-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: #6d5f44;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.landing-copy h1 {
  font-size: clamp(48px, 8vw, 108px);
  line-height: .94;
  letter-spacing: 0;
}
.landing-copy p {
  max-width: 620px;
  margin: 22px 0;
  color: #4b5563;
  font-size: 17px;
  line-height: 1.6;
}
.landing-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.landing-actions a {
  color: #172033;
  text-decoration: none;
  font-weight: 900;
}
.landing-primary {
  background: #172033;
  color: #fff !important;
  border-radius: 999px;
  padding: 13px 20px;
}
.landing-visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 28px;
}
.landing-visual {
  min-height: 420px;
  border-radius: 28px;
  background: #e9e5d8;
}
.landing-main {
  padding: 0 clamp(20px, 5vw, 72px) 72px;
}
.landing-section {
  padding: 48px 0;
  border-top: 1px solid rgba(23,32,51,.16);
}
.landing-section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.landing-section h2 { font-size: clamp(32px, 5vw, 56px); }
.landing-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.landing-stats div,
.facility-item {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 12px 28px rgba(23,32,51,.06);
}
.landing-stats span { color: #6b7280; }
.landing-stats strong { display: block; margin-top: 8px; font-size: 34px; }
.landing-split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 32px;
}
.facility-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.muted-text {
  color: var(--muted);
  margin: 4px 0 0;
}
.link-button {
  display: inline-block;
  text-decoration: none;
}
.gallery-editor {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.gallery-editor-item {
  display: grid;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.gallery-editor-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #e5e7eb;
}
.summary-list {
  display: grid;
  gap: 10px;
}
.summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.summary-list span {
  color: var(--muted);
}
.summary-list strong {
  text-align: right;
}
.upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.landing-admin-preview img {
  width: min(360px, 100%);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.landing-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.landing-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

.app { min-height: 100vh; }
.main-sidebar .sidebar {
  position: static;
  inset: auto;
  width: auto;
  background: transparent;
  color: inherit;
  padding: 0 .5rem;
  display: block;
}
.kcl-logo {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: .4rem;
  margin-right: .5rem;
  background: #3c8dbc;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.nav-sidebar .nav-link {
  border-radius: .25rem;
}
.mobile-select-wrap {
  display: none;
}
.ghost {
  background: transparent;
  color: inherit;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.primary, .secondary, .danger {
  border-radius: 10px;
  padding: 10px 14px;
}
.primary { background: var(--primary); color: #fff; }
.secondary { background: var(--primary-soft); color: var(--primary); }
.danger { background: #fee4e2; color: var(--danger); }

.content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.content-header p {
  margin: 4px 0 0;
  color: var(--muted);
}
.breadcrumb {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.grid { display: grid; gap: 14px; }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.card, .panel, .chart-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 8px 20px rgba(16,24,40,.04);
}
.card span { color: var(--muted); font-size: 13px; }
.card strong { display: block; font-size: 23px; margin-top: 8px; overflow-wrap: anywhere; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.finance-info-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.info-box {
  display: flex;
  min-height: 96px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16,24,40,.05);
}
.info-box-icon {
  width: 78px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.info-box-icon.blue { background: #3c8dbc; }
.info-box-icon.green { background: #00a65a; }
.info-box-icon.cyan { background: #00c0ef; }
.info-box-icon.purple { background: #605ca8; }
.info-box-icon.red { background: #dd4b39; }
.info-box-icon.orange { background: #f39c12; }
.info-box-content {
  min-width: 0;
  flex: 1;
  padding: 14px;
}
.info-box-content span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  text-transform: uppercase;
}
.info-box-content strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  overflow-wrap: anywhere;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.admin-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(16,24,40,.05);
  overflow: hidden;
}
.admin-card.wide {
  grid-column: 1 / -1;
}
.brand-strip {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid #182230;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.brand-strip span { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.brand-strip a { color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-wide { grid-column: 1 / -1; }
.chart-box h3 { font-size: 16px; margin-bottom: 14px; }
canvas { width: 100%; max-width: 100%; height: 260px; }
.admin-card canvas { height: 280px; }
.admin-card.wide canvas { height: 320px; }
.chart-wide canvas { height: 300px; }

.table-wrap { overflow-x: auto; }
.table-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 10px; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; }
th, td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 14px; }
th { background: #f9fafb; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.badge { display: inline-block; border-radius: 999px; padding: 4px 8px; background: #eef2ff; color: #3730a3; font-size: 12px; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.alert { padding: 12px 14px; border-radius: 10px; background: #eef2ff; color: #3730a3; margin-bottom: 14px; }
.alert.success { background: #dcfce7; color: var(--success); }
.alert.error { background: #fee4e2; color: var(--danger); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15,23,42,.55);
}
.modal-card {
  width: min(900px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.toggle-row input {
  width: auto;
}
.full { grid-column: 1 / -1; }
.receipt { border: 1px solid var(--border); border-top: 8px solid #172033; border-radius: 4px; padding: 24px; background: #fff; color: #172033; }
.receipt-header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e5e7eb; padding-bottom: 18px; }
.receipt-brand { display: inline-grid; place-items: center; width: 42px; height: 42px; background: #172033; color: #fff; border-radius: 8px; font-weight: 900; }
.receipt-meta { text-align: right; }
.receipt-meta span, .receipt-total span, .receipt-signature span { color: #6b7280; display: block; font-size: 12px; text-transform: uppercase; }
.receipt-total { display: flex; justify-content: space-between; align-items: center; background: #f3f4f6; padding: 18px; border-radius: 8px; font-size: 22px; font-weight: 900; margin: 16px 0; }
.receipt-total strong { font-size: 28px; }
.receipt-map iframe { width: 100%; height: 260px; border: 0; border-radius: 10px; }
.receipt-signature { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.receipt-signature div { border-top: 1px solid #d1d5db; padding-top: 12px; }

@media (max-width: 900px) {
  .mobile-select-wrap { display: block; width: 180px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid,
  .finance-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .pagination { align-items: flex-start; flex-direction: column; }
  .landing-hero,
  .landing-split { grid-template-columns: 1fr; }
  .landing-stats,
  .landing-gallery { grid-template-columns: 1fr; }
  .facility-list { grid-template-columns: 1fr; }
  .gallery-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .content-header { display: grid; }
  .info-grid,
  .finance-info-grid { grid-template-columns: 1fr; }
  .brand-strip { display: grid; }
  .gallery-editor { grid-template-columns: 1fr; }
}