/* ============================================================
   mobile.css  — shared responsive rules for Pete's House
   Linked into every page AFTER its own <style> so these win.
   Targets phones/tablets via max-width breakpoints.
   ============================================================ */

/* Never let anything cause a horizontal page scroll */
html, body { max-width: 100%; overflow-x: hidden; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0.1); }

/* Wrap tables so wide ones scroll inside their card instead of
   blowing out the whole page. Applied on all sizes; harmless on desktop. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A card with inline `overflow:hidden` would clip the horizontal
   table scroll — allow it to show the scrollable child on small screens. */
@media (max-width: 900px) {
    .card { overflow: visible !important; }
}

/* ---------- TABLETS & PHONES (<= 900px) ---------- */
@media (max-width: 900px) {
    .header-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px;
    }
    .app-header .brand { text-align: center; font-size: 20px; }

    /* Nav becomes a horizontally scrollable strip */
    #top-nav, .app-header nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        padding-bottom: 4px;
        justify-content: flex-start !important;
        scrollbar-width: thin;
    }
    #top-nav::-webkit-scrollbar, .app-header nav::-webkit-scrollbar { height: 4px; }
    #top-nav::-webkit-scrollbar-thumb, .app-header nav::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
    .nav-link { white-space: nowrap; flex: 0 0 auto; font-size: 13px; padding: 8px 10px; }
    .btn-logout { flex: 0 0 auto; white-space: nowrap; }

    /* Containers go full-width with comfortable padding */
    .app-content { padding: 20px 12px !important; }
    .container { max-width: 100% !important; }
    .card { padding: 16px !important; }

    /* Multi-column form grids collapse to a single column */
    .form-grid { grid-template-columns: 1fr !important; }
    .client-info-grid { grid-template-columns: 1fr !important; }

    /* Inputs comfortable to tap; 16px prevents iOS zoom-on-focus */
    input, select, textarea, button { font-size: 16px !important; }

    /* Page-head rows (title + search) stack */
    .page-head { flex-direction: column; align-items: stretch !important; gap: 12px; }
    .page-head .search-box, .search-box { max-width: 100% !important; }
}

/* ---------- PHONES (<= 600px) ---------- */
@media (max-width: 600px) {
    /* Tables: tighten padding and let them scroll horizontally inside
       their wrapper. We also reduce font so more fits. */
    table { font-size: 13px; }
    thead th, tbody td { padding: 8px 6px !important; }

    /* Buttons inside table rows stack tightly and wrap */
    td button { margin: 2px 0; display: inline-block; }

    /* Tabs (customer page) scroll horizontally rather than wrap-breaking */
    .tabs { display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .tab { flex: 0 0 auto; }

    /* Modals / floating windows fit the screen */
    .modal, [id$="Modal"] > div, .floating-window, .modal-overlay > div, .modal-content {
        max-width: 96vw !important;
        width: 96vw !important;
    }
    .modal-overlay { padding: 10px !important; }

    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
}

/* The two-pane customer layout (directory sidebar + workspace) stacks */
@media (max-width: 900px) {
    .app-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
    }
    .app-container .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #333;
        max-height: 45vh;
        overflow-y: auto;
    }
    .workspace { flex: none !important; }
}

/* ---------- SCHEDULE PAGE ---------- */
@media (max-width: 900px) {
    /* Calendar sidebar stacks above the grid */
    .main-layout { flex-direction: column !important; gap: 16px !important; }
    .main-layout .sidebar { width: 100% !important; box-sizing: border-box; }
    /* Give the day grid more vertical room on a phone */
    .scheduler-wrapper { height: 60vh !important; }
}
@media (max-width: 600px) {
    /* Floating appointment window fills the screen instead of 440px fixed */
    .floating-window {
        min-width: 0 !important;
        width: 94vw !important;
        max-width: 94vw !important;
        left: 3vw !important;
        top: 70px !important;
        resize: none !important;
        max-height: 80vh !important;
    }
    /* Resource columns a touch narrower so two fit better */
    .resource-col { min-width: 130px !important; }
}

/* ============================================================
   GLOBAL HEADER / NAV BASELINE
   Lives in mobile.css (which the router never swaps) so the
   persistent header keeps its styling no matter which page's
   inline <style> is currently active. Pages may still override.
   ============================================================ */
.app-header { background: #1e1e1e; border-bottom: 2px solid #333; }
.app-header .brand { font-size: 22px; font-weight: bold; color: #4da3ff; flex: 0 0 auto; }
.app-header nav { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.header-container { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1600px; margin: 0 auto; padding: 15px 20px; box-sizing: border-box; }
.nav-link { color: #ccc; text-decoration: none; font-size: 14px; font-weight: bold; padding: 8px 10px; border-radius: 4px; transition: 0.2s; white-space: nowrap; }
.nav-link:hover { background: #2a2a2a; color: #fff; }
.nav-link.active { background: #007bff; color: #fff; }
.btn-logout { background: #dc3545; color: #fff; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 13px; flex: 0 0 auto; white-space: nowrap; }

/* ============================================================
   CONSOLIDATED NAV DROPDOWNS
   ============================================================ */
.nav-dd { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.nav-dd-toggle { cursor: pointer; user-select: none; white-space: nowrap; display: inline-flex; align-items: center; }
.nav-dd-menu {
    position: absolute; top: 100%; left: 0; z-index: 5000;
    background: #1e1e1e; border: 1px solid #333; border-radius: 8px;
    min-width: 180px; padding: 6px; box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.15s ease, visibility 0s linear 0.6s, transform 0.15s ease;
    padding-top: 10px; margin-top: -4px;
}
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.15s ease, visibility 0s, transform 0.15s ease;
}
.nav-dd-menu .nav-link { display: block; white-space: nowrap; }
@media (max-width: 900px) {
    .nav-dd { position: static; }
    .nav-dd-menu { position: static; box-shadow: none; border: none; padding: 0 0 0 14px; min-width: 0; background: transparent; transition: none; margin: 0; }
    .nav-dd:hover .nav-dd-menu { opacity: 0; visibility: hidden; }
    .nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: none; height: auto; }
    .nav-dd:not(.open) .nav-dd-menu { display: none; }
}

/* ============================================================
   GLOBAL POLISH LAYER  (site-wide visual upgrade)
   Refines the shared dark palette, inputs, buttons, cards,
   tables, selects and focus states across every page. Uses
   broad element/class selectors so it lifts the whole site
   without touching per-page layout. Nav + logout excluded.
   ============================================================ */

:root {
    --c-bg: #0f1115;
    --c-surface: #1a1d24;
    --c-surface-2: #21252e;
    --c-border: #2c313c;
    --c-text: #e6e8ec;
    --c-muted: #8b93a1;
    --c-accent: #4da3ff;
    --c-accent-hover: #6fb5ff;
}

/* Smooth, consistent form controls */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border-radius: 8px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

/* Buttons: rounder, smooth hover lift + press (nav/logout keep their own look) */
button:not(.btn-logout):not(.nav-link):not(.nav-dd-toggle),
.btn-blue, .btn-green, .btn-red, .btn-gray, .btn-grey {
    border-radius: 8px;
    transition: transform 0.08s ease, filter 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
button:not(.btn-logout):not(.nav-link):not(.nav-dd-toggle):hover:not(:disabled),
.btn-blue:hover, .btn-green:hover, .btn-red:hover, .btn-gray:hover, .btn-grey:hover {
    filter: brightness(1.08);
}
button:not(.btn-logout):not(.nav-link):not(.nav-dd-toggle):active:not(:disabled),
.btn-blue:active, .btn-green:active, .btn-red:active, .btn-gray:active, .btn-grey:active {
    transform: translateY(1px);
}

/* Cards: rounder corners + depth */
.card {
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* Tables: clearer headers + gentle row hover */
table thead th { letter-spacing: 0.3px; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Content links default to brand accent */
.app-content a:not(.nav-link):not(.btn-blue):not(.btn-green):not(.btn-red):not(.btn-gray):not(.btn-grey) {
    color: var(--c-accent);
}

/* Modal overlays: soften corners of common inline modal cards */
[style*="position:fixed"] > div,
[style*="position: fixed"] > div { border-radius: 12px; }

/* Dark custom scrollbars (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c313c; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4150; }

/* Tab bars: smoother active transition */
.tab { transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}