/* ─────────────────────────────────────────────────────────────────────────────
   Section 2: CSS Grid Shell + Existing Widget Overrides
   Scoped to .platform-layout — no global pollution
   ───────────────────────────────────────────────────────────────────────────── */

.platform-layout {
    font-family: var(--platform-font-family);
    font-size: var(--platform-font-size-md); /* base body text — was unset, inherited browser default */
    line-height: 1.6;
    color: var(--platform-text-primary);
    background: var(--platform-bg-gradient, #fff);
}

[dir="rtl"] .platform-layout {
    font-family: var(--platform-font-family);
}


::selection {
  background-color: var(--platform-primary-light); /* Changes the highlight background */
  color: var(--platform-primary);            /* Changes the text color inside the highlight */
}

/* ── Token overrides scoped to .platform-layout ── */
.platform-layout,
[data-theme="light"] .platform-layout {
    --platform-nav-bg: var(--platform-bg);
    --telbit-color-surface-dark: var(--platform-nav-bg);
}

[data-theme="dark"] .platform-layout {
    --platform-nav-bg: var(--platform-surface);
    --telbit-color-surface-dark: var(--platform-nav-bg);
}

@media (prefers-color-scheme: dark) {
    :not([data-theme]) .platform-layout {
        --platform-nav-bg: var(--platform-surface);
        --telbit-color-surface-dark: var(--platform-nav-bg);
    }
}

/* ── CSS Grid shell ── */
/* Note: grid-template-columns is driven at runtime by platformNavMenu._shellGridUpdate().
   This CSS fallback is the initial state before Alpine initialises. */
.platform-layout-shell {
    display: grid;
    grid-template-columns: 75px 1fr;   /* initial: icon-rail only; JS sets final value */
    /* gap: var(--platform-spacing-sm); */
    min-height: 100dvh;
    /* background: var(--platform-bg); */
    margin: max(var(--platform-safe-top), var(--platform-spacing-md)) max(var(--platform-safe-right), var(--platform-spacing-lg)) max(var(--platform-safe-bottom), var(--platform-spacing-lg)) max(var(--platform-safe-left), var(--platform-spacing-lg));
}

/* Content column — col 2: white card that is the visible page surface */
.platform-layout-shell .platform-content-col {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 2 * (var(--platform-safe-bottom, 0) + var(--platform-spacing-md)));
    border-radius: var(--platform-radius-xl);
    overflow: scroll;
    min-width: 0;
    padding-inline-start: var(--platform-spacing-md);
    gap: var(--platform-spacing-md);
}

/* Header inside the content column — sticky to content-col top */
.platform-layout-shell .platform-header {
    position: sticky;
    top: var(--platform-safe-top);
    z-index: 100;
    /* background: var(--platform-surface); */
    /* border-bottom: 1px solid var(--platform-border); */
    flex-shrink: 0;
}

/* Main content area */
.platform-layout-shell .platform-main {
    flex: 1;
    min-width: 0;
    /* overflow: scroll; */
    /* margin-bottom: max(var(--platform-spacing-md), var(--platform-safe-bottom)); */
}

/* Mobile: single column, content fills full width */
@media (max-width: 767px) {
    .platform-layout-shell {
        grid-template-columns: 1fr;
        margin: 0;
        gap: 0;
        padding: var(--platform-safe-top) var(--platform-safe-right) var(--platform-safe-bottom) var(--platform-safe-left);
    }
    .platform-layout-shell .platform-content-col {
        grid-column: 1;
        border-radius: 0;
        padding-bottom: calc(60px + var(--platform-safe-bottom));
        padding-inline: var(--platform-spacing-sm);
    }
}

.platform-layout .portlet-body {
    background: var(--platform-surface-card);
    color: var(--platform-text-primary);
}

/* ── Form inputs ── */
.platform-layout .form-control,
.platform-layout input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.platform-layout textarea,
.platform-layout select {
    background: var(--platform-surface);
    border-color: var(--platform-border);
    color: var(--platform-text-primary);
}

.platform-layout select {
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 8px center;
    background-size: 16px 12px;
    appearance: none;
}

.platform-layout input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
.platform-layout textarea:focus,
.platform-layout select:focus {
    border-color: var(--platform-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 47, 190, 0.15); /* fallback for older browsers */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-primary) 15%, transparent);
}

/* ── ListViewWidget table rows ── */
.platform-layout .list-view-widget tr {
    background: var(--platform-surface-card);
    color: var(--platform-text-primary);
}

.platform-layout .list-view-widget th {
    background: var(--platform-surface-elevated);
    color: var(--platform-text-secondary);
    border-color: var(--platform-border);
}

.platform-layout .list-view-widget td {
    border-color: var(--platform-border);
}

.platform-layout .slide-over-header {
    border-bottom-color: var(--platform-border);
}

/* ── General text and background consistency ── */
.platform-layout label {
    color: var(--platform-text-secondary);
    font-weight: var(--platform-font-weight-medium);
}

.platform-layout a {
    color: var(--platform-text-link);
    text-decoration-color: color-mix(in srgb, var(--platform-text-link) 45%, transparent);
    text-underline-offset: 0.15em;
    transition:
        color 0.15s ease,
        text-decoration-color 0.15s ease;
}

.platform-layout a:visited {
    color: var(--platform-text-link-visited);
    text-decoration-color: color-mix(in srgb, var(--platform-text-link-visited) 45%, transparent);
}

.platform-layout a:hover,
.platform-layout a:active {
    color: var(--platform-text-link-active);
    text-decoration-color: currentColor;
}

.platform-layout a:focus-visible {
    outline: none;
    border-radius: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-text-link) 20%, transparent);
}

/* ─────────────────────────────────────────────────────────────
   Button system
   Base + variants: primary, secondary/default, danger, warning,
   success, green (legacy alias). Sizes: sm, lg. States: hover,
   focus-visible, active, disabled. Dark/light via tokens only.
   ───────────────────────────────────────────────────────────── */

/* Base */
.platform-layout .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--platform-spacing-xs);
    padding: 8px 16px;
    font-size: var(--platform-font-size-md);
    font-family: var(--platform-font-family);
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--platform-radius-lg);
    border: 1.5px solid var(--platform-border);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    vertical-align: middle;
    box-sizing: border-box;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
    /* Default/neutral colours */
    background-color: var(--platform-surface);
    color: var(--platform-text-primary);
}

.platform-layout .btn-w-100 {
    width: 100%;
}

.platform-layout .btn:hover {
    background-color: var(--platform-border);
    border-color: var(--platform-border);
    color: var(--platform-primary);
    text-decoration: none;
}

.platform-layout .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-primary) 30%, transparent);
}

.platform-layout .btn:active {
    transform: translateY(1px);
}

.platform-layout .btn:disabled,
.platform-layout .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary — Telbit purple */
.platform-layout .btn-primary, .platform-layout a.btn-primary {
    background-color: var(--platform-primary);
    border-color: var(--platform-primary);
    color: #fff;
}
.platform-layout .btn-primary:hover, .platform-layout a.btn-primary:hover {
    background-color: var(--platform-primary-dark);
    border-color: var(--platform-primary-dark);
    color: #fff;
}
.platform-layout .btn-primary:focus-visible, .platform-layout a.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-primary) 35%, transparent);
}

.box {
    background: var(--platform-surface-card, #ffffff);
    border: 1px solid var(--platform-border, #e5e7eb);
    border-radius: var(--platform-radius-xl, 24px);
    /* overflow: hidden; */
    box-shadow: var(--platform-shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.box:hover, .box:focus, .box:active {
    box-shadow: none;
}

/* Secondary / Default — neutral surface */
.platform-layout .btn-secondary,
.platform-layout a.btn-secondary,
.platform-layout .btn-default {
    background-color: var(--platform-surface);
    border-color: var(--platform-border);
    color: var(--platform-text-primary) !important;
}
.platform-layout .btn-secondary:hover,
.platform-layout a.btn-secondary:hover,
.platform-layout .btn-default:hover {
    background-color: var(--platform-border);
    border-color: var(--platform-border);
    color: var(--platform-text-primary) !important;
}

/* Danger */
.platform-layout .btn-danger {
    background-color: var(--platform-danger);
    border-color: var(--platform-danger);
    color: #fff;
}
.platform-layout .btn-danger:hover {
    background-color: color-mix(in srgb, var(--platform-danger) 82%, #000);
    border-color: color-mix(in srgb, var(--platform-danger) 82%, #000);
    color: #fff;
}
.platform-layout .btn-danger:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-danger) 35%, transparent);
}

/* Warning */
.platform-layout .btn-warning {
    background-color: var(--platform-warning);
    border-color: var(--platform-warning);
    color: #fff;
}
.platform-layout .btn-warning:hover {
    background-color: color-mix(in srgb, var(--platform-warning) 82%, #000);
    border-color: color-mix(in srgb, var(--platform-warning) 82%, #000);
    color: #fff;
}
.platform-layout .btn-warning:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-warning) 35%, transparent);
}

/* Success */
.platform-layout .btn-success {
    background-color: var(--platform-success);
    border-color: var(--platform-success);
    color: #fff;
}
.platform-layout .btn-success:hover {
    background-color: color-mix(in srgb, var(--platform-success) 82%, #000);
    border-color: color-mix(in srgb, var(--platform-success) 82%, #000);
    color: #fff;
}
.platform-layout .btn-success:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-success) 35%, transparent);
}

/* Legacy alias used in login.php: class="btn green" */
.platform-layout .btn.green {
    background-color: var(--platform-success);
    border-color: var(--platform-success);
    color: #fff;
}
.platform-layout .btn.green:hover {
    background-color: color-mix(in srgb, var(--platform-success) 82%, #000);
    border-color: color-mix(in srgb, var(--platform-success) 82%, #000);
    color: #fff;
}

/* Size: small */
.platform-layout .btn-sm {
    padding: 5px 10px;
    font-size: var(--platform-font-size-sm);
    border-radius: 6px;
}

/* Size: large */
.platform-layout .btn-lg {
    padding: 12px 24px;
    font-size: var(--platform-font-size-lg);
    border-radius: var(--platform-radius-md);
}

/* Icon-only square button */
.platform-layout .btn-icon {
    padding: 8px;
    aspect-ratio: 1 / 1;
    border-radius: var(--platform-radius-sm);
}

.platform-layout .platform-footer {
    color: var(--platform-text-secondary);
    text-align: center;
    padding: var(--platform-spacing-sm);
    font-size: var(--platform-font-size-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Navigation Loading Progress Bar
   ───────────────────────────────────────────────────────────────────────────── */

/* Hide elements with x-cloak before Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* Navigation Loading Overlay - Simple and Reliable */
.platform-navigation-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--platform-bg-gradient, rgba(255, 255, 255, 0.85));
    opacity: 0.85;
    backdrop-filter: blur(4px);
    z-index: 9998; /* Below modals (9999), above content */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* Block interactions during load */
}

/* Spinner container */
.platform-navigation-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* Font Awesome spinner icon */
.platform-navigation-loading-spinner .spinner-icon {
    font-size: 3rem; /* 48px */
    color: var(--platform-primary, #7C2FBE);
}

/* Loading text */
.platform-navigation-loading-spinner .loading-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--platform-text-primary, #1F2937);
    font-weight: 500;
}



/* Mobile optimization - slightly smaller icon */
@media (hover: none) and (pointer: coarse) {
    .platform-navigation-loading-spinner .spinner-icon {
        font-size: 2.5rem; /* 40px */
    }
    
    .platform-navigation-loading-spinner .loading-text {
        font-size: 0.75rem;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .platform-navigation-loading-spinner .spinner-icon {
        animation: fa-spin 3s linear infinite !important;
    }
}