/* ══════════════════════════════════════════════════════════════════
   Tamnanpar PM — shared design system (Grab-inspired)
   Linked from every page shell (header_admin/tech/superadmin, login,
   property_suspended, profile, marketing/*). Centralizing tokens +
   component classes here means a page's own <style> block should only
   ever contain layout that's truly specific to that one page.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* Brand green — the property-level default. admin/settings.php can
       override --tp-green/--tp-green-dark per property via inline
       :root vars in each header; this file only sets the fallback. */
    --tp-green: #00B14F;
    --tp-green-dark: #00853B;
    --tp-green-light: #33C273;
    --tp-green-soft: #E6F7EC;
    --tp-gold: #e9c46a;
    --tp-gold-dark: #d9a83f;

    /* Neutral scale, off Grab's #454444 */
    --tp-gray-100: #454444;
    --tp-gray-75: #6b6a6a;
    --tp-gray-50: #a2a1a1;
    --tp-gray-25: #d0d0d0;
    --tp-gray-15: #dedede;
    --tp-gray-10: #e9e9e9;
    --tp-gray-05: #f4f4f4;

    --tp-radius-card: 16px;
    --tp-radius-btn: 12px;
    --tp-radius-input: 10px;
    --tp-radius-pill: 999px;
    --tp-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --tp-shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.10);

    --tp-font: 'Inter', 'Noto Sans Thai', 'Segoe UI', sans-serif;
}

body {
    font-family: var(--tp-font);
    color: var(--tp-gray-100);
}

/* ── Typography scale (admin/tech/superadmin density) ──────────────
   Marketing/login use larger hero-sized headings set inline on those
   pages instead, since their spec is closer to Grab's original 36/28px. */
h1, .tp-h1 { font-size: 24px; font-weight: 700; }
h2, .tp-h2 { font-size: 18px; font-weight: 600; }
h3, .tp-h3 { font-size: 16px; font-weight: 500; }
.tp-caption { font-size: 13px; font-weight: 400; color: var(--tp-gray-75); }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
    border: none;
    border-radius: var(--tp-radius-card);
    box-shadow: var(--tp-shadow-card);
}
.clickable-card, .stat-card.clickable-card {
    transition: transform .18s, box-shadow .18s;
}
.clickable-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tp-shadow-card-hover) !important;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
    border-radius: var(--tp-radius-btn);
    font-weight: 600;
}
.btn-tp-primary {
    background: var(--tp-green);
    border-color: var(--tp-green);
    color: #fff;
}
.btn-tp-primary:hover {
    background: var(--tp-green-dark);
    border-color: var(--tp-green-dark);
    color: #fff;
}
.btn-tp-gold {
    background: var(--tp-gold);
    border-color: var(--tp-gold-dark);
    color: #333;
}
.btn-tp-gold:hover {
    background: var(--tp-gold-dark);
    color: #fff;
}

/* Filter/status pills — fully rounded, matching Grab's category tabs */
.btn-filter, .btn-filter-active {
    border-radius: var(--tp-radius-pill);
    font-weight: 600;
    padding: 0.35rem 0.9rem;
}
.btn-filter {
    background: #fff;
    border: 1px solid var(--tp-gray-15);
    color: var(--tp-gray-75);
}
.btn-filter:hover {
    border-color: var(--tp-green);
    color: var(--tp-green-dark);
}
.btn-filter-active {
    background: var(--tp-green);
    border: 1px solid var(--tp-green-dark);
    color: #fff;
}
.btn-filter-active:hover {
    background: var(--tp-green-dark);
    color: #fff;
}
/* ── Badges (status/role chips) — fully rounded ────────────────── */
.badge {
    border-radius: var(--tp-radius-pill);
    font-weight: 600;
    padding: 0.35em 0.75em;
}
/* Add-on module chips (Super Admin properties list) — one class per module,
   distinct from status colors so they read as "features on" rather than state.
   .badge-module carries the shared shape; each .badge-module-* below carries
   its own color so different add-ons are visually distinguishable at a glance.
   Add a new .badge-module-<name> rule (any unused color) when a new add-on's
   module badge is added to $moduleBadgeDefs in superadmin/properties.php. */
.badge-module {
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}
.badge-module-inventory  { background: #6f42c1; }
.badge-module-pm         { background: #0d6efd; }
.badge-module-recurring  { background: #fd7e14; }
.badge-module-qr         { background: #20c997; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--tp-radius-input);
    border-color: var(--tp-gray-15);
}
.form-control:focus, .form-select:focus {
    border-color: var(--tp-green);
    box-shadow: 0 0 0 0.2rem var(--tp-green-soft);
}
.form-label {
    color: var(--tp-gray-100);
}

/* ── Language switcher (TH/EN) — dropped into every page shell ──── */
.lang-switch-link {
    color: inherit;
    opacity: 0.6;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
}
.lang-switch-link.active {
    opacity: 1;
    text-decoration: underline;
}
.lang-switch-link:hover {
    opacity: 1;
    color: inherit;
}
.lang-switch-sep {
    opacity: 0.4;
    margin: 0 0.2rem;
    font-size: 0.8rem;
}

/* ── Tables ─────────────────────────────────────────────────────── */
.table th {
    background: var(--tp-gray-05);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--tp-gray-100);
    border-bottom: 2px solid var(--tp-gray-15);
}
.table td {
    vertical-align: middle;
    font-size: 0.9rem;
    border-color: var(--tp-gray-10);
}

/* ── Icon-in-circle + label groups (stat cards etc.) ───────────── */
.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* Dashboard work-order-count stat cards — the number is the whole point of the
   card, so it's sized to dominate (2x a plain Bootstrap h3) rather than compete
   with the icon/badge row above it. */
.stat-number {
    font-size: 3.2rem;
    line-height: 1.1;
    font-weight: 800;
}