/* ==========================================================================
   Rentee - design system overlay
   Loaded AFTER app.css. Re-themes the whole application by redefining the
   Tailwind v4 custom properties the compiled theme already reads, so all 188
   pages pick up the new design without their markup being touched.

   Colour rule: one cool hue (teal) owns everything interactive; the warm hues
   are reserved for financial state, so a red figure always means money at risk
   and never means "delete".

   To roll back: remove the <link> to this file. Nothing else depends on it.
   ========================================================================== */

/* Local Inter, used if the CDN copy in Inter-font.css does not arrive. */
@font-face {
  font-family: "Inter Local";
  src: url("../fonts/Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   1 - Brand and semantic colour
   Was: indigo #4f46e5 primary, magenta #f000b9 secondary, and semantics at
   full saturation competing with the brand for attention.
   -------------------------------------------------------------------------- */

:root {
  /* Interactive / brand */
  --color-primary:         #0A5C6B;
  --color-primary-focus:   #084C58;

  /* Dark-mode counterpart - the template uses `accent` wherever `primary`
     would be too dark to read on a dark ground. */
  --color-accent:          #46A8B8;
  --color-accent-focus:    #5FBCCB;
  --color-accent-light:    #7CC6D3;

  /* Secondary was magenta and fought the brand. Now a muted slate-teal. */
  --color-secondary:       #3E6B78;
  --color-secondary-focus: #2F5764;
  --color-secondary-light: #6B98A4;

  /* Financial state */
  --color-success:         #2E7D5B;
  --color-success-focus:   #24654A;
  --color-warning:         #A56A11;
  --color-warning-focus:   #8A570B;
  --color-error:           #A93A31;
  --color-error-focus:     #8E2C24;
  --color-info:            #2A6E86;
  --color-info-focus:      #205870;

  /* Dark surfaces - the navy ramp becomes teal-ink so the dark theme sits in
     the same colour family as the accent instead of drifting blue. */
  --color-navy-50:   #E7EDEE;
  --color-navy-100:  #C3D0D3;
  --color-navy-200:  #A4B5BA;
  --color-navy-300:  #6C8188;
  --color-navy-400:  #5E7178;
  --color-navy-450:  #46595F;
  --color-navy-500:  #384A50;
  --color-navy-600:  #31424A;
  --color-navy-700:  #26353B;
  --color-navy-750:  #223034;
  --color-navy-800:  #1B2A2F;
  --color-navy-900:  #0F1D21;

  /* Light surface tint used by cards and wells */
  --color-slate-150: #E8EFEF;

  /* Inter is already loaded on every page and is far better at small sizes
     and dense tables than Poppins. */
  --font-sans: Inter, "Inter Local", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Figures are set in the same sans with tabular numerals. A monospace face
     here reads as a developer console, not a property business. */
  --font-figures: var(--font-sans);

  /* Sidebar widened so navigation can carry visible labels. */
  --main-sidebar-width: 15rem;
}

/* --------------------------------------------------------------------------
   2 - Typography
   -------------------------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, .text-xl, .text-2xl, .text-3xl {
  letter-spacing: -0.021em;
  text-wrap: balance;
}

/* Every figure lines up in a column. The live build sets money in the same
   proportional face as body copy, which is why numeric columns never align. */
table td,
table th,
.text-right,
.font-mono {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3 - Focus - the live build has no visible keyboard focus anywhere
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.dark :focus-visible { outline-color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4 - Surfaces
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid #D3DEDF;
  border-radius: 6px;
  box-shadow: 0 1px 2px #0f272c12, 0 8px 24px -14px #0f272c1f;
}
.dark .card {
  border-color: #26383D;
  box-shadow: 0 1px 2px #0005, 0 8px 24px -14px #0008;
}

/* --------------------------------------------------------------------------
   5 - Controls
   -------------------------------------------------------------------------- */

.btn {
  border-radius: 5px;
  font-weight: 550;
  letter-spacing: -0.005em;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:active { transform: translateY(0.5px); }

.form-input,
.form-select,
.form-textarea {
  border-radius: 5px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.dark .form-input:focus,
.dark .form-select:focus,
.dark .form-textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* --------------------------------------------------------------------------
   6 - Tables - used by every Grid.js list in the system
   -------------------------------------------------------------------------- */

.gridjs-table { font-size: 13px; }

.gridjs-th,
table thead th {
  font-size: 10.5px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: #5F767C;
}
.dark .gridjs-th,
.dark table thead th { color: #8AA1A7; }

.gridjs-tr:hover td { background: #F6F9F9; }
.dark .gridjs-tr:hover td { background: #16252A; }

/* Row action buttons: the three unlabelled circles get real hit areas and
   separation so view / edit / delete stop reading as one control. */
.gridjs-td .btn.rounded-full {
  width: 28px;
  height: 28px;
  padding: 0;
  margin-right: 3px;
}

/* --------------------------------------------------------------------------
   7 - Sidebar - labels, grouping, and a clear active state
   Paired with the markup change in _header.php.
   -------------------------------------------------------------------------- */

.main-sidebar {
  width: var(--main-sidebar-width);
}

.main-sidebar .nav-label {
  font-family: var(--font-figures);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #5F767C;
  padding: 0 12px 5px;
  margin-top: 14px;
}
.dark .main-sidebar .nav-label { color: #8AA1A7; }

.main-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 7px 9px;
  border-radius: 5px;
  font-size: 13px;
  color: #3B5158;
  justify-content: flex-start;
  transition: background-color .12s ease, color .12s ease;
}
.dark .main-sidebar .nav-link { color: #B4C6CA; }

.main-sidebar .nav-link i { font-size: 17px; width: 18px; text-align: center; flex: none; }
.main-sidebar .nav-link:hover { background: #EEF3F3; color: #12242A; }
.dark .main-sidebar .nav-link:hover { background: #223034; color: #E4EDEF; }

.main-sidebar .nav-link.is-active {
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.dark .main-sidebar .nav-link.is-active {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.main-sidebar .nav-count {
  margin-left: auto;
  font-family: var(--font-figures);
  font-size: 10px;
  color: #5F767C;
}
.main-sidebar .nav-count.is-alert {
  background: color-mix(in srgb, var(--color-error) 14%, transparent);
  color: var(--color-error);
  border-radius: 100px;
  padding: 1px 7px;
  font-weight: 600;
}

/* The brand block sits left-aligned now that the rail carries labels. */
.main-sidebar .brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  /* the whole row is the link now that the logo mark is gone */
  padding: 15px 14px 13px;
  overflow: hidden;
  text-decoration: none;
  border-radius: 12px;
  margin: 4px 6px 2px;
  transition: background .14s ease;
}
.main-sidebar .brand-row:hover { background: rgba(10, 92, 107, .07); text-decoration: none; }
.dark .main-sidebar .brand-row:hover { background: rgba(47, 187, 208, .12); }
.main-sidebar .brand-row .brand-text { min-width: 0; }
.main-sidebar .brand-row .brand-text {
  min-width: 0;
  flex: 1;
}
/* the sidebar is 15rem, so a long company name has to wrap inside it rather
   than run past the edge; two lines, then an ellipsis */
.main-sidebar .brand-row .brand-text b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 680;
  line-height: 1.22;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.main-sidebar .brand-row .brand-text span {
  display: block;
  font-family: var(--font-figures);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  margin-top: 2px;
  text-transform: uppercase;
  color: #5F767C;
  /* the subtitle is fixed text, so one line with an ellipsis is enough */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8 - Print - invoices and receipts inherit the new type scale
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; }
  .sidebar, .header-container, .main-sidebar { display: none !important; }
  .card { border: 0; box-shadow: none; }
  table td, table th { font-variant-numeric: tabular-nums; }
}

/* ==========================================================================
   Top bar - theme, help and the account menu
   Lives here rather than rentee-list.css because the header is on every page,
   including the ones that never load the list styles.
   ========================================================================== */

.tb-actions { display: flex; align-items: center; gap: 6px; }

.tb-btn {
  width: 38px; height: 38px; flex: none;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 12px; cursor: pointer;
  background: transparent; color: #5A7078; font-size: 19px;
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.tb-btn:hover  { background: rgba(10, 92, 107, .09); color: var(--color-primary, #0A5C6B); }
.tb-btn:focus-visible {
  outline: 0; box-shadow: 0 0 0 3px rgba(10, 92, 107, .22); color: var(--color-primary, #0A5C6B);
}
.tb-btn.is-on { background: rgba(10, 92, 107, .12); color: var(--color-primary, #0A5C6B); }

.dark .tb-btn { color: #8FA9B2; }
.dark .tb-btn:hover, .dark .tb-btn.is-on { background: rgba(47, 187, 208, .14); color: #2FBBD0; }

/* ---------- account ---------- */

.tb-user { position: relative; margin-left: 4px; }

.tb-avatar {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; background: none; overflow: hidden;
  display: inline-grid; place-items: center;
  transition: border-color .14s ease;
}
.tb-avatar:hover, .tb-avatar[aria-expanded="true"] { border-color: var(--color-primary, #0A5C6B); }
.tb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.tb-ini {
  width: 100%; height: 100%; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(10, 92, 107, .13); color: var(--color-primary, #0A5C6B);
  font-size: 15px; font-weight: 700;
}
.dark .tb-ini { background: rgba(47, 187, 208, .16); color: #2FBBD0; }

.tb-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  min-width: 248px; padding: 7px;
  background: #fff; border: 1px solid #E4EDEF; border-radius: 16px;
  box-shadow: 0 18px 44px -16px rgba(9, 40, 48, .3);
}
.dark .tb-menu { background: #13232A; border-color: #1D3138; }

.tb-menu-head {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px 12px; margin-bottom: 5px; border-bottom: 1px solid #EDF3F4;
}
.dark .tb-menu-head { border-bottom-color: #1D3138; }
.tb-menu-head img, .tb-menu-head .tb-ini {
  width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover;
}
.tb-who { display: flex; flex-direction: column; min-width: 0; }
.tb-who b {
  font-size: 13.5px; font-weight: 640; color: #0D2026;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-who span { font-size: 11.5px; color: #7B949C; margin-top: 1px; }
.dark .tb-who b { color: #EAF4F6; }

.tb-menu-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px;
  font-size: 13.5px; color: #33505A; text-decoration: none;
  transition: background .13s ease, color .13s ease;
}
.tb-menu-item i { font-size: 17px; color: #7B949C; }
.tb-menu-item:hover { background: rgba(10, 92, 107, .08); color: var(--color-primary, #0A5C6B); text-decoration: none; }
.tb-menu-item:hover i { color: var(--color-primary, #0A5C6B); }
.tb-menu-item.is-danger { margin-top: 4px; border-top: 1px solid #EDF3F4; border-radius: 0 0 11px 11px; padding-top: 12px; }
.tb-menu-item.is-danger:hover { background: rgba(228, 87, 76, .1); color: #E4574C; }
.tb-menu-item.is-danger:hover i { color: #E4574C; }
.dark .tb-menu-item { color: #C3D6DC; }
.dark .tb-menu-item.is-danger { border-top-color: #1D3138; }

/* entry transition */
.tb-in { transition: opacity .13s ease, transform .13s ease; }
.tb-in-start { opacity: 0; transform: translateY(-5px); }

@media (max-width: 600px) {
  .tb-menu { min-width: 216px; }
}

/* ==========================================================================
   Sidebar groups - 17 links is a long scroll, so they fold away
   ========================================================================== */

.main-sidebar .nav-group { margin: 1px 6px; }

.main-sidebar .nav-head {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 10px; cursor: pointer;
  background: none; font: inherit; text-align: left;
  font-size: 12.5px; font-weight: 620; color: #5F767C;
  transition: background .13s ease, color .13s ease;
}
.main-sidebar .nav-head:hover { background: rgba(10, 92, 107, .07); color: var(--color-primary, #0A5C6B); }
.main-sidebar .nav-head > i:first-child { font-size: 16px; }
.main-sidebar .nav-head span { flex: 1; min-width: 0; }
.main-sidebar .nav-head .caret {
  font-size: 15px; opacity: .7; transition: transform .18s ease;
}
.main-sidebar .nav-group.is-open .nav-head { color: var(--color-primary, #0A5C6B); }
.main-sidebar .nav-group.is-open .nav-head .caret { transform: rotate(180deg); }

/* a group holding the current page reads as active even when folded */
.main-sidebar .nav-group.has-active .nav-head { color: var(--color-primary, #0A5C6B); }
.main-sidebar .nav-group.has-active:not(.is-open) .nav-head::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--color-primary, #0A5C6B);
}

/* One collapsing row holding one child: grid-template-rows only governs the
   first row, so the links have to sit inside a single wrapper or everything
   after the first stays visible. */
.main-sidebar .nav-items {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .24s cubic-bezier(.4, 0, .2, 1);
}
.main-sidebar .nav-group.is-open .nav-items { grid-template-rows: 1fr; }
.main-sidebar .nav-sub {
  overflow: hidden; min-height: 0;
  display: flex; flex-direction: column;
}
/* fade the contents slightly behind the height, so it does not look sheared */
.main-sidebar .nav-sub > * { opacity: 0; transition: opacity .14s ease; }
.main-sidebar .nav-group.is-open .nav-sub > * { opacity: 1; transition-delay: .06s; }

/* the child links indent under a rule, so the nesting is legible */
.main-sidebar .nav-items .nav-link {
  margin-left: 20px; padding-left: 12px;
  border-left: 1px solid rgba(95, 118, 124, .22);
  border-radius: 0 9px 9px 0;
}
.main-sidebar .nav-items .nav-link.is-active { border-left-color: var(--color-primary, #0A5C6B); }

.dark .main-sidebar .nav-head { color: #8FA9B2; }
.dark .main-sidebar .nav-head:hover,
.dark .main-sidebar .nav-group.is-open .nav-head,
.dark .main-sidebar .nav-group.has-active .nav-head { color: #2FBBD0; }
.dark .main-sidebar .nav-group.has-active:not(.is-open) .nav-head::after { background: #2FBBD0; }
.dark .main-sidebar .nav-items .nav-link { border-left-color: rgba(143, 169, 178, .22); }

/* hidden only once the height has finished closing, so the links are not
   keyboard-reachable while folded but the animation still reads */
.main-sidebar .nav-sub {
  visibility: hidden;
  transition: visibility 0s linear .24s;
}
.main-sidebar .nav-group.is-open .nav-sub {
  visibility: visible;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .main-sidebar .nav-items,
  .main-sidebar .nav-sub > *,
  .main-sidebar .nav-head .caret { transition: none; }
}

/* ---------- collapse all / expand all ---------- */

.main-sidebar .nav-tools {
  display: flex; justify-content: flex-end; gap: 2px;
  padding: 2px 10px 4px; opacity: 0;
  transition: opacity .16s ease;
}
/* stays out of the way until the sidebar is hovered, the way an explorer does */
.main-sidebar:hover .nav-tools,
.main-sidebar .nav-tools:focus-within { opacity: 1; }

.main-sidebar .nav-tool {
  width: 24px; height: 24px; border: 0; border-radius: 7px; cursor: pointer;
  display: inline-grid; place-items: center; font-size: 14px;
  background: none; color: #7E969C;
  transition: background .12s ease, color .12s ease;
}
.main-sidebar .nav-tool:hover { background: rgba(10, 92, 107, .1); color: var(--color-primary, #0A5C6B); }
.main-sidebar .nav-tool:focus-visible {
  outline: 0; box-shadow: 0 0 0 2px rgba(10, 92, 107, .3); color: var(--color-primary, #0A5C6B);
}
.dark .main-sidebar .nav-tool { color: #7E9AA3; }
.dark .main-sidebar .nav-tool:hover { background: rgba(47, 187, 208, .15); color: #2FBBD0; }

@media (prefers-reduced-motion: reduce) {
  .main-sidebar .nav-tools, .main-sidebar .nav-tool { transition: none; }
}