/* ───────────────────────────────────────────────────────────────────────────
   PeStore platform theme — "under construction" (yellow + black), soft & modern,
   on top of Bootstrap 5. No build. Floating-panel layout + dark left sidebar.
   Re-theme via the --pf-* tokens (full theming system is a later, optional task).
   ─────────────────────────────────────────────────────────────────────────── */
@font-face { font-family: "Inter Variable"; src: url("/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk Variable"; src: url("/fonts/space-grotesk-variable.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Sora Variable";      src: url("/fonts/sora-variable.woff2") format("woff2");      font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Outfit Variable";    src: url("/fonts/outfit-variable.woff2") format("woff2");    font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Manrope Variable";   src: url("/fonts/manrope-variable.woff2") format("woff2");   font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Jakarta Variable";   src: url("/fonts/jakarta-variable.woff2") format("woff2");   font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Bricolage Variable"; src: url("/fonts/bricolage-variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces Variable";  src: url("/fonts/fraunces-variable.woff2") format("woff2");  font-weight: 100 900; font-display: swap; }

:root {
    --pf-font: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pf-font-display: "Jakarta Variable", var(--pf-font);

    /* accent: construction yellow + near-black "ink" */
    --pf-accent: #f5b301;
    --pf-accent-strong: #cf9400;
    --pf-accent-soft: rgba(245, 179, 1, .16);
    --pf-ink: #15130d;
    --pf-ink-2: #211e15;

    /* surfaces */
    --pf-bg: #efece4;          /* warm tint behind the floating panel */
    --pf-panel: #ffffff;       /* the floating panel */
    --pf-main-bg: #faf9f5;     /* content area inside the panel */
    --pf-surface: #ffffff;     /* cards */
    --pf-border: #ece8df;
    --pf-border-strong: #ddd8cc;
    --pf-text: #1b1a16;
    --pf-muted: #716d62;

    --pf-radius: .9rem;
    --pf-radius-sm: .5rem;
    --pf-shadow-sm: 0 1px 2px rgba(20, 18, 10, .04), 0 1px 3px rgba(20, 18, 10, .05);
    --pf-shadow: 0 10px 30px rgba(20, 18, 10, .10);
    --pf-shadow-panel: 0 24px 60px rgba(20, 18, 10, .14);
}

[x-cloak] { display: none !important; }

body {
    background: var(--pf-bg);
    color: var(--pf-text);
    font-family: var(--pf-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--pf-font-display); font-weight: 600; letter-spacing: -.02em; color: var(--pf-text); }
h1 { font-size: 2.35rem; } h2 { font-size: 1.95rem; } h3 { font-size: 1.7rem; } h4 { font-size: 1.7rem; } h5 { font-size: 1.35rem; }

/* ── Floating panel layout ───────────────────────────────────────────────── */
.pf-app {
    max-width: 1340px;
    margin: 1.25rem auto;
    min-height: calc(100vh - 2.5rem);
    background: var(--pf-panel);
    border-radius: 1.25rem;
    box-shadow: var(--pf-shadow-panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pf-hazard { height: 5px; flex-shrink: 0;
    background: repeating-linear-gradient(45deg, var(--pf-ink) 0 13px, var(--pf-accent) 13px 26px); }
.pf-body { display: flex; flex: 1; min-height: 0; }

/* ── Sidebar (dark) ──────────────────────────────────────────────────────── */
.pf-sidebar {
    width: 236px; flex-shrink: 0;
    background: var(--pf-ink);
    color: #c4bfb2;
    display: flex; flex-direction: column;
    padding: 1.1rem .8rem;
}
.pf-brand-side {
    display: flex; align-items: center; gap: .5rem;
    color: #fff; font-family: var(--pf-font-display); font-weight: 700; letter-spacing: -.02em;
    font-size: 1.15rem; padding: .25rem .5rem 1rem;
}
.pf-brand-side .pf-brand-sub { color: var(--pf-accent); font-weight: 600; font-size: .95rem; }
.pf-nav { display: flex; flex-direction: column; gap: 2px; }
.pf-nav-label { color: #6f6a5d; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: .9rem .7rem .3rem; }
.pf-nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .7rem; border-radius: .6rem;
    color: #bdb8aa; font-weight: 500; text-decoration: none; font-size: .92rem;
    transition: background .12s ease, color .12s ease;
}
.pf-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pf-nav-link.active { background: var(--pf-accent-soft); color: var(--pf-accent); font-weight: 600; }
.pf-nav-link.disabled { opacity: .4; pointer-events: none; }
.pf-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.pf-sidebar-foot { margin-top: auto; padding: .5rem .7rem 0; color: #6f6a5d; font-size: .75rem; }

/* ── Main area + header ──────────────────────────────────────────────────── */
.pf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--pf-main-bg); }
.pf-header {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1.25rem; background: var(--pf-panel); border-bottom: 1px solid var(--pf-border);
}
.pf-search { flex: 1; max-width: 420px; }
.pf-search .form-control { background: var(--pf-main-bg); border-color: var(--pf-border); border-radius: 999px; }
.pf-header-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.pf-iconbtn {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--pf-border); background: #fff; color: var(--pf-muted); cursor: pointer;
}
.pf-iconbtn:hover { color: var(--pf-text); border-color: var(--pf-border-strong); }
.pf-content { flex: 1; overflow: auto; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.pf-card { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.pf-card.pf-clickable:hover { box-shadow: var(--pf-shadow); transform: translateY(-1px); }
.pf-stat { font-family: var(--pf-font-display); font-size: 2.05rem; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ── Buttons (primary = ink/black pill; accent reserved for highlights) ────── */
.btn { border-radius: var(--pf-radius-sm); font-weight: 500; }
.btn-success, .btn-primary, .btn-dark {
    --bs-btn-bg: var(--pf-ink); --bs-btn-border-color: var(--pf-ink); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2b2719; --bs-btn-hover-border-color: #2b2719; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2b2719; --bs-btn-active-border-color: #2b2719;
    --bs-btn-disabled-bg: var(--pf-ink); --bs-btn-disabled-border-color: var(--pf-ink); --bs-btn-disabled-color: #fff;
}
.btn-outline-primary { --bs-btn-color: var(--pf-text); --bs-btn-border-color: var(--pf-border-strong); --bs-btn-hover-bg: var(--pf-ink); --bs-btn-hover-border-color: var(--pf-ink); --bs-btn-hover-color: #fff; }
.btn-secondary { --bs-btn-bg: var(--pf-ink); --bs-btn-border-color: var(--pf-ink); --bs-btn-hover-bg: #2b2719; --bs-btn-hover-border-color: #2b2719; }

/* ── Soft pill badges (semantic colors kept; accent is separate) ───────────── */
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; }
.text-bg-success { background: rgba(22, 163, 74, .14) !important; color: #15803d !important; }
.text-bg-warning { background: rgba(245, 158, 11, .16) !important; color: #b45309 !important; }
.text-bg-danger  { background: rgba(239, 68, 68, .12) !important; color: #b91c1c !important; }
.text-bg-info    { background: rgba(59, 130, 246, .12) !important; color: #1d4ed8 !important; }
.text-bg-primary { background: var(--pf-accent-soft) !important; color: var(--pf-accent-strong) !important; }
.text-bg-secondary { background: #eeebe3 !important; color: #57534a !important; }
.text-bg-light   { background: #f1efe9 !important; color: #6b6860 !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { --bs-table-hover-bg: var(--pf-accent-soft); margin-bottom: 0; }
.table > thead th { background: transparent; color: var(--pf-muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--pf-border); }
.table > tbody td { border-bottom: 1px solid var(--pf-border); vertical-align: middle; }
.table a:not(.btn) { color: var(--pf-text); }
.table a:not(.btn):hover { color: var(--pf-accent-strong); }

/* ── Tabs (tenant detail) ────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--pf-border); }
.nav-tabs .nav-link { color: var(--pf-muted); border: none; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--pf-text); border-bottom-color: var(--pf-border-strong); }
.nav-tabs .nav-link.active { color: var(--pf-text); background: transparent; border-bottom-color: var(--pf-accent); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control, .form-select { border-radius: var(--pf-radius-sm); border-color: var(--pf-border-strong); }
.form-control:focus, .form-select:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 .2rem var(--pf-accent-soft); }
.form-check-input:checked { background-color: var(--pf-ink); border-color: var(--pf-ink); }
.form-check-input:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 .2rem var(--pf-accent-soft); }

/* ── Misc ────────────────────────────────────────────────────────────────── */
code { color: #57534a; background: #f1efe9; padding: .1em .4em; border-radius: .3rem; font-size: .85em; }
hr { border-color: var(--pf-border); opacity: 1; }
.text-muted { color: var(--pf-muted) !important; }
.dropdown-menu { border-color: var(--pf-border); border-radius: var(--pf-radius-sm); box-shadow: var(--pf-shadow); }

@media (max-width: 768px) {
    .pf-app { margin: 0; border-radius: 0; min-height: 100vh; }
    .pf-sidebar { width: 64px; }
    .pf-nav-link span, .pf-brand-side .pf-brand-name, .pf-nav-label, .pf-sidebar-foot { display: none; }
}

/* ── Tenant-runtime shell (tech-facing, mobile-first) ─────────────────────── */
.t-body { background: var(--pf-main-bg); color: var(--pf-text); font-family: var(--pf-font); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
.t-hazard { height: 4px; background: repeating-linear-gradient(45deg, var(--pf-ink) 0 12px, var(--pf-accent) 12px 24px); }
.t-appbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .9rem; background: var(--pf-panel);
    border-bottom: 1px solid var(--pf-border); box-shadow: var(--pf-shadow-sm);
}
.t-appbar .t-brand { font-family: var(--pf-font-display); font-weight: 700; letter-spacing: -.02em; color: var(--pf-text); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.t-appbar .t-title { font-family: var(--pf-font-display); font-weight: 600; font-size: 1.02rem; color: var(--pf-text); margin-right: auto; }
.t-back { color: var(--pf-muted); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; }
.t-content { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 1rem .9rem 6rem; }
.t-actionbar {
    position: sticky; bottom: 0; z-index: 1020;
    background: var(--pf-panel); border-top: 1px solid var(--pf-border);
    box-shadow: 0 -6px 20px rgba(20, 18, 10, .07); padding: .7rem .9rem;
}
.t-actionbar .btn { min-height: 46px; font-weight: 600; }
@media (min-width: 768px) { .t-content { padding: 1.5rem 1rem 6rem; } }

/* Area card header (report capture) — prominent, flashy */
.t-area-head { cursor: pointer; }
.t-area-head.open { border-bottom: 1px solid var(--pf-border); }
.t-area-icon {
    width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pf-accent-soft); color: var(--pf-accent-strong);
}
.t-area-icon svg { width: 28px; height: 28px; }
.t-area-title { font-family: var(--pf-font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.015em; line-height: 1.15; color: var(--pf-text); }