/*
 * prm.css — Khalij Property Management brand skin (LIGHT theme).
 *
 * Re-skins the shared Material Dashboard 2 PRO theme in deep green: the
 * Gulf-institutional green family (as on hrsd.gov.sa) taken several shades
 * darker so it reads as a private company rather than a Saudi government site.
 *
 * PRM runs Material Dashboard in its default LIGHT mode — this binary's
 * base.html omits the `dark-version` body class that the other CRMs use. The
 * shared theme is light out of the box, so this file supplies (a) the green
 * accent, (b) a paper-grey page surface, and (c) the light-mode corrections the
 * shared page templates need, because those were written for the dark theme and
 * hardcode `text-white` on body copy. See "Inherited dark-theme markup" below.
 *
 * Loaded ONLY by the prm binary, AFTER /theme/css/theme-overrides.css, so these
 * rules win without touching the shared theme or any other customer.
 */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --kh-paper:    #f2f5f2;   /* page */
  --kh-card:     #ffffff;   /* card */
  --kh-raised:   #e8ede9;   /* hover / inset */

  --kh-ink-900:  #10201a;   /* headings */
  --kh-ink-700:  #2c3d34;   /* body copy */
  --kh-ink-500:  #5d6b62;   /* secondary / muted */

  /* Sidenav stays dark so the white nav labels in the shared shell keep their
   * contrast, and the green column frames the light content area. */
  --kh-sidenav-top: #123a26;
  --kh-sidenav-bot: #061309;

  /* ── Brand green ─────────────────────────────────────────────────────────
   * Reference (hrsd.gov.sa) sits around #006C35 / #00754A. Ours is deliberately
   * darker: 500 is the resting accent, 600 the active/pressed shade, 300/400
   * the lighter tints used for hover states and gradient tops. */
  --kh-green-300: #4f9c74;
  --kh-green-400: #23744a;   /* gradient top */
  --kh-green-500: #0d4d2c;   /* accent (buttons, active nav, links) */
  --kh-green-600: #08361e;   /* accent active / gradient bottom */

  --kh-gold-500:  #b08d3f;   /* sparingly — highlights on the green */
  --kh-amber-500: #c07d12;   /* warning, darkened for white backgrounds */
  --kh-red-500:   #c33a3a;   /* danger, darkened for white backgrounds */

  --kh-border-subtle: rgba(16, 32, 26, 0.10);
  --kh-border-strong: rgba(16, 32, 26, 0.22);
}

/* ── Surfaces ───────────────────────────────────────────────────────────── */
body {
  background-color: var(--kh-paper) !important;
  color: var(--kh-ink-700) !important;
}

.card,
.dropdown .dropdown-menu {
  background-color: var(--kh-card) !important;
  border: 1px solid var(--kh-border-subtle);
  box-shadow: 0 2px 6px rgba(16, 32, 26, .06),
              0 8px 24px rgba(16, 32, 26, .05) !important;
}

/* The theme paints the sidenav with its .bg-gradient-dark indigo gradient —
   replace the image too, or the brand green sits next to an indigo column. */
.sidenav {
  background-color: var(--kh-sidenav-bot) !important;
  background-image: linear-gradient(195deg, var(--kh-sidenav-top), var(--kh-sidenav-bot)) !important;
  border: 1px solid var(--kh-border-subtle) !important;
}

.table th,
.table td { border-color: var(--kh-border-subtle) !important; }
.table tbody tr:hover { background-color: rgba(13, 77, 44, .04); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--kh-ink-900); }
.text-secondary { color: var(--kh-ink-500) !important; }

/* ── Inherited dark-theme markup ─────────────────────────────────────────
 * The shared page templates (account, admin users/invites/announcements, the
 * auth cards) were written for the dark theme and hardcode `text-white` on
 * headings, table cells and labels. On a light page that is white-on-white, so
 * map it to ink inside the content area — then restore white wherever the
 * element genuinely sits on a coloured surface: alerts, badges, any
 * bg-gradient-* block (card headers, active nav pills, icon shapes), and the
 * scrolled top navbar (which turns green, see below).
 */
.main-content .text-white { color: var(--kh-ink-900) !important; }
.main-content .alert.text-white,
.main-content .alert .text-white,
.main-content .badge.text-white,
.main-content [class*="bg-gradient-"].text-white,
.main-content [class*="bg-gradient-"] .text-white,
.main-content .icon-shape .text-white,
.main-content .navbar-main.blur .text-white { color: #fff !important; }

/* ── Accent: swap the shared #1565C0 blue for the deep brand green ───────── */
.bg-primary,
.badge.bg-primary  { background-color: var(--kh-green-500) !important; background: var(--kh-green-500) !important; }
.text-primary      { color: var(--kh-green-500) !important; background-image: none; }
.border-primary    { border-color: var(--kh-green-500) !important; }

.bg-gradient-primary,
.btn.bg-gradient-primary {
  background-image: linear-gradient(195deg, var(--kh-green-400), var(--kh-green-600)) !important;
}
.btn-primary,
.btn.bg-gradient-primary {
  box-shadow: 0 2px 2px 0 rgba(13, 77, 44, .14),
              0 3px 1px -2px rgba(13, 77, 44, .22),
              0 1px 5px 0 rgba(13, 77, 44, .18);
}
.btn-primary:hover,
.btn.bg-gradient-primary:hover {
  background-color: var(--kh-green-500);
  border-color: var(--kh-green-500);
  box-shadow: 0 8px 14px -8px rgba(13, 77, 44, .38),
              0 3px 18px 0 rgba(13, 77, 44, .14),
              0 7px 8px -4px rgba(13, 77, 44, .22);
}
.btn.bg-gradient-primary.dropdown-toggle { background-color: var(--kh-green-500); }

.btn-primary {
  --bs-btn-bg: var(--kh-green-500);
  --bs-btn-border-color: var(--kh-green-500);
  --bs-btn-hover-bg: var(--kh-green-600);
  --bs-btn-hover-border-color: var(--kh-green-600);
  --bs-btn-active-bg: var(--kh-green-600);
  --bs-btn-active-border-color: var(--kh-green-600);
  --bs-btn-disabled-bg: var(--kh-green-500);
  --bs-btn-disabled-border-color: var(--kh-green-500);
  --bs-btn-focus-shadow-rgb: 13, 77, 44;
}
.btn-outline-primary {
  --bs-btn-color: var(--kh-green-500);
  --bs-btn-border-color: var(--kh-green-500);
  --bs-btn-hover-bg: var(--kh-green-500);
  --bs-btn-hover-border-color: var(--kh-green-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--kh-green-500);
  --bs-btn-active-border-color: var(--kh-green-500);
  --bs-btn-disabled-color: var(--kh-green-500);
  --bs-btn-disabled-border-color: var(--kh-green-500);
  --bs-btn-focus-shadow-rgb: 13, 77, 44;
}
.btn-link {
  --bs-btn-color: var(--kh-green-500);
  --bs-btn-hover-color: var(--kh-green-600);
  --bs-btn-active-color: var(--kh-green-600);
}
a { color: var(--kh-green-500); }
a:hover { color: var(--kh-green-600); }

/* The scrolled top navbar: the theme's .blur rule paints it near-opaque white
   with dark text; theme-overrides.css turns it into the shared blue. Restate it
   as brand green — its white text/icons are handled by theme-overrides. */
.navbar.navbar-main.blur {
  background: var(--kh-green-500) !important;
  background-image: linear-gradient(195deg, var(--kh-green-400), var(--kh-green-600)) !important;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
/* Floating-label (Material) inputs: focused AND filled states go green. The
 * leading `.input-group` matters — Material's own pink rule is
 * `.input-group.input-group-outline.is-filled …` (0,5,0), so a lower-specificity
 * override would lose on filled fields. */
.input-group.input-group-outline.is-filled .form-label + .form-control,
.input-group.input-group-outline.is-focused .form-label + .form-control {
  border-color: var(--kh-green-500) !important;
  /* Top edge stays transparent: the floated label's :before/:after draw that
   * segment with a gap for the label text. */
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 var(--kh-green-500), inset -1px 0 var(--kh-green-500), inset 0 -1px var(--kh-green-500) !important;
}
.input-group.input-group-outline.is-filled .form-label,
.input-group.input-group-outline.is-focused .form-label { color: var(--kh-green-500); }
.input-group.input-group-outline.is-filled .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-focused .form-label:before {
  border-top-color: var(--kh-green-500) !important;
  box-shadow: inset 0 1px var(--kh-green-500) !important;
}
.form-check-input:checked[type=checkbox],
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: linear-gradient(195deg, var(--kh-green-400), var(--kh-green-600));
}
/* …but a checkbox inside a real .form-check is painted pink by Material's own
 * `.form-check:not(.form-switch) …:checked { background: #e91e63 }`, which is
 * more specific than the bg-image var above and so wins. Repaint it green.
 * (Used by the rent-contract tenant picker.) */
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
  background: var(--kh-green-500);
  border-color: var(--kh-green-500);
}
/* Bare (non-Material) controls: a visible box on the light surface.
 *
 * <select> and <textarea> in our page templates carry .form-control (or
 * .form-select) WITHOUT the .input-group.input-group-outline wrapper that text
 * inputs use. Material Dashboard styles those as underline fields, so it zeroes
 * their horizontal padding — which looks fine underlined, but once we draw a
 * border round them the text sits flush against it. Restore the same box the
 * Material outline fields use: 10px/12px inset, 1.3 line-height so a closed
 * control is the same 40px tall, and the matching 6px radius. */
.form-control:not(.input-group .form-control),
.form-select:not(.input-group .form-select) {
  border: 1px solid var(--kh-border-strong);
  border-radius: .375rem;
  color: var(--kh-ink-700);
  padding: .625rem .75rem;
  line-height: 1.3;
}
/* Textareas hold prose, so give the wrapped lines a little more room. The
 * horizontal inset stays the same as every other control. */
textarea.form-control:not(.input-group .form-control) { line-height: 1.5; }
.form-control:not(.input-group .form-control):focus,
.form-select:not(.input-group .form-select):focus {
  border-color: var(--kh-green-500) !important;
  box-shadow: 0 0 0 .15rem rgba(13, 77, 44, .25) !important;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination .page-item .page-link {
  background-color: var(--kh-card) !important;
  border: 1px solid var(--kh-border-subtle) !important;
  color: var(--kh-green-500) !important;
}
.pagination .page-item .page-link:hover {
  background-color: var(--kh-green-500) !important;
  border-color: var(--kh-green-500) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link {
  background-color: var(--kh-raised) !important;
  border-color: var(--kh-border-subtle) !important;
  color: var(--kh-ink-500) !important;
}

/* ── In-card tabs: underline style ───────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--kh-border-subtle); }
.nav-tabs .nav-link {
  color: var(--kh-ink-500);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--kh-ink-900);
  border-bottom-color: var(--kh-border-strong);
}
.nav-tabs .nav-link.active {
  color: var(--kh-ink-900) !important;
  background: transparent;
  border-bottom: 2px solid var(--kh-green-500);
}

/* ── Status colours (darkened for white backgrounds) ─────────────────────── */
.text-success { color: #1f7a4d !important; }
.text-warning { color: var(--kh-amber-500) !important; }
.text-danger  { color: var(--kh-red-500) !important; }
.bg-gradient-success { background-image: linear-gradient(195deg, #3f9e6d, #1f7a4d) !important; }
.bg-gradient-warning { background-image: linear-gradient(195deg, #d9962a, var(--kh-amber-500)) !important; }
.bg-gradient-danger  { background-image: linear-gradient(195deg, #d55a5a, var(--kh-red-500)) !important; }
/* Announcement banners → brand green, not Material's indigo info. */
.alert-info { background-image: linear-gradient(195deg, var(--kh-green-400), var(--kh-green-600)) !important; }

/* ── Auth pages (login / register) ────────────────────────────────────────
 * The shared auth templates are styled with Material's monochrome
 * .bg-gradient-dark / .btn-outline-dark and carry a stock Unsplash backdrop.
 * Swap in the Khalij backdrop and green accents. Scoped to .main-content-bg —
 * the class unique to the auth shell — so the dashboard is untouched.
 * ────────────────────────────────────────────────────────────────────────── */

/* Backdrop photo. The templates set an inline background-image, so !important
   is required to replace it. */
.main-content-bg .page-header {
  background-image: url('/static/clock_tower.avif') !important;
  background-size: cover !important;
  background-position: center !important;
}
/* Tint the photo with a dark green wash — deep enough to keep the card legible
   over it, light enough that the building still reads as a photograph. */
.main-content-bg .page-header .mask.bg-gradient-dark {
  background-image: linear-gradient(195deg, var(--kh-green-600), #061309) !important;
}

/* Logo header block on the card. */
.main-content-bg .card-header .bg-gradient-dark {
  background-image: linear-gradient(195deg, var(--kh-green-400), var(--kh-green-600)) !important;
}

/* Primary action buttons: Continue / Sign in / Create account. */
.main-content-bg .card-body .btn.bg-gradient-dark {
  background-image: linear-gradient(195deg, var(--kh-green-400), var(--kh-green-600)) !important;
  box-shadow: 0 3px 3px 0 rgba(13, 77, 44, .18),
              0 3px 1px -2px rgba(13, 77, 44, .22),
              0 1px 5px 0 rgba(13, 77, 44, .18);
}
.main-content-bg .card-body .btn.bg-gradient-dark:hover {
  box-shadow: 0 8px 14px -8px rgba(13, 77, 44, .38),
              0 3px 18px 0 rgba(13, 77, 44, .14),
              0 7px 8px -4px rgba(13, 77, 44, .22);
}

/* Secondary action buttons: Use a passkey / Email me a PIN. */
.main-content-bg .btn-outline-dark {
  border-color: var(--kh-green-500) !important;
  color: var(--kh-green-500) !important;
}
.main-content-bg .btn-outline-dark:hover {
  background-color: var(--kh-green-500) !important;
  border-color: var(--kh-green-500) !important;
  color: #fff !important;
}
/* The "invited as <role>" badge on the register card. */
.main-content-bg .badge.bg-gradient-dark {
  background-image: linear-gradient(195deg, var(--kh-green-400), var(--kh-green-600)) !important;
}

/* ── Selects: make the drop-down affordance obvious ────────────────────────
   Material Dashboard renders <select class="form-control"> exactly like a text
   box — nothing tells you it opens a menu, and the native caret is suppressed
   by the theme. Draw our own chevron and reserve room for it. Applied to
   .form-select too so every menu in the app looks the same. */
select.form-control,
select.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235d6b62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5.5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 14px 14px !important;
  padding-right: 2.25rem !important;
  cursor: pointer;
}
/* Chevron picks up the brand green while the menu has focus. */
select.form-control:focus,
select.form-select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230d4d2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5.5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* ── No number-input spinners ──────────────────────────────────────────────
   House rule (same as Mockbill, see CLAUDE.md): never show the up/down stepper
   arrows on <input type="number"> — they crowd the compact money/qty fields
   (advisory rent min/max, beds, baths, area) and invite stray scroll-to-change
   edits. Strip them everywhere. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }