/* ==========================================================================
   MJTech polish layer
   --------------------------------------------------------------------------
   Loaded AFTER main.css (and admin.css) on every layout. It only refines;
   it doesn't restructure. Removing the <link> to this file restores the
   previous look exactly, which makes it a safe place for site-wide
   consistency fixes:
     1. Brand font actually loaded (Poppins was referenced but never loaded)
     2. Accessibility: visible keyboard focus, selection colour
     3. Buttons & forms: contrast, touch targets, autofill on dark forms
     4. Key/value summary tables on public + portal pages
     5. Mobile: hero headings that fit, no sideways scroll, tidy spacing
     6. Admin panel refinements (scoped to .admin-* classes)
   ========================================================================== */

/* ---------- 1. Brand font (self-hosted, latin subset) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-800.woff2') format('woff2'); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video { height: auto; }
h1, h2, h3 { overflow-wrap: break-word; }

/* ---------- 2. Accessibility ---------- */
::selection { background: rgba(189, 113, 13, 0.35); color: #fff; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--primary, #bd710d);
    outline-offset: 3px;
    border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid rgba(189, 113, 13, 0.55);
    outline-offset: 1px;
}
@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; }
}

/* ---------- 3. Buttons & forms ---------- */
/* Navy outline on a near-black background was nearly invisible. */
.btn-secondary { border-color: rgba(255, 255, 255, 0.28); }
.btn-secondary:hover { border-color: var(--secondary, #163b6d); }
.btn { line-height: 1.2; }
.btn:active { transform: translateY(0) !important; }
.btn[disabled], .btn.disabled, button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

.form-control::placeholder { color: rgba(255, 255, 255, 0.38); opacity: 1; }
.form-control:disabled, .form-control[readonly] { opacity: 0.75; }
.form-group label { font-weight: 500; }
/* Chrome autofill paints dark forms bright yellow/white; keep them on-brand. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #1c1c1c inset;
    caret-color: #fff;
    transition: background-color 9999s ease-out 0s;
}

/* ---------- 4. Key/value summary tables outside the admin ---------- */
/* Order confirmation, quote, portal pages reuse .admin-table, which had no
   public styling, so rows collapsed into cramped unaligned text. */
.content-section .admin-table,
.client-content .admin-table,
.card .admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}
.content-section .admin-table th,
.client-content .admin-table th,
.card .admin-table th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-light, #8b949d);
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
}
.content-section .admin-table td,
.client-content .admin-table td,
.card .admin-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
    vertical-align: middle;
}
.content-section .admin-table tr:last-child td,
.card .admin-table tr:last-child td { border-bottom: none; }
.content-section .admin-table td.text-muted:first-child,
.card .admin-table td.text-muted:first-child { color: var(--gray-light, #8b949d); width: 42%; }

/* ---------- 5. Header spacing (logo was touching the first nav item) ---------- */
.site-header .header-inner { gap: 20px; }

/* ---------- 6. Mobile ---------- */
@media (max-width: 768px) {
    .scroll-indicator { display: none !important; }
    .container { padding-left: 16px; padding-right: 16px; }
    .section-title { margin-bottom: 32px; }
    /* Portfolio / category filters: compact chips that wrap, not one per line */
    .filter-btn { width: auto !important; }
    .category-filters { gap: 8px !important; margin-bottom: 30px !important; }
    .category-filter { padding: 8px 14px !important; font-size: 0.82rem !important; border-width: 1px !important; }
    .floating-badge { right: 8px !important; max-width: calc(100vw - 32px); }
}
@media (max-width: 600px) {
    body [class*="hero"] h1,
    body .page-hero h1 {
        font-size: clamp(1.85rem, 8.2vw, 2.5rem) !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere;
    }
    body [class*="hero"] p { font-size: 1rem; }
    .section-title h2 { font-size: clamp(1.5rem, 6.6vw, 2rem) !important; }
    .btn:not(.btn-sm) { min-height: 44px; }
    .btn { max-width: 100%; white-space: normal; text-align: center; justify-content: center; }

    /* Summary tables stack label over value on narrow screens */
    .content-section .admin-table td.text-muted:first-child,
    .card .admin-table td.text-muted:first-child { width: 40%; font-size: 0.85rem; }
    .content-section .admin-table td,
    .card .admin-table td { padding: 10px 8px; word-break: break-word; }
}

/* ==========================================================================
   Admin panel (only affects pages that use admin.css classes)
   ========================================================================== */
.admin-table tbody tr { transition: background-color 0.15s ease; }
.admin-table tbody tr:hover { background: rgba(22, 59, 109, 0.04); }
.admin-panel .empty-state i { opacity: 0.55; }
@media (max-width: 900px) {
    /* Wide admin tables scroll inside their panel, not the whole page */
    .admin-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Action buttons column: the cell itself was display:flex, which pulled it
   out of the table row (misaligned row lines). Keep it a real table cell. */
table.admin-table td.row-actions { display: table-cell; white-space: nowrap; vertical-align: middle; }
table.admin-table td.row-actions > * { display: inline-flex; vertical-align: middle; }
table.admin-table td.row-actions > * + * { margin-left: 6px; }
table.admin-table td.row-actions form { display: inline-flex; margin: 0; }
/* Amounts and document numbers never wrap mid-value */
.admin-table .nowrap, .nowrap { white-space: nowrap; }

/* Admin dashboard: business snapshot strip */
.biz-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; margin-bottom: 24px; }
.biz-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, #163b6d 0%, #1f4f8f 100%); color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(22, 59, 109, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.biz-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22, 59, 109, 0.26); color: #fff; }
.biz-card.is-warn { background: linear-gradient(135deg, #9a5d0b 0%, #bd710d 100%); box-shadow: 0 6px 18px rgba(189, 113, 13, 0.22); }
.biz-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; }
.biz-label i { margin-right: 4px; }
.biz-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.biz-value small { font-size: 0.85rem; font-weight: 500; opacity: 0.85; }
.biz-sub { font-size: 0.8rem; opacity: 0.8; }
a.biz-card, a.biz-card span, a.biz-card i, a.biz-card small { color: #fff !important; }

/* Admin top bar on phones: keep title + menu + status; drop the long date
   and name (they pushed the whole page sideways). */
@media (max-width: 700px) {
    .admin-topbar .today { display: none; }
    .admin-topbar .user-chip .user-name, .admin-topbar .user-chip > span:first-child { display: none; }
    .admin-topbar .topbar-right { gap: 10px; }
    .admin-topbar h1 { font-size: 1.05rem; }
}

/* Grid children may shrink below their content width (long emails, keys,
   URLs used to force whole panels wider than the phone screen). */
.grid > *, .biz-strip > * { min-width: 0; }
.admin-table td { overflow-wrap: break-word; }
/* Inline filter forms (date ranges etc.) wrap instead of overflowing */
form[style*="display:flex"], form[style*="display: flex"] { flex-wrap: wrap; }

/* ==========================================================================
   Client / partner / customer portals
   ========================================================================== */
.client-badge { white-space: nowrap; }
.client-content .card, .client-content .client-card { min-width: 0; }
.client-content table { width: 100%; }

@media (max-width: 900px) {
    /* main.css hid the sidebar on phones with nothing replacing it, so
       portal users couldn't move between sections. Show it as a compact
       top bar with a swipeable row of tabs instead. */
    .client-shell { flex-direction: column; }
    .client-sidebar {
        display: block !important;
        width: 100%; min-height: auto; padding: 10px 0 0;
        border-right: none; border-bottom: 1px solid var(--border);
        position: sticky; top: 0; z-index: 50;
    }
    .client-sidebar .brand { padding: 0 16px 10px; margin-bottom: 0; border-bottom: none; font-size: 0.95rem; }
    .client-sidebar .brand img { max-height: 28px; width: auto; }
    .client-nav {
        display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding: 0 8px;
    }
    .client-nav::-webkit-scrollbar { display: none; }
    .client-nav a {
        flex: 0 0 auto; white-space: nowrap; padding: 10px 12px; font-size: 0.85rem;
        border-left: none; border-bottom: 2px solid transparent; justify-content: flex-start;
    }
    .client-nav a.active { border-bottom-color: var(--primary); }
    .client-nav a span { display: inline-flex; align-items: center; gap: 6px; }

    .client-topbar { height: auto; min-height: 56px; padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
    .client-topbar h1 { font-size: 1.1rem; }
    .client-content { padding: 16px; }

    /* Wide tables scroll inside their card instead of squashing to one
       letter per line or pushing the page sideways. */
    .client-content .card, .client-content .client-card, .client-content .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .client-content table:not(.admin-table) { min-width: 520px; }
    .client-content table:not(.admin-table) th, .client-content table:not(.admin-table) td { white-space: nowrap; }
    /* Multi-column list tables (they have a header row) keep readable
       columns and scroll sideways inside the card. Key/value summary
       tables (no header) keep wrapping. */
    .client-content table.admin-table:has(thead) { min-width: 560px; }
    .client-content table.admin-table:has(thead) th,
    .client-content table.admin-table:has(thead) td { white-space: nowrap; overflow-wrap: normal; }
    /* Button rows wrap rather than being clipped at the card edge */
    .client-content div[style*="display:flex"], .client-content div[style*="display: flex"] { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .client-topbar > div { width: 100%; justify-content: space-between; }
}

/* Auth pages: real brand logo in the card header instead of a generic icon */
.logo-wrapper img.brand-logo { display: inline-block; height: 46px; width: auto; max-width: 100%; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.brand-logo-text { display: inline-block; font-weight: 800; font-size: 1.35rem; letter-spacing: 0.02em; color: #fff; }

/* Header menu: labels never break onto two lines ("Join / Us"); spacing
   tightens as the screen narrows, and below 1100px the existing
   hamburger panel takes over instead of letting the menu overflow. */
.main-nav a.nav-link { white-space: nowrap; }
.site-header .site-logo { flex-shrink: 0; }
@media (max-width: 1440px) and (min-width: 1101px) {
    .main-nav ul { gap: 0; }
    .main-nav a.nav-link { padding: 10px 9px; font-size: 0.9rem; }
    .header-auth { margin-left: 8px; padding-left: 12px; }
}
@media (max-width: 1100px) {
    .main-nav > ul { display: none; }
    .hamburger { display: flex; margin-left: 16px; }
    .main-nav { margin-left: auto; }
}

/* Rich-text (TinyMCE) content shown in cards, notifications, quotes */
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 0.7em; }
.rich-text ul, .rich-text ol { margin: 0 0 0.7em; padding-left: 1.3em; }
.rich-text li { margin-bottom: 0.25em; }
.rich-text h3, .rich-text h4 { margin: 0.9em 0 0.4em; font-size: 1.05em; }
.rich-text a { color: var(--primary, #bd710d); text-decoration: underline; }
.rich-text img { max-width: 100%; height: auto; }
.rich-text table { width: 100%; border-collapse: collapse; }
.rich-text td, .rich-text th { border: 1px solid var(--border, rgba(255,255,255,0.12)); padding: 6px 8px; }
.rich-text ul, .about-text ul, .mv-card ul { list-style: disc; }
.rich-text ol, .about-text ol, .mv-card ol { list-style: decimal; }
.about-text ul, .about-text ol, .mv-card ul, .mv-card ol { padding-left: 1.3em; margin: 0 0 20px; color: var(--gray-light); font-size: 1.05rem; line-height: 1.7; }
.mv-card p + ul, .mv-card p + ol { margin-top: -8px; }
.rich-text ul li::marker, .about-text li::marker, .mv-card li::marker { color: var(--primary, #bd710d); }

/* ---------- Finance module ---------- */
.fin-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.fin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-range { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--a-border, #e5e7eb); border-radius: 10px; padding: 10px 12px; margin-bottom: 18px; }
.fin-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-chip { font-size: 0.8rem; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--a-border, #e5e7eb); color: var(--a-text, #333); text-decoration: none; background: #fafafa; white-space: nowrap; }
.fin-chip:hover { border-color: #163b6d; color: #163b6d; }
.fin-chip.active { background: #163b6d; border-color: #163b6d; color: #fff; }
.fin-dates { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fin-dates .form-control { width: auto; padding: 6px 8px; }
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; margin-bottom: 20px; }
.fin-kpi { background: #fff; border: 1px solid var(--a-border, #e5e7eb); border-top: 3px solid #163b6d; border-radius: 10px; padding: 16px 18px; min-width: 0; }
.fin-kpi.is-loss { border-top-color: #c62839; }
.fin-kpi-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--a-text-light, #6b7280); }
.fin-kpi-value { font-size: 1.45rem; font-weight: 700; margin: 4px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-delta { font-size: 0.78rem; font-weight: 600; }
.fin-delta.good { color: #1e7a45; } .fin-delta.bad { color: #c62839; } .fin-delta.neutral { color: var(--a-text-light, #6b7280); font-weight: 500; }
.fin-legend { display: flex; gap: 14px; font-size: 0.8rem; color: var(--a-text-light, #6b7280); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.sw.rev { background: #1f5aa6; } .sw.exp { background: #d08a2a; }
.fin-chart-wrap { position: relative; overflow-x: auto; }
.fin-chart { width: 100%; min-width: 560px; height: auto; display: block; }
.fin-chart .grid { stroke: #eef0f3; stroke-width: 1; }
.fin-chart .base { stroke: #c9ced6; stroke-width: 1; }
.fin-chart .tick { font-size: 11px; fill: #6b7280; font-family: inherit; }
.fin-chart .bar.rev { fill: #1f5aa6; } .fin-chart .bar.exp { fill: #d08a2a; }
.fin-chart .hit { fill: transparent; }
.fin-chart .fin-col.on .hit { fill: rgba(22, 59, 109, 0.05); }
.fin-tip { position: absolute; z-index: 5; pointer-events: none; background: #fff; border: 1px solid var(--a-border, #e5e7eb); box-shadow: 0 6px 18px rgba(0,0,0,0.12); border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; min-width: 170px; }
.fin-tip div { display: flex; align-items: center; gap: 4px; } .fin-tip b { margin-left: auto; padding-left: 12px; }
.fin-tip .net { border-top: 1px solid #eef0f3; margin-top: 4px; padding-top: 4px; }
.fin-table-toggle { margin-top: 10px; } .fin-table-toggle summary { cursor: pointer; font-size: 0.85rem; color: #163b6d; font-weight: 500; }
.fin-breakdown td { vertical-align: top; }
.fin-bar { height: 6px; background: #eef0f3; border-radius: 4px; margin-top: 6px; overflow: hidden; }
.fin-bar span { display: block; height: 100%; background: #1f5aa6; border-radius: 4px; }
.fin-bar.exp span { background: #d08a2a; }
.fin-total td { font-weight: 700; border-top: 2px solid var(--a-border, #e5e7eb); }
.fin-owed { font-size: 1.5rem; font-weight: 700; color: #1e7a45; margin-bottom: 10px; }
.fin-owed.is-due { color: #9a5d0b; }