/* Real Estate ERP — design tokens.
 *
 * Loaded on every admin page via UNFOLD["STYLES"] in config/settings/base.py.
 * This file owns the values. Component classes that consume these tokens
 * live further down. Nothing here changes what a page renders on its own.
 *
 * Rule for adding to this file:
 *   - A value that appears in two or more page templates belongs here.
 *   - A value that appears in one page stays inline in that page.
 *
 * Do not put page-specific selectors (.cust-*, .exp-*, etc.) in this file.
 * Migrate the page to the .erp-* component, then delete the page's copy.
 */

:root {
    /* Radii */
    --erp-radius-card: 12px;
    --erp-radius-panel: 10px;
    --erp-radius-inner: 8px;
    --erp-radius-pill: 999px;

    /* Spacing */
    --erp-pad-card: 24px;
    --erp-pad-panel: 20px;
    --erp-gap: 16px;
    --erp-gap-sm: 12px;

    /* Timing */
    --erp-transition: 120ms ease;
    --erp-transition-slow: 160ms ease;

    /* Palette — light */
    --erp-bg-page: #f8fafc;
    --erp-bg-card: #ffffff;
    --erp-bg-muted: #f1f5f9;
    --erp-border: #e2e8f0;
    --erp-border-strong: #cbd5e1;

    --erp-fg: #0f172a;
    --erp-fg-secondary: #475569;
    --erp-fg-muted: #64748b;
    --erp-fg-subtle: #94a3b8;

    --erp-primary: #059669;
    --erp-primary-dark: #047857;
    --erp-primary-tint: rgba(5, 150, 105, 0.10);

    --erp-success: #16a34a;
    --erp-success-tint: rgba(22, 163, 74, 0.10);

    --erp-warning: #d97706;
    --erp-warning-tint: rgba(217, 119, 6, 0.10);

    --erp-danger: #dc2626;
    --erp-danger-tint: rgba(220, 38, 38, 0.10);

    /* Typography */
    --erp-font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
    --erp-tracking-wide: 0.06em;
    --erp-tracking-wider: 0.08em;
}

html.dark,
.dark {
    --erp-bg-page: #0b1120;
    --erp-bg-card: #0f172a;
    --erp-bg-muted: #1e293b;
    --erp-border: #1e293b;
    --erp-border-strong: #334155;

    --erp-fg: #f1f5f9;
    --erp-fg-secondary: #cbd5e1;
    --erp-fg-muted: #94a3b8;
    --erp-fg-subtle: #94a3b8;

    --erp-primary: #34d399;
    --erp-primary-dark: #6ee7b7;
    --erp-primary-tint: rgba(16, 185, 129, 0.15);

    --erp-success: #34d399;
    --erp-success-tint: rgba(34, 197, 94, 0.15);

    --erp-warning: #fbbf24;
    --erp-warning-tint: rgba(245, 158, 11, 0.15);

    --erp-danger: #f87171;
    --erp-danger-tint: rgba(239, 68, 68, 0.15);
}


/* ==========================================================================
   Changelist table chrome.

   These rules used to live in templates/admin/_changelist_shared.html,
   which was loaded per-page by hand-written changelist templates. That
   meant any admin without a custom template (Groups, Log Entry, Document
   Types, Expense Categories, Profile) had no hover and no chrome. Move
   to this file, which UNFOLD["STYLES"] loads on every admin page.
   ========================================================================== */

#result_list {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#result_list thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    font-weight: 500;
    padding: 10px 12px;
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}
html.dark #result_list thead th {
    border-bottom-color: #1e293b;
}

#result_list tbody td,
#result_list tbody th {
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    background: transparent;
    transition: background-color 120ms ease;
}

/* The row's only anchor (Django wraps list_display_links). Style it as
   plain text — the whole row is the click surface. */
#result_list tbody th[scope="row"] a,
#result_list tbody th[scope="row"] a:visited {
    color: inherit !important;
    text-decoration: none !important;
}
#result_list tbody th[scope="row"] a:hover,
#result_list tbody th[scope="row"] a:focus {
    color: inherit !important;
    text-decoration: none !important;
    outline: none;
}
html.dark #result_list tbody td,
html.dark #result_list tbody th {
    color: #cbd5e1;
    border-bottom-color: #1e293b;
}

/* Row hover — grey, both modes. Previous dark-mode rule was emerald
   (rgba(16, 185, 129, 0.14)) and rendered as pale green. */
#result_list tbody tr { cursor: pointer; }
#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
    background: #f8fafc;
}
html.dark #result_list tbody tr:hover td,
html.dark #result_list tbody tr:hover th {
    background: rgba(148, 163, 184, 0.10);
}

/* Action-checkbox column */
#result_list th.column-action-checkbox-column,
#result_list td.action-checkbox {
    width: 40px;
}

/* ==========================================================================
   KPI strip.
   Values copied from the Expenses changelist when it was migrated to the
   shared design system. Pages should use these classes instead of
   redefining .<prefix>-kpi-* locally.
   ========================================================================== */

.erp-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--erp-gap-sm);
    margin-bottom: var(--erp-gap);
}

.erp-kpi-tile {
    border-radius: var(--erp-radius-card);
    padding: var(--erp-pad-card);
    display: flex;
    flex-direction: column;
    gap: var(--erp-gap-sm);
    border: 1px solid var(--erp-border);
    background: var(--erp-bg-card);
}

.erp-kpi-tile.is-clickable {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow var(--erp-transition-slow),
                transform var(--erp-transition-slow),
                border-color var(--erp-transition-slow);
}
.erp-kpi-tile.is-clickable:hover {
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
    transform: translateY(-1px);
    border-color: #a7f3d0;
}
html.dark .erp-kpi-tile.is-clickable:hover {
    /* Bright emerald ring + glow so the hover is visible against the
       dark page background. The old #065f46 border and 0.18 opacity
       shadow were two shades darker than #0f172a and read as no
       change. The ring (0 0 0 1px) gives a crisp 1px edge; the 0 6px
       glow gives lift. */
    box-shadow: 0 0 0 1px #34d399, 0 6px 18px rgba(52, 211, 153, 0.35);
    border-color: #34d399;
}

.erp-kpi-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.erp-kpi-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--erp-tracking-wider);
    color: var(--erp-fg-secondary);
    font-weight: 600;
}
.erp-kpi-icon {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
}
.erp-kpi-value {
    font-size: 40px;
    font-weight: 700;
    color: var(--erp-fg);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
    .erp-kpi-value { font-size: 48px; }
}
.erp-kpi-sub {
    font-size: 14px;
    color: var(--erp-fg-secondary);
}

/* KPI tones */
.erp-kpi-tile.is-success { background: var(--erp-success-tint); }
.erp-kpi-tile.is-warning { background: var(--erp-warning-tint); }
.erp-kpi-tile.is-neutral { background: var(--erp-bg-page); }
.erp-kpi-tile.is-primary { background: var(--erp-primary-tint); }
.erp-kpi-tile.is-success  .erp-kpi-icon { color: var(--erp-success); }
.erp-kpi-tile.is-warning  .erp-kpi-icon { color: var(--erp-warning); }
.erp-kpi-tile.is-neutral  .erp-kpi-icon { color: var(--erp-fg-subtle); }
.erp-kpi-tile.is-primary  .erp-kpi-icon { color: var(--erp-primary); }
.erp-kpi-tile.is-danger   { background: var(--erp-danger-tint); }
.erp-kpi-tile.is-danger   .erp-kpi-icon { color: var(--erp-danger); }
.erp-kpi-tile.is-info     { background: rgba(37, 99, 235, 0.10); }
.erp-kpi-tile.is-info     .erp-kpi-icon { color: #2563eb; }

/* ==========================================================================
   Chip / preset pill.
   ========================================================================== */

.erp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--erp-gap);
}
.erp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--erp-radius-pill);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--erp-border);
    background: var(--erp-bg-card);
    color: #334155;
    transition: all var(--erp-transition);
}
.erp-chip:hover {
    background: var(--erp-bg-page);
    border-color: var(--erp-border-strong);
}
.erp-chip.is-active {
    background: var(--erp-bg-muted);
    border-color: var(--erp-fg-subtle);
    color: var(--erp-fg);
}
.erp-chip-count {
    font-variant-numeric: tabular-nums;
    color: var(--erp-fg-subtle);
    font-weight: 500;
}
html.dark .erp-chip {
    background: var(--erp-bg-card);
    border-color: var(--erp-border);
    color: var(--erp-fg-secondary);
}
html.dark .erp-chip:hover { background: var(--erp-bg-muted); }
html.dark .erp-chip.is-active {
    background: var(--erp-bg-muted);
    color: var(--erp-fg);
}

/* ==========================================================================
   Panel — the standard white card that wraps tables or charts.
   ========================================================================== */

.erp-panel {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-panel);
    padding: var(--erp-pad-panel);
    display: flex;
    flex-direction: column;
}
.erp-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}
.erp-panel-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--erp-tracking-wide);
    color: var(--erp-fg-subtle);
    font-weight: 500;
}
.erp-panel-subtitle {
    font-size: 12px;
    color: var(--erp-fg-subtle);
    margin-top: 4px;
}

/* ==========================================================================
   Section label — the small uppercase muted header above a block.
   ========================================================================== */

.erp-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--erp-tracking-wide);
    color: var(--erp-fg-subtle);
    font-weight: 500;
}

/* ==========================================================================
   Money-card grid — the two-tile layout at the top of Booking and
   (eventually) the dashboard. Same visual family as .erp-kpi-tile,
   just iconless and locked to 2 columns on wide screens.
   ========================================================================== */

.erp-money-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--erp-gap);
    margin-bottom: var(--erp-gap);
}
@media (min-width: 1024px) {
    .erp-money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tone aliases for money cards. `received` == money in (green),
   `pending` == money owed (amber). */
.erp-kpi-tile.is-received { background: var(--erp-primary-tint); }
.erp-kpi-tile.is-pending  { background: var(--erp-warning-tint); }

/* ==========================================================================
   KPI tile modifiers.

   .is-compact  -- the smaller, denser tile used on pages with 5 tiles
                   (Staff, Salary Payments). Value 24px vs 40/48px,
                   padding 16px vs 24px, radius 10px vs 12px.
   ========================================================================== */

.erp-kpi-tile.is-compact {
    border-radius: var(--erp-radius-panel);
    padding: 16px;
    gap: 6px;
}
.erp-kpi-tile.is-compact .erp-kpi-label {
    font-size: 11px;
    letter-spacing: var(--erp-tracking-wide);
    color: var(--erp-fg-subtle);
    font-weight: 500;
}
.erp-kpi-tile.is-compact .erp-kpi-icon {
    font-size: 18px;
}
.erp-kpi-tile.is-compact .erp-kpi-value {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
}
.erp-kpi-tile.is-compact .erp-kpi-sub {
    font-size: 12px;
    color: var(--erp-fg-subtle);
}

/* ==========================================================================
   Dashboard-support tokens and modifiers.

   Added when the dashboard migrated from its own --dash-* system to the
   shared --erp-* tokens. Two new things: an info-color token (was
   hardcoded inside .erp-kpi-tile.is-info), and two modifiers used only
   by the dashboard money-card / card-wrapping-table pattern.
   ========================================================================== */

:root {
    --erp-info: #2563eb;
    --erp-info-tint: rgba(37, 99, 235, 0.10);
}
html.dark,
.dark {
    --erp-info: #60a5fa;
    --erp-info-tint: rgba(59, 130, 246, 0.15);
}

/* Refactor is-info to use the tokens (values unchanged). */
.erp-kpi-tile.is-info     { background: var(--erp-info-tint); }
.erp-kpi-tile.is-info     .erp-kpi-icon { color: var(--erp-info); }

/* .is-lg — dashboard hero money-card value scale (48/56px vs 40/48px). */
.erp-kpi-tile.is-lg .erp-kpi-value { font-size: 48px; }
@media (min-width: 1024px) {
    .erp-kpi-tile.is-lg .erp-kpi-value { font-size: 56px; }
}

/* .is-flush — no panel padding. Used when the panel wraps a table that
   carries its own cell padding. */
.erp-panel.is-flush { padding: 0; }

/* ===================================================================
   Text-input borders.
   Unfold's default text inputs are nearly border-less on white, so
   the box "disappears" and reads as empty whitespace. Give text-like
   inputs the same visible border Unfold already applies to <select>
   and date pickers. Loaded on every admin page via UNFOLD["STYLES"].
   =================================================================== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px;
  background-color: #fff;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="url"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark textarea {
  border-color: #334155 !important;
  background-color: #0f172a;
}