/* ===== Camps Management System - App Styles ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Segoe UI','Inter',system-ui,Arial,sans-serif;color:#1f2937;background:#f3f5f9}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:250px;background:#0a2266;color:#dbe3f5;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#fff;padding:4px}
.brand-mark{width:42px;height:42px;border-radius:8px;background:var(--primary,#1144cd);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;letter-spacing:.5px}
.brand-text strong{display:block;font-size:13px;line-height:1.2}
.brand-text span{font-size:11px;opacity:.7}
.nav{padding:14px 0;flex:1;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:#dbe3f5;text-decoration:none;font-size:14px;border-left:3px solid transparent}
.nav a span{font-size:16px;width:20px;display:inline-block;text-align:center}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.active{background:rgba(255,255,255,.1);border-left-color:#fff;color:#fff}
.nav-section{padding:18px 18px 6px;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;opacity:.55}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:18px;background:#fff;padding:14px 26px;border-bottom:1px solid #e1e8f2;box-shadow:0 1px 0 rgba(0,0,0,.03);position:sticky;top:0;z-index:20}
.topbar h1{font-size:17px;font-weight:600;margin:0;flex:1;color:#0a2266}
.hamburger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:#0a2266}
.user-box{display:flex;align-items:center;gap:12px;font-size:13px}
.role-badge{padding:3px 9px;border-radius:12px;font-size:10px;text-transform:uppercase;font-weight:600;letter-spacing:.5px}
.role-admin{background:#fcecd1;color:#8a5a00}
.role-sub_manager{background:#d6e7ff;color:#0a4ea7}
.role-camp_user{background:#e0f6e7;color:#1a6431}
.role-viewer{background:#eef0f5;color:#4b5563}

.content{padding:24px 26px;flex:1}
.flash-container{padding:0 26px}
.flash{padding:10px 14px;border-radius:8px;margin:10px 0;font-size:13px}
.flash-success{background:#dff7e6;color:#1a6431;border:1px solid #aedebc}
.flash-error{background:#fde0e0;color:#a51f1f;border:1px solid #f3b7b7}
.flash-info{background:#e0eaff;color:#0a4ea7;border:1px solid #b7caf3}

/* Cards & sections */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.page-head h2{margin:0;font-size:21px;color:#0a2266}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:#fff;border-radius:12px;padding:18px 20px;box-shadow:0 1px 3px rgba(10,34,102,.07);border:1px solid #e8edf5;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--primary,#1144cd)}
.kpi .label{font-size:12px;color:#6b7585;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.kpi .value{font-size:26px;font-weight:700;color:#0a2266;margin-top:6px;line-height:1.1}
.kpi .sub{font-size:11px;color:#8893a7;margin-top:4px}
.kpi.k-green::before{background:#1f9d55}
.kpi.k-amber::before{background:#d97706}
.kpi.k-red::before{background:#dc2626}
.kpi.k-cyan::before{background:#0891b2}

.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 1px 3px rgba(10,34,102,.07);border:1px solid #e8edf5;margin-bottom:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.card-head h3{margin:0;font-size:15px;color:#0a2266;font-weight:600}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:7px;border:1px solid transparent;background:var(--primary,#1144cd);color:#fff;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{background:#0a2266}
.btn-secondary{background:#fff;color:#0a2266;border-color:#d0d7e2}
.btn-secondary:hover{background:#f3f5f9}
.btn-danger{background:#dc2626}
.btn-danger:hover{background:#a51f1f}
.btn-success{background:#1f9d55}
.btn-success:hover{background:#16793f}
.btn-sm{padding:5px 9px;font-size:12px}
.btn-ghost{background:transparent;color:#0a2266;border:1px solid #d0d7e2;padding:6px 12px;border-radius:6px;font-size:12px;text-decoration:none}
.btn-ghost:hover{background:#f3f5f9}

/* Forms */
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.form-row input[type=text],.form-row input[type=number],.form-row input[type=email],.form-row input[type=password],
.form-row input[type=date],.form-row input[type=tel],.form-row select,.form-row textarea{
  width:100%;padding:9px 11px;border:1px solid #d0d7e2;border-radius:7px;font-size:13px;font-family:inherit;background:#fff}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--primary,#1144cd);box-shadow:0 0 0 3px rgba(17,68,205,.1)}
.form-row textarea{min-height:70px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #e8edf5}

/* Tables */
.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid #e8edf5}
table.data{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
table.data thead th{background:#f7f9fc;text-align:left;padding:10px 12px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#4b5563;border-bottom:1px solid #e8edf5;white-space:nowrap}
table.data tbody td{padding:10px 12px;border-bottom:1px solid #f0f3f8;vertical-align:middle}
table.data tbody tr:hover{background:#f8fafc}
table.data .row-actions{display:flex;gap:5px}

.status{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.status-active,.status-available,.status-good,.status-new{background:#dff7e6;color:#1a6431}
.status-occupied,.status-in_use{background:#d6e7ff;color:#0a4ea7}
.status-maintenance,.status-standby{background:#fef3c7;color:#92400e}
.status-inactive,.status-damaged,.status-consumed,.status-expired{background:#fde0e0;color:#a51f1f}
.status-transferred{background:#e0e7ff;color:#3730a3}

/* Modal */
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(10,34,102,.55);z-index:90}
.modal-backdrop.show{display:block}
.modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;width:min(640px,94vw);max-height:90vh;border-radius:12px;box-shadow:0 25px 60px rgba(0,0,0,.3);z-index:100;flex-direction:column;overflow:hidden}
.modal.show{display:flex}
.modal.large{width:min(900px,94vw)}
.modal-head{padding:14px 20px;border-bottom:1px solid #e8edf5;display:flex;align-items:center;justify-content:space-between;background:#f7f9fc}
.modal-head h3{margin:0;font-size:15px;color:#0a2266}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:#6b7585;line-height:1}
.modal-close:hover{color:#0a2266}
.modal-body{padding:18px 20px;overflow-y:auto}

/* Login */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a2266,#1144cd);padding:20px}
.login-box{background:#fff;width:100%;max-width:420px;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
.login-head{padding:30px;text-align:center;background:linear-gradient(135deg,#1144cd,#0a2266);color:#fff}
.login-head h1{margin:0;font-size:22px}
.login-head p{margin:6px 0 0;opacity:.85;font-size:13px}
.login-body{padding:28px 30px 30px}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid #e8edf5;margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:10px 14px;font-size:13px;color:#6b7585;text-decoration:none;border-bottom:3px solid transparent;font-weight:500}
.tabs a:hover{color:#0a2266}
.tabs a.active{color:var(--primary,#1144cd);border-bottom-color:var(--primary,#1144cd);font-weight:600}

/* Search/filter */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filter-bar input,.filter-bar select{padding:8px 11px;border:1px solid #d0d7e2;border-radius:7px;font-size:13px;background:#fff}
.filter-bar input{min-width:220px}

/* Charts */
.chart-wrap{position:relative;height:280px}

/* Empty */
.empty{padding:40px 20px;text-align:center;color:#8893a7;font-size:13px}

/* Bed cells */
.bed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.bed-cell{padding:10px 6px;border-radius:6px;text-align:center;font-size:12px;border:1px solid;cursor:pointer}
.bed-cell.available{background:#dff7e6;border-color:#aedebc;color:#1a6431}
.bed-cell.occupied{background:#d6e7ff;border-color:#b7caf3;color:#0a4ea7}
.bed-cell.maintenance{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.bed-cell.consumed{background:#fde0e0;border-color:#f3b7b7;color:#a51f1f}

/* Mobile */
@media(max-width:900px){
  .sidebar{position:fixed;left:-260px;z-index:50;transition:left .2s}
  .sidebar.open{left:0}
  .hamburger{display:block}
  .topbar h1{font-size:15px}
  .user-box strong{display:none}
}

/* ===== Added utility styles ===== */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 14px;
  margin-top: 8px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 13px;
  padding: 4px 8px;
  background: #f6f8fc;
  border-radius: 4px;
}
.checkbox-item input[type="checkbox"] { margin: 0; }
.camps-block { margin-top: 18px; padding: 12px; background: #fafbfd; border: 1px solid #e1e8f2; border-radius: 6px; }
.info-banner {
  background: #eaf2ff;
  border-left: 4px solid #1144cd;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
  font-size: 14px;
}
.settings-form { padding: 22px; }
.settings-form h3 {
  margin-top: 24px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e1e8f2;
  color: #1144cd;
  font-size: 16px;
}
.settings-form h3:first-child { margin-top: 0; }
.form-grid label.full { grid-column: 1 / -1; }
.row-actions { white-space: nowrap; }
.row-actions .btn { margin-right: 3px; }

/* Status pill variants for roles/expense types */
.status-admin       { background:#1144cd; color:#fff; }
.status-sub_manager { background:#2e7dde; color:#fff; }
.status-camp_user   { background:#5b9bd5; color:#fff; }
.status-viewer      { background:#9aa7b8; color:#fff; }

.status-yearly      { background:#e9f3ff; color:#1144cd; }
.status-monthly     { background:#e8f7ee; color:#0a7d33; }
.status-one_time    { background:#fff4e1; color:#a8651a; }
.status-onetime     { background:#fff4e1; color:#a8651a; }
.status-transferred { background:#e9f3ff; color:#1144cd; }
.status-exited      { background:#f0f0f0; color:#666; }
.status-disposed    { background:#f5e0e0; color:#a23131; }

/* ===== Polished popup form styling ===== */
/* Form grid layout — each <label> is a column item, label text on top, input below */
.modal-form, form.ajax-form {
  font-size: 13px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.form-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media(max-width: 700px) {
  .form-grid, .form-grid.grid-3 { grid-template-columns: 1fr; }
}
.form-grid > label,
.modal-form label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .4px;
  gap: 4px;
}
.form-grid > label.full,
.modal-form label.full {
  grid-column: 1 / -1;
}
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="email"],
.form-grid input[type="password"],
.form-grid input[type="date"],
.form-grid input[type="tel"],
.form-grid input[type="file"],
.form-grid input[type="color"],
.form-grid select,
.form-grid textarea,
.modal-form input[type="text"],
.modal-form input[type="number"],
.modal-form input[type="email"],
.modal-form input[type="password"],
.modal-form input[type="date"],
.modal-form input[type="tel"],
.modal-form input[type="file"],
.modal-form select,
.modal-form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #d0d7e2;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  color: #1f2937;
  text-transform: none;
  letter-spacing: 0;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
  outline: none;
  border-color: var(--primary, #1144cd);
  box-shadow: 0 0 0 3px rgba(17, 68, 205, .12);
}
.form-grid textarea,
.modal-form textarea {
  min-height: 70px;
  resize: vertical;
}
.form-grid input[type="color"] {
  height: 38px;
  padding: 3px;
  cursor: pointer;
}
.form-grid input[type="file"] {
  padding: 7px 9px;
  background: #f7f9fc;
}

/* Form actions footer */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e8edf5;
}

/* Larger modal for big forms */
.modal.large { width: min(960px, 96vw); }
.modal.xl    { width: min(1100px, 96vw); }
.modal-body { max-height: calc(90vh - 60px); padding: 20px 24px; }

/* Section heading inside a form */
.form-section-title {
  grid-column: 1 / -1;
  margin: 8px 0 -4px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e8edf5;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #1144cd);
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* Helper text below inputs */
.field-hint {
  font-size: 11px;
  font-weight: 400;
  color: #8893a7;
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}

/* Disabled / readonly inputs */
.form-grid input[readonly],
.form-grid input:disabled,
.modal-form input[readonly] {
  background: #f4f6fa;
  color: #6b7585;
}

/* KPI mini-row used inside detail pages */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kpi-row .kpi { padding: 14px 16px; }
.kpi-row .kpi .k-label,
.kpi-row .kpi .label { font-size: 11px; color: #6b7585; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.kpi-row .kpi .k-val,
.kpi-row .kpi .value { font-size: 22px; font-weight: 700; color: #0a2266; margin-top: 4px; }

/* Badge counter chip used next to page titles */
.badge {
  display: inline-block;
  background: #e8edf5;
  color: #475569;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}

/* Facility type pills used on dashboard */
.facility-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.facility-tile {
  background: #f7f9fc;
  border: 1px solid #e8edf5;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
}
.facility-tile .ft-icon {
  font-size: 22px;
  margin-bottom: 6px;
  display: inline-block;
}
.facility-tile .ft-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7585;
  font-weight: 600;
}
.facility-tile .ft-count {
  font-size: 20px;
  font-weight: 700;
  color: #0a2266;
  margin: 2px 0;
}
.facility-tile .ft-meta {
  font-size: 11px;
  color: #8893a7;
}

/* ===== Misc helpers added during polish ===== */
.empty-state-inline {
  padding: 30px 16px;
  text-align: center;
  color: #8893a7;
  font-size: 13px;
}
.text-muted {
  color: #8893a7;
  font-size: 12px;
  font-weight: 400;
}
.card > .filter-bar {
  margin: 0 0 14px;
}
/* Better card-head when small text on right */
.card-head small { font-weight: 400; }

/* Friendlier disabled select look in modal forms */
.modal-form select:disabled,
.form-grid select:disabled { background: #f4f6fa; color: #6b7585; }

/* Tweak form-section-title spacing */
.modal-form > .form-section-title,
form.ajax-form > .form-section-title {
  margin: 18px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e8edf5;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #1144cd);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.modal-form > .form-section-title:first-child,
form.ajax-form > .form-section-title:first-child { margin-top: 0; }

/* On smaller screens, single-column form */
@media(max-width: 580px) {
  .form-grid, .form-grid.grid-2, .form-grid.grid-3 { grid-template-columns: 1fr !important; }
}

/* =============================================
   PAGINATION
   ============================================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 4px;
  flex-wrap: wrap;
  gap: 10px;
}
.pagination-info {
  font-size: 12px;
  color: #6b7585;
}
.pagination-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pagination-links a,
.pagination-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #d0d7e2;
  color: #2a3650;
  background: #fff;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.pagination-links a:hover { background: #eef3ff; border-color: #b7caf3; color: #0a2266; }
.pagination-links .pg-active { background: #1144cd; border-color: #1144cd; color: #fff; pointer-events: none; }
.pagination-links .pg-disabled { color: #b0b9c8; pointer-events: none; background: #f7f9fc; }
.pagination-perpage {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7585;
}
.pagination-perpage select {
  padding: 4px 8px;
  border: 1px solid #d0d7e2;
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
}

/* ── Status badges ── */
.badge-active      { background:#dcfce7; color:#15803d; }
.badge-inactive    { background:#fee2e2; color:#b91c1c; }
.badge-maintenance { background:#fef3c7; color:#92400e; }
/* ── Flash success ── */
.flash-success { background:#dcfce7; color:#15803d; border:1px solid #86efac; border-radius:6px; padding:10px 14px; margin-bottom:10px; }
/* ── Info banner ── */
.info-banner { background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:12px 14px; margin-bottom:14px; font-size:13px; color:#1e3a8a; }

/* ── Bed Map Visual Layout ─────────────────────────────────────────── */
.bed-box {
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
.bed-box:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  z-index: 10;
}
.room-card {
  transition: box-shadow .15s ease;
}
.room-card:hover {
  box-shadow: 0 3px 10px rgba(17,68,205,.10) !important;
}
.bed-filter-btn.active {
  background: var(--primary, #1144cd) !important;
  color: #fff !important;
  border-color: var(--primary, #1144cd) !important;
}