/* Masiero Portal theme on top of AdminLTE 4 (vendor/adminlte).
   A calm, neutral look: system font, grey neutrals, thin borders, rounded
   cards, with Masiero blue (flag blue, RGB(0, 40, 104)) for actions and the
   logo red as a small accent. Light and dark themes: static/theme.js sets
   data-bs-theme on <html> from the visitor's choice (sun/moon button) or the
   system setting; AdminLTE's own color mode is off (data-lte-color-mode). */
:root,
[data-bs-theme=light] {
  --masiero-red: #ed2024;
  --masiero-red-rgb: 237, 32, 36;
  --masiero-blue: #002868;
  --masiero-blue-rgb: 0, 40, 104;
  --masiero-blue-hover: #0b3d91;
  --masiero-blue-dark: #001f52;

  /* Neutrals. */
  --z-text: #0a0a0a;
  --z-text-2: #262626;
  --z-muted: #737373;
  --z-faint: #a3a3a3;
  --z-line: #e5e5e5;
  --z-soft: #f5f5f5;
  --z-panel: #fafafa;
  --z-radius: 12px;
  --z-radius-sm: 8px;
  --z-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --z-bg: #ffffff;
  --z-surface: #ffffff;
  --z-header-bg: rgba(255, 255, 255, .85);
  --z-line-strong: #d4d4d4;
  --z-action: var(--masiero-blue);
  --z-action-rgb: var(--masiero-blue-rgb);
  --z-action-hover: var(--masiero-blue-hover);
  --z-action-active: var(--masiero-blue-dark);
  --z-on-action: #ffffff;
  --z-focus-border: #8a9cbd;
  --z-active-bg: rgba(var(--masiero-red-rgb), .09);
  --z-active-text: #c4161a;
  --z-active-icon: var(--masiero-red);
  --z-blue-bg: #eef2f8;   --z-blue-fg: var(--masiero-blue);
  --z-red-bg: #fdecec;    --z-red-fg: #b91c1c;
  --z-green-bg: #e9f7ee;  --z-green-fg: #15803d;
  --z-popover-shadow: 0 10px 30px rgba(0, 0, 0, .08);

  --bs-font-sans-serif: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: .9375rem;
  --bs-body-color: var(--z-text);
  --bs-body-bg: var(--z-bg);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-border-color: var(--z-line);
  --bs-secondary-color: var(--z-muted);
  --bs-primary: var(--z-action);
  --bs-primary-rgb: var(--z-action-rgb);
  --bs-primary-text-emphasis: var(--z-blue-fg);
  --bs-primary-bg-subtle: var(--z-blue-bg);
  --bs-primary-border-subtle: #c9d3e3;
  --bs-link-color: var(--masiero-blue-hover);
  --bs-link-color-rgb: 11, 61, 145;
  --bs-link-hover-color: var(--masiero-red);
  --bs-link-hover-color-rgb: var(--masiero-red-rgb);
  --bs-focus-ring-color: rgba(var(--z-action-rgb), .2);
  --bs-border-radius: var(--z-radius-sm);
  color-scheme: light;
}
[data-bs-theme=dark] {
  --z-text: #fafafa;
  --z-text-2: #e5e5e5;
  --z-muted: #a3a3a3;
  --z-faint: #737373;
  --z-line: #2a2a2a;
  --z-line-strong: #3a3a3a;
  --z-soft: #262626;
  --z-panel: #121212;
  --z-bg: #0a0a0a;
  --z-surface: #141414;
  --z-header-bg: rgba(10, 10, 10, .85);
  --z-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  /* Masiero blue is too dark on black: a lighter blue of the same hue. */
  --z-action: #3d68c2;
  --z-action-rgb: 61, 104, 194;
  --z-action-hover: #557dd1;
  --z-action-active: #2f56a6;
  --z-focus-border: #557dd1;
  --z-active-bg: rgba(var(--masiero-red-rgb), .16);
  --z-active-text: #ff7a7c;
  --z-active-icon: #ff5c5f;
  --z-blue-bg: rgba(85, 125, 209, .16);  --z-blue-fg: #a9c1f0;
  --z-red-bg: rgba(239, 68, 68, .16);    --z-red-fg: #f87171;
  --z-green-bg: rgba(34, 197, 94, .14);  --z-green-fg: #4ade80;
  --z-popover-shadow: 0 10px 30px rgba(0, 0, 0, .5);

  --bs-body-color: var(--z-text);
  --bs-body-bg: var(--z-bg);
  --bs-body-bg-rgb: 10, 10, 10;
  --bs-border-color: var(--z-line);
  --bs-secondary-color: var(--z-muted);
  --bs-primary: var(--z-action);
  --bs-primary-rgb: var(--z-action-rgb);
  --bs-primary-text-emphasis: var(--z-blue-fg);
  --bs-primary-bg-subtle: var(--z-blue-bg);
  --bs-primary-border-subtle: rgba(85, 125, 209, .35);
  --bs-link-color: #8eaeea;
  --bs-link-color-rgb: 142, 174, 234;
  --bs-link-hover-color: #ff7a7c;
  --bs-link-hover-color-rgb: 255, 122, 124;
  --bs-focus-ring-color: rgba(var(--z-action-rgb), .3);
  color-scheme: dark;
}
body { font-family: var(--bs-body-font-family); color: var(--z-text); -webkit-font-smoothing: antialiased; }
.text-muted-z { color: var(--z-muted) !important; }
.fw-medium { font-weight: 500; }

/* ---- Buttons and form controls ---- */
.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--z-radius-sm); --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .875rem; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: 7px; }
.btn-primary {
  --bs-btn-color: var(--z-on-action); --bs-btn-hover-color: var(--z-on-action); --bs-btn-active-color: var(--z-on-action); --bs-btn-disabled-color: var(--z-on-action);
  --bs-btn-bg: var(--z-action); --bs-btn-border-color: var(--z-action);
  --bs-btn-hover-bg: var(--z-action-hover); --bs-btn-hover-border-color: var(--z-action-hover);
  --bs-btn-active-bg: var(--z-action-active); --bs-btn-active-border-color: var(--z-action-active);
  --bs-btn-disabled-bg: var(--z-action); --bs-btn-disabled-border-color: var(--z-action);
  --bs-btn-focus-shadow-rgb: var(--z-action-rgb);
}
.btn-outline-secondary {
  --bs-btn-color: var(--z-text-2); --bs-btn-border-color: var(--z-line); --bs-btn-bg: var(--z-surface);
  --bs-btn-hover-color: var(--z-text); --bs-btn-hover-bg: var(--z-soft); --bs-btn-hover-border-color: var(--z-line);
  --bs-btn-active-color: var(--z-text); --bs-btn-active-bg: var(--z-soft); --bs-btn-active-border-color: var(--z-line-strong);
  --bs-btn-disabled-color: var(--z-faint); --bs-btn-disabled-bg: var(--z-surface); --bs-btn-disabled-border-color: var(--z-line);
  box-shadow: var(--z-shadow);
}
.form-label { font-size: .875rem; font-weight: 500; color: var(--z-text); margin-bottom: .375rem; }
.form-control, .form-select {
  font-size: .875rem; border-color: var(--z-line); border-radius: var(--z-radius-sm); box-shadow: var(--z-shadow);
  background-color: var(--z-surface); color: var(--z-text);
}
.form-control { min-height: 2.5rem; padding: .5rem .75rem; }
.form-control[readonly] { background: var(--z-panel); color: var(--z-muted); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--z-focus-border); box-shadow: 0 0 0 3px rgba(var(--z-action-rgb), .18);
}
.form-check-input:checked { background-color: var(--z-action); border-color: var(--z-action); }
.form-text { color: var(--z-muted); font-size: .8125rem; }
.alert { border-radius: var(--z-radius-sm); font-size: .875rem; padding: .75rem 1rem; }
.alert-primary { --bs-alert-color: var(--z-blue-fg); --bs-alert-bg: var(--bs-primary-bg-subtle); --bs-alert-border-color: var(--bs-primary-border-subtle); }

/* ---- Avatars ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--z-action); color: var(--z-on-action);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.avatar-sm { width: 1.5rem; height: 1.5rem; font-size: .625rem; }
.avatar-lg { width: 2.5rem; height: 2.5rem; font-size: .875rem; }
.avatar-xl { width: 3.5rem; height: 3.5rem; font-size: 1.125rem; }

/* ---- Header ---- */
.app-header {
  background: var(--z-header-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--z-line); min-height: 4rem; padding: 0 .75rem;
}
.icon-button {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--z-line); border-radius: var(--z-radius-sm); background: var(--z-surface); color: var(--z-text-2);
  box-shadow: var(--z-shadow); padding: 0; cursor: pointer;
}
.app-header .nav-link.icon-button { padding: 0; }
.icon-button:hover { background: var(--z-soft); color: var(--z-text); }
.org-pill {
  display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .75rem 0 .375rem;
  border: 1px solid var(--z-line); border-radius: var(--z-radius-sm); background: var(--z-surface); box-shadow: var(--z-shadow);
  font-size: .875rem; font-weight: 500; max-width: 22rem; color: var(--z-text);
}
.org-initials {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  border-radius: 5px; background: var(--z-soft); border: 1px solid var(--z-line); font-size: .625rem; font-weight: 700;
}
.org-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-toggle { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--z-text) !important; }
.user-toggle::after { display: none; }
.user-dropdown { min-width: 15rem; padding: .375rem; border: 1px solid var(--z-line); border-radius: var(--z-radius); box-shadow: var(--z-popover-shadow); background: var(--z-surface); }
.user-dropdown-head { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem .75rem; border-bottom: 1px solid var(--z-line); margin-bottom: .375rem; }
.user-dropdown .dropdown-item { border-radius: 6px; font-size: .875rem; padding: .45rem .5rem; }
.user-dropdown .dropdown-item:hover { background: var(--z-soft); }

/* ---- Sidebar ---- */
/* :root raises these above AdminLTE's own light/dark sidebar colours. */
:root .app-sidebar, :root[data-bs-theme] .app-sidebar {
  background: var(--z-panel) !important; border-right: 1px solid var(--z-line); box-shadow: none !important;
  display: flex; flex-direction: column;
  --lte-sidebar-color: var(--z-text-2);
  --lte-sidebar-hover-bg: var(--z-soft);
  --lte-sidebar-hover-color: var(--z-text);
  --lte-sidebar-menu-active-bg: var(--z-active-bg);
  --lte-sidebar-menu-active-color: var(--z-active-text);
}
.sidebar-brand { height: 4rem; justify-content: flex-start; padding: 0 1.25rem; border-bottom: 1px solid var(--z-line); }
.sidebar-brand .brand-link { display: flex; align-items: center; gap: .6rem; text-decoration: none; padding: 0; }
.sidebar-brand .brand-link .brand-image { float: none; height: 26px; width: auto; max-height: 26px; margin: 0; box-shadow: none; opacity: 1; }
.sidebar-brand .brand-text { color: var(--z-blue-fg); font-weight: 600; font-size: 1rem; padding-left: .6rem; border-left: 2px solid var(--masiero-red); line-height: 1.1; }
.sidebar-wrapper { flex: 1 1 auto; padding: .75rem .75rem 1rem; }
.nav-section { margin: 1rem .5rem .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--z-muted); }
.nav-section:first-child { margin-top: .25rem; }
.sidebar-menu .nav-item { margin-bottom: 2px; }
.sidebar-menu .nav-link { border-radius: var(--z-radius-sm); padding: .5rem .625rem; font-size: .875rem; gap: .25rem; }
.sidebar-menu .nav-link .nav-icon { font-size: 1rem; color: var(--z-muted); }
.sidebar-menu .nav-link p { font-weight: 450; }
/* Active item: the whole row in a soft Masiero red, text and icon in red. */
.sidebar-menu > .nav-item > .nav-link.active { font-weight: 600; }
.sidebar-menu > .nav-item > .nav-link.active .nav-icon { color: var(--z-active-icon); }
.sidebar-user { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-top: 1px solid var(--z-line); }
.sidebar-user-text { flex: 1 1 auto; min-width: 0; }
.sidebar-user-name { font-size: .875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-sub { font-size: .75rem; color: var(--z-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user .icon-button { border: 0; background: transparent; box-shadow: none; }

/* ---- Main ---- */
.app-main { background: var(--z-bg); }
.crumbs { border-bottom: 1px solid var(--z-line); padding: .75rem 1.5rem; }
.crumbs .breadcrumb { margin: 0; font-size: .875rem; --bs-breadcrumb-divider: "›"; --bs-breadcrumb-item-active-color: var(--z-text); }
.app-main .crumbs .breadcrumb a { color: var(--z-muted); text-decoration: none; }
.app-main .crumbs .breadcrumb a:hover { color: var(--z-text); }
.app-content { padding: 1.5rem .75rem 2rem; }
.page-head { margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 .25rem; color: var(--z-text); }
.page-head p { margin: 0; color: var(--z-muted); }
.page-head p:empty { display: none; }

/* ---- Cards ---- */
.z-card { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-radius); box-shadow: var(--z-shadow); overflow: hidden; }
.z-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.25rem; }
.z-card-head h2 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--z-text); }
.z-card-head p { margin: .2rem 0 0; color: var(--z-muted); font-size: .875rem; }
.z-card-body { padding: 0 1.25rem 1.25rem; }
.z-card-foot { padding: .75rem 1.25rem; border-top: 1px solid var(--z-line); background: var(--z-surface); }
.z-label { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--z-muted); margin-bottom: .5rem; }
.z-facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; font-size: .875rem; }
.z-facts dt { color: var(--z-muted); font-weight: 400; }
.z-facts dd { margin: 0; }
.z-list { list-style: none; padding: 0; margin: 0 0 .75rem; border: 1px solid var(--z-line); border-radius: var(--z-radius-sm); }
.z-list li { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; font-size: .875rem; }
.z-list li + li { border-top: 1px solid var(--z-line); }

/* Stat cards. */
.z-stat { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-radius); box-shadow: var(--z-shadow); padding: 1rem 1.125rem 1.125rem; height: 100%; }
.z-stat-top { display: flex; align-items: flex-start; justify-content: space-between; color: var(--z-muted); font-size: .875rem; }
.z-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--z-radius-sm); font-size: 1.05rem; }
.tone-blue { background: var(--z-blue-bg); color: var(--z-blue-fg); }
.tone-red { background: var(--z-red-bg); color: var(--z-red-fg); }
.tone-green { background: var(--z-green-bg); color: var(--z-green-fg); }
.tone-gray { background: var(--z-soft); color: var(--z-text-2); }
.z-stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin-top: .35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.z-stat-note { font-size: .8125rem; color: var(--z-muted); margin-top: .35rem; }

/* Card brand chip. */
.card-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 2rem; padding: 0 .5rem;
  border-radius: 6px; background: var(--z-action); color: var(--z-on-action); font-size: .7rem; font-weight: 800; font-style: italic;
  letter-spacing: .04em; text-transform: uppercase;
}

/* Badges. */
.z-badge { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 500; white-space: nowrap; }
.z-badge-green { background: var(--z-green-bg); color: var(--z-green-fg); }
.z-badge-red { background: var(--z-red-bg); color: var(--z-red-fg); }
.z-badge-blue { background: var(--z-blue-bg); color: var(--z-blue-fg); }
.z-badge-muted { background: var(--z-soft); color: var(--z-muted); }

/* ---- Invoice table ---- */
.z-table { --bs-table-bg: var(--z-surface); --bs-table-color: var(--z-text); --bs-table-hover-bg: var(--z-panel); font-size: .875rem; }
.z-table > thead > tr > th {
  background: var(--z-panel); color: var(--z-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: .7rem 1.25rem; border-top: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line);
}
.z-table > tbody > tr > td { padding: .8rem 1.25rem; border-bottom: 1px solid var(--z-line); vertical-align: middle; }
.z-table > tbody > tr:last-child > td { border-bottom: 0; }
.z-table tbody tr:hover > td { background: var(--z-panel); }
.invoices .num { font-variant-numeric: tabular-nums; }
.invoices .actions { white-space: nowrap; }
.z-link { color: var(--z-text-2); text-decoration: none; font-size: .8125rem; font-weight: 500; margin-left: .75rem; }
.z-link:hover { color: var(--z-blue-fg); text-decoration: underline; }
/* The Pay form opens in the flow of its row (not as an overlay): the table
   sits in a scroll box (.table-responsive) that would clip an overlay. */
details.pay { display: inline-block; vertical-align: middle; margin-left: .75rem; }
.invoices .actions .z-link { vertical-align: middle; }
.invoices td[data-label="Invoice"], .invoices td[data-label="Date"], .invoices .num { white-space: nowrap; }
/* Open: the Pay button and its form drop below View/PDF, so the column does
   not grow and squeeze the other columns. */
.invoices tr:has(details.pay[open]) details.pay { display: block; width: 260px; margin: .5rem 0 0 auto; text-align: end; }
.invoices tr:has(details.pay[open]) .pay-form { width: 100%; }
details.pay summary { list-style: none; }
details.pay summary::-webkit-details-marker { display: none; }
.pay-form {
  display: grid; width: 260px; max-width: 100%; margin: .5rem 0 0 auto; gap: .6rem; white-space: normal; text-align: start;
  padding: .875rem; border: 1px solid var(--z-line); border-radius: var(--z-radius-sm); background: var(--z-surface); box-shadow: var(--z-popover-shadow);
}
.invoices tr:has(details.pay[open]) > td { vertical-align: top; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }

/* ---- Sign-in pages ---- */
.login-page { background: var(--z-bg); }
.login-box { width: 100%; max-width: 28rem; padding: 0 1rem; }
.login-logo { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 1.5rem; }
.login-logo img { height: 34px; width: auto; }
.login-logo a { display: inline-flex; }
.login-logo .login-sub { color: var(--z-blue-fg); font-weight: 600; font-size: 1.1rem; padding-left: .75rem; border-left: 2px solid var(--masiero-red); line-height: 1.1; }
.login-box .card { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--z-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }
.login-box .login-card-body { padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--z-radius); color: var(--z-text); }
.auth-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 .25rem; }
.auth-sub { color: var(--z-muted); margin: 0 0 1.5rem; font-size: .9375rem; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1.25rem; font-size: .8125rem; color: var(--z-muted); }
.login-foot { text-align: center; color: var(--z-muted); font-size: .8125rem; margin-top: 1.25rem; }

/* ---- Phones ---- */
@media (max-width: 640px) {
  .crumbs { padding: .6rem 1rem; }
  .app-content { padding: 1.25rem .25rem 1.5rem; }
  .z-card-head { flex-direction: column; align-items: stretch; }
  .invoices thead { display: none; }
  .invoices tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--z-line); }
  .invoices tbody tr:last-child { border-bottom: 0; }
  .z-table > tbody > tr > td { border: 0; padding: 0; text-align: start !important; }
  .z-table tbody tr:hover > td { background: transparent; }
  .invoices td[data-label]::before { content: attr(data-label); display: block; color: var(--z-muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; }
  .invoices .actions { grid-column: 1 / -1; white-space: normal; padding-top: .35rem !important; }
  .invoices .actions .z-link:first-child { margin-left: 0; }
  details.pay, .invoices tr:has(details.pay[open]) details.pay { display: block; width: auto; margin: .6rem 0 0; text-align: start; }
  .pay-form { width: auto; }
}

/* ---- Theme toggle (sun / moon) ---- */
.theme-toggle .icon-moon { display: none; }
[data-bs-theme=dark] .theme-toggle .icon-sun { display: none; }
[data-bs-theme=dark] .theme-toggle .icon-moon { display: inline; }
.login-theme { position: fixed; top: 1rem; right: 1rem; }

/* ---- Dark theme details ---- */
/* Two logo files: black text for light, white text for dark. */
.masiero-logo.logo-dark { display: none; }
[data-bs-theme=dark] .masiero-logo.logo-light { display: none; }
[data-bs-theme=dark] .masiero-logo.logo-dark { display: inline-block; }
[data-bs-theme=dark] .dropdown-item { color: var(--z-text-2); }
[data-bs-theme=dark] .dropdown-item:hover { color: var(--z-text); }
[data-bs-theme=dark] .alert-warning { --bs-alert-bg: rgba(234, 179, 8, .12); --bs-alert-color: #facc15; --bs-alert-border-color: rgba(234, 179, 8, .3); }
[data-bs-theme=dark] .alert-danger { --bs-alert-bg: var(--z-red-bg); --bs-alert-color: var(--z-red-fg); --bs-alert-border-color: rgba(239, 68, 68, .3); }