/* LPH design system — responsive layer.
   Ordered slice of lph-system.css, split to honour the <500-line rule.
   MUST load in sequence base -> components -> utilities -> portal -> responsive, BEFORE lph-theme.css.
   Do not reorder or edit across slice boundaries. */
/* --------------------------------------------------
   Global overflow protection
-------------------------------------------------- */
html, body { overflow-x: hidden; }

.lph-main { overflow-x: hidden; min-width: 0; }

/* Ensure all inline-styled tables can scroll on narrow viewports */
.lph-card { overflow: hidden; }
.lph-card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tap-target minimum for buttons */
.lph-btn {
    min-height: 40px;
    min-width: 40px;
}

/* Compact card styling */
.lph-card-header {
    border-bottom: 1px solid var(--border);
}

/* Remove any remaining white/light backgrounds from native inputs */
input, select, textarea {
    background-color: #0d1e2e;
    color: #e0e4ec;
    color-scheme: dark;
}

/* Force dark on native select even without lph-input class */
select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #0d1e2e !important;
    color: #e0e4ec !important;
    color-scheme: dark;
}
select option {
    background-color: #0d1e2e;
    color: #e0e4ec;
}

/* Dark background for plain <table> elements inside portal cards */
.lph-card-body table,
.lph-portal-content table,
.lph-page table {
    background: transparent;
    color: var(--lph-text-primary, #e0e4ec);
}
.lph-card-body table td,
.lph-card-body table th,
.lph-portal-content table td,
.lph-portal-content table th {
    background: transparent;
    color: inherit;
}
.lph-card-body table tr,
.lph-portal-content table tr {
    background: transparent;
}

/* Logo alignment in sidebar brand card */
.lph-brand-card {
    align-items: center;
}
.lph-brand-card img {
    max-height: 44px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Premium scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(var(--ink-rgb), 0.02); }
::-webkit-scrollbar-thumb { background: rgba(199,162,71,0.25); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(199,162,71,0.4); }

/* --------------------------------------------------
   Mobile: Table → Stacked Cards (≤ 540px)
-------------------------------------------------- */
@media (max-width: 540px) {
    .lph-page-wrap { padding: 8px; }

    /* Table card layout — covers lph-table + inline portal tables */
    .lph-table-scroll {
        overflow-x: visible;
        border: none;
        background: transparent;
        border-radius: 0;
    }
    .lph-table,
    .lph-card-body table,
    .lph-card table {
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: collapse;
    }
    .lph-table thead,
    .lph-card-body table thead,
    .lph-card table thead { display: none; }
    .lph-table tbody tr,
    .lph-card-body table tbody tr,
    .lph-card table tbody tr {
        display: block;
        background: rgba(var(--ink-rgb), 0.025);
        border: 1px solid var(--color-border);
        border-radius: 14px;
        margin-bottom: 10px;
        padding: 4px 0;
        overflow: hidden;
    }
    .lph-table tbody td,
    .lph-card-body table tbody td,
    .lph-card table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        border-bottom: 1px solid rgba(var(--ink-rgb), 0.04);
        font-size: 0.83rem;
        gap: 10px;
    }
    .lph-table tbody tr:last-child td:last-child,
    .lph-card-body table tbody tr:last-child td:last-child { border-bottom: none; }
    .lph-table tbody td::before,
    .lph-card-body table tbody td::before,
    .lph-card table tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: var(--lph-text-muted);
        flex-shrink: 0;
        min-width: 80px;
    }
    .lph-table tbody td:empty { display: none; }
    .lph-table-actions { justify-content: flex-start; }
    .lph-row-actions { justify-content: flex-start; flex-wrap: wrap; }
    /* "View →" inline links in tables */
    .lph-card-body table tbody td a { font-size: 0.82rem; }

    /* Touch targets */
    .lph-btn, .lph-row-action { min-height: 44px; }
    .lph-row-action {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    /* Page header */
    .lph-page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lph-page-actions { width: 100%; flex-wrap: wrap; }
    .lph-page-actions .lph-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
    .lph-page-title h1 { font-size: 1.15rem; }

    /* Forms */
    .lph-form-section-body { padding: 14px; }
    .lph-input, .lph-select, .lph-textarea { width: 100% !important; font-size: 16px !important; } /* 16px prevents iOS zoom */
    .lph-form-actions { flex-direction: column; gap: 8px; }
    .lph-form-actions .lph-btn { width: 100%; justify-content: center; }

    /* Stat cards */
    .lph-stat-card { padding: 14px 16px; }
    .lph-stat-value { font-size: 1.7rem; }

    /* Card headers */
    .lph-card-header { padding: 12px 14px; }
    .lph-card-body { padding: 0; }

    /* Toolbar */
    .lph-toolbar { padding: 10px 14px; }
    .lph-toolbar-search { flex: 1 1 100%; }
}

/* --------------------------------------------------
   RTL: Mobile sidebar slides from right
-------------------------------------------------- */
@media (max-width: 768px) {
    [dir="rtl"] .lph-sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
        border-right: none !important;
        border-left: 1px solid rgba(199,162,71,0.15) !important;
    }
    [dir="rtl"] .lph-sidebar.is-open {
        transform: translateX(0) !important;
    }

    /* RTL text alignment fixes */
    [dir="rtl"] .lph-table thead th,
    [dir="rtl"] .lph-table tbody td { text-align: right; }
    [dir="rtl"] .lph-table-actions-head,
    [dir="rtl"] .lph-table-actions { text-align: left; }
    [dir="rtl"] .lph-row-actions { justify-content: flex-start; }

    /* Ensure main content not obscured by sidebar on mobile */
    .lph-main { padding: 14px 12px; }
}

/* --------------------------------------------------
   Public: Mobile hero + sections
-------------------------------------------------- */
@media (max-width: 768px) {
    /* Reduce large horizontal padding on public sections */
    section[style*="padding:60px 48px"],
    section[style*="padding: 60px 48px"],
    section[style*="padding:52px 48px"],
    section[style*="padding: 52px 48px"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Hero and wide content containers */
    [style*="max-width:1160px;margin:0 auto"],
    [style*="max-width: 1160px; margin: 0 auto"],
    [style*="max-width:1100px;margin:0 auto"] {
        padding-left: 4px;
        padding-right: 4px;
    }
    /* Wide content areas inside sections */
    [style*="max-width:700px;margin:0 auto"],
    [style*="max-width:600px;margin:0 auto"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 540px) {
    .pub-btn-primary, .pub-btn-outline {
        min-height: 48px;
        padding: 12px 20px;
        width: 100%;
        justify-content: center;
    }
    .pub-cta-section { padding: 40px 16px; }
    .pub-footer { padding: 20px 14px; }
    .lph-section-heading { font-size: 1.5rem; }
    /* Hero section side padding */
    section[style*="padding:60px 48px"],
    section[style*="padding: 60px 48px"],
    section[style*="padding:52px 48px"],
    section[style*="padding: 52px 48px"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ==================================================
   RTL — global adjustments (all viewports)
   The shell uses CSS grid, so the sidebar column
   position flips automatically under dir="rtl". These
   rules flip the pieces the writing direction can't:
   the sidebar divider side, prop-driven table cell
   alignment, and action-column alignment. Mobile-only
   RTL sidebar slide behaviour stays in the 768px query.
   Note: hand-built tables using inline text-align need a
   logical-property (start/end) refactor + visual review.
   ================================================== */
[dir="rtl"] .lph-sidebar {
    border-right: 0;
    border-left: 1px solid rgba(var(--ink-rgb), 0.04);
}
[dir="rtl"] .lph-table thead th,
[dir="rtl"] .lph-table tbody td {
    text-align: right;
}
[dir="rtl"] .lph-table-actions-head,
[dir="rtl"] .lph-table-actions {
    text-align: left;
}
[dir="rtl"] .lph-row-actions {
    justify-content: flex-start;

/* ==================================================
   Enterprise wide layout (large desktops)
   Reclaim the "boxed card" inset so the portal uses
   the full horizontal space and reads as an app, not
   a centered website. Progressive, large-screen only;
   mobile/tablet keep the compact boxed look above.
   ================================================== */
@media (min-width: 1440px) {
    :root { --lph-main-padding-x: 30px; }
    .lph-page-wrap { padding: 12px; }
}
@media (min-width: 1600px) {
    :root { --lph-main-padding-x: 36px; }
    .lph-page-wrap { padding: 0; }
    .lph-shell {
        border-radius: 0;
        min-height: 100vh;
        box-shadow: none;
    }
}
@media (min-width: 1920px) {
    :root { --lph-main-padding-x: 48px; --lph-sidebar-width: 300px; }
}