/* Hydro-Clean CRM design system — DM Sans/DM Mono component library, re-themed to brand colors.
   Sits on top of the vendored DashLite shell (sidebar/topbar/grid) for layout only. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --brand-navy: #0f1f4d;
  --brand-navy-dark: #0a1636;
  --brand-lime: #8dc63f;
  --brand-lime-dark: #6ea82e;

  /* Design tokens */
  --hr-ink: #0f1923;
  --hr-ink-soft: #4a5568;
  --hr-ink-ghost: #94a3b8;
  --hr-surface: #ffffff;
  --hr-ground: #f6f8f7;
  --hr-border: #e1e8e4;
  --hr-border-focus: var(--brand-navy);
  --hr-accent: var(--brand-navy);
  --hr-accent-soft: #eaeef7;
  --hr-lime: var(--brand-lime);
  --hr-lime-soft: #f1f8e6;
  --hr-success: #0f9b6e;
  --hr-warning: #d97706;
  --hr-danger: #dc2626;
  --hr-radius: 10px;
  --hr-radius-sm: 6px;
  --hr-font: 'DM Sans', sans-serif;
  --hr-mono: 'DM Mono', monospace;
  --hr-shadow: 0 1px 3px rgba(15, 25, 35, .06), 0 4px 16px rgba(15, 25, 35, .04);
  --hr-shadow-focus: 0 0 0 3px rgba(15, 31, 77, .15);
}

body { font-family: var(--hr-font); color: var(--hr-ink); background: var(--hr-ground); }

/* Dark mode — redefines the design tokens above; DashLite's own vendor shell
   (sidebar, header chrome, dropdowns, alerts, etc.) already ships its own
   `.dark-mode`-scoped styles, this covers our custom hr-* component library. */
body.dark-mode {
  --hr-ink: #eef2f8;
  --hr-ink-soft: #a9b6c9;
  --hr-ink-ghost: #6d7c92;
  --hr-surface: #141c26;
  --hr-ground: #101924;
  --hr-border: #263547;
  --hr-border-focus: var(--brand-lime);
  --hr-accent: #5577e6;
  --hr-accent-soft: rgba(85, 119, 230, .16);
  --hr-lime-soft: rgba(141, 198, 63, .16);
  --hr-success: #34d399;
  --hr-warning: #fbbf24;
  --hr-danger: #f87171;
  --hr-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 4px 20px rgba(0, 0, 0, .35);
  --hr-shadow-focus: 0 0 0 3px rgba(85, 119, 230, .28);
}
body.dark-mode .hr-badge-green { background: rgba(52, 211, 153, .14); color: var(--hr-success); }
body.dark-mode .hr-badge-amber { background: rgba(251, 191, 36, .14); color: var(--hr-warning); }
body.dark-mode .hr-badge-red { background: rgba(248, 113, 113, .14); color: var(--hr-danger); }
body.dark-mode .hr-btn-danger:hover { background: rgba(248, 113, 113, .12); }
body.dark-mode .hr-file:hover { background: var(--hr-accent-soft); }

.hr-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .6rem; }
.hr-breadcrumb-link { color: var(--hr-accent); text-decoration: none; }
.hr-breadcrumb-link:hover { text-decoration: underline; }
.hr-breadcrumb-sep { font-size: .6rem; color: var(--hr-ink-ghost); }
.hr-breadcrumb-current { color: var(--hr-ink-ghost); }

.hr-form * { box-sizing: border-box; }
.hr-form { font-family: var(--hr-font); }
.hr-field { position: relative; margin-bottom: 1.1rem; }
.hr-field label, .hr-label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hr-ink-soft); margin-bottom: .35rem; transition: color .2s; }
.hr-field:focus-within label { color: var(--hr-accent); }
.hr-required::after { content: '•'; color: var(--hr-danger); margin-left: 3px; }
.hr-input { display: block; width: 100%; font-family: var(--hr-font); font-size: .875rem; color: var(--hr-ink); background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: var(--hr-radius); padding: .6rem .85rem; outline: none; transition: border-color .18s, box-shadow .18s; -webkit-appearance: none; }
.hr-input::placeholder { color: var(--hr-ink-ghost); font-weight: 300; }
.hr-input:hover { border-color: #b7c4bd; }
.hr-input:focus { border-color: var(--hr-border-focus); box-shadow: var(--hr-shadow-focus); }
.hr-textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.hr-date { font-family: var(--hr-mono); font-size: .82rem; }
.hr-select-wrap { position: relative; }
.hr-select-wrap::after { content: ''; pointer-events: none; position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--hr-ink-soft); transition: border-top-color .2s; }
.hr-field:focus-within .hr-select-wrap::after { border-top-color: var(--hr-accent); }
.hr-select { display: block; width: 100%; font-family: var(--hr-font); font-size: .875rem; color: var(--hr-ink); background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: var(--hr-radius); padding: .6rem 2.2rem .6rem .85rem; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color .18s, box-shadow .18s; }
.hr-select:hover { border-color: #b7c4bd; }
.hr-select:focus { border-color: var(--hr-border-focus); box-shadow: var(--hr-shadow-focus); }
.hr-file { display: block; width: 100%; font-family: var(--hr-font); font-size: .82rem; color: var(--hr-ink-soft); background: var(--hr-ground); border: 1.5px dashed var(--hr-border); border-radius: var(--hr-radius); padding: .6rem .85rem; cursor: pointer; transition: border-color .18s, background .18s; }
.hr-file:hover { border-color: var(--hr-accent); background: var(--hr-accent-soft); }
.hr-check-wrap { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; background: var(--hr-ground); border: 1.5px solid var(--hr-border); border-radius: var(--hr-radius); cursor: pointer; transition: border-color .18s, background .18s; }
.hr-check-wrap:hover { border-color: var(--hr-accent); background: var(--hr-accent-soft); }
.hr-check-wrap input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--hr-accent); }
.hr-check-label { font-size: .85rem; font-weight: 500; color: var(--hr-ink); cursor: pointer; }
.hr-error { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 500; color: var(--hr-danger); margin-top: .3rem; }
.hr-error::before { content: '⚠'; font-size: .68rem; }
.hr-hint { font-size: .72rem; color: var(--hr-ink-ghost); margin-top: .3rem; line-height: 1.5; }
.hr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.hr-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1.1rem; }
.hr-span-2 { grid-column: span 2; }
.hr-span-3 { grid-column: span 3; }
@media (max-width: 640px) { .hr-grid-2, .hr-grid-3 { grid-template-columns: 1fr; } .hr-span-2, .hr-span-3 { grid-column: span 1; } }

/* Self-sizing field layout: fields flow as many-per-row as fit the available width
   (so wide forms don't leave dead space), and each row's items stretch evenly to
   fill it — so a lone leftover field never sits at half-width next to blank space. */
.hr-field-row { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.hr-field-row > .hr-field { flex: 1 1 260px; }
.hr-field-full { width: 100%; }
.hr-section-title { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hr-accent); padding-bottom: .45rem; border-bottom: 2px solid var(--hr-accent-soft); margin-bottom: .9rem; display: flex; align-items: center; gap: .45rem; }

.hr-toolbar-card { background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: 14px; padding: 1.1rem 1.25rem; box-shadow: var(--hr-shadow); margin-bottom: 1rem; }
.hr-toolbar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hr-toolbar-search { flex: 1; min-width: 240px; max-width: 420px; }
.hr-toolbar-search label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hr-ink-ghost); margin-bottom: .4rem; }
.hr-search-input { position: relative; }
.hr-search-input .icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--hr-ink-ghost); font-size: .9rem; pointer-events: none; }
.hr-search-input input { display: block; width: 100%; font-family: var(--hr-font); font-size: .875rem; color: var(--hr-ink); background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: var(--hr-radius); padding: .6rem .85rem .6rem 2.3rem; outline: none; transition: border-color .18s, box-shadow .18s; }
.hr-search-input input::placeholder { color: var(--hr-ink-ghost); font-weight: 300; }
.hr-search-input input:hover { border-color: #b7c4bd; }
.hr-search-input input:focus { border-color: var(--hr-border-focus); box-shadow: var(--hr-shadow-focus); }
.hr-toolbar-actions { display: flex; gap: .6rem; flex-shrink: 0; }
.hr-form-card { background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: 14px; padding: 1.35rem; box-shadow: var(--hr-shadow); }
.hr-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; padding-top: 1.1rem; border-top: 1.5px solid var(--hr-border); margin-top: .25rem; }
.hr-btn { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--hr-font); font-size: .8rem; font-weight: 600; letter-spacing: .03em; border-radius: var(--hr-radius); padding: .5rem 1.1rem; border: 1.5px solid transparent; cursor: pointer; outline: none; transition: all .18s; text-decoration: none; white-space: nowrap; }
.hr-btn-primary { background: var(--hr-accent); border-color: var(--hr-accent); color: #fff; }
.hr-btn-primary:hover { background: var(--brand-navy-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 31, 77, .3); }
.hr-btn-lime { background: var(--hr-lime); border-color: var(--hr-lime); color: var(--brand-navy-dark); }
.hr-btn-lime:hover { background: var(--brand-lime-dark); color: #fff; }
.hr-btn-ghost { background: transparent; border-color: var(--hr-border); color: var(--hr-ink-soft); }
.hr-btn-ghost:hover { border-color: #b7c4bd; color: var(--hr-ink); background: var(--hr-ground); }
.hr-btn-danger { background: transparent; border-color: rgba(220, 38, 38, .3); color: var(--hr-danger); }
.hr-btn-danger:hover { background: #fff0f0; border-color: var(--hr-danger); }
.hr-btn-sm { padding: .35rem .8rem; font-size: .75rem; }
.hr-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 100px; }
.hr-badge-blue { background: var(--hr-accent-soft); color: var(--hr-accent); }
.hr-badge-lime { background: var(--hr-lime-soft); color: var(--brand-lime-dark); }
.hr-badge-green { background: #ecfdf5; color: var(--hr-success); }
.hr-badge-amber { background: #fffbeb; color: var(--hr-warning); }
.hr-badge-red { background: #fef2f2; color: var(--hr-danger); }
.hr-badge-gray { background: var(--hr-ground); color: var(--hr-ink-soft); }
.hr-editable-section .hr-edit-mode { display: none; }
.hr-editable-section .hr-view-mode { display: block; }
.hr-editable-section.editing .hr-edit-mode { display: block; }
.hr-editable-section.editing .hr-view-mode { display: none; }
.hr-value-row { display: flex; flex-direction: column; gap: .12rem; margin-bottom: .9rem; }
.hr-value-label { font-size: .67rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hr-ink-ghost); }
.hr-value-text { font-size: .875rem; font-weight: 500; color: var(--hr-ink); }
.hr-value-text.empty { color: var(--hr-ink-ghost); font-weight: 300; font-style: italic; }
.hr-hero { background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: 16px; padding: 1.5rem; box-shadow: var(--hr-shadow); display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hr-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--hr-accent-soft); border: 2px solid var(--hr-accent); display: flex; align-items: center; justify-content: center; font-family: var(--hr-font); font-size: 1.5rem; font-weight: 600; color: var(--hr-accent); flex-shrink: 0; overflow: hidden; }
.hr-hero-info { flex: 1; min-width: 0; }
.hr-hero-name { font-family: var(--hr-font); font-size: 1.25rem; font-weight: 600; color: var(--hr-ink); margin: 0 0 .25rem; }
.hr-hero-sub { font-family: var(--hr-mono); font-size: .78rem; color: var(--hr-ink-ghost); margin: 0 0 .5rem; }
.hr-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hr-panel { background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: 14px; padding: 1.25rem; box-shadow: var(--hr-shadow); }
.hr-panel-title { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hr-ink-ghost); margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1.5px solid var(--hr-border); }
.hr-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--hr-border); margin-bottom: 1.25rem; flex-wrap: wrap; }
.hr-tab { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--hr-font); font-size: .78rem; font-weight: 600; letter-spacing: .03em; padding: .6rem 1rem; border: none; background: transparent; cursor: pointer; color: var(--hr-ink-ghost); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .18s, border-color .18s; text-decoration: none; }
.hr-tab:hover { color: var(--hr-ink); }
.hr-tab.active { color: var(--hr-accent); border-bottom-color: var(--hr-lime); }
.hr-tab-pane { display: none; }
.hr-tab-pane.active { display: block; }
.hr-record-item { background: var(--hr-ground); border: 1.5px solid var(--hr-border); border-radius: var(--hr-radius); padding: 1rem 1.1rem; margin-bottom: .65rem; display: flex; align-items: flex-start; gap: 1rem; transition: border-color .18s; }
.hr-record-item:hover { border-color: #b7c4bd; }
.hr-record-item.is-current { border-color: var(--hr-lime); background: var(--hr-lime-soft); }
.hr-record-body { flex: 1; min-width: 0; }
.hr-record-title { font-size: .875rem; font-weight: 600; color: var(--hr-ink); margin-bottom: .25rem; }
.hr-record-sub { font-size: .78rem; color: var(--hr-ink-soft); }
.hr-record-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.hr-empty { text-align: center; padding: 2rem 1rem; color: var(--hr-ink-ghost); font-size: .85rem; }
.hr-empty em { font-size: 2rem; margin-bottom: .5rem; display: block; }
.hr-modal .modal-content { border: 1.5px solid var(--hr-border); border-radius: 16px; box-shadow: 0 20px 60px rgba(15, 25, 35, .15); overflow: hidden; }
.hr-modal .modal-header { background: var(--hr-ground); border-bottom: 1.5px solid var(--hr-border); padding: 1rem 1.35rem; }
.hr-modal .modal-title { font-family: var(--hr-font); font-size: .9rem; font-weight: 600; color: var(--hr-ink); display: flex; align-items: center; gap: .45rem; }
.hr-modal .modal-body { padding: 1.35rem; }
.hr-modal .modal-footer { background: var(--hr-ground); border-top: 1.5px solid var(--hr-border); padding: .85rem 1.35rem; }
.hr-kpi { background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: 14px; padding: 1.1rem 1.25rem; box-shadow: var(--hr-shadow); }
.hr-kpi-label { font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hr-ink-ghost); margin-bottom: .4rem; }
.hr-kpi-value { font-family: var(--hr-font); font-size: 1.6rem; font-weight: 700; color: var(--hr-ink); }
.hr-kpi-value .unit { font-size: 1rem; color: var(--hr-ink-ghost); font-weight: 500; }
.hr-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.hr-table th { font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hr-ink-ghost); padding: .6rem .75rem; border-bottom: 1.5px solid var(--hr-border); text-align: left; }
.hr-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--hr-border); color: var(--hr-ink-soft); vertical-align: middle; }
.hr-table tr:last-child td { border-bottom: none; }
.hr-table tr:hover td { background: var(--hr-ground); }

.hr-pagination-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1.5px solid var(--hr-border); }
.hr-per-page { display: flex; align-items: center; gap: .5rem; }
.hr-per-page label { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hr-ink-ghost); margin: 0; }
.hr-per-page .hr-select-wrap { width: auto; }
.hr-select-sm { width: auto; padding: .3rem 1.9rem .3rem .65rem; font-size: .8rem; }

/* Public booking page */
.hr-booking-hero { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%); color: #fff; padding: 3rem 1.5rem; text-align: center; }
.hr-booking-hero h1 { font-family: var(--hr-font); font-weight: 700; }
.hr-booking-hero .lime { color: var(--brand-lime); }
.hr-service-card { background: var(--hr-surface); border: 1.5px solid var(--hr-border); border-radius: 16px; padding: 1.5rem; box-shadow: var(--hr-shadow); transition: transform .18s, box-shadow .18s; height: 100%; }
.hr-service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 25, 35, .12); }
.hr-service-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--hr-accent-soft); color: var(--brand-navy); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; }
.hr-deposit-tag { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--hr-mono); font-size: .78rem; font-weight: 600; color: var(--brand-lime-dark); background: var(--hr-lime-soft); padding: .25rem .6rem; border-radius: 100px; }