@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600&family=Outfit:wght@300;400;600&display=swap');

/* --- THEME SYSTEM --- */

/* DEFAULT / ORIGINAL THEME - RESTORED WHITE MARBLE FOR DAY MODE */
:root {
    --bg-primary: #F8FAF8; 
    --bg-texture: url('white_marble.png');
    --text-primary: #0A1410; /* Dark Emerald Text */
    --text-accent: #2D5A27;
    --tile-border: #A9DFBF;
    --btn-primary-bg: linear-gradient(to bottom, #27AE60, #1E8449);
    --btn-primary-text: #FFFFFF;
    --btn-primary-shadow: 0 8px 15px rgba(10,20,16,0.15);
    --tile-img-filter: contrast(1.05) saturate(1.1);
    --btn-small-bg: rgba(30, 132, 73, 0.08);
    --btn-small-border: #1E8449;
    --btn-small-text: #1E8449;
    --progress-bg: rgba(255,255,255,0.88);
}
[data-theme="dark"], [data-theme="dark"] body {
    --bg-primary: #05100B;
    --bg-texture: url('black_marble.png');
    --text-primary: #F2E9D0;
    --text-accent: #E8CA80;
    --tile-border: #233A2E;
    --btn-primary-bg: linear-gradient(to bottom, #A27A3C, #E8CA80, #A27A3C);
    --btn-small-bg: rgba(232, 202, 128, 0.2);
    --btn-small-border: #E8CA80;
    --btn-small-text: #E8CA80;
    --progress-bg: rgba(0,0,0,0.3);
}

/* MAHOGANY PRIVATE */
[data-theme-style="mahogany"] {
    --bg-primary: #FDF5F2;
    --bg-texture: linear-gradient(rgba(255,248,235,0.10), rgba(255,248,235,0.10)), url('mahogany_private_day.webp');
    --text-primary: #1F1209;
    --text-accent: #FFE9A6;
    --tile-border: #F8D779;
    --btn-primary-bg: linear-gradient(to bottom, #8F5B25, #4F2608);
    --btn-primary-text: #FFFFFF;
    --btn-primary-shadow: 0 8px 15px rgba(31,18,9,0.18);
    --tile-img-filter: sepia(0.24) saturate(1.12) contrast(1.08);
    --btn-small-bg: rgba(255, 245, 220, 0.36);
    --btn-small-border: #6D3B12;
    --btn-small-text: #321707;
    --progress-bg: rgba(255,248,235,0.82);
}
[data-theme="dark"][data-theme-style="mahogany"], [data-theme="dark"][data-theme-style="mahogany"] body {
    --bg-primary: #1A0D0A;
    --bg-texture: linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08)), url('mahogany_private_night.webp');
    --text-primary: #F4D03F;
    --text-accent: #D4AF37;
    --tile-border: #4A2511;
    --btn-primary-bg: linear-gradient(to bottom, #D4AF37, #B8860B);
    --btn-primary-text: #1A0D0A;
    --btn-small-bg: rgba(212, 175, 55, 0.2);
    --btn-small-border: #D4AF37;
    --btn-small-text: #D4AF37;
    --progress-bg: rgba(26,13,10,0.3);
}

/* INDIGO ROYAL */
[data-theme-style="indigo"] {
    --bg-primary: #F0F4FF;
    --bg-texture: linear-gradient(rgba(240,244,255,0.06), rgba(240,244,255,0.06)), url('indigo_royal_day.webp');
    --text-primary: #0A1E3C;
    --text-accent: #1A5276;
    --tile-border: #A9CCE3;
    --btn-primary-bg: linear-gradient(to bottom, #21618C, #1A5276);
    --btn-primary-text: #FFFFFF;
    --tile-img-filter: hue-rotate(-15deg) saturate(1.1) brightness(1.05);
    --btn-small-bg: rgba(26, 82, 118, 0.1);
    --btn-small-border: #1A5276;
    --btn-small-text: #1A5276;
    --progress-bg: rgba(240,244,255,0.7);
}
[data-theme="dark"][data-theme-style="indigo"], [data-theme="dark"][data-theme-style="indigo"] body {
    --bg-primary: #0A0E1A;
    --bg-texture: linear-gradient(rgba(10,14,26,0.38), rgba(10,14,26,0.38)), url('indigo_royal_night.webp');
    --text-primary: #E0E0E0;
    --text-accent: #D4AF37;
    --tile-border: #1A253D;
    --btn-primary-bg: linear-gradient(to bottom, #D4AF37, #C5A028);
    --btn-primary-text: #0A0E1A;
    --btn-small-bg: rgba(212, 175, 55, 0.2);
    --btn-small-border: #D4AF37;
    --btn-small-text: #D4AF37;
    --progress-bg: rgba(10,14,26,0.3);
}

/* ZEN BAMBOO */
[data-theme-style="zen"] {
    --bg-primary: #F4F9F4;
    --bg-texture: linear-gradient(rgba(244,249,244,0.03), rgba(244,249,244,0.03)), url('zen_bamboo_day.webp');
    --text-primary: #145A32;
    --text-accent: #1E8449;
    --tile-border: #A9DFBF;
    --btn-primary-bg: linear-gradient(to bottom, #27AE60, #1E8449);
    --btn-primary-text: #FFFFFF;
    --tile-img-filter: hue-rotate(15deg) contrast(1.1) saturate(1.1);
    --btn-small-text: #1E8449;
    --progress-bg: rgba(244,249,244,0.7);
}
/* ZEN BAMBOO */
[data-theme-style="zen"] {
    --bg-primary: #F4F9F4;
    --bg-texture: linear-gradient(rgba(244,249,244,0.03), rgba(244,249,244,0.03)), url('zen_bamboo_day.webp');
    --text-primary: #145A32;
    --text-accent: #1E8449;
    --tile-border: #A9DFBF;
    --btn-primary-bg: linear-gradient(to bottom, #27AE60, #1E8449);
    --btn-primary-text: #FFFFFF;
    --tile-img-filter: hue-rotate(15deg) contrast(1.1) saturate(1.1);
    --btn-small-text: #1E8449;
    --progress-bg: rgba(244,249,244,0.7);
}
[data-theme="dark"][data-theme-style="zen"], [data-theme="dark"][data-theme-style="zen"] body {
    --bg-primary: #0B160F;
    --bg-texture: linear-gradient(rgba(11,22,15,0.08), rgba(11,22,15,0.08)), url('zen_bamboo_night.webp');
    --text-primary: #D5F5E3;
    --text-accent: #52BE80;
    --tile-border: #182C22;
    --btn-primary-bg: linear-gradient(to bottom, #1E8449, #145A32);
    --btn-primary-text: #FFFFFF;
    --btn-small-bg: rgba(220, 118, 51, 0.2);
    --btn-small-border: #DC7633;
    --btn-small-text: #DC7633;
    --progress-bg: rgba(11,22,15,0.3);
}

/* ROSE COPPER */
[data-theme-style="rose"] {
    --bg-primary: #FFF5F5;
    --bg-texture: linear-gradient(rgba(255,245,245,0.03), rgba(255,245,245,0.03)), url('rose_copper_day.webp');
    --text-primary: #78281F;
    --text-accent: #C0392B;
    --tile-border: #FADBD8;
    --btn-primary-bg: linear-gradient(to bottom, #E6B0AA, #C0392B);
    --btn-primary-text: #FFFFFF;
    --tile-img-filter: none;
    --btn-small-bg: rgba(192, 57, 43, 0.1);
    --btn-small-border: #C0392B;
    --btn-small-text: #C0392B;
    --progress-bg: rgba(255,245,245,0.7);
}
[data-theme="dark"][data-theme-style="rose"], [data-theme="dark"][data-theme-style="rose"] body {
    --bg-primary: #1C0F0E;
    --bg-texture: linear-gradient(rgba(28,15,14,0.08), rgba(28,15,14,0.08)), url('rose_copper_night.webp');
    --text-primary: #FAD7A0;
    --text-accent: #DC7633;
    --tile-border: #4A2311;
    --btn-primary-bg: linear-gradient(to bottom, #BA4A00, #873600);
    --btn-primary-text: #FFFFFF;
    --btn-small-bg: rgba(220, 118, 51, 0.2);
    --btn-small-border: #DC7633;
    --btn-small-text: #DC7633;
    --progress-bg: rgba(28,15,14,0.3);
}

/* DIAMOND MATTE (PURE) */
[data-theme-style="diamond"] {
    --bg-primary: #FFFFFF;
    --bg-texture: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), url('diamond_matte_day.webp');
    --text-primary: #102A43;
    --text-accent: #486581;
    --tile-border: #D9E2EC;
    --btn-primary-bg: linear-gradient(to bottom, #9FB3C8, #486581);
    --btn-primary-text: #FFFFFF;
    --tile-img-filter: none;
    --btn-small-bg: rgba(72, 101, 129, 0.1);
    --btn-small-border: #486581;
    --btn-small-text: #486581;
    --progress-bg: rgba(240,244,248,0.7);
}
[data-theme="dark"][data-theme-style="diamond"], [data-theme="dark"][data-theme-style="diamond"] body {
    --bg-primary: #102A43;
    --bg-texture: linear-gradient(rgba(16,42,67,0.42), rgba(16,42,67,0.42)), url('diamond_matte_night.webp');
     --text-primary: #F0F4F8;
    --text-accent: #9FB3C8;
    --tile-border: #243B53;
    --btn-primary-bg: #F0F4F8;
    --btn-primary-text: #102A43;
    --btn-small-bg: rgba(159, 179, 200, 0.2);
    --btn-small-border: #9FB3C8;
    --btn-small-text: #9FB3C8;
    --progress-bg: rgba(16,42,67,0.3);
}

/* LUXURY MARBLE */
[data-theme-style="luxury_marble"] {
    --bg-primary: #F8FAF8;
    --bg-texture: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)), url('luxury_marble_a_day.webp');
    --text-primary: #0A1410;
    --text-accent: #2D5A27;
    --tile-border: #A9DFBF;
    --btn-primary-bg: linear-gradient(to bottom, #27AE60, #1E8449);
    --btn-primary-text: #FFFFFF;
    --tile-img-filter: contrast(1.04) saturate(1.08);
    --btn-small-bg: rgba(30, 132, 73, 0.08);
    --btn-small-border: #1E8449;
    --btn-small-text: #1E8449;
    --progress-bg: rgba(255,255,255,0.86);
}
[data-theme="dark"][data-theme-style="luxury_marble"], [data-theme="dark"][data-theme-style="luxury_marble"] body {
    --bg-primary: #07100C;
    --bg-texture: linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.06)), url('luxury_marble_a_dark.webp');
    --text-primary: #F7ECD0;
    --text-accent: #E8CA80;
    --tile-border: rgba(232, 202, 128, 0.32);
    --btn-primary-bg: linear-gradient(to bottom, #B88735, #F0D58D, #9C6A27);
    --btn-primary-text: #08110C;
    --btn-small-bg: rgba(232, 202, 128, 0.18);
    --btn-small-border: #E8CA80;
    --btn-small-text: #E8CA80;
    --progress-bg: rgba(0,0,0,0.32);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100% !important;
    min-height: 100% !important;
    margin: 0;
    padding: 0;
    background: var(--bg-primary) !important;
    background-image: var(--bg-texture) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    position: relative;
}

/* Keep the background on html/body only; a fixed pseudo-layer can sit above WebView content on some Android builds. */
body::before {
    content: none !important;
    display: none !important;
}

body {
    font-family: 'Outfit', sans-serif;
    display: flex; justify-content: center;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: none;
}

#app {
    width: 100%; max-width: 1000px; 
    min-height: 100dvh;
    height: 100dvh;
    background: var(--bg-primary) !important;
    background-image: var(--bg-texture) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: var(--text-primary);
    opacity: 1 !important;
    box-shadow: 0 0 50px rgba(0,0,0,1);
    transition: background 0.4s ease;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

#screen-home {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    --home-fit-scale: 1;
    transform: none;
    transform-origin: top left;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 600; letter-spacing: 0.5px; }

/* Dashboard Header & Logo */
.header-bg { 
    text-align: center; 
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 5px; 
    position: relative;
    background: transparent;
}
.logo-img { 
    width: 95%; height: auto; 
    margin: 0 auto 0px; 
    display: block;
    max-width: 450px;
    filter: var(--header-filter);
    transition: all 0.4s ease;
}

@media (orientation: landscape) and (max-height: 500px) {
    .logo-img { width: 40%; max-width: 200px; margin-top: 5px; }
    .header-bg { padding: 5px; }
}

.header-icon-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-small-bg);
    border: 2px solid var(--btn-small-border);
    border-radius: 50%;
    color: var(--btn-small-text);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.header-icon-btn:active { transform: scale(0.9); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.btn-left { left: 15px; }
.btn-right { right: 15px; }

/* Typography elements */
.welcome-section { padding: 0px 25px 0px; margin-top: -12px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.welcome-title { font-size: 1.25rem; color: var(--text-primary); margin-bottom: 0px; letter-spacing: -0.2px; width: 100%; }
.welcome-subtitle { font-size: 0.75rem; color: var(--text-accent); font-family: 'Outfit', sans-serif; line-height: 1.2; opacity: 0.9; width: 100%; }

@media (orientation: landscape) and (max-height: 500px) {
    .welcome-section { margin-top: 0; padding: 5px 25px; }
    .welcome-title { font-size: 1rem; }
    .welcome-subtitle { display: none; }
}

/* Switch Villa Button */
.btn-pill-small {
    display: flex; align-items: center; justify-content: center;
    width: auto; padding: 5px 13px; margin: 6px 0 8px;
    background: var(--btn-small-bg);
    border: 2px solid var(--btn-small-border); border-radius: 20px;
    color: var(--btn-small-text); font-family: 'Outfit', sans-serif; font-size: 0.88rem; font-weight: 600;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); cursor: pointer; max-width: 160px;
    transition: all 0.3s;
}
.btn-pill-small:active { transform: scale(0.96); }

/* Legacy Luxury Toggle (Removed in v6.8) */

/* Progress Bar Hollow Track */
.progress-container {
    background: rgba(0,0,0,0.4); 
    border-radius: 20px; height: 32px; 
    border: 2px solid var(--tile-border); position: relative;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 4px; display: flex; align-items: center; justify-content: center;
    transition: all 0.4s ease; overflow: hidden;
    width: 100%; max-width: 420px;
}
.progress-text {
    color: #fff; font-family: 'Outfit', sans-serif; font-size: 0.85rem; font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    position: relative; z-index: 5; transition: all 0.4s;
    white-space: nowrap; pointer-events: none;
}
.progress-bar-inner {
    position: absolute; left: 0; height: 100%; width: 0%; top: 0;
    background: linear-gradient(to right, #2ecc71, #f1c40f, #e67e22);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Photographic Tiles */
.center-grid { 
    display: flex; flex-direction: column; align-items: center; 
    padding: 10px 25px; flex: 1; 
    min-height: 0;
    /* Was overflow:hidden, which CLIPPED the last row of tile labels on tall
       narrow phones — on an iPhone 15 Pro "KITCHEN" and "POOL AREA" were sliced
       through the middle. Scrolling the shortfall is right: a label the user
       cannot read is worse than a few pixels of movement, and on screens where
       everything fits there is nothing to scroll and no visible change. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 14px;
    /* Content must start at the top. justify-content:center makes overflowing
       content spill BOTH ways, and the part above the container becomes
       unreachable — which is why the progress bar and the first tile row were
       bitten off at the top as well as the bottom. */
    justify-content: flex-start;
}
/* The reason overflow alone fixed nothing: in a column flex container children
   default to flex-shrink:1, so instead of overflowing (and scrolling) they
   COMPRESS — the progress bar squashed into the tiles and the labels were
   crushed. Pinning them stops the squeeze, so the overflow above is real and
   the panel scrolls. */
.center-grid > * { flex-shrink: 0; }
.tile-grid { 
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; 
    width: 100%; max-width: 420px; margin: 0 auto 5px; 
}
@media (min-width: 700px) {
    .tile-grid { grid-template-columns: repeat(4, 1fr); max-width: 900px; }
}
.tile {
    position: relative; aspect-ratio: 1.4;
    /* Frameless Apex Style */
    border: none;
    border-radius: 12px; 
    overflow: hidden; cursor: pointer;
    background: #000; transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
.tile img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; top: 0; left: 0; z-index: 0;
    opacity: 1; filter: var(--tile-img-filter, none) contrast(1.05);
    transform: scale(1.25); /* Ultimate isolation to remove all legacy frame bits */
}


/* Giant Gold Submit Button */
.btn-submit {
    display: block; width: 100%; padding: 11px; margin-bottom: 8px;
    background: var(--btn-primary-bg); 
    color: var(--btn-primary-text); border: none; border-radius: 10px;
    font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600;
    box-shadow: var(--btn-primary-shadow);
    cursor: pointer; transition: transform 0.2s;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
}
.btn-submit:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.btn-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--btn-small-bg);
    border: 2px solid var(--btn-small-border);
    border-radius: 14px;
    color: var(--btn-small-text);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 0;
    line-height: 1.15;
}
.btn-media:active { transform: scale(0.98); }

/* Bottom Action Blocks */
.bottom-actions { 
    padding: 10px 25px max(calc(env(safe-area-inset-bottom, 0px) + 14px), 28px);
    background: transparent !important;
    flex-shrink: 0;
}
.action-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.btn-action-block {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px 4px; border-radius: 12px; cursor: pointer; text-align: center;
    font-family: 'Outfit', sans-serif; font-size: 0.72rem; font-weight: 600;
    box-shadow: var(--btn-primary-shadow); transition: all 0.4s ease;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.12;
}
.btn-action-block svg { width: 20px; height: 20px; margin-bottom: 5px; fill: currentColor; }

.btn-gray { background: var(--action-bg-grey); border: 2px solid var(--action-border-grey); color: var(--action-text-grey); }
.btn-rust { background: var(--action-bg-rust); border: 2px solid var(--action-border-rust); color: var(--action-text-rust); }
.btn-cyan { background: var(--action-bg-cyan); border: 2px solid var(--action-border-cyan); color: var(--action-text-cyan); }
.btn-rose { background: var(--action-bg-rose); border: 2px solid var(--action-border-rose); color: var(--action-text-rose); }
.btn-secondary-themed { 
    background: rgba(255, 255, 255, 0.12); 
    border: 2px solid #D4AF37 !important; 
    color: var(--text-accent); 
    transition: all 0.3s ease;
}
.btn-secondary-themed:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.btn-green { background: linear-gradient(#d5f5d5, #bcebb9); border: 2px solid #8ccb85; color: #2d5a27; }
.btn-yellow { background: linear-gradient(#f9f4d2, #efde8d); border: 2px solid #d4c167; color: #5a4f1a; }

/* 2-Button Grid & Premium Report */
.action-grid-2 {
    display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 10px;
}
.btn-premium-report {
    background: linear-gradient(135deg, #05301B 0%, #0A5C34 50%, #05301B 100%);
    border: 2px solid #D4AF37 !important;
    /* Background is ALWAYS this dark emerald gradient, so the label must not
       follow theme accents (dark accents in light themes made it unreadable). */
    color: #F5DFA0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(138, 107, 50, 0.4);
    position: relative; overflow: hidden;
}
.btn-premium-report::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.1) 50%, transparent 55%);
    animation: shine 4s infinite;
}
@keyframes shine { 0% { transform: translateX(-100%) translateY(-100%); } 100% { transform: translateX(100%) translateY(100%); } }

/* Tile Labels */
.tile-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tile-label {
    /* Descenders were being trimmed at small sizes; give the line room. */
    line-height: 1.25; padding-bottom: 2px; 
    font-size: 0.85rem; font-weight: 700;
    /* Labels can sit over photos or any marble variant depending on layout and
       theme — a fixed white-on-scrim pill stays readable on every background. */
    color: #fff;
    background: rgba(10, 22, 16, 0.55);
    padding: 2px 10px;
    border-radius: 8px;
    text-transform: uppercase; letter-spacing: 0.5px; opacity: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.65);
}
[data-theme="dark"] .tile-label { text-shadow: 0 1px 5px rgba(0,0,0,0.8); }

/* Flag Picker in Settings (Cleaned legacy header CSS) */
#dashboard-header-widgets {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 0;
    z-index: 10001;
    pointer-events: none;
}
#dashboard-header-widgets .header-icon-btn { pointer-events: auto; }

@media (orientation: landscape) and (max-height: 500px) {
    #screen-home {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #screen-home .bottom-actions {
        padding-bottom: max(calc(env(safe-area-inset-bottom, 0px) + 14px), 28px);
    }
}

@media (orientation: landscape) and (min-width: 900px) and (min-height: 560px) {
    #app { max-width: none; }
    #screen-home {
        display: grid !important;
        grid-template-columns: minmax(220px, 0.75fr) minmax(420px, 1.35fr);
        grid-template-rows: auto 1fr auto;
        column-gap: clamp(8px, 2vw, 28px);
        align-items: center;
        padding-left: max(env(safe-area-inset-left, 0px), 12px);
        padding-right: max(env(safe-area-inset-right, 0px), 12px);
    }
    #dashboard-header-widgets { grid-column: 1 / -1; }
    #screen-home .header-bg {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        padding: 0;
    }
    #screen-home .logo-img {
        width: min(32vw, 310px);
        max-width: 310px;
    }
    #screen-home .welcome-section {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 2px;
    }
    #screen-home .center-grid {
        grid-column: 2;
        grid-row: 2;
        padding: 4px 8px;
        align-self: center;
    }
    .tile-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        max-width: min(70vw, 900px) !important;
        gap: 8px;
    }
    .tile { aspect-ratio: 1.55; }
    #screen-home .bottom-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        padding: 4px max(env(safe-area-inset-right, 0px), 12px) max(calc(env(safe-area-inset-bottom, 0px) + 14px), 24px) max(env(safe-area-inset-left, 0px), 12px);
    }
    #screen-home .btn-action-block { padding: 7px 4px; }
    #screen-home .btn-submit { padding: 8px; margin-bottom: 4px; }
}

@media (orientation: landscape) and (min-width: 1180px) and (min-height: 650px) {
    #screen-home {
        grid-template-columns: minmax(260px, 0.65fr) minmax(560px, 1.55fr);
    }
    #screen-home .logo-img {
        width: min(28vw, 390px);
        max-width: 390px;
    }
}

@media (orientation: portrait) and (min-width: 700px) {
    #screen-home {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        padding: 0 max(env(safe-area-inset-right, 0px), 18px) max(env(safe-area-inset-bottom, 0px), 14px) max(env(safe-area-inset-left, 0px), 18px);
    }
    #screen-home .header-bg {
        padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
        padding-bottom: 0;
    }
    #screen-home .logo-img {
        max-width: min(42vw, 360px);
        max-height: 20svh;
        object-fit: contain;
    }
    #screen-home .welcome-section {
        padding: 0;
        margin: 0;
    }
    #screen-home .welcome-title {
        font-size: clamp(1.3rem, 3.2vw, 2.2rem);
    }
    #screen-home .welcome-subtitle {
        font-size: clamp(0.78rem, 1.9vw, 1rem);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }
    #screen-home .center-grid {
        justify-content: flex-start;
        padding: clamp(6px, 1.4vh, 12px) 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    #screen-home .tile-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: min(88vw, 860px);
        gap: clamp(8px, 1.6vw, 14px);
    }
    #screen-home .tile {
        aspect-ratio: 1.55;
        max-height: 16svh;
    }
    #screen-home .tile-label {
        font-size: clamp(0.7rem, 1.8vw, 0.95rem);
    }
    #screen-home .bottom-actions {
        max-width: 860px;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    #screen-home .btn-submit {
        padding: clamp(9px, 1.8vh, 16px);
        margin-bottom: clamp(6px, 1vh, 10px);
    }
    #screen-home .btn-action-block {
        min-height: clamp(42px, 6.5vh, 64px);
    }
}

@media (orientation: landscape) {
    html, body, #app, #screen-home {
        height: 100svh !important;
        min-height: 100svh !important;
        overflow: hidden !important;
    }
    #app {
        max-width: none;
        box-shadow: none;
    }
    #screen-home {
        display: grid !important;
        grid-template-columns: minmax(180px, 0.64fr) minmax(340px, 1.5fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: clamp(2px, 0.8vh, 8px) clamp(10px, 1.8vw, 24px);
        padding: max(env(safe-area-inset-top, 0px), 8px) max(env(safe-area-inset-right, 0px), 16px) max(env(safe-area-inset-bottom, 0px), 10px) max(env(safe-area-inset-left, 0px), 16px);
    }
    #dashboard-header-widgets {
        position: fixed;
        inset: 0 0 auto 0;
        height: 0;
    }
    .header-icon-btn {
        top: max(calc(env(safe-area-inset-top, 0px) + 12px), 14px) !important;
        width: clamp(34px, 5.5vh, 46px) !important;
        height: clamp(34px, 5.5vh, 46px) !important;
    }
    #screen-home .header-bg {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 0;
        align-self: start;
    }
    #screen-home .logo-img {
        width: clamp(120px, 20vw, 300px);
        max-width: clamp(120px, 20vw, 300px);
        max-height: clamp(58px, 18vh, 132px);
        object-fit: contain;
        margin: 0 auto;
    }
    #screen-home .welcome-section {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        margin: 0;
        padding: 0;
        gap: clamp(4px, 1vh, 8px);
        min-width: 0;
    }
    #screen-home .welcome-title {
        font-size: clamp(1rem, 2.7vw, 1.9rem);
        line-height: 1.05;
    }
    #screen-home .welcome-subtitle {
        font-size: clamp(0.62rem, 1.35vw, 0.9rem);
        line-height: 1.15;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    #screen-home .btn-pill-small {
        max-width: none;
        margin: 4px 0;
        padding: clamp(6px, 1.3vh, 10px) clamp(10px, 2vw, 18px);
        font-size: clamp(0.72rem, 1.6vw, 1rem);
        white-space: nowrap;
    }
    #screen-home .progress-container {
        max-width: none;
        height: clamp(26px, 5.2vh, 42px);
        margin-top: clamp(4px, 1vh, 8px);
    }
    #screen-home .progress-text {
        font-size: clamp(0.78rem, 1.6vw, 1.05rem);
    }
    #screen-home .center-grid {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        justify-content: center;
        padding: 0;
        overflow: hidden;
    }
    #screen-home .tile-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: clamp(6px, 1vw, 14px);
        max-width: none !important;
        width: 100%;
    }
    #screen-home .tile {
        aspect-ratio: 1.55;
        max-height: clamp(48px, 15vh, 125px);
    }
    #screen-home .tile-label {
        display: none;
    }
    #screen-home .bottom-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        padding: 0;
        min-width: 0;
    }
    #screen-home .btn-submit {
        padding: clamp(6px, 1.55vh, 12px);
        margin-bottom: clamp(4px, 0.9vh, 8px);
        font-size: clamp(0.92rem, 2vw, 1.35rem);
    }
    #screen-home .action-grid-2 {
        gap: clamp(8px, 1.8vw, 18px);
        margin-top: 0;
    }
    #screen-home .btn-action-block {
        min-height: clamp(32px, 6vh, 54px);
        padding: clamp(5px, 1.2vh, 10px) 8px;
        font-size: clamp(0.68rem, 1.3vw, 0.9rem);
    }
}

@media (orientation: landscape) and (max-height: 430px) {
    #screen-home {
        grid-template-columns: minmax(190px, 0.64fr) minmax(360px, 1.5fr);
        gap: 3px clamp(10px, 2vw, 20px);
        padding-top: max(env(safe-area-inset-top, 0px), 4px);
    }
    #screen-home .logo-img {
        width: clamp(120px, 19vw, 240px);
        max-height: 18vh;
    }
    #screen-home .welcome-subtitle {
        display: none;
    }
    #screen-home .tile {
        max-height: 15vh;
    }
    #screen-home .btn-submit {
        padding: clamp(6px, 1.5vh, 10px);
        font-size: clamp(0.92rem, 2vw, 1.35rem);
    }
    #screen-home .btn-action-block {
        min-height: clamp(32px, 6.2vh, 46px);
    }
}

/* Sub Screens Setup */
.sub-screen { display: none; height: 100dvh; overflow-y: auto; background: transparent !important; padding-bottom: 60px; }
.sub-screen.active { display: block; }
.back-header { 
    display: flex; 
    align-items: center; 
    padding: calc(env(safe-area-inset-top, 0px) + 25px) 25px 20px; 
    background: rgba(0,0,0,0.1); 
    border-bottom: 1px solid var(--tile-border); 
    margin-bottom: 25px; 
}
.back-btn { padding: 8px 16px; background: var(--btn-small-bg); border: 1px solid var(--btn-small-border); border-radius: 6px; color: var(--btn-small-text); font-family: 'Outfit'; font-weight: 600; margin-right: 15px; cursor: pointer; }

/* Inputs */
.form-group { margin-bottom: 20px; padding: 0 25px; }
.form-group label { display: block; font-weight: 400; margin-bottom: 8px; font-size: 1rem; color: var(--text-primary); font-family: 'Playfair Display', serif;}
/* Theme every checkbox/radio with the active accent (was: one themed inline in
   Settings, all 18 others left on the browser's default blue). --text-accent
   follows the selected theme, so this stays correct across all palettes. */
/* No link rules existed, so anchors fell back to the browser defaults —
   blue when unvisited and PURPLE once visited (e.g. Spot Check "View reports").
   Theme them and make :visited identical so links never change colour.
   Low specificity: class-based and inline-styled links still win. */
a, a:link, a:visited, a:hover, a:active {
    color: var(--text-accent);
    -webkit-text-fill-color: currentColor;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--text-accent);
}

.form-control {
    width: 100%; padding: 14px 20px; background: var(--progress-bg);
    border: 1px solid var(--tile-border); border-radius: 25px;
    font-size: 1rem; font-family: 'Outfit', sans-serif; color: var(--text-primary);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.form-control:focus {
    outline: none; border-color: var(--text-accent); box-shadow: 0 0 8px rgba(138, 107, 50, 0.2);
}

/* Modal Form Overrides */
.modal-content .form-group { padding: 0; margin-bottom: 15px; }
.modal-content .form-control { border-radius: 12px; }

/* Lists */
.defect-item { background: var(--progress-bg); border-radius: 12px; padding: 20px; margin: 0 25px 15px; border: 1px solid var(--tile-border); box-shadow: var(--card-shadow); }
.status-badge { padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: 600; background: var(--action-bg-grey); color: var(--action-text-grey); border: 1px solid var(--action-border-grey); }
.status-badge.completed { background: #1a4220; color: #a4e0b0; border-color: #2b6e36; }

.settings-section-title {
    color: var(--text-accent);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 4px 0 10px;
    opacity: 0.85;
}
.settings-help {
    color: var(--text-primary);
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0.72;
    margin-top: 7px;
}

.report-preview-panel {
    border: 1px solid var(--tile-border);
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px;
}
.report-preview-title {
    color: var(--text-primary);
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
}
.report-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.report-preview-grid div {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
}
.report-preview-grid strong {
    display: block;
    color: var(--text-accent);
    font-size: 1.1rem;
}
.report-preview-grid span,
.report-preview-note {
    color: var(--text-primary);
    font-size: 0.72rem;
    opacity: 0.78;
}
.report-preview-note {
    margin-top: 10px;
    text-align: center;
}

[data-theme-style="mahogany"]:not([data-theme="dark"]) .welcome-title,
[data-theme-style="mahogany"]:not([data-theme="dark"]) .welcome-subtitle,
[data-theme-style="mahogany"]:not([data-theme="dark"]) .tile-label,
[data-theme-style="mahogany"]:not([data-theme="dark"]) .btn-action-block,
[data-theme-style="mahogany"]:not([data-theme="dark"]) .btn-pill-small {
    text-shadow: 0 2px 5px rgba(0,0,0,0.58);
}

[data-theme-style="mahogany"]:not([data-theme="dark"]) .btn-secondary-themed,
[data-theme-style="mahogany"]:not([data-theme="dark"]) .btn-premium-report {
    color: #FFE9A6 !important;
    border-color: #FFE9A6 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}

[data-theme-style="mahogany"]:not([data-theme="dark"]) #report-modal .modal-content {
    background-image: linear-gradient(rgba(255,248,232,0.90), rgba(255,248,232,0.90)), url('mahogany_private_day.webp');
}

[data-theme-style="mahogany"]:not([data-theme="dark"]) #report-modal .report-preview-panel {
    background: rgba(255,255,255,0.54);
}

#report-modal .modal-content {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 104px);
}

#report-modal .modal-header {
    padding: 0 20px 10px;
    margin-bottom: 0;
}

#report-modal .modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

#report-modal .report-preview-panel {
    padding: 10px;
}

#report-modal .report-preview-title {
    margin-bottom: 7px;
    font-size: 0.92rem;
}

#report-modal .report-preview-grid {
    gap: 5px;
}

#report-modal .report-preview-grid div {
    padding: 6px 3px;
}

#report-modal .report-preview-note {
    margin-top: 6px;
}

.defect-filter-panel {
    margin: 0 16px 16px;
    border: 1px solid var(--tile-border);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.08);
}
.defect-search-input,
.defect-filter-row select {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--tile-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    padding: 10px 12px;
    outline: none;
}
.defect-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.defect-card-title {
    color: var(--text-dark);
    display: inline-block;
    font-size: 1.05rem;
    margin: 0;
}
.defect-card-subtitle,
.defect-meta-row {
    color: var(--text-primary);
    font-size: 0.78rem;
    opacity: 0.78;
}
.defect-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.defect-description {
    border-left: 3px solid var(--wood-border);
    font-size: 0.9rem;
    margin-top: 5px;
    padding-left: 8px;
}
.defect-thumb {
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
}
.defect-thumb-before { border: 2px solid var(--wood-border); }
.defect-thumb-after { border: 2px solid #5caf46; }

/* Custom Modal Selection */
.modal-overlay {
    position: fixed; inset: 0; background: #000;
    display: none; justify-content: center; align-items: flex-end;
    z-index: 1000;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#selection-modal { z-index: 3000 !important; }
.modal-overlay.active { display: flex; animation: none; }
.modal-content {
    width: 100%; max-width: 430px; 
    background: var(--bg-primary);
    background-image: var(--bg-texture);
    background-size: cover;
    background-position: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 30px 30px 0 0; padding: 25px 0 40px;
    box-shadow: 0 -15px 50px rgba(0,0,0,0.8); transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    border-top: 2px solid var(--text-accent);
}
.modal-overlay.active .modal-content { transform: translateY(0); }
.modal-header { padding: 0 25px 20px; border-bottom: 1px solid var(--tile-border); margin-bottom: 10px; text-align: center; }
.modal-option {
    padding: 18px 25px; display: flex; align-items: center; justify-content: space-between;
    font-size: 1.1rem; color: var(--text-primary); cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.modal-option:active { background: rgba(0,0,0,0.05); }
.modal-option .radio-circle {
    width: 22px; height: 22px; border: 2px solid var(--text-accent);
    border-radius: 50%; position: relative;
}

/* Premium Dialogs */
.confirm-overlay {
    position: fixed; inset: 0; background: #000;
    display: none; justify-content: center; align-items: center;
    /* Must sit ABOVE the body-level modals (z-index 99999): account,
       workgroup, bill, booking and iCal panels all raise a confirm, and at
       z-index 3000 it opened behind them — invisible, so Delete appeared to do
       nothing at all. */
    z-index: 100010;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.confirm-overlay.active { display: flex; animation: none; }
.confirm-overlay.export-action-pending {
    background: #000 !important;
}
.confirm-content {
    width: 85%; max-width: 320px; 
    background: var(--bg-primary);
    background-image: var(--bg-texture);
    background-size: cover;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 24px; padding: 25px; text-align: center;
    box-shadow: 0 15px 50px rgba(0,0,0,0.8); border: 1px solid var(--text-accent);
    /* A long message (account deletion, workgroup deletion) used to grow taller
       than the viewport and push Cancel/Confirm off screen, leaving no way out
       of the dialog. Cap the height and scroll instead. */
    max-height: 82svh; overflow-y: auto; overscroll-behavior: contain;
}
/* No sticky footer here: pinning the buttons drew a background band across
   them. The height cap above is sufficient — they scroll into view normally. */
.confirm-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--text-accent); margin-bottom: 12px; }
.confirm-msg { font-size: 0.95rem; color: var(--text-primary); margin-bottom: 25px; line-height: 1.4; opacity: 0.9; }
.confirm-btns { display: flex; gap: 12px; }
.confirm-btn { 
    flex: 1; padding: 12px; border-radius: 12px; font-weight: 600; font-size: 0.9rem;
    cursor: pointer; transition: all 0.2s; border: none;
}
.confirm-btn-cancel {
    background: rgba(150,150,150,0.28);
    color: var(--text-primary);
    border: 1px solid rgba(150,150,150,0.45);
}
.confirm-btn-ok { background: var(--btn-primary-bg); color: var(--btn-primary-text); }

/* Toast Notifications */
.toast-container {
    position: fixed; 
    top: max(calc(env(safe-area-inset-top, 0px) + 14px), 24px);
    left: 50%; 
    transform: translateX(-50%);
    z-index: 2147483647; display: flex; flex-direction: column; gap: 10px; width: min(86vw, 420px);
    pointer-events: none;
}
.toast-bar {
    background: #121614; color: #fff; padding: 12px 18px;
    border-radius: 999px; text-align: center; font-size: 0.85rem; font-weight: 600;
    box-shadow: 0 10px 25px #000; border: 1px solid #2b342f;
    animation: none; pointer-events: none;
    word-break: normal; overflow-wrap: anywhere; white-space: normal; line-height: 1.25;
    width: 100%; box-sizing: border-box;
    opacity: 1;
}
.toast-bar.leaving {
    display: none;
    opacity: 1;
    transform: none;
    transition: none;
}
.toast-bar.error {
    background: #7e2222;
    border-color: #b94a4a;
}
.modal-option.selected .radio-circle::after {
    content: ''; position: absolute; inset: 4px;
    background: var(--text-accent); border-radius: 50%;
}

/* Lightbox */
.lightbox-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,0.98);
    display: none; justify-content: center; align-items: center;
    z-index: 2000;
    overflow: auto;
}
.lightbox-mask.active { display: flex; animation: fadeIn 0.3s ease; }
.lightbox-img { 
    max-width: 95%; max-height: 85%; border-radius: 8px; 
    box-shadow: 0 0 30px rgba(0,0,0,0.5); 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: zoom-in;
}
.lightbox-img.zoomed {
    transform: scale(2);
    cursor: zoom-out;
}
.lightbox-close { 
    position: absolute; 
    top: calc(env(safe-area-inset-top, 0px) + 20px); 
    right: 20px; 
    color: white; 
    font-size: 2rem; 
    cursor: pointer; 
}

/* Classy Icon Buttons */
.btn-icon-classy {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px; padding: 6px 10px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.btn-icon-classy:active { transform: scale(0.9); }
.btn-icon-edit { color: #E8CA80; border-color: rgba(232, 202, 128, 0.3); }
.btn-icon-delete { color: #E8A5A5; border-color: rgba(232, 165, 165, 0.3); }

/* Card Media alignment - CENTERED */
.media-scroll-center {
    margin-top: 10px; display: flex; gap: 8px; overflow-x: auto;
    justify-content: flex-start; padding: 10px 5px;
    -webkit-overflow-scrolling: touch;
}
.media-scroll-center img, .media-scroll-center video {
    height: 100px; border-radius: 8px; border: 2px solid var(--tile-border);
    transition: transform 0.2s; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.media-scroll-center img:active { transform: scale(0.95); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Multi-Photo Gallery */
.media-preview-bar {
    display: flex; gap: 10px; overflow-x: auto; padding: 15px 5px;
    -webkit-overflow-scrolling: touch;
    min-height: 100px;
}
/* Premium Scrollbar for Media */
.media-scroll-center::-webkit-scrollbar, .media-preview-bar::-webkit-scrollbar {
    height: 6px;
}
.media-scroll-center::-webkit-scrollbar-track, .media-preview-bar::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}
.media-scroll-center::-webkit-scrollbar-thumb, .media-preview-bar::-webkit-scrollbar-thumb {
    background: var(--text-accent);
    border-radius: 10px;
    opacity: 0.6;
}
.preview-thumb-wrap {
    position: relative; flex: 0 0 100px; height: 100px;
}
.preview-thumb {
    width: 100px; height: 100px; border-radius: 8px; object-fit: cover;
    border: 2px solid var(--tile-border); box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.thumb-delete {
    position: absolute; top: -5px; right: -5px; width: 22px; height: 22px;
    background: #e74c3c; color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: bold; border: 2px solid #fff;
    cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.thumb-delete:active { transform: scale(0.9); }

.villa-preview-wrap {
    width: 65px;
    height: 65px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--wood-border);
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.villa-preview-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.villa-preview-empty {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.28)),
        var(--tile-bg, #ddd);
}

.btn-icon-classy {
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.2s;
    font-weight: 600;
}
.btn-icon-classy:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.modal-content hr {
    border: none;
    border-top: 1px solid var(--tile-border);
    margin: 15px 0;
}

/* SMART MAP PICKER OVERLAYS */
.map-overlay-header {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 20px);
    left: 20px;
    right: 20px;
    z-index: 1000;
}

.map-overlay-footer {
    position: absolute;
    bottom: 30px;
    left: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 1001;
}
/* Crosshair visual */
.map-crosshair::before, .map-crosshair::after {
    content: '';
    position: absolute;
    background: var(--text-accent);
}
.map-crosshair::before { width: 100%; height: 2px; top: 14px; left: 0; }
.map-crosshair::after { height: 100%; width: 2px; left: 14px; top: 0; }
.map-crosshair-circle {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--text-accent);
    border-radius: 50%;
    top: 10px;
    left: 10px;
}

/* Ensure Leaflet doesn't hide our crosshair */
.leaflet-container { cursor: crosshair !important; }

/* Priority Badges */
.priority-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 8px;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.priority-low { background: #27ae60; color: #fff; }
.priority-medium { background: #f39c12; color: #fff; }
.priority-high { background: #e74c3c; color: #fff; }

.defect-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* THEMED PROMPT MODAL */
.prompt-overlay {
    position: fixed; inset: 0; background: #000;
    display: none; justify-content: center; align-items: center; z-index: 3000;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.prompt-overlay.active { display: flex; animation: none; }

.prompt-content {
    background: var(--bg-primary);
    background-image: var(--bg-texture);
    background-size: cover;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid var(--text-accent);
    width: 90%; max-width: 380px; padding: 25px; border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6); animation: modalIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.prompt-title {
    font-family: 'Playfair Display', serif; color: var(--text-primary);
    margin-bottom: 20px; font-size: 1.35rem; text-align: center;
}

.prompt-input {
    width: 100%; padding: 12px 15px; background: rgba(255,255,255,0.05);
    border: 2px solid var(--tile-border); border-radius: 12px;
    color: var(--text-primary); font-family: 'Outfit', sans-serif;
    font-size: 1rem; margin-bottom: 20px; outline: none; transition: border-color 0.3s;
}
.prompt-input:focus { border-color: var(--text-accent); }

.prompt-btns { display: flex; gap: 12px; }
.prompt-btn {
    flex: 1; padding: 12px; border-radius: 30px; border: none;
    font-weight: 800; font-family: 'Outfit', sans-serif; cursor: pointer;
    transition: transform 0.2s;
}
.prompt-btn-cancel { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.prompt-btn-ok { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.prompt-btn:active { transform: scale(0.95); }

@keyframes modalIn {
    from { transform: translateY(30px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.defect-badge {
    width: 28px;
    height: 28px;
    background: rgba(243, 156, 18, 0.95);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    margin-right: 10px;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

/* Modern Brand Button Themes */
.btn-whatsapp { 
    background: linear-gradient(135deg, #25D366, #128C7E) !important; 
    color: white !important; 
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
}
.btn-excel { 
    background: linear-gradient(135deg, #217346, #107c10) !important; 
    color: white !important; 
    box-shadow: 0 4px 15px rgba(33, 115, 70, 0.3) !important;
}
.btn-pdf-acrobat { 
    background: linear-gradient(135deg, #A64B4D, #8B3E40) !important; 
    color: white !important; 
    box-shadow: 0 4px 15px rgba(166, 75, 77, 0.3) !important;
}
.btn-import {
    background: linear-gradient(135deg, #27ae60, #1e8449) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2) !important;
}
.btn-export {
    background: linear-gradient(135deg, #f39c12, #d35400) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.2) !important;
}
.btn-import-export {
    background: linear-gradient(135deg, #444, #222) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

* {
  -webkit-tap-highlight-color: transparent !important;
}

.header-icon-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(4px);
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1) !important;
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}
.header-icon-btn:active {
    transform: scale(0.85);
    background: rgba(255,255,255,0.2) !important;
}

/* ---- LANDING / GATE BACKGROUND -----------------------------------------
   Every gate screen — install, mobile-only, desktop sign-in — wears Luxury
   Marble regardless of the stored theme, so the first thing a visitor sees is
   the app at its best rather than whichever theme happens to be saved. Scoped
   to #app so it only applies while a gate is on screen; the moment the real
   app renders, the user's own theme takes back over.
   :has() is unsupported on old browsers, which simply keep the previous
   background — a graceful fallback, not a broken page. */
#app:has(.install-gate) {
    --bg-primary: #F8FAF8;
    --bg-texture: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)), url('luxury_marble_a_day.webp');
}
[data-theme="dark"] #app:has(.install-gate) {
    --bg-primary: #07100C;
    --bg-texture: linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.06)), url('luxury_marble_a_dark.webp');
}

/* ---- LONG-PRESS BEHAVIOUR ----------------------------------------------
   On Android a long press on ordinary UI text selects it and offers "search",
   which is meaningless on a button or a label and gets in the way of a tap.
   Chrome is disabled on chrome only: inputs, textareas and the places a user
   may legitimately want to copy from (notes, coordinates, keybox codes) keep
   normal selection. */
body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
input, textarea, select,
[contenteditable="true"],
.bvc-selectable,
#bvc-gg-coords,
.sc-notes-text,
.bvc-ov-stat-v {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* ===================== LEASE CONTRACT FORM =========================
 * The lease screen is a long form over a marble background. Translucent
 * fields vanished into the veining, so each section gets a SOLID panel and
 * the inputs invert on focus — white-on-dark becomes dark-on-white the
 * moment you tap in, so the field you are editing is unmistakable.
 * Day/night is driven by <html data-theme="dark">, same as the rest of the app.
 * ================================================================== */
.lc-card {
    border-radius: 16px;
    padding: 16px;
    margin: 0 16px 14px;
    border: 1px solid rgba(140, 140, 140, 0.28);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
/* Frosted grey rather than flat black: the marble still reads through, but
   the veining is blurred back so it stops competing with the field edges. */
:root[data-theme="dark"] .lc-card {
    background: rgba(58, 63, 71, 0.20);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
    border-color: rgba(255, 255, 255, 0.14);
    color: #eceae6;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
:root:not([data-theme="dark"]) .lc-card {
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
    border-color: rgba(0, 0, 0, 0.10);
    color: #16191d;
}

.lc-label { display: block; font-size: 0.72rem; opacity: 0.72; margin-bottom: 4px; }

.lc-input {
    width: 100%;
    padding: 11px 12px;
    border-radius: 10px;
    font: inherit;
    box-sizing: border-box;
    border: 1px solid rgba(140, 140, 140, 0.45);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
/* color-scheme makes the browser's own date picker follow the app, which is
   the only reliable lever over native picker chrome. */
:root[data-theme="dark"] .lc-input { background: rgba(18, 21, 26, 0.42); color: #f6f3ec; color-scheme: dark; border-color: rgba(255, 255, 255, 0.20); }
:root:not([data-theme="dark"]) .lc-input { background: #ffffff; color: #14181d; color-scheme: light; }

/* Selected field inverts, per request: white in dark mode, black in day mode. */
:root[data-theme="dark"] .lc-input:focus {
    background: #ffffff; color: #12161b; color-scheme: light;
    border-color: var(--text-accent, #c9a96a); outline: none;
}
:root:not([data-theme="dark"]) .lc-input:focus {
    background: #12161b; color: #ffffff; color-scheme: dark;
    border-color: var(--text-accent, #8a6d3b); outline: none;
}
.lc-input:focus::placeholder { opacity: .5; }

.lc-seg { display: flex; gap: 6px; }
.lc-seg button {
    flex: 1; padding: 8px 4px; border-radius: 9px; font: inherit; font-size: 0.74rem;
    cursor: pointer; border: 1px solid rgba(140, 140, 140, 0.45); background: transparent; color: inherit;
}
.lc-seg button.on { background: var(--text-accent, #c9a96a); color: #1a1a1a; font-weight: 700; border-color: var(--text-accent, #c9a96a); }

/* A <select> must not inherit a fixed look that clips its own label. */
select.lc-input {
    appearance: none; -webkit-appearance: none;
    padding-right: 34px;
    text-overflow: ellipsis;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 16px center, right 11px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Tall-narrow phones (iPhone 15 Pro is 393x852) carry a header — logo, greeting,
   villa name, GPS line, two buttons — that leaves the tile area short. The
   tiles kept their 1.4 aspect ratio regardless, so two rows plus labels
   overflowed and the labels were the part that lost. Shorter tiles here buy
   roughly 80px, which is the difference between fitting and not. Wider or
   taller screens are untouched. */
@media (orientation: portrait) and (max-width: 500px) and (max-height: 950px) {
    #screen-home .tile { aspect-ratio: 1.85; }
    #screen-home .tile-label {
        font-size: clamp(0.72rem, 3.4vw, 0.9rem);
        line-height: 1.15;
    }
    #screen-home .tile-grid { gap: 8px; margin-bottom: 2px; }
    #screen-home .center-grid { padding: 6px 20px 10px; }
    #screen-home .progress-container { height: 28px; }
}