/* assets/css/app.css
   Safar ERP — polished UI (Option A: dark sidebar).
   All colours derive from the per-user theme variables set in header.php:
   --accent, --soft, --strong, --sidebar. */

:root {
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 78px;
  --topbar-h: 64px;
  --radius: 14px;
  --radius-sm: 10px;
  --bg-page: #f4f6f9;
  --bg-card: #ffffff;
  --border: #e8eaef;
  --border-strong: #dde0e6;
  --text: #1b2230;
  --text-muted: #6b7383;
  --text-faint: #98a0ad;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --shadow-md: 0 6px 16px rgba(16,24,40,.09), 0 2px 6px rgba(16,24,40,.05);
  --shadow-lg: 0 18px 44px rgba(16,24,40,.16);
  /* Default theme (Ocean). header.php overrides these per-user theme. */
  --accent:  #185FA5;
  --soft:    #E6F1FB;
  --strong:  #0C447C;
  --sidebar: #0C2740;
  --highlight: #2E86C9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #ffffff;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #ccd2db; border-radius: 6px; border: 2px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover { background: #b6bdc9; }

/* ---------------- Layout shell ---------------- */
.app { display: flex; min-height: 100vh; }

/* ---------------- Sidebar ---------------- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.16));
  color: #fff;
  position: fixed; top: 0; left: 0; bottom: 0;
  display: flex; flex-direction: column;
  transition: width .2s ease; z-index: 1040;
}
.sidebar-brand {
  min-height: var(--topbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 14px; font-weight: 700; font-size: 17px; color: #fff;
  text-align: center; letter-spacing: -.01em;
}
.sidebar-brand .brand-text {
  display: block; max-width: 100%;
  white-space: normal; word-break: break-word; line-height: 1.25;
}
.sidebar-brand [class*="fa-"] {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 20px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px 18px; }
.sidebar-nav::before {
  content: "MENU"; display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; color: rgba(255,255,255,.34); padding: 4px 12px 10px;
}
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border: none; }

.nav-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; margin-bottom: 3px; border-radius: 10px;
  color: rgba(255,255,255,.66); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.nav-item [class*="fa-"] { font-size: 18px; min-width: 20px; text-align: center; }
.nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-item.active {
  background: linear-gradient(135deg, var(--accent), var(--highlight)); color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent);
}

/* ---- Expandable submenu groups ---- */
.nav-parent { width: 100%; background: none; border: none; font: inherit; text-align: left; }
.nav-group .caret { margin-left: auto; font-size: 12px; opacity: .75; transition: transform .18s; }
.nav-group.open > .nav-parent .caret { transform: rotate(180deg); }
.nav-sub { overflow: hidden; max-height: 0; transition: max-height .22s ease; }
.nav-group.open .nav-sub { max-height: 600px; }
.nav-child { padding-left: 14px; font-size: 13.5px; }
.nav-child .child-ic { font-size: 14px; min-width: 20px; text-align: center; margin: 0 9px 0 6px; opacity: .92; flex: none; }
.nav-child.active { background: rgba(255,255,255,.10); color: #fff; }
.nav-child.active .child-ic { opacity: 1; }
.app.collapsed .nav-group .caret { display: none; }
.app.collapsed .nav-child { justify-content: center; padding: 9px; }
.app.collapsed .nav-child .child-ic { margin: 0; }

.app.collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.app.collapsed .sidebar .label,
.app.collapsed .sidebar-brand .brand-text,
.app.collapsed .sidebar-nav::before { display: none; }
.app.collapsed .nav-item { justify-content: center; padding: 11px; }
.app.collapsed .main { margin-left: var(--sidebar-w-collapsed); }

/* ---------------- Main + topbar ---------------- */
.main { flex: 1; margin-left: var(--sidebar-w); transition: margin-left .2s ease; min-width: 0; }
.topbar {
  height: var(--topbar-h); background: var(--bg-card);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  position: sticky; top: 0; z-index: 1030; box-shadow: var(--shadow-sm);
}
.topbar .menu-toggle { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--text-muted); line-height: 1; }
.topbar .search {
  flex: 1; max-width: 440px; display: flex; align-items: center; gap: 9px;
  background: var(--soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; color: var(--text-muted); transition: .15s;
}
.topbar .search [class*="fa-"] { color: var(--strong); }
.topbar .search:focus-within { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--soft); }
.topbar .search:focus-within [class*="fa-"] { color: var(--accent); }
.topbar .search input { border: none; background: none; outline: none; width: 100%; font: inherit; color: var(--text); }
.topbar .spacer { flex: 1; }
.topbar .icon-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  width: 38px; height: 38px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 19px; transition: .15s;
}
.topbar .icon-btn:hover { background: var(--soft); color: var(--strong); }
.avatar {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 38%, transparent);
  text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.avatar:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 46%, transparent); color: #fff; }
.avatar:focus { color: #fff; }

/* ---- Topbar user dropdown (prettier) ---- */
.topbar .user-menu {
  border: 1px solid var(--border); border-radius: 14px; padding: 7px; min-width: 250px;
  box-shadow: 0 16px 40px rgba(16, 32, 56, .17); margin-top: 10px; background: var(--bg-card);
}
.topbar .user-menu .um-head { display: flex; align-items: center; gap: 11px; padding: 9px 10px 11px; }
.topbar .user-menu .um-ava {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.topbar .user-menu .um-name { font-weight: 700; color: var(--strong); font-size: .92rem; line-height: 1.2; word-break: break-word; }
.topbar .user-menu .um-role { color: var(--text-muted); font-size: .78rem; margin-top: 1px; }
.topbar .user-menu .dropdown-divider { margin: 3px 6px; opacity: .55; }
.topbar .user-menu .dropdown-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: none; background: none; text-align: left; cursor: pointer;
  border-radius: 9px; padding: 9px 11px; font-size: .875rem; font-weight: 500; color: var(--text);
  transition: background .12s, color .12s;
}
.topbar .user-menu .dropdown-item i { width: 18px; text-align: center; color: var(--text-muted); font-size: .92rem; transition: color .12s; }
.topbar .user-menu .dropdown-item:hover,
.topbar .user-menu .dropdown-item:focus { background: var(--soft); color: var(--accent); }
.topbar .user-menu .dropdown-item:hover i,
.topbar .user-menu .dropdown-item:focus i { color: var(--accent); }
.topbar .user-menu .dropdown-item.danger { color: #c0392b; }
.topbar .user-menu .dropdown-item.danger i { color: #c0392b; }
.topbar .user-menu .dropdown-item.danger:hover { background: #fdecea; color: #c0392b; }

/* ---------------- Content ---------------- */
.content { padding: 26px 28px; animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.page-title { font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.page-sub { color: var(--text-muted); margin: 3px 0 0; font-size: 13.5px; }

.card-box { background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
/* Tables stay on a white surface inside the themed card */
.dt-table, .card-box table.table { --bs-table-bg: var(--bg-card); }

/* Metric cards */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.metric {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s;
}
.metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.metric-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.metric .ic {
  width: 46px; height: 46px; border-radius: 12px; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: linear-gradient(135deg, var(--accent), var(--strong));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent);
}
.metric .m-value { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.metric .m-label { color: var(--text-muted); font-size: 13px; margin-top: 3px; }
.trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 20px; }
.trend [class*="fa-"] { font-size: 13px; }
.trend.up { color: #0f7a4d; background: #e7f6ee; }
.trend.down { color: #b23b3b; background: #fbe9e9; }
.trend.flat { color: var(--text-muted); background: var(--bg-page); }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }

/* Buttons */
.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--highlight)); color: #fff; border: none; padding: 10px 18px; border-radius: 10px;
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: inherit;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent); transition: .16s;
}
.btn-accent:hover { background: #fff; color: var(--accent); filter: none; transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--accent), 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-accent:active { transform: translateY(0); }

/* Lists / pills */
.list-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.list-row:last-child { border-bottom: none; }
.pill { background: var(--soft); color: var(--strong); font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 20px; }

/* Inputs (Bootstrap overrides) */
.form-control, .form-select {
  border-radius: 10px; border: 1px solid var(--border); padding: 9px 12px; font: inherit; transition: .15s; background-color: var(--bg-card);
}
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); }
/* Numbers always right-aligned (numeric inputs + numeric list columns) */
input[type="number"] { text-align: right; }
td.num, th.num, .col-num { text-align: right; }

/* Select2 to match */
.select2-container--bootstrap-5 .select2-selection { border-radius: 10px !important; border-color: var(--border) !important; min-height: 40px; transition: border-color .15s, box-shadow .15s; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection { box-shadow: 0 0 0 3px var(--soft) !important; border-color: var(--accent) !important; }
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--accent) !important; }

/* Prettier dropdown panel + open animation */
.select2-container--bootstrap-5 .select2-dropdown {
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .06) !important;
  overflow: hidden;
  animation: s2pop .16s cubic-bezier(.2, .8, .25, 1);
  transform-origin: top center;
}
.select2-container--bootstrap-5 .select2-dropdown--above { transform-origin: bottom center; }
@keyframes s2pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.select2-container--bootstrap-5 .select2-search--dropdown { padding: 8px; }
.select2-container--bootstrap-5 .select2-search__field {
  border-radius: 9px !important; border: 1px solid var(--border) !important; padding: 7px 10px !important; outline: none;
}
.select2-container--bootstrap-5 .select2-search__field:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--soft); }

.select2-container--bootstrap-5 .select2-results__options { padding: 4px; }
.select2-container--bootstrap-5 .select2-results__option {
  border-radius: 8px; padding: 7px 11px; margin: 1px 0; font-size: .9rem; transition: background-color .12s, color .12s, transform .06s;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: var(--soft) !important; color: var(--strong) !important;
}
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-results__option--selected {
  background: linear-gradient(135deg, var(--accent), var(--highlight)) !important; color: #fff !important; font-weight: 600;
}
.select2-container--bootstrap-5 .select2-results__option:active { transform: scale(.99); }

/* Native <select> polish (non-Select2 dropdowns) */
.form-select { border-radius: 10px; border-color: var(--border); transition: border-color .15s, box-shadow .15s; }
.form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); }


/* Action buttons (edit / history / restore / Back / Archived) — themed icons */
.btn-light { background: var(--bg-card); border: 1px solid var(--border); color: var(--strong); }
.btn-light:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-light:not(.text-danger) [class*="fa-"] { color: var(--accent); }
.btn-light:hover [class*="fa-"] { color: #fff; }
.btn-light.text-danger { color: #c0392b; }
.btn-light.text-danger:hover { background: #c0392b; border-color: #c0392b; color: #fff !important; }
.btn-light.text-danger:hover [class*="fa-"] { color: #fff; }

/* DataTables to match */
.dataTables_wrapper .dataTables_filter input { border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; background: var(--bg-card); }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); outline: none; }
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border); border-radius: 8px; background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 11px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding: 6px 30px 6px 10px; min-width: 74px; line-height: 1.3; cursor: pointer;
}
.dataTables_wrapper .dataTables_info { color: var(--text-muted); }
table.dataTable thead th { background: var(--accent); color: #fff; font-weight: 600; }

/* Pagination — themed active page + hover */
.dataTables_wrapper .pagination .page-link { color: var(--strong); border-color: var(--border); }
.dataTables_wrapper .pagination .page-link:hover { background: var(--soft); color: var(--strong); border-color: var(--accent); }
.dataTables_wrapper .pagination .page-link:focus { box-shadow: 0 0 0 3px var(--soft); color: var(--strong); }
.dataTables_wrapper .pagination .page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.dataTables_wrapper .pagination .page-item.disabled .page-link { color: var(--text-faint); }

/* Row hover highlight */
table.dataTable tbody tr { transition: background-color .12s; }
table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover > th { background-color: var(--soft) !important; }

/* ---------------- Section-wise forms ---------------- */
.form-section { background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.form-section .fs-title { font-weight: 600; font-size: 14.5px; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; color: var(--text); }
.form-section .fs-title [class*="fa-"] { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.form-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 820px){ .form-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grid .fg { min-width: 0; display: flex; flex-direction: column; }
.form-grid .fg label { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
.form-grid .s2 { grid-column: span 2; }
.form-grid .s3 { grid-column: span 3; }
.form-grid .s4 { grid-column: span 4; }
.form-grid .s6 { grid-column: span 6; }
.form-grid .full { grid-column: 1 / -1; }

/* Gated action buttons (disabled until required fields are filled) */
.btn-accent:disabled, .login-btn:disabled, button[type="submit"]:disabled, [data-gate]:disabled {
  opacity: .5; cursor: not-allowed; box-shadow: none; filter: saturate(.6);
}
.req { color: #c0392b; font-weight: 700; }
@media (max-width: 992px) {
  .form-grid, .form-grid.cols-3, .form-grid.cols-4, .form-grid.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .s3, .form-grid .s4, .form-grid .s6 { grid-column: 1 / -1; }
  .form-grid .s2 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .form-grid, .form-grid.cols-2, .form-grid.cols-3, .form-grid.cols-4, .form-grid.cols-6 { grid-template-columns: 1fr; }
  .form-grid .s2, .form-grid .s3, .form-grid .s4, .form-grid .s6, .form-grid .full { grid-column: auto; }
}

/* ---------------- Auth: centered card (login + forgot) ---------------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--sidebar);
  background-image: linear-gradient(150deg, color-mix(in srgb, var(--accent) 48%, var(--sidebar)), var(--sidebar));
}
.login-card { background: #fff; border-radius: 18px; padding: 34px 30px; width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); }
.login-card .brand { display: flex; align-items: center; gap: 11px; justify-content: center; font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.login-card .brand [class*="fa-"] { width: 40px; height: 40px; border-radius: 11px; background: var(--soft); color: var(--strong); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.login-card .sub { text-align: center; color: var(--text-muted); margin-bottom: 22px; font-size: 13.5px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.field input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; font: inherit; outline: none; transition: .15s; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); }
.login-btn { width: 100%; background: var(--accent); color: #fff; border: none; padding: 13px; border-radius: 11px; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); transition: .16s; }
.login-btn:hover { filter: brightness(.95); transform: translateY(-1px); }

.seg { display: flex; gap: 5px; padding: 5px; margin-bottom: 20px; background: var(--bg-page); border: 1px solid var(--border); border-radius: 12px; }
.seg button { flex: 1; border: none; background: none; padding: 10px 8px; border-radius: 9px; font: inherit; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: .15s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.active { background: #fff; color: var(--strong); box-shadow: var(--shadow-sm); }

.login-links { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 10px; flex-wrap: wrap; }
.login-links a { font-size: 13px; font-weight: 600; color: var(--accent); }
.login-links a:hover { text-decoration: underline; }

/* ---------------- Theme picker (settings) ---------------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
#appModal .modal-dialog.modal-theme { max-width: 750px; }   /* theme picker: +50% of the 500px default */
.theme-opt { border: 2px solid var(--border); border-radius: 14px; padding: 16px; cursor: pointer; background: #fff; box-shadow: var(--shadow-sm); transition: .15s; }
.theme-opt:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.theme-opt.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); }
.theme-swatches { display: flex; gap: 6px; margin-bottom: 11px; }
.theme-swatches span { flex: 1; min-width: 0; height: 28px; border-radius: 7px; }
.theme-name { font-weight: 600; }

/* ---------------- Responsive ---------------- */
.sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(16,24,40,.45);
  z-index: 1035; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }
@media (min-width: 769px) { .sidebar-backdrop { display: none; } }

@media (max-width: 1200px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  .app.sidebar-open .sidebar { transform: translateX(0); }
  .main, .app.collapsed .main { margin-left: 0; }
  .topbar { padding: 0 16px; }
  .topbar .search { max-width: none; }
  .content { padding: 18px 16px; }
  .page-title { font-size: 20px; }
}
@media (max-width: 560px) {
  .metrics { grid-template-columns: 1fr; }
  .topbar .search { display: none; }
  .login-card { padding: 26px 20px; }
}

/* ---------------- Alerts (works without Bootstrap CSS too) ---------------- */
.alert { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; border: 1px solid transparent; }
.alert ul { padding-left: 18px; margin: 4px 0 0; }
.alert-success { background: #e7f6ee; color: #0f6e44; border-color: #bfe6cf; }
.alert-danger  { background: #fdecec; color: #a3302f; border-color: #f6cdcd; }
.alert-info    { background: var(--soft); color: var(--strong); }
.alert-warning { background: #fff4e0; color: #8a5a05; border-color: #f6e0b5; }

/* ---------------- Empty states ---------------- */
.empty-state { text-align: center; color: var(--text-muted); padding: 30px 14px; font-size: 13.5px; }
.empty-state [class*="fa-"] { display: block; font-size: 30px; color: var(--text-faint); margin-bottom: 8px; }

/* ---------------- Sidebar welcome + footer ---------------- */
.sidebar-welcome {
  padding: 0 18px 12px; margin-top: -6px;
  color: rgba(255,255,255,.62); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app.collapsed .sidebar-welcome { display: none; }

.sidebar-foot { padding: 10px 12px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.logout-item:hover { background: rgba(255,90,90,.18); color: #fff; }
.copyright {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 10px 2px;
  font-size: 11px; line-height: 1.5; color: rgba(255,255,255,.45); text-align: center;
}
.copyright .cr-company { color: rgba(255,255,255,.72); font-weight: 600; white-space: normal; word-break: break-word; }
.app.collapsed .sidebar-foot .copyright { display: none; }
.app.collapsed .logout-item { justify-content: center; padding: 11px; }

/* ---------------- Topbar page search dropdown ---------------- */
.topbar .search { position: relative; }
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px; display: none; z-index: 1050;
  max-height: 320px; overflow-y: auto;
}
.search-results.open { display: block; }
.sr-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13.5px;
}
.sr-item [class*="fa-"] { color: var(--text-muted); font-size: 14px; }
.sr-item:hover { background: var(--soft); color: var(--strong); }
.sr-empty { padding: 10px 12px; color: var(--text-muted); font-size: 13px; }

/* ---------------- Active toggle switch (themed) ---------------- */
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--soft); }

/* ---------------- Validation error highlight ---------------- */
.input-error,
.input-error:focus {
  border-color: #d33a33 !important;
  box-shadow: 0 0 0 3px rgba(211,58,51,.14) !important;
}
.select2-container--bootstrap-5.input-error .select2-selection {
  border-color: #d33a33 !important; box-shadow: 0 0 0 3px rgba(211,58,51,.14) !important;
}

/* ---------------- Add/edit popup: S4E section bars ---------------- */
.cur-pop .pop-cap {
  display: flex; align-items: center; gap: 7px;
  background: var(--soft); color: var(--strong);
  padding: 8px 12px; border-radius: 8px; margin: 0 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none;
}
.cur-pop .pop-cap [class*="fa-"] { color: var(--accent); font-size: 14px; }
.cur-pop .pop-cap.mt-3 { margin-top: 18px; }
.cur-pop .text-uppercase { letter-spacing: .04em; font-weight: 600; }
.cur-pop .pop-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
}
.cur-pop .pop-foot-actions { display: flex; gap: 10px; }
.cur-pop .pop-reset { color: var(--text-muted); }
.cur-pop .pop-reset:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------------- Update-history popup ---------------- */
.hist-cap { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }
.hist-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hist-head [class*="fa-"] { width: 42px; height: 42px; border-radius: 12px; background: var(--soft); color: var(--strong); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.hist-title { font-weight: 700; font-size: 15px; }
.hist-sub { font-size: 12.5px; color: var(--text-muted); }
.hist-table th { background: var(--accent); color: #fff; font-weight: 600; font-size: 12.5px; }
.hist-table td { font-size: 13px; vertical-align: middle; }
.hist-table .hl { color: var(--text-muted); font-weight: 600; }
.hist-table .nowrap { white-space: nowrap; }
.hist-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--soft); color: var(--strong); }
.hist-badge.a-insert  { background: #e7f6ee; color: #0f6e44; }
.hist-badge.a-update  { background: var(--soft); color: var(--strong); }
.hist-badge.a-delete  { background: #fdecec; color: #a3302f; }
.hist-badge.a-restore { background: #fff6e6; color: #9a6a00; }

/* Rate-change rows inside the history "Change" cell */
.hist-rate { margin: 2px 0 6px; padding-left: 2px; }
.hist-rate:last-child { margin-bottom: 0; }
.hist-rate .rate-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 10px; margin-right: 6px; vertical-align: 1px; }
.hist-rate .rate-tag.r-add { background: #e7f6ee; color: #0f6e44; }
.hist-rate .rate-tag.r-chg { background: var(--soft); color: var(--strong); }
.hist-rate .rate-tag.r-del { background: #fdecec; color: #a3302f; }
.hist-rate .rate-label { font-weight: 600; color: var(--strong); }
.hist-rate .hr-cell { font-size: 12.5px; color: var(--text); margin: 1px 0 1px 14px; }
.hist-table td .hl { color: var(--text-muted); font-weight: 600; }

/* Read-only / locked inputs (e.g. base-currency ROE) */
.form-control[readonly], .form-control.is-locked { background: var(--bg-page); cursor: not-allowed; }
.xr-base-note { margin-top: 12px; font-size: 12.5px; color: var(--strong); background: var(--soft); border-radius: 8px; padding: 8px 11px; display: flex; align-items: center; gap: 7px; }

/* ---------------- Section-wise settings (view / edit-done) ---------------- */
.fs-title-text { display: inline-flex; align-items: center; gap: 10px; }
.sec-edit-btn {
  margin-left: auto; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--accent); border-radius: 8px; padding: 5px 13px; font-size: 13px;
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: .15s;
}
.sec-edit-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sec-edit-btn.done { background: var(--accent); border-color: var(--accent); color: #fff; }
.sec-edit-btn.done:hover { filter: brightness(.95); }

.kv-grid { display: grid; gap: 16px 18px; }
.kv-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kv.full { grid-column: 1 / -1; }
.kv .k { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.kv .v { font-size: 14px; color: var(--text); font-weight: 500; word-break: break-word; }
.theme-dots { display: inline-flex; gap: 5px; vertical-align: middle; }
.theme-dots span { width: 16px; height: 16px; border-radius: 5px; display: inline-block; border: 1px solid rgba(0,0,0,.08); }
@media (max-width: 760px) { .kv-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Brand logo (sidebar) + document/branding previews */
.brand-logo { height: auto; max-height: 54px; width: auto; max-width: calc(var(--sidebar-w) - 48px); object-fit: contain; display: block; margin: 0 auto; background-color: #fff; padding: 5px; border-radius: 6px; }
.app.collapsed .brand-logo { max-width: 38px; }
.brand-logo-ph { width: 54px; height: 54px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.app.collapsed .brand-logo-ph { width: 38px; height: 38px; font-size: 18px; }
.brand-preview { display: inline-flex; align-items: center; justify-content: center; height: 56px; min-width: 80px; max-width: 200px; padding: 6px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.brand-preview img { max-height: 44px; max-width: 180px; object-fit: contain; }
.brand-preview.favicon img { max-height: 28px; max-width: 28px; }
.brand-current { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; word-break: break-all; }

/* ---------------- Settings: gridded info table (view mode) ---------------- */
.info-table { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.info-table.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-table.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-table .it { background: var(--bg-card); padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.info-table .it.full { grid-column: 1 / -1; }
.info-table .it-k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.info-table .it-v { font-size: 14px; color: var(--text); font-weight: 500; word-break: break-word; }
.info-empty { color: var(--text-muted); font-size: 13.5px; padding: 8px 2px; }
@media (max-width: 760px) { .info-table.cols-3, .info-table.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .info-table.cols-3, .info-table.cols-2 { grid-template-columns: 1fr; } }

.theme-current { display: inline-flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; }
.theme-current-name { font-weight: 600; font-size: 14px; }

.brand-gallery { display: flex; flex-wrap: wrap; gap: 14px; }
.brand-card { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.brand-card-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Settings: single save action bar */
.settings-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ---------------- Prettier modal popups ---------------- */
#appModal .modal-content { border: none; border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
#appModal .modal-header { border-bottom: none; padding: 14px 20px; background: var(--accent); display: flex; align-items: center; gap: 12px; }
#appModal .modal-chip { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
#appModal .modal-chip [class*="fa-"] { font-size: 20px; }
#appModal .modal-head-text { flex: 1; min-width: 0; }
#appModal .modal-title { font-weight: 700; font-size: 16px; color: #fff; margin: 0; line-height: 1.25; }
#appModal .modal-subtitle { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 1px; }
#appModal .modal-body { padding: 22px; }
#appModal .btn-close { border-radius: 8px; padding: 9px; transition: .15s; opacity: .9; align-self: center; }
#appModal .btn-close:hover { opacity: 1; background-color: #fff; filter: none; }
#appModal .modal-locallang { display: flex; align-items: center; gap: 7px; margin: 0 4px 0 0; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; user-select: none; align-self: center; }
#appModal .modal-locallang input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: #fff; flex: none; }
.modal-backdrop.show { opacity: .5; }
/* Inline field error message (dynamic duplicate, etc.) */
.field-msg { color: #c0392b; font-size: 12px; margin-top: 5px; min-height: 1em; display: flex; align-items: center; gap: 5px; }
.field-msg:empty { display: none; }

/* Roomier table cells (requested) */
.table > :not(caption) > * > * { padding: 1rem; }

/* ---------------- Branding: single-row inputs with live preview ---------------- */
.brand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.brand-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.brand-field label { font-size: 12.5px; font-weight: 600; color: var(--text); margin: 0; }
.brand-pic {
  height: 84px; border: 1px dashed var(--border-strong); border-radius: 10px;
  background: var(--bg-page); display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 6px;
}
.brand-pic img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }
.brand-pic.favicon img { max-height: 44px; max-width: 44px; }
.brand-pic-empty { color: var(--text-faint); font-size: 26px; line-height: 1; }
.brand-field input[type="file"] { font-size: 12px; }
@media (max-width: 992px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- Serial-number column + light placeholders ---------------- */
.dt-serial { width: 52px; text-align: center; }
table.dataTable td.dt-serial { color: var(--text-muted); }
::placeholder { color: #c5cad3 !important; opacity: 1; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #c5cad3 !important; opacity: 1; }

/* ---- Content master: type tabs ---- */
.content-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:2px}
.content-tabs::-webkit-scrollbar{height:6px}
.content-tabs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:6px}
.content-tab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:.85rem;font-weight:500;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line,#e5e7eb);background:#fff;color:var(--muted,#6b7280);
  text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.content-tab:hover{background:var(--soft,#f1f5f9);color:var(--strong,#0f172a)}
.content-tab.active{background:var(--accent,#0F6E56);border-color:var(--accent,#0F6E56);color:#fff}
.content-tab i{font-size:1rem}
.content-tab-count{font-size:.72rem;min-width:20px;text-align:center;padding:1px 7px;border-radius:999px;
  background:var(--soft,#eef2f7);color:var(--strong,#334155)}
.content-tab.active .content-tab-count{background:rgba(255,255,255,.25);color:#fff}

/* ---- Standard: highlight list rows on hover (all tables) ---- */
.card-box table tbody tr { transition: background-color .12s ease; }
.card-box table tbody tr:hover > td { background: var(--soft) !important; }

/* ---- Standard: every list table header uses the theme accent (like the Country DataTable) ---- */
.card-box table thead th,
table.dataTable thead th,
.hist-table th { background: var(--accent); color: #fff; font-weight: 600; }

/* ---- SweetAlert2 themed to match the active app theme ---- */
.swal2-popup { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif !important; border-radius: 18px !important; }
.swal2-title { color: var(--strong) !important; font-weight: 700 !important; }
.swal2-html-container { color: var(--text) !important; }
.swal2-actions .swal2-styled.swal2-confirm { background-color: var(--accent) !important; color: #fff !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-actions .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 3px var(--soft) !important; }
.swal2-actions .swal2-styled.swal2-cancel { background-color: #fff !important; color: var(--strong) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-actions .swal2-styled.swal2-cancel:focus { box-shadow: 0 0 0 3px var(--soft) !important; }
.swal2-timer-progress-bar { background: var(--accent) !important; }
.swal2-popup .swal2-input:focus, .swal2-popup .swal2-textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--soft) !important; }

/* ---- Scrollable content-tab strip with left/right navigation arrows ---- */
.content-tabs-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.content-tabs-wrap .content-tabs { flex: 1 1 auto; min-width: 0; margin-bottom: 0; padding-bottom: 4px; scrollbar-width: none; }
.content-tabs-wrap .content-tabs::-webkit-scrollbar { height: 0; }
.ct-scroll { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06)); transition: background .15s, color .15s, opacity .15s; }
.ct-scroll i { font-size: 1rem; line-height: 1; }
.ct-scroll:hover { background: var(--strong); color: #fff; border-color: var(--strong); }
.content-tabs-wrap.scrollable .ct-scroll { display: inline-flex; }
.ct-scroll[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* Floating scroll-to-top / scroll-to-bottom buttons (global) */
.scroll-fabs { position: fixed; right: 18px; bottom: 18px; z-index: 1050; display: flex; flex-direction: column; gap: 8px; }
.scroll-fab { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(15,23,42,.22); opacity: .9; transition: opacity .15s ease, transform .15s ease; }
.scroll-fab:hover { opacity: 1; transform: translateY(-1px); }
@media print { .scroll-fabs { display: none !important; } }

/* Settings: wider plain-text info grids */
.info-table.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info-table.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .info-table.cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .info-table.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .info-table.cols-4, .info-table.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .info-table.cols-4, .info-table.cols-6 { grid-template-columns: 1fr; } }

/* Settings: tables match the masters list — themed header, white rows, hover highlight */
.set-list { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.set-list thead th { background: var(--soft); color: var(--strong); border-bottom:1px solid var(--border); }
.set-list tbody tr td { background: var(--bg-card, #fff); }
.set-list tbody tr:hover td { background: var(--soft); }
.set-list .ho-row td { background: var(--bg-card, #fff); }   /* head office: no special highlight */
/* Themed heading for the payroll allowance table */
.row-table.themed thead th { background: var(--soft); color: var(--strong); font-weight:700; }

/* Payroll: holiday date chips */
.hol-chips { display:flex; flex-wrap:wrap; gap:6px; }
.hol-chip { display:inline-block; font-size:.78rem; padding:2px 9px; border-radius:999px; background:var(--soft); color:var(--strong); border:1px solid var(--border); }

/* Universal inline list filters (sit next to the DataTables search bar) */
.dataTables_wrapper .dt-filter-col { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.dt-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-filters .dtf { min-width: 160px; }
.dt-filters .form-select { height: 38px; border: 1px solid var(--border); border-radius: 9px; }

/* ===================================================================
   Unified calendar (flatpickr) — one themed design for every picker
   (event dates, hotel blackout, payroll holidays, and any future one).
   Mirrors the app accent so all calendars match the Add-Event popup.
   =================================================================== */
.flatpickr-calendar{ border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 36px rgba(15,23,42,.16); font-family:inherit; }
.flatpickr-calendar.arrowTop:after{ border-bottom-color:#fff; }
.flatpickr-calendar.arrowTop:before{ border-bottom-color:var(--border); }
.flatpickr-calendar.arrowBottom:after{ border-top-color:#fff; }
.flatpickr-calendar.arrowBottom:before{ border-top-color:var(--border); }
.flatpickr-months{ padding:6px 2px 0; border-radius:14px 14px 0 0; }
.flatpickr-months .flatpickr-month{ color:var(--strong); }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{ font-weight:700; color:var(--strong); }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover{ background:var(--soft); }
.flatpickr-weekday{ color:var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.flatpickr-prev-month,.flatpickr-next-month{ border-radius:8px; }
.flatpickr-prev-month svg,.flatpickr-next-month svg{ fill:var(--text-muted); }
.flatpickr-prev-month:hover svg,.flatpickr-next-month:hover svg{ fill:var(--accent); }
.flatpickr-day{ color:var(--strong); border-radius:9px; font-weight:500; height:38px; line-height:38px; }
.flatpickr-day:hover,.flatpickr-day:focus{ background:var(--soft); border-color:var(--soft); }
.flatpickr-day.today{ border-color:var(--accent); color:var(--accent); font-weight:700; }
.flatpickr-day.today:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.flatpickr-day.selected,.flatpickr-day.selected:hover,
.flatpickr-day.startRange,.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:none; }
.flatpickr-day.inRange{ background:color-mix(in srgb,var(--accent) 16%,#fff); border-color:transparent; color:var(--strong); box-shadow:-5px 0 0 color-mix(in srgb,var(--accent) 16%,#fff),5px 0 0 color-mix(in srgb,var(--accent) 16%,#fff); }
.flatpickr-day.flatpickr-disabled,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{ color:var(--text-muted); opacity:.45; }
.flatpickr-day.flatpickr-disabled:hover{ background:transparent; }
/* Year stepper — give the digits room so the up/down arrows never sit on top of them */
.flatpickr-current-month .numInputWrapper{ width:8ch; }
.flatpickr-current-month .numInputWrapper input.cur-year{ padding:0 18px 0 4px; text-align:left; }
.numInputWrapper span.arrowUp,.numInputWrapper span.arrowDown{ width:16px; right:0; padding:0; border-left:0; opacity:1; }
.numInputWrapper span.arrowUp:after{ border-bottom-color:var(--text-muted); }
.numInputWrapper span.arrowDown:after{ border-top-color:var(--text-muted); }
.numInputWrapper:hover span.arrowUp:after{ border-bottom-color:var(--accent); }
.numInputWrapper:hover span.arrowDown:after{ border-top-color:var(--accent); }
/* Country surcharge / blackout dates flagged inside the hotel room-category pickers (marker only) */
.flatpickr-day.ht-blackout{ position:relative; }
.flatpickr-day.ht-blackout::after{ content:""; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#e11d48; }
.flatpickr-day.ht-blackout.selected::after,.flatpickr-day.ht-blackout.today::after{ background:#fff; }

/* Transport · Packages list — fit every column to its content; the Route column
   takes the remaining width and wraps. Pairs with autoWidth:false on that tab. */
#txTable.tx-fit th, #txTable.tx-fit td { white-space: nowrap; }
#txTable.tx-fit th:nth-child(4), #txTable.tx-fit td:nth-child(4) { white-space: normal; width: 100%; }