/* ============================================
           SECTION 1: BASE & LAYOUT
           ============================================ */
        :root {
            --primary: #0056b3;
            --primary-dark: #004085;
            --primary-light: #e7f3ff;
            --danger: #d9534f;
            --danger-dark: #c82333;
            --success: #28a745;
            --text: #333;
            --text-light: #666;
            --text-muted: #888;
            --bg: #f0f4f8;
            --bg-white: #ffffff;
            --border: #ccc;
            --border-light: #eee;
            --shadow: rgba(0,0,0,0.1);
            --shadow-heavy: rgba(0,0,0,0.2);
        }

        * { box-sizing: border-box; }

        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            display: flex; flex-direction: column; align-items: center; 
            background-color: var(--bg);
            padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
            margin: 0;
        }

        .title-text { 
            font-size: 1.2em; font-weight: bold; margin-bottom: 20px; 
            color: var(--text); text-align: center; 
        }

        /* ============================================
           SECTION 2: SETTINGS BAR
           ============================================ */
        .settings-bar { 
            margin-bottom: 15px; display: flex; gap: 10px; align-items: center; 
            background: var(--bg-white); padding: 10px 20px; border-radius: 8px; 
            box-shadow: 0 2px 5px var(--shadow); flex-wrap: wrap; justify-content: center;
        }
        .settings-bar select { 
            padding: 5px 10px; font-size: 1em; border-radius: 4px; 
            border: 1px solid var(--border); outline: none;
        }

        /* ============================================
           SECTION 3: CALENDAR GRID
           ============================================ */
        .calendar-container { 
            width: 100%; max-width: 600px; background: var(--bg-white); 
            border: 1px solid var(--border); box-shadow: 0 4px 12px var(--shadow); 
            border-radius: 8px; overflow: hidden; position: relative; 
        }

        .header { 
            display: flex; justify-content: space-between; align-items: center; 
            padding: 15px 20px; background-color: var(--primary); color: white; 
            font-weight: bold; font-size: 1.2em; 
        }
        .header button { 
            cursor: pointer; border: none; background: rgba(255,255,255,0.2); 
            border-radius: 4px; padding: 5px 15px; font-size: 1.2em; color: white; 
            transition: 0.2s; 
        }
        .header button:hover { background: rgba(255,255,255,0.4); }
        .header button:focus-visible { outline: 2px solid white; outline-offset: 2px; }

        .weekdays, .days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
        
        .weekdays div { 
            padding: 10px 0; background: #e9ecef; border-bottom: 1px solid var(--border); 
            border-right: 1px solid var(--border); font-weight: bold; color: var(--text); font-size: 0.85em; 
        }
        .weekdays div:last-child { border-right: none; }
        .weekdays .weekend { color: var(--danger); }

        .days .day-cell { 
            padding: 10px 2px; border-bottom: 1px solid var(--border-light); 
            border-right: 1px solid var(--border-light); cursor: pointer; 
            display: flex; flex-direction: column; align-items: center; 
            min-height: 95px; transition: background 0.2s; 
        }
        .days .day-cell.weekend { color: var(--danger); background-color: #fff9f9; }
        .days .day-cell:hover { background-color: #e3f2fd; }
        .days .day-cell:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
        .days .empty { background-color: #fafafa; cursor: default; min-height: 95px; }

        .date-number { 
            font-size: 1.1em; font-weight: 500; margin-bottom: 4px; width: 30px; height: 30px; 
            display: flex; justify-content: center; align-items: center; 
        }
        .today-number { 
            background-color: #007bff; color: white !important; border-radius: 50%; 
            box-shadow: 0 2px 4px var(--shadow-heavy); 
        }

        .holiday-text { 
            display: block; font-size: 0.65em; color: var(--danger); 
            line-height: 1.2; text-align: center; padding: 0 2px; font-weight: bold; 
        }
        .event-text-container { display: flex; flex-direction: column; align-items: center; margin-top: 5px; width: 100%; }
        .event-text { 
            display: block; font-size: 0.7em; color: var(--primary); font-weight: bold; 
            background-color: var(--primary-light); padding: 1px 5px; border-radius: 4px; margin-bottom: 2px; 
        }
        .add-more-text { display: block; font-size: 0.6em; color: var(--success); font-weight: bold; }

        .trial-status-bar {
            min-height: 32px;
            padding: 6px 10px;
            border-top: 1px solid var(--border-light);
            background: #f8fbff;
            color: var(--text-light);
            font-size: 0.78em;
            font-weight: 600;
            line-height: 1.3;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .trial-status-bar.is-warning {
            color: #b26a00;
            background: #fff8e8;
        }
        .trial-status-bar.is-urgent {
            color: #a61b1b;
            background: #fff0f0;
            font-weight: 700;
        }
        .trial-status-bar.is-expired {
            color: var(--danger);
            background: #fff3f3;
        }
        .trial-status-bar[hidden] { display: none !important; }

        #loadingOverlay { 
            display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(255,255,255,0.8); justify-content: center; align-items: center; 
            font-weight: bold; color: var(--primary); z-index: 10;
        }

        /* ============================================
           SECTION 4: MODAL & POPUPS
           ============================================ */
        .modal { 
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 1000; 
        }

        .modal-wrapper { position: relative; width: 400px; max-width: 90%; }
        .modal-content { 
            background: var(--bg-white); padding: 25px; border-radius: 12px; width: 100%; 
            text-align: center; box-shadow: 0 10px 25px var(--shadow-heavy); 
            max-height: 90vh; overflow-y: auto; 
        }

        .close-icon { 
            position: absolute; top: -12px; right: -12px; background: #dc3545; color: white; border-radius: 50%; 
            width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; 
            font-size: 1.2em; cursor: pointer; z-index: 1001; box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
            transition: 0.2s; border: 2px solid white; 
        }
        .close-icon:hover { background: var(--danger-dark); transform: scale(1.1); }
        .close-icon:focus-visible { outline: 2px solid white; outline-offset: 2px; }

        .time-input-container { 
            display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; 
            margin-top: 5px; background: white; cursor: text; transition: 0.2s; 
        }
        .time-input-container input[type="time"] { 
            border: none !important; margin: 0 !important; flex-grow: 1; outline: none; 
            padding: 10px; background: transparent; cursor: pointer; 
        }
        .time-input-label { 
            color: var(--text-muted); font-size: 0.9em; padding-right: 15px; 
            cursor: pointer; user-select: none; white-space: nowrap; 
        }

        .modal-content textarea { 
            margin-top: 5px; width: 100%; padding: 10px; border-radius: 6px; 
            border: 1px solid var(--border); font-family: inherit; resize: vertical; 
            min-height: 80px; font-size: 1em; 
        }

        .help-text { 
            display: block; font-size: 0.8em; color: #dc3545; text-align: left; 
            margin-top: 5px; font-style: normal; font-weight: 500; 
        }

        .modal-content button { 
            margin-top: 15px; width: 100%; padding: 12px; border-radius: 6px; 
            border: none; font-weight: bold; font-size: 1em; cursor: pointer; 
        }
        .btn-save { background-color: var(--success); color: white; }
        .btn-save:hover { background-color: #218838; }
        .btn-save:focus-visible { outline: 2px solid var(--success); outline-offset: 2px; }

        /* ============================================
           SECTION 5: EVENT LIST ITEMS
           ============================================ */
        .event-list-item { 
            background-color: #f8f9fa; border-left: 4px solid var(--primary); padding: 12px; 
            margin-bottom: 12px; border-radius: 4px; font-size: 0.95em; text-align: left; 
            word-wrap: break-word; position: relative; line-height: 1.5; 
        }
        .event-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 10px; }
        .action-btn { 
            cursor: pointer; font-size: 1.2em; opacity: 0.6; transition: 0.2s; 
            background: none; border: none; padding: 2px; 
        }
        .action-btn:hover { opacity: 1; transform: scale(1.1); }
        .action-btn:focus-visible { outline: 2px solid var(--primary); border-radius: 4px; }
        .event-time-badge { font-weight: bold; color: var(--primary); margin-right: 5px; font-size: 1.1em; }
        .event-detail-header { font-weight: bold; color: var(--text); }
        .event-detail-text { display: block; margin-top: 4px; color: #555; border-top: 1px solid var(--border-light); padding-top: 4px; }
        .rtl { direction: rtl; text-align: right; }

        .empty-state { 
            text-align: center; color: var(--text-muted); padding: 15px 0; font-style: italic; 
            font-size: 0.9em; background: #f9f9f9; border-radius: 8px; margin-bottom: 15px; 
            border: 1px dashed #ddd; 
        }

        /* ============================================
           SECTION 6: CONFIRM POPUPS
           ============================================ */
        @keyframes popInAlert { to { transform: scale(1); opacity: 1; } }
        .confirm-popup { 
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
            background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 1005; 
        }
        .confirm-content { 
            background: var(--bg-white); padding: 25px; border-radius: 16px; width: 320px; max-width: 90%; 
            text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.3); 
            animation: popInAlert 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
        }
        .confirm-icon { font-size: 3em; margin-bottom: 10px; display: block; }
        .confirm-message { font-size: 1.1em; color: #444; margin-bottom: 25px; line-height: 1.5; font-weight: bold; }
        .trial-notice-title { margin: 0 0 12px; color: var(--primary); font-size: 1.3em; line-height: 1.35; }
        .confirm-actions { display: flex; gap: 10px; justify-content: center; }
        .confirm-btn { 
            flex: 1; padding: 12px; border: none; border-radius: 8px; font-weight: bold; 
            cursor: pointer; transition: 0.2s; font-size: 1em; box-shadow: 0 2px 5px var(--shadow);
        }
        .confirm-btn-yes { background: #dc3545; color: white; }
        .confirm-btn-yes:hover { background: var(--danger-dark); transform: translateY(-2px); }
        .confirm-btn-no { background: #e2e6ea; color: var(--text); }
        .confirm-btn-no:hover { background: #dae0e5; transform: translateY(-2px); }
        .confirm-btn-ok { background: #007bff; color: white; }
        .confirm-btn-ok:hover { background: var(--primary); transform: translateY(-2px); }
        .confirm-btn:active { transform: translateY(0); }
        .confirm-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

        /* ============================================
           SECTION 7: RTL SUPPORT (Full Layout)
           ============================================ */
        html[dir="rtl"] .settings-bar { flex-direction: row-reverse; }
        html[dir="rtl"] .header { flex-direction: row-reverse; }
        html[dir="rtl"] .event-list-item { border-left: none; border-right: 4px solid var(--primary); text-align: right; }
        html[dir="rtl"] .event-actions { right: auto; left: 10px; }
        html[dir="rtl"] .event-time-badge { margin-right: 0; margin-left: 5px; }
        html[dir="rtl"] .time-input-label { padding-right: 0; padding-left: 15px; }
        html[dir="rtl"] .help-text { text-align: right; }

        /* ============================================
           SECTION 8: RESPONSIVE (Mobile)
           ============================================ */
        @media (max-width: 480px) {
            html, body { min-height: 100%; }
            body {
                min-height: 100dvh;
                padding: calc(10px + env(safe-area-inset-top))
                         calc(10px + env(safe-area-inset-right))
                         calc(10px + env(safe-area-inset-bottom))
                         calc(10px + env(safe-area-inset-left));
            }
            .calendar-container {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
            }
            .days {
                flex: 1 1 auto;
                min-height: 0;
                grid-auto-rows: minmax(70px, 1fr);
                align-content: stretch;
            }
            .days .day-cell { min-height: 70px; padding: 6px 2px; }
            .date-number { font-size: 0.95em; width: 26px; height: 26px; }
            .holiday-text { font-size: 0.55em; }
            .event-text { font-size: 0.6em; }
            .add-more-text { font-size: 0.5em; }
            .trial-status-bar { min-height: 30px; padding: 5px 8px; font-size: 0.72em; }
            .header { padding: 10px 15px; font-size: 1em; }
            .modal-wrapper { max-width: 95%; }
            .settings-bar { padding: 8px 12px; }
            .settings-bar select { font-size: 0.9em; }
        }

        @media (max-width: 360px) {
            .days { grid-auto-rows: minmax(55px, 1fr); }
            .days .day-cell { min-height: 55px; padding: 4px 1px; }
            .date-number { font-size: 0.85em; width: 22px; height: 22px; }
            .weekdays div { font-size: 0.7em; padding: 6px 0; }
        }

        /* ============================================
           SECTION 9: PAYWALL OVERLAY
           ============================================ */
        .paywall-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.72);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .paywall-card {
            width: 100%;
            max-width: 420px;
            background: var(--bg-white);
            border-radius: 18px;
            box-shadow: 0 18px 40px rgba(0,0,0,0.28);
            padding: 24px;
            text-align: center;
        }
        .paywall-badge {
            display: inline-block;
            background: var(--primary-light);
            color: var(--primary);
            font-weight: bold;
            font-size: 0.82em;
            border-radius: 999px;
            padding: 6px 12px;
            margin-bottom: 14px;
        }
        .paywall-title {
            margin: 0 0 10px;
            color: var(--text);
            font-size: 1.5em;
            line-height: 1.25;
        }
        .paywall-subtitle {
            margin: 0 0 16px;
            color: var(--text-light);
            line-height: 1.5;
            font-size: 0.98em;
        }
        .paywall-plan-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 16px 0;
        }
        .paywall-plan {
            border: 1px solid var(--border-light);
            border-radius: 12px;
            padding: 14px;
            text-align: left;
            background: #fafcff;
            cursor: pointer;
        }
        .paywall-plan:focus-visible {
            outline: 3px solid rgba(0, 86, 179, 0.28);
            outline-offset: 2px;
        }
        .paywall-plan.highlight {
            border-color: var(--primary);
            background: var(--primary-light);
        }
        .paywall-plan-title {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            font-weight: bold;
            color: var(--text);
            margin-bottom: 4px;
        }
        .paywall-plan-note {
            color: var(--text-light);
            font-size: 0.9em;
        }
        .paywall-offer {
            margin: 8px 0 14px;
            color: var(--danger);
            font-weight: bold;
        }
        .paywall-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .paywall-btn {
            width: 100%;
            border: none;
            border-radius: 10px;
            padding: 13px 16px;
            cursor: pointer;
            font-size: 1em;
            font-weight: bold;
        }
        .paywall-btn-primary {
            background: var(--primary);
            color: white;
        }
        .paywall-btn-secondary {
            background: #eef1f4;
            color: var(--text);
        }
        .paywall-footnote {
            margin-top: 12px;
            color: var(--text-muted);
            font-size: 0.82em;
            line-height: 1.45;
        }


        /* ============================================
           DEVELOPER-ONLY TRIAL TEST PANEL
           Hidden during normal app use.
           ============================================ */
        .trial-dev-content { width: 360px; }
        .trial-dev-note {
            color: var(--text-light); font-size: 0.9em; line-height: 1.5;
            margin: 0 0 16px;
        }
        .trial-dev-grid {
            display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .trial-dev-btn {
            border: 1px solid var(--border); background: #f8f9fa; color: var(--text);
            border-radius: 8px; padding: 10px 8px; font-weight: bold; cursor: pointer;
        }
        .trial-dev-btn:active { transform: translateY(1px); }
        .trial-dev-danger { background: #fff0f0; border-color: #efb3b3; color: var(--danger-dark); }
        .trial-dev-success { background: #eef9f0; border-color: #a9d8b3; color: #1e7e34; }
        .trial-dev-real { grid-column: 1 / -1; background: var(--primary-light); border-color: #a9c9eb; color: var(--primary-dark); }
        .trial-dev-close { width: 100%; margin-top: 12px; }

        @media (max-width: 360px) {
            .trial-dev-grid { grid-template-columns: 1fr; }
            .trial-dev-real { grid-column: auto; }
        }

/* ============================================
   SECTION 12: MONTH OVERVIEW PANELS
   Adds only important dates and monthly appointments below the calendar.
   ============================================ */
.calendar-summary-panel {
    width: 100%;
    max-width: 600px;
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-white);
    box-shadow: 0 4px 12px var(--shadow);
}

.calendar-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.calendar-summary-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 1.05em;
    line-height: 1.4;
}

.calendar-summary-count {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 0.76em;
    font-weight: 700;
    white-space: nowrap;
}

.important-dates-list,
.monthly-appointments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.important-date-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff9f9;
}

.important-date-badge {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    font-weight: 700;
}

.important-date-name {
    min-width: 0;
    color: var(--text);
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.calendar-summary-empty {
    padding: 16px 10px;
    color: var(--text-muted);
    font-size: 0.9em;
    text-align: center;
}

.monthly-appointment-item {
    width: 100%;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 9px;
    background: #fafcff;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.monthly-appointment-item:hover {
    border-color: #a9c9eb;
    background: var(--primary-light);
    transform: translateY(-1px);
}

.monthly-appointment-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.monthly-appointment-date-badge {
    display: flex;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    line-height: 1.05;
}

.monthly-appointment-date-badge strong {
    font-size: 1.2em;
}

.monthly-appointment-date-badge small {
    max-width: 48px;
    margin-top: 3px;
    overflow: hidden;
    font-size: 0.58em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.monthly-appointment-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.monthly-appointment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    color: var(--text-light);
    font-size: 0.78em;
}

.monthly-appointment-time {
    color: var(--primary-dark);
    font-weight: 700;
}

.monthly-appointment-message {
    color: var(--text);
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.monthly-appointment-chevron {
    color: var(--primary);
    font-size: 1.5em;
    font-weight: 700;
}

.monthly-appointments-toggle {
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #a9c9eb;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
}

.monthly-appointments-toggle:hover {
    border-color: var(--primary);
    background: #d8ebff;
}

.monthly-appointments-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

html[dir="rtl"] .monthly-appointment-item {
    text-align: right;
    grid-template-columns: 18px minmax(0, 1fr) 54px;
}

html[dir="rtl"] .monthly-appointment-date-badge { grid-column: 3; }
html[dir="rtl"] .monthly-appointment-content { grid-column: 2; grid-row: 1; }
html[dir="rtl"] .monthly-appointment-chevron { grid-column: 1; grid-row: 1; transform: rotate(180deg); }

@media (max-width: 480px) {
    .calendar-summary-panel {
        margin-top: 12px;
        padding: 14px;
    }

    .calendar-summary-header {
        flex-direction: column;
        gap: 7px;
    }

    .monthly-appointment-item {
        grid-template-columns: 48px minmax(0, 1fr) 14px;
        gap: 9px;
        padding: 8px;
    }

    .monthly-appointment-date-badge {
        min-height: 48px;
    }
}



/* ============================================
   SECTION 13: FIXED DESKTOP DASHBOARD
   Calendar on the left, month overview on the right.
   The main page stays within one desktop viewport.
   ============================================ */
@media (min-width: 981px) and (min-height: 701px) {
    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body {
        display: block;
        padding: 14px 18px;
    }

    .app-shell {
        width: min(1360px, 100%);
        height: 100%;
        margin: 0 auto;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 12px;
    }

    .app-header {
        display: grid;
        grid-template-columns: minmax(360px, 470px) minmax(0, 1fr);
        align-items: center;
        gap: 18px;
        min-height: 54px;
    }

    .settings-bar {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 8px 14px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .settings-bar label {
        white-space: nowrap;
    }

    .settings-bar select {
        min-width: 0;
        flex: 1 1 auto;
    }

    .title-text {
        min-width: 0;
        margin: 0;
        font-size: 1.15em;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html[dir="rtl"] .title-text {
        text-align: right;
    }

    .dashboard-layout {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(620px, 2fr) minmax(320px, 0.95fr);
        gap: 16px;
        align-items: stretch;
    }

    .calendar-column,
    .summary-column {
        min-width: 0;
        min-height: 0;
    }

    .calendar-column {
        display: flex;
    }

    .calendar-container {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        margin: 0;
    }

    .header {
        min-height: 56px;
        padding: 10px 18px;
    }

    .weekdays {
        min-height: 40px;
    }

    .weekdays div {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 2px;
    }

    .days {
        min-height: 0;
        height: 100%;
        grid-auto-rows: minmax(0, 1fr);
        align-content: stretch;
    }

    .days .day-cell,
    .days .empty {
        min-height: 0;
        height: auto;
        padding: 7px 2px;
        overflow: hidden;
    }

    .holiday-text {
        max-width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .event-text-container {
        margin-top: 3px;
    }

    .summary-column {
        display: grid;
        grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 14px;
    }

    .calendar-summary-panel {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 14px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .calendar-summary-header {
        flex: 0 0 auto;
        align-items: center;
        padding-bottom: 9px;
    }

    .calendar-summary-header h2 {
        min-width: 0;
        font-size: 0.98em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .important-dates-list,
    .monthly-appointments-list {
        min-height: 0;
        flex: 1 1 auto;
        gap: 7px;
        margin-top: 9px;
        overflow: hidden;
    }

    .important-date-item {
        min-height: 38px;
        padding: 6px 8px;
    }

    .important-date-badge {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 0.86em;
    }

    .important-date-name {
        font-size: 0.86em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .monthly-appointment-item {
        grid-template-columns: 46px minmax(0, 1fr) 14px;
        gap: 8px;
        min-height: 54px;
        padding: 7px;
    }

    .monthly-appointment-date-badge {
        min-height: 46px;
    }

    .monthly-appointment-date-badge strong {
        font-size: 1.05em;
    }

    .monthly-appointment-meta {
        gap: 4px 8px;
        font-size: 0.7em;
    }

    .monthly-appointment-message {
        font-size: 0.84em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .summary-view-all,
    .monthly-appointments-toggle {
        flex: 0 0 auto;
        margin-top: 9px;
        padding: 8px 12px;
        font-size: 0.82em;
    }

    .calendar-summary-empty {
        margin: auto 0;
        padding: 10px 6px;
    }
}

.summary-view-all {
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #a9c9eb;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    font: inherit;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
}

.summary-view-all:hover {
    border-color: var(--primary);
    background: #d8ebff;
}

.summary-view-all:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Full lists are shown in a modal, keeping the dashboard page fixed. */
.summary-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.58);
}

.summary-modal-card {
    position: relative;
    width: min(720px, 94vw);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 14px;
    background: var(--bg-white);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.summary-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #eef1f4;
    color: var(--text);
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
}

html[dir="rtl"] .summary-modal-close {
    right: auto;
    left: 12px;
}

.summary-modal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 48px 14px 0;
    border-bottom: 1px solid var(--border-light);
}

html[dir="rtl"] .summary-modal-heading {
    padding-right: 0;
    padding-left: 48px;
}

.summary-modal-heading h2 {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size: 1.15em;
    line-height: 1.4;
}

.summary-modal-list {
    min-height: 0;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.summary-modal-important-date {
    min-height: 48px;
}

.summary-modal-appointment {
    flex: 0 0 auto;
}

/* Smaller windows keep the original stacked, scrollable behavior. */
@media (max-width: 980px), (max-height: 700px) {
    body {
        overflow-y: auto;
    }

    .app-shell {
        width: 100%;
    }

    .app-header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dashboard-layout {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .calendar-column,
    .summary-column {
        width: 100%;
        max-width: 600px;
    }

    .summary-column {
        display: flex;
        flex-direction: column;
    }
}

/* ============================================
   SECTION 14: PROFESSIONAL WINDOWS UI REFRESH
   Unified toolbar, calmer enterprise palette, refined cards and empty states.
   ============================================ */
:root {
    --primary: #185c9d;
    --primary-dark: #123f6d;
    --primary-strong: #0f4f8a;
    --primary-light: #eaf3fb;
    --primary-soft: #f3f8fd;
    --danger: #c64545;
    --danger-dark: #a93232;
    --success: #2d7d57;
    --warning: #9a6700;
    --text: #1f2937;
    --text-light: #586578;
    --text-muted: #7b8797;
    --bg: #eef3f8;
    --bg-white: #ffffff;
    --surface-muted: #f7f9fc;
    --border: #d6dee8;
    --border-light: #e8edf3;
    --shadow: rgba(30, 58, 90, 0.09);
    --shadow-heavy: rgba(21, 45, 72, 0.18);
    --card-radius: 14px;
}

html {
    color-scheme: light;
}

body {
    font-family: "Segoe UI Variable", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 10% -15%, rgba(58, 130, 196, 0.09), transparent 32%),
        linear-gradient(180deg, #f5f8fb 0%, var(--bg) 100%);
}

button,
select,
textarea,
input {
    font: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

/* Unified application toolbar */
.app-header {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 14px;
    border: 1px solid rgba(214, 222, 232, 0.9);
    border-radius: var(--card-radius);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 22px rgba(30, 58, 90, 0.07);
    backdrop-filter: blur(14px);
}

.brand-block {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #246ead, #104c82);
    box-shadow: 0 5px 14px rgba(24, 92, 157, 0.24);
}

.brand-mark svg,
.region-label svg,
.month-nav-button svg,
.summary-heading-icon svg,
.calendar-empty-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-copy {
    min-width: 0;
}

.brand-title {
    color: var(--primary-dark);
    font-size: 1.02rem;
    font-weight: 720;
    letter-spacing: 0.01em;
    line-height: 1.25;
}

.title-text {
    max-width: 620px;
    margin: 2px 0 0;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.settings-bar {
    min-width: 300px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    flex-wrap: nowrap;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.region-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.region-label svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.settings-bar select {
    min-width: 205px;
    height: 36px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    outline: none;
    color: var(--text);
    background-color: var(--surface-muted);
    font-size: 0.82rem;
    font-weight: 550;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.settings-bar select:hover {
    border-color: #aebdce;
    background: #fff;
}

.settings-bar select:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(24, 92, 157, 0.12);
}

/* Trial status is now a compact header badge rather than a calendar row. */
.trial-status-bar {
    min-height: 34px;
    max-width: 260px;
    padding: 7px 12px;
    border: 1px solid #d5e5f4;
    border-radius: 999px;
    background: #f1f7fd;
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
}

.trial-status-bar.is-warning {
    border-color: #f0d79d;
    color: #805400;
    background: #fff8e8;
}

.trial-status-bar.is-urgent,
.trial-status-bar.is-expired {
    border-color: #efc0c0;
    color: #9d2828;
    background: #fff1f1;
}

/* Main surfaces */
.calendar-container,
.calendar-summary-panel {
    border: 1px solid rgba(214, 222, 232, 0.95);
    border-radius: var(--card-radius);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 26px rgba(30, 58, 90, 0.08);
}

.calendar-container {
    overflow: hidden;
}

.header {
    min-height: 58px;
    padding: 8px 14px;
    color: var(--text);
    background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
    border-bottom: 1px solid var(--border-light);
    font-size: 1rem;
}

.calendar-period {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#monthYear {
    color: var(--primary-dark);
    font-size: 1.22rem;
    font-weight: 720;
    letter-spacing: 0.005em;
}

.header .month-nav-button {
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--primary-dark);
    background: transparent;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.header .month-nav-button svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.1;
}

.header .month-nav-button:hover {
    border-color: #d5e4f3;
    background: var(--primary-light);
    transform: translateY(-1px);
}

.header .month-nav-button:active {
    transform: translateY(0);
}

.header .month-nav-button:focus-visible {
    outline: 3px solid rgba(24, 92, 157, 0.2);
    outline-offset: 1px;
}

.today-button {
    min-height: 30px;
    margin: 0;
    padding: 5px 12px;
    border: 1px solid #c9dced;
    border-radius: 999px;
    color: var(--primary-dark);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 680;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.today-button:hover {
    border-color: #9fc0df;
    background: var(--primary-light);
}

.weekdays {
    background: #f3f6fa;
    border-bottom: 1px solid var(--border-light);
}

.weekdays div {
    padding: 9px 3px;
    border: 0;
    border-right: 1px solid var(--border-light);
    background: transparent;
    color: #516072;
    font-size: 0.76rem;
    font-weight: 680;
    letter-spacing: 0.01em;
}

.weekdays .weekend {
    color: #b94b4b;
}

.days {
    background: #fff;
}

.days .day-cell,
.days .empty {
    position: relative;
    min-width: 0;
    padding: 8px 8px 6px;
    align-items: flex-start;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    background: #fff;
}

.days .empty {
    background: #f9fbfd;
}

.days .day-cell.weekend {
    color: #ba4646;
    background: #fffafa;
}

.days .day-cell:hover {
    z-index: 1;
    background: #f1f7fd;
    box-shadow: inset 0 0 0 1px #c4daee;
}

.days .day-cell.selected-day {
    z-index: 2;
    background: #edf5fc;
    box-shadow: inset 0 0 0 2px var(--primary);
}

.days .day-cell:focus-visible {
    z-index: 3;
    outline: none;
    box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 2px rgba(24, 92, 157, 0.1);
}

.date-number {
    width: 28px;
    height: 28px;
    margin: 0 0 4px;
    justify-content: flex-start;
    color: inherit;
    font-size: 0.94rem;
    font-weight: 650;
}

.today-number {
    justify-content: center;
    color: #fff !important;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 3px 9px rgba(24, 92, 157, 0.24);
}

.holiday-text {
    width: 100%;
    padding: 0;
    color: #bc3f3f;
    font-size: 0.63rem;
    font-weight: 650;
    line-height: 1.3;
    text-align: left;
}

.event-text-container {
    width: auto;
    max-width: 100%;
    margin-top: 5px;
    padding: 3px 7px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    border: 1px solid #d7e6f4;
    border-radius: 999px;
    background: var(--primary-soft);
}

.event-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 2px rgba(24, 92, 157, 0.1);
}

.event-text {
    max-width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: var(--primary-dark);
    background: transparent;
    font-size: 0.64rem;
    font-weight: 680;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-more-text {
    display: none;
}

#loadingOverlay {
    border-radius: var(--card-radius);
    color: var(--primary-dark);
    background: rgba(250, 252, 255, 0.9);
    backdrop-filter: blur(4px);
}

/* Summary panels */
.calendar-summary-panel {
    padding: 15px;
}

.calendar-summary-header {
    min-height: 46px;
    padding-bottom: 11px;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
}

.summary-heading-group {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.summary-heading-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.summary-heading-icon svg {
    width: 18px;
    height: 18px;
}

.important-icon {
    color: #a15c16;
    background: #fff3df;
}

.appointment-icon {
    color: var(--primary-dark);
    background: var(--primary-light);
}

.calendar-summary-header h2 {
    color: #263445;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.35;
}

.calendar-summary-count {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 5px 9px;
    border: 1px solid #d9e5ef;
    border-radius: 999px;
    color: #496078;
    background: #f5f8fb;
    font-size: 0.69rem;
    font-weight: 680;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.important-dates-list,
.monthly-appointments-list {
    gap: 8px;
    margin-top: 10px;
}

.important-date-item {
    min-height: 42px;
    padding: 7px 9px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--surface-muted);
}

.important-date-badge {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 9px;
    color: #8b4c12;
    background: #ffecd2;
    font-size: 0.8rem;
    font-weight: 750;
}

.important-date-name {
    color: #344255;
    font-size: 0.8rem;
    font-weight: 600;
}

.monthly-appointment-item {
    min-height: 58px;
    padding: 7px;
    border: 1px solid var(--border-light);
    border-radius: 11px;
    background: #fbfcfe;
    box-shadow: none;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.monthly-appointment-item:hover {
    border-color: #bfd4e8;
    background: #f2f7fc;
    transform: translateY(-1px);
}

.monthly-appointment-date-badge {
    border-radius: 9px;
    background: linear-gradient(145deg, #2169a9, #14548e);
    box-shadow: 0 3px 10px rgba(24, 92, 157, 0.16);
}

.monthly-appointment-date-badge strong {
    font-size: 1.04rem;
}

.monthly-appointment-date-badge small {
    opacity: 0.9;
}

.monthly-appointment-meta {
    color: #6d7887;
    font-size: 0.69rem;
}

.monthly-appointment-time {
    color: var(--primary-dark);
}

.monthly-appointment-message {
    color: #2b3848;
    font-size: 0.8rem;
    font-weight: 620;
}

.monthly-appointment-chevron {
    color: #6e9cc5;
    font-size: 1.18rem;
}

.calendar-summary-empty {
    min-height: 150px;
    margin: auto 0;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text-muted);
    text-align: center;
}

.calendar-summary-empty strong {
    max-width: 300px;
    color: #667487;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

.calendar-summary-empty > span:not(.calendar-empty-icon) {
    max-width: 300px;
    color: #909aaa;
    font-size: 0.7rem;
    line-height: 1.4;
}

.calendar-empty-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 2px;
    border-radius: 14px;
    color: #7e9fbe;
    background: #eef5fb;
}

.calendar-empty-icon svg {
    width: 24px;
    height: 24px;
}

.important-empty .calendar-empty-icon {
    color: #ad7b43;
    background: #fff5e7;
}

.summary-view-all,
.monthly-appointments-toggle {
    min-height: 34px;
    margin-top: 9px;
    padding: 7px 12px;
    border: 1px solid #c9dced;
    border-radius: 9px;
    color: var(--primary-dark);
    background: #f4f8fc;
    font-size: 0.73rem;
    font-weight: 680;
}

.summary-view-all:hover,
.monthly-appointments-toggle:hover {
    border-color: #a7c5df;
    background: var(--primary-light);
}

/* More native-looking dialogs */
.modal,
.confirm-popup,
.summary-modal,
.paywall-overlay {
    backdrop-filter: blur(3px);
}

.modal-content,
.summary-modal-card,
.confirm-content {
    border: 1px solid rgba(220, 226, 234, 0.95);
    border-radius: 16px;
    box-shadow: 0 22px 55px rgba(21, 45, 72, 0.22);
}

/* Desktop fixed dashboard remains one viewport. */
@media (min-width: 981px) and (min-height: 701px) {
    body {
        padding: 12px 16px;
    }

    .app-shell {
        width: min(1420px, 100%);
        grid-template-rows: 64px minmax(0, 1fr);
        gap: 12px;
    }

    .app-header {
        min-height: 64px;
        display: flex;
        grid-template-columns: none;
    }

    .settings-bar {
        width: auto;
    }

    .title-text {
        margin: 2px 0 0;
        font-size: 0.75rem;
        text-align: left;
    }

    .dashboard-layout {
        grid-template-columns: minmax(650px, 2.15fr) minmax(330px, 0.95fr);
        gap: 14px;
    }

    .calendar-container {
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .summary-column {
        grid-template-rows: minmax(0, 0.42fr) minmax(0, 0.58fr);
        gap: 12px;
    }

    .header {
        min-height: 58px;
        padding: 8px 14px;
    }

    .weekdays {
        min-height: 38px;
    }

    .weekdays div {
        padding: 7px 3px;
    }

    .days .day-cell,
    .days .empty {
        padding: 7px 8px 5px;
    }

    .calendar-summary-panel {
        padding: 13px;
    }

    .calendar-summary-header {
        min-height: 44px;
        padding-bottom: 9px;
    }

    .calendar-summary-header h2 {
        font-size: 0.88rem;
    }

    .summary-heading-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .important-dates-list,
    .monthly-appointments-list {
        margin-top: 8px;
        gap: 7px;
    }

    .calendar-summary-empty {
        min-height: 0;
        padding: 10px 6px;
    }

    .calendar-empty-icon {
        width: 44px;
        height: 44px;
    }
}

/* Compact and stacked windows retain full accessibility and scrolling. */
@media (max-width: 1100px) {
    .trial-status-bar {
        display: none;
    }

    .settings-bar {
        min-width: 270px;
    }
}

@media (max-width: 980px), (max-height: 700px) {
    body {
        display: block;
        padding: 12px;
    }

    .app-header {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

    .brand-block {
        justify-content: flex-start;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .settings-bar {
        width: 100%;
        min-width: 0;
    }

    .settings-bar select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .trial-status-bar {
        display: flex;
    }

    .calendar-column,
    .summary-column {
        max-width: 760px;
    }

    .calendar-container {
        max-width: none;
    }

    .summary-column {
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .brand-mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .brand-title {
        font-size: 0.95rem;
    }

    .title-text {
        font-size: 0.7rem;
    }

    .header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .region-label {
        display: none;
    }

    .trial-status-bar {
        max-width: none;
    }

    .calendar-period {
        gap: 7px;
    }

    #monthYear {
        font-size: 1.05rem;
    }

    .today-button {
        padding-inline: 9px;
    }

    .days .day-cell,
    .days .empty {
        padding: 6px 4px;
    }

    .holiday-text {
        font-size: 0.58rem;
    }

    .event-text-container {
        padding: 3px 5px;
    }

    .event-text {
        font-size: 0.58rem;
    }
}

html[dir="rtl"] .title-text,
html[dir="rtl"] .holiday-text {
    text-align: right;
}

html[dir="rtl"] .settings-bar select {
    padding-right: 11px;
    padding-left: 34px;
}

/* Specificity fix: the Today pill must not inherit the white text used by legacy header buttons. */
.header .today-button {
    width: auto;
    height: auto;
    color: var(--primary-dark);
    background: #fff;
}

.header .today-button:hover {
    color: var(--primary-dark);
    background: var(--primary-light);
}

.header .today-button {
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #c9dced;
    border-radius: 999px;
    color: var(--primary-dark);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 680;
    line-height: 1.1;
}

/* ============================================
   SECTION 15: HOTFIX 5 — READABILITY & COLOR EMPHASIS
   Larger calendar typography, centered dates, stronger title hierarchy,
   red inline usage guidance, and professional color bands.
   ============================================ */

/* Stronger brand hierarchy with the guidance continuing on the same line. */
.brand-block {
    flex: 1 1 auto;
    min-width: 0;
}

.brand-copy {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
    overflow: hidden;
}

.brand-title {
    flex: 0 0 auto;
    color: #123f6d;
    font-size: 1.34rem;
    font-weight: 780;
    letter-spacing: 0.005em;
    line-height: 1.2;
}

.title-text {
    min-width: 0;
    max-width: 540px;
    margin: 0;
    color: #c93636;
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
}

.region-label {
    font-size: 0.86rem;
}

.settings-bar select {
    font-size: 0.9rem;
}

.trial-status-bar {
    font-size: 0.78rem;
}

/* More distinctive calendar heading band. */
.header {
    min-height: 62px;
    color: #ffffff;
    background: linear-gradient(100deg, #0f4f8a 0%, #1f6fb4 58%, #2984c7 100%);
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

#monthYear {
    color: #ffffff;
    font-size: 1.48rem;
    font-weight: 780;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}

.header .month-nav-button {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
}

.header .month-nav-button:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.2);
}

.header .today-button,
.header .today-button:hover {
    color: #ffffff;
}

.header .today-button {
    min-height: 32px;
    padding: 6px 13px;
    border-color: rgba(255, 255, 255, 0.52);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.82rem;
    font-weight: 730;
}

.header .today-button:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.24);
}

/* Stronger weekday strip and larger weekday labels. */
.weekdays {
    background: linear-gradient(180deg, #e9f3fc 0%, #dceaf7 100%);
    border-bottom: 1px solid #c8d9e9;
}

.weekdays div {
    padding: 10px 3px;
    color: #324b64;
    font-size: 0.95rem;
    font-weight: 760;
}

.weekdays .weekend {
    color: #c13e45;
    background: rgba(255, 244, 244, 0.65);
}

/* Date numerals are larger and horizontally centered in every day cell. */
.days .day-cell,
.days .empty {
    align-items: center;
    padding: 8px 7px 6px;
    text-align: center;
}

.date-number {
    width: 36px;
    height: 36px;
    margin: 0 auto 6px;
    justify-content: center;
    align-items: center;
    color: inherit;
    font-size: 1.22rem;
    font-weight: 740;
    line-height: 1;
}

.holiday-text {
    font-size: 0.72rem;
    line-height: 1.32;
    text-align: center;
}

.event-text-container {
    margin-top: 6px;
}

.event-text {
    font-size: 0.72rem;
}

/* Colored heading bands for the two overview cards. */
.calendar-summary-panel {
    position: relative;
    overflow: hidden;
    padding-top: 18px;
}

.calendar-summary-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
}

.important-dates-panel::before {
    background: linear-gradient(90deg, #e69a2d 0%, #f3bd5c 100%);
}

.monthly-appointments-panel::before {
    background: linear-gradient(90deg, #185c9d 0%, #3d8dcc 100%);
}

.calendar-summary-header {
    min-height: 50px;
}

.calendar-summary-header h2 {
    font-size: 1.02rem;
    font-weight: 740;
}

.calendar-summary-count {
    font-size: 0.76rem;
}

.important-date-item {
    min-height: 47px;
}

.important-date-badge {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 0.9rem;
}

.important-date-name {
    font-size: 0.88rem;
    line-height: 1.35;
}

.monthly-appointment-item {
    min-height: 62px;
}

.monthly-appointment-date-badge strong {
    font-size: 1.14rem;
}

.monthly-appointment-date-badge small {
    font-size: 0.64rem;
}

.monthly-appointment-meta {
    font-size: 0.75rem;
}

.monthly-appointment-message {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-view-all,
.monthly-appointments-toggle {
    font-size: 0.8rem;
}

.calendar-summary-empty strong {
    font-size: 0.86rem;
}

.calendar-summary-empty > span:not(.calendar-empty-icon) {
    font-size: 0.76rem;
}

@media (min-width: 981px) and (min-height: 701px) {
    .app-shell {
        grid-template-rows: 68px minmax(0, 1fr);
    }

    .app-header {
        min-height: 68px;
    }

    .header {
        min-height: 62px;
    }

    .weekdays {
        min-height: 42px;
    }

    .weekdays div {
        padding: 9px 3px;
    }

    .calendar-summary-panel {
        padding-top: 17px;
    }

    .calendar-summary-header h2 {
        font-size: 0.98rem;
    }
}

@media (max-width: 1180px) {
    .title-text {
        max-width: 360px;
    }
}

@media (max-width: 980px), (max-height: 700px) {
    .brand-copy {
        flex-wrap: wrap;
        gap: 3px 12px;
        overflow: visible;
    }

    .title-text {
        flex-basis: 100%;
        max-width: none;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .brand-title {
        font-size: 1.16rem;
    }

    .title-text {
        font-size: 0.82rem;
    }

    #monthYear {
        font-size: 1.22rem;
    }

    .weekdays div {
        font-size: 0.8rem;
    }

    .date-number {
        width: 31px;
        height: 31px;
        font-size: 1.02rem;
    }
}

html[dir="rtl"] .title-text {
    text-align: right;
}


/* =========================================================
   HOTFIX 6 — Restore original appointment wording in day cells
   Required display for Thai:
   มีนัด 5 เรื่อง
   + เพิ่มเรื่องนัดหมาย
   ========================================================= */
.event-text-container {
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
    padding: 0 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.event-dot {
    display: none;
}

.event-text {
    max-width: 100%;
    margin: 0;
    padding: 2px 7px;
    display: block;
    border: 1px solid #d7e6f4;
    border-radius: 7px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 0.72rem;
    font-weight: 720;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-more-text {
    max-width: 100%;
    display: block;
    color: #16804f;
    font-size: 0.66rem;
    font-weight: 720;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 980px), (max-height: 700px) {
    .event-text-container {
        margin-top: 4px;
        gap: 2px;
    }

    .event-text {
        padding: 1px 5px;
        font-size: 0.64rem;
    }

    .add-more-text {
        font-size: 0.58rem;
    }
}

/* ============================================
   HOTFIX 7 — Wider appointment modal
   Scope: visual layout only. Text, controls, event handlers,
   storage, notifications, and appointment behavior are unchanged.
   ============================================ */

/* Give the daily appointment dialog enough horizontal space so that
   Thai labels and saved-event headings do not wrap unnecessarily. */
#eventModal .modal-wrapper {
    width: min(720px, calc(100vw - 48px));
    max-width: none;
}

#eventModal .modal-content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-height: min(92vh, 860px);
    padding: 28px 32px 30px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    border: 1px solid #d7e3ee;
    border-top: 5px solid var(--primary);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(238, 247, 255, 0.82) 0, rgba(255, 255, 255, 0) 118px),
        var(--bg-white);
    box-shadow: 0 28px 75px rgba(15, 42, 68, 0.30);
}

#eventModal .close-icon {
    top: 16px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 3px solid #ffffff;
    font-size: 1.1rem;
    box-shadow: 0 7px 18px rgba(169, 35, 48, 0.28);
}

#eventModal #modalTitle {
    margin: 0 !important;
    padding: 0 56px 5px 0;
    color: var(--primary-dark) !important;
    font-size: 1.48rem;
    font-weight: 760;
    line-height: 1.35 !important;
    letter-spacing: -0.01em;
    text-align: left;
}

#eventModal #selectedDateText {
    margin: 8px 0 20px !important;
    padding: 11px 15px !important;
    color: #3f5970 !important;
    font-size: 1.02rem !important;
    font-weight: 650;
    line-height: 1.45;
    text-align: left;
    background: #f2f7fb;
    border: 1px solid #d8e6f1 !important;
    border-radius: 10px;
}

#eventModal #existingEventsContainer {
    text-align: left;
}

#eventModal #existingEventsContainer > div:first-child:not(.event-list-item):not(.empty-state) {
    margin: 0 0 10px !important;
    color: #344e65 !important;
    font-size: 0.95rem !important;
    font-weight: 730 !important;
}

#eventModal .event-list-item {
    min-height: 72px;
    margin-bottom: 11px;
    padding: 14px 96px 13px 17px;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.5;
    background: #f8fbfd;
    border: 1px solid #dbe7f0;
    border-left: 5px solid var(--primary);
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(27, 72, 108, 0.06);
}

/* Keep the time and the original appointment heading on one line on
   normal desktop widths. The exact original wording is untouched. */
#eventModal .event-list-item br {
    display: none;
}

#eventModal .event-time-badge,
#eventModal .event-detail-header {
    display: inline-block;
    vertical-align: baseline;
    white-space: nowrap;
}

#eventModal .event-time-badge {
    margin: 0 12px 0 0;
    color: #0e64a8;
    font-size: 1.04rem;
}

#eventModal .event-detail-header {
    color: #253f55;
    font-size: 0.98rem;
}

#eventModal .event-detail-text {
    display: block;
    margin-top: 8px;
    padding-top: 7px;
    color: #4f6170;
    font-size: 0.95rem;
    border-top: 1px solid #e3ebf1;
}

#eventModal .event-actions {
    top: 12px;
    right: 14px;
    gap: 7px;
}

#eventModal .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    opacity: 0.78;
    font-size: 1rem;
    background: #ffffff;
    border: 1px solid #d7e2eb;
    border-radius: 8px;
}

#eventModal .action-btn:hover {
    opacity: 1;
    background: #eef6fc;
    border-color: #adcce4;
    transform: translateY(-1px);
}

#eventModal #dividerLine {
    margin: 20px 0 !important;
    border-top-color: #cfdde8 !important;
}

#eventModal #eventDetailLabel,
#eventModal #timeLabelUI {
    color: #283f53;
    font-size: 0.98rem !important;
    font-weight: 720 !important;
}

#eventModal #eventMessage {
    min-height: 108px;
    margin-top: 7px;
    padding: 13px 14px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.55;
    background: #ffffff;
    border: 1px solid #cbd9e4;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(22, 52, 77, 0.035);
}

#eventModal #eventMessage:focus {
    outline: none;
    border-color: #4e97cd;
    box-shadow: 0 0 0 3px rgba(39, 126, 188, 0.14);
}

#eventModal .help-text {
    margin-top: 7px;
    font-size: 0.82rem;
    line-height: 1.45;
}

#eventModal #timeLabelUI {
    margin-top: 18px !important;
}

#eventModal .time-input-container {
    min-height: 50px;
    margin-top: 7px;
    border-color: #cbd9e4;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(22, 52, 77, 0.035);
}

#eventModal .time-input-container:focus-within {
    border-color: #4e97cd;
    box-shadow: 0 0 0 3px rgba(39, 126, 188, 0.14);
}

#eventModal .time-input-container input[type="time"] {
    min-height: 48px;
    padding: 11px 13px;
    color: #233d52;
    font-size: 1rem;
    font-weight: 650;
}

#eventModal .time-input-label {
    padding: 0 15px;
    color: #607487;
    font-size: 0.9rem;
}

#eventModal #saveBtnUI {
    min-height: 50px;
    margin-top: 18px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 1.02rem;
    box-shadow: 0 7px 18px rgba(29, 122, 79, 0.18);
}

#eventModal #saveBtnUI:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(29, 122, 79, 0.23);
}

/* Preserve comfortable operation on narrow windows and mobile previews. */
@media (max-width: 700px) {
    #eventModal .modal-wrapper {
        width: calc(100vw - 24px);
    }

    #eventModal .modal-content {
        max-height: calc(100vh - 24px);
        padding: 24px 18px 22px;
        border-radius: 15px;
    }

    #eventModal .close-icon {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
    }

    #eventModal #modalTitle {
        padding-right: 46px;
        font-size: 1.3rem;
    }

    #eventModal .event-list-item {
        padding: 14px 14px 13px;
    }

    #eventModal .event-actions {
        position: static;
        justify-content: flex-end;
        margin-bottom: 8px;
    }

    #eventModal .event-list-item br {
        display: block;
    }

    #eventModal .event-time-badge,
    #eventModal .event-detail-header {
        display: inline;
        white-space: normal;
    }
}

/* ============================================
   HOTFIX 8 — Square, sticky appointment modal
   Scope: visual layout only. All original text, controls, event handlers,
   storage, notifications, and appointment behavior remain unchanged.
   ============================================ */

/* A more structured, business-style dialog with restrained square corners. */
#eventModal {
    background: rgba(10, 28, 44, 0.68);
    backdrop-filter: blur(3px);
}

#eventModal .modal-wrapper {
    width: min(760px, calc(100vw - 48px));
    max-width: none;
}

#eventModal .modal-content {
    box-sizing: border-box;
    width: 100%;
    max-height: min(92vh, 880px);
    padding: 0 30px 30px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    text-align: left;
    background: #f7fafc;
    border: 1px solid #afc7db;
    border-radius: 6px;
    box-shadow: 0 30px 78px rgba(7, 31, 51, 0.38);
}

/* The title and its original reminder sentence stay visible while the
   appointment list/form scrolls underneath. The wording itself is untouched. */
#eventModal #modalTitle {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 -30px 22px !important;
    padding: 20px 74px 17px 30px;
    color: #ffffff !important;
    font-size: 1.5rem;
    font-weight: 780;
    line-height: 1.35 !important;
    letter-spacing: -0.01em;
    text-align: left;
    background: linear-gradient(100deg, #123f68 0%, #156da7 68%, #1f8cc7 100%);
    border-top: 6px solid #f2a128;
    border-bottom: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 6px 18px rgba(15, 64, 103, 0.18);
}

#eventModal #modalTitle::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: -1px;
    width: 116px;
    height: 4px;
    background: #f2a128;
}

#eventModal #modalTitle span {
    display: inline-block;
    margin-top: 5px;
    color: #e8f3fb !important;
    font-size: 0.66em !important;
    font-weight: 500 !important;
    line-height: 1.5;
}

/* The close control remains stationary because it sits outside the scrolling
   content area. Its shape now matches the square visual language. */
#eventModal .close-icon {
    top: 16px;
    right: 18px;
    z-index: 30;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.96);
    border-radius: 5px;
    background: #d93645;
    font-size: 1.12rem;
    box-shadow: 0 7px 18px rgba(122, 20, 32, 0.32);
}

#eventModal .close-icon:hover {
    background: #bd2735;
    transform: translateY(-1px);
}

#eventModal #selectedDateText {
    margin: 0 0 20px !important;
    padding: 13px 16px 13px 20px !important;
    color: #29475f !important;
    font-size: 1.03rem !important;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    background: #edf5fb;
    border: 1px solid #c6d9e8 !important;
    border-left: 6px solid #1c77b5 !important;
    border-radius: 4px;
}

#eventModal #existingEventsContainer {
    text-align: left;
}

#eventModal #existingEventsContainer > div:first-child:not(.event-list-item):not(.empty-state) {
    margin: 0 0 10px !important;
    padding: 0 0 8px;
    color: #233e54 !important;
    font-size: 1rem !important;
    font-weight: 760 !important;
    border-bottom: 2px solid #d7e4ee;
}

#eventModal .empty-state {
    padding: 17px 14px;
    color: #718294;
    font-size: 0.92rem;
    background: #ffffff;
    border: 1px dashed #bfced9;
    border-radius: 4px;
}

#eventModal .event-list-item {
    min-height: 74px;
    margin-bottom: 12px;
    padding: 14px 100px 13px 18px;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.5;
    background: #ffffff;
    border: 1px solid #cedde8;
    border-left: 6px solid #1674b3;
    border-radius: 4px;
    box-shadow: 0 3px 9px rgba(21, 66, 99, 0.06);
}

#eventModal .event-list-item:hover {
    border-color: #a9c8dd;
    border-left-color: #0f5f98;
    background: #fbfdff;
}

#eventModal .event-list-item br {
    display: none;
}

#eventModal .event-time-badge,
#eventModal .event-detail-header {
    display: inline-block;
    vertical-align: baseline;
    white-space: nowrap;
}

#eventModal .event-time-badge {
    margin: 0 12px 0 0;
    color: #0d65a5;
    font-size: 1.05rem;
}

#eventModal .event-detail-header {
    color: #223d54;
    font-size: 0.99rem;
}

#eventModal .event-detail-text {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    color: #506475;
    font-size: 0.95rem;
    border-top: 1px solid #dce7ee;
}

#eventModal .event-actions {
    top: 12px;
    right: 14px;
    gap: 7px;
}

#eventModal .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    opacity: 0.82;
    font-size: 1rem;
    background: #f7fafc;
    border: 1px solid #c9d9e5;
    border-radius: 4px;
}

#eventModal .action-btn:hover {
    opacity: 1;
    background: #eaf4fb;
    border-color: #8fb9d5;
    transform: translateY(-1px);
}

#eventModal #dividerLine {
    margin: 21px 0 !important;
    border-top: 2px solid #d6e3ec !important;
}

#eventModal #eventDetailLabel,
#eventModal #timeLabelUI {
    display: block;
    margin-bottom: 7px;
    padding-left: 10px;
    color: #213d54;
    font-size: 1rem !important;
    font-weight: 760 !important;
    border-left: 4px solid #f2a128;
}

#eventModal #eventMessage {
    min-height: 112px;
    margin-top: 0;
    padding: 13px 14px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.55;
    background: #ffffff;
    border: 1px solid #bccfdd;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(22, 52, 77, 0.035);
}

#eventModal #eventMessage:focus {
    outline: none;
    border-color: #287fb8;
    box-shadow: 0 0 0 3px rgba(39, 126, 188, 0.14);
}

#eventModal .help-text {
    margin-top: 7px;
    font-size: 0.83rem;
    line-height: 1.45;
}

#eventModal #timeLabelUI {
    margin-top: 19px !important;
}

#eventModal .time-input-container {
    min-height: 52px;
    margin-top: 0;
    background: #ffffff;
    border: 1px solid #bccfdd;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(22, 52, 77, 0.035);
}

#eventModal .time-input-container:focus-within {
    border-color: #287fb8;
    box-shadow: 0 0 0 3px rgba(39, 126, 188, 0.14);
}

#eventModal .time-input-container input[type="time"] {
    min-height: 50px;
    padding: 11px 14px;
    color: #213c52;
    font-size: 1rem;
    font-weight: 700;
}

#eventModal .time-input-label {
    padding: 0 16px;
    color: #5e7488;
    font-size: 0.91rem;
}

#eventModal #saveBtnUI {
    min-height: 52px;
    margin-top: 20px;
    padding: 12px 18px;
    color: #ffffff;
    background: linear-gradient(100deg, #267c56 0%, #2d8d63 100%);
    border-radius: 4px;
    font-size: 1.03rem;
    box-shadow: 0 8px 19px rgba(29, 122, 79, 0.18);
}

#eventModal #saveBtnUI:hover {
    background: linear-gradient(100deg, #206d4b 0%, #277e58 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 23px rgba(29, 122, 79, 0.23);
}

/* Keep the scrollbar quiet and consistent with the new panel. */
#eventModal .modal-content::-webkit-scrollbar {
    width: 11px;
}

#eventModal .modal-content::-webkit-scrollbar-track {
    background: #edf3f7;
}

#eventModal .modal-content::-webkit-scrollbar-thumb {
    background: #91a7b8;
    border: 3px solid #edf3f7;
    border-radius: 2px;
}

#eventModal .modal-content::-webkit-scrollbar-thumb:hover {
    background: #728b9e;
}

@media (max-width: 700px) {
    #eventModal .modal-wrapper {
        width: calc(100vw - 20px);
    }

    #eventModal .modal-content {
        max-height: calc(100vh - 20px);
        padding: 0 18px 22px;
        border-radius: 4px;
    }

    #eventModal #modalTitle {
        margin: 0 -18px 18px !important;
        padding: 18px 58px 15px 18px;
        font-size: 1.28rem;
    }

    #eventModal #modalTitle::after {
        left: 18px;
        width: 92px;
    }

    #eventModal .close-icon {
        top: 13px;
        right: 12px;
        width: 38px;
        height: 38px;
    }

    #eventModal .event-list-item {
        padding: 14px 14px 13px;
    }

    #eventModal .event-actions {
        position: static;
        justify-content: flex-end;
        margin-bottom: 8px;
    }

    #eventModal .event-list-item br {
        display: block;
    }

    #eventModal .event-time-badge,
    #eventModal .event-detail-header {
        display: inline;
        white-space: normal;
    }
}


/* ============================================
   HOTFIX 9 — Rounded, stable appointment modal
   Scope: presentation and scroll-container structure only.
   All original wording, controls, event handlers, storage,
   notifications, and appointment behavior remain unchanged.
   ============================================ */

/* The outer shell owns the rounded silhouette and clips every inner layer.
   Scrolling is moved to .modal-scroll-body so the curve never deforms. */
#eventModal .modal-wrapper {
    width: min(760px, calc(100vw - 48px));
    max-width: none;
    max-height: min(92vh, 880px);
    overflow: hidden;
    background: #f7fafc;
    border: 1px solid #b7ccdd;
    border-radius: 24px;
    box-shadow: 0 32px 82px rgba(7, 31, 51, 0.40);
}

#eventModal .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(92vh, 880px);
    padding: 0;
    overflow: hidden;
    text-align: left;
    background: #f7fafc;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
}

/* Header remains fixed because it is outside the scrolling body. */
#eventModal #modalTitle {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 23px 82px 19px 32px;
    color: #ffffff !important;
    font-size: 1.52rem;
    font-weight: 780;
    line-height: 1.35 !important;
    letter-spacing: -0.01em;
    text-align: left;
    background: linear-gradient(105deg, #123f68 0%, #1675b2 68%, #2795cf 100%);
    border-top: 6px solid #f2a128;
    border-bottom: 1px solid rgba(255, 255, 255, 0.26);
    box-shadow: 0 8px 22px rgba(15, 64, 103, 0.18);
}

#eventModal #modalTitle::after {
    left: 32px;
    bottom: 0;
    width: 122px;
    height: 4px;
    border-radius: 999px 999px 0 0;
}

#eventModal #modalTitle span {
    display: inline-block;
    margin-top: 6px;
    color: #eaf5fc !important;
    font-size: 0.66em !important;
    font-weight: 500 !important;
    line-height: 1.5;
}

/* Only this inner region scrolls. Its scrollbar starts below the header and
   finishes above the rounded lower edge. */
#eventModal .modal-scroll-body {
    min-height: 0;
    padding: 22px 30px 30px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background:
        linear-gradient(180deg, rgba(235, 246, 254, 0.66) 0, rgba(247, 250, 252, 0) 120px),
        #f7fafc;
}

#eventModal .close-icon {
    top: 18px;
    right: 20px;
    z-index: 40;
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.98);
    border-radius: 50%;
    background: #dc3545;
    font-size: 1.14rem;
    box-shadow: 0 8px 22px rgba(122, 20, 32, 0.34);
}

#eventModal .close-icon:hover {
    background: #bd2735;
    transform: scale(1.05);
}

#eventModal #selectedDateText {
    margin: 0 0 20px !important;
    padding: 14px 17px 14px 21px !important;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(28, 91, 133, 0.06);
}

#eventModal .empty-state {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
}

#eventModal .event-list-item {
    border-radius: 14px;
    box-shadow: 0 5px 14px rgba(21, 66, 99, 0.07);
}

#eventModal .action-btn {
    border-radius: 10px;
}

#eventModal #eventMessage,
#eventModal .time-input-container {
    border-radius: 13px;
}

#eventModal #saveBtnUI {
    border-radius: 13px;
    box-shadow: 0 10px 24px rgba(29, 122, 79, 0.20);
}

/* The scrollbar is deliberately subtle and inset within the inner body. */
#eventModal .modal-scroll-body::-webkit-scrollbar {
    width: 10px;
}

#eventModal .modal-scroll-body::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 8px 12px;
}

#eventModal .modal-scroll-body::-webkit-scrollbar-thumb {
    background: #8fa8ba;
    border: 3px solid #f7fafc;
    border-radius: 999px;
}

#eventModal .modal-scroll-body::-webkit-scrollbar-thumb:hover {
    background: #6f8ca1;
}

/* The former whole-dialog scrollbar is disabled. */
#eventModal .modal-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

html[dir="rtl"] #eventModal #modalTitle {
    padding-right: 32px;
    padding-left: 82px;
    text-align: right;
}

html[dir="rtl"] #eventModal #modalTitle::after {
    left: auto;
    right: 32px;
}

html[dir="rtl"] #eventModal .close-icon {
    right: auto;
    left: 20px;
}

@media (max-width: 700px) {
    #eventModal .modal-wrapper {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        border-radius: 18px;
    }

    #eventModal .modal-content {
        max-height: calc(100vh - 20px);
        padding: 0;
        border-radius: inherit;
    }

    #eventModal #modalTitle {
        margin: 0 !important;
        padding: 20px 62px 17px 20px;
        font-size: 1.3rem;
    }

    #eventModal #modalTitle::after {
        left: 20px;
        width: 96px;
    }

    #eventModal .modal-scroll-body {
        padding: 18px 16px 22px;
    }

    #eventModal .close-icon {
        top: 15px;
        right: 14px;
        width: 40px;
        height: 40px;
    }

    html[dir="rtl"] #eventModal #modalTitle {
        padding-right: 20px;
        padding-left: 62px;
    }

    html[dir="rtl"] #eventModal #modalTitle::after {
        left: auto;
        right: 20px;
    }

    html[dir="rtl"] #eventModal .close-icon {
        right: auto;
        left: 14px;
    }
}

/* ============================================
   HOTFIX 10 — Clean appointment modal details
   Scope: the explicitly approved appointment-modal presentation only.
   Original appointment wording, controls, event handlers, storage,
   notifications, and all other behavior remain unchanged.
   ============================================ */

/* Date is now rendered directly after the localized modal heading. Keep the
   existing node for compatibility with the original JavaScript flow. */
#eventModal #selectedDateText {
    display: none !important;
}

/* Remove both orange accents from the modal header. */
#eventModal #modalTitle {
    border-top: 0;
}

#eventModal #modalTitle::after {
    display: none;
    content: none;
}

/* Saved appointments use a calm, square, transparent treatment. */
#eventModal .event-list-item {
    min-height: 74px;
    margin-bottom: 10px;
    padding: 14px 100px 13px 18px;
    background: transparent;
    border: 1px solid #dce6ed;
    border-left: 5px solid #9bc8e3;
    border-radius: 0;
    box-shadow: none;
    transition: background-color 140ms ease, border-color 140ms ease,
                border-left-color 140ms ease;
}

#eventModal .event-list-item:hover,
#eventModal .event-list-item:focus-within {
    background: #e8f3f9;
    border-color: #bfd5e2;
    border-left-color: #6faed3;
    box-shadow: none;
}

#eventModal .event-detail-text {
    border-top-color: #e4ebf0;
}

#eventModal .action-btn {
    background: transparent;
    border-color: #d7e2e9;
    box-shadow: none;
}

#eventModal .action-btn:hover,
#eventModal .action-btn:focus-visible {
    background: #eaf4fa;
    border-color: #bdd4e2;
    box-shadow: none;
}

@media (max-width: 700px) {
    #eventModal .event-list-item {
        padding: 14px 14px 13px;
        border-radius: 0;
    }
}



/* ============================================
   HOTFIX 11 — Comfort palette and appointment weather
   Scope: approved background palette plus non-blocking location/weather
   enhancements. Existing appointment text and core behavior remain intact.
   ============================================ */

:root {
    --bg: #eef3f8;
    --border-light: #dde5ee;
    --comfort-surface: #ffffff;
    --comfort-weekend: #fff8f8;
    --comfort-empty: #f5f7fa;
}

html,
body {
    background: #eef3f8;
}

body {
    background-image: linear-gradient(145deg, #edf3f8 0%, #f5f8fb 55%, #eaf1f7 100%);
}

.app-header,
.calendar-container,
.calendar-summary-panel {
    border-color: #d8e2ec;
}

.days {
    background: var(--comfort-surface);
}

.days .day-cell,
.days .empty {
    border-color: #dde5ee;
    background: var(--comfort-surface);
}

.days .day-cell.weekend {
    background: var(--comfort-weekend);
}

.days .empty {
    background: var(--comfort-empty);
}

.days .day-cell:hover {
    background: #edf6fd;
}

/* Compact weather badge: default location only, next 10 days. */
.day-weather-slot {
    position: absolute;
    top: 8px;
    right: 7px;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #43637e;
    font-size: 0.64rem;
    line-height: 1;
    pointer-events: none;
}

.day-weather-slot.has-weather {
    padding: 3px 5px;
    border: 1px solid #d9e6ef;
    border-radius: 999px;
    background: rgba(247, 251, 254, 0.94);
    box-shadow: 0 2px 6px rgba(41, 76, 105, 0.06);
}

.day-weather-slot.is-rainy {
    color: #205b86;
    border-color: #c8ddec;
    background: rgba(232, 244, 252, 0.96);
}

.day-weather-slot.is-windy {
    color: #51677a;
}

.day-weather-slot strong {
    font-weight: 760;
}

/* Location and weather controls inside the existing scroll body. */
#eventModal .weather-field-label {
    display: block;
    margin-top: 16px;
    color: #29445a;
    font-size: 0.95em;
    font-weight: 730;
    text-align: left;
}

#eventModal .location-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 6px;
}

#eventModal #eventLocation {
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    color: #263e52;
    font: inherit;
    border: 1px solid #cfdee9;
    border-radius: 11px;
    background: #ffffff;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

#eventModal #eventLocation:focus {
    border-color: #7fb1d3;
    box-shadow: 0 0 0 3px rgba(75, 146, 194, 0.13);
}

#eventModal .location-action-button,
#eventModal .weather-refresh-button {
    width: auto;
    margin: 0;
    border: 1px solid #cddde9;
    color: #235b83;
    background: #f7fbfe;
    box-shadow: none;
}

#eventModal .location-action-button {
    min-height: 48px;
    padding: 9px 13px;
    white-space: nowrap;
    border-radius: 10px;
    font-size: 0.82rem;
}

#eventModal .location-action-button:hover,
#eventModal .weather-refresh-button:hover {
    border-color: #9fc1d8;
    background: #eaf5fb;
}

#eventModal .location-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 0;
}

#eventModal .location-default-option,
#eventModal .weather-alert-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #536a7b;
    font-size: 0.8rem;
    cursor: pointer;
}

#eventModal .location-default-option input,
#eventModal .weather-alert-option input {
    width: 17px;
    height: 17px;
    accent-color: #1e78b4;
}

#eventModal .appointment-weather-panel {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #d9e5ee;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfdff 0%, #f3f8fc 100%);
}

#eventModal .appointment-weather-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#eventModal .weather-heading-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #29465e;
    font-size: 0.92rem;
}

#eventModal .weather-heading-icon {
    font-size: 1.15rem;
}

#eventModal .weather-refresh-button {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.73rem;
}

#eventModal .appointment-weather-status {
    min-height: 64px;
}

#eventModal .weather-state-message {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px;
    color: #6b7f90;
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
    border: 1px dashed #d9e3ea;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

#eventModal .weather-state-warning {
    color: #805d2d;
    border-color: #ead9bd;
    background: #fffaf1;
}

#eventModal .weather-loading-dot {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border: 2px solid #c7ddea;
    border-top-color: #2a80b7;
    border-radius: 50%;
    animation: weatherSpin 700ms linear infinite;
}

@keyframes weatherSpin { to { transform: rotate(360deg); } }

#eventModal .weather-result-card {
    padding: 13px;
    border: 1px solid #d7e4ed;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.88);
}

#eventModal .weather-result-main {
    display: flex;
    align-items: center;
    gap: 11px;
}

#eventModal .weather-result-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    font-size: 1.75rem;
    border-radius: 12px;
    background: #eef6fb;
}

#eventModal .weather-result-copy {
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 10px;
}

#eventModal .weather-result-copy strong {
    color: #26465f;
    font-size: 0.96rem;
}

#eventModal .weather-result-copy span {
    color: #176fa9;
    font-size: 1.04rem;
    font-weight: 780;
}

#eventModal .weather-result-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 10px;
    color: #4d6577;
    font-size: 0.78rem;
}

#eventModal .weather-location-line,
#eventModal .weather-updated-line,
#eventModal .weather-trend-note,
#eventModal .weather-offline-note {
    margin-top: 8px;
    color: #667b8c;
    font-size: 0.72rem;
    line-height: 1.45;
}

#eventModal .weather-offline-note {
    color: #8a632d;
}

#eventModal .weather-alert-option {
    margin-top: 11px;
    color: #3e5c72;
    font-weight: 650;
}

#eventModal .weather-alert-hint {
    margin: 4px 0 0 25px;
    color: #7b8c99;
    font-size: 0.7rem;
    line-height: 1.4;
}

#eventModal .weather-attribution {
    margin-top: 8px;
    color: #8a99a4;
    font-size: 0.64rem;
    text-align: right;
}

#eventModal .event-location-text {
    display: block;
    margin-top: 7px;
    color: #60788a;
    font-size: 0.78rem;
}

html[dir="rtl"] #eventModal .weather-field-label,
html[dir="rtl"] #eventModal .event-location-text {
    text-align: right;
}

html[dir="rtl"] #eventModal .weather-attribution {
    text-align: left;
}

@media (max-width: 700px) {
    #eventModal .location-input-row {
        grid-template-columns: 1fr;
    }

    #eventModal .location-action-button {
        width: 100%;
    }

    .day-weather-slot {
        top: 5px;
        right: 4px;
        font-size: 0.56rem;
    }
}


/* ============================================
   HOTFIX 12 — APPOINTMENT DECISION INSIGHTS
   Replaces the repeated monthly holiday list with concise weather,
   selected-date holiday, country events, and decision notes.
   ============================================ */
.appointment-insights-panel::before {
    background: linear-gradient(90deg, #2e8b8b, #3c7fbd);
}

.insights-icon {
    color: #176b72;
    background: #e5f5f4;
}

.insights-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.appointment-insights-list {
    min-height: 0;
    margin-top: 10px;
    flex: 1 1 auto;
    overflow: hidden;
}

.insight-mini-grid {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
}

.insight-mini-card,
.insight-events-card,
.insight-advice-card,
.summary-insight-section {
    min-width: 0;
    border: 1px solid #dce7ef;
    background: rgba(255, 255, 255, 0.78);
}

.insight-mini-card {
    min-height: 82px;
    padding: 9px 10px;
    border-radius: 10px;
}

.insight-mini-card h3,
.insight-events-card h3,
.insight-advice-card h3,
.summary-insight-section h3 {
    margin: 0 0 7px;
    color: #2d455b;
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.25;
}

.insight-weather-card {
    background: linear-gradient(145deg, #f2f9fd, #ffffff);
}

.insight-holiday-card {
    background: linear-gradient(145deg, #fff9ef, #ffffff);
}

.insight-weather-result,
.insight-holiday-result {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.insight-weather-icon {
    flex: 0 0 auto;
    font-size: 1.45rem;
    line-height: 1;
}

.insight-weather-result > span:last-child,
.insight-holiday-result > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.insight-weather-result strong,
.insight-holiday-result strong {
    overflow: hidden;
    color: #2b4258;
    font-size: 0.72rem;
    font-weight: 720;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-weather-result small,
.insight-holiday-result small {
    overflow: hidden;
    color: #687a8d;
    font-size: 0.62rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-holiday-date {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #925816;
    background: #ffedd4;
    font-size: 0.78rem;
    font-weight: 780;
}

.insight-events-card {
    min-height: 0;
    grid-column: 1 / -1;
    padding: 9px 10px 7px;
    border-radius: 10px;
    background: #fbfcfe;
    overflow: hidden;
}

.insight-event-list,
.summary-insight-events {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.insight-event-item {
    min-width: 0;
    min-height: 34px;
    padding: 5px 5px 5px 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid #e7edf3;
    background: transparent;
}

.insight-event-item:last-child {
    border-bottom: 0;
}

.insight-event-date {
    color: #1f6ca4;
    font-size: 0.65rem;
    font-weight: 760;
    text-align: center;
    white-space: nowrap;
}

.insight-event-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.insight-event-copy strong {
    overflow: hidden;
    color: #304357;
    font-size: 0.68rem;
    font-weight: 690;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-event-venue,
.insight-event-type {
    overflow: hidden;
    color: #7a8795;
    font-size: 0.58rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-event-link {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: #4c82ad;
    text-decoration: none;
}

.insight-event-link:hover {
    background: #edf5fb;
}

.insight-advice-card {
    grid-column: 1 / -1;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f4f8fb;
}

.insight-advice-card h3 {
    margin-bottom: 4px;
}

.insight-advice-card ul,
.summary-insight-advice {
    margin: 0;
    padding-inline-start: 18px;
    color: #53687b;
    font-size: 0.64rem;
    line-height: 1.35;
}

.insight-state-message {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #748395;
    font-size: 0.65rem;
    line-height: 1.35;
}

.insight-loading {
    justify-content: center;
}

.insight-source-line {
    margin-top: 4px;
    overflow: hidden;
    color: #98a3af;
    font-size: 0.53rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-insight-section {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 12px;
}

.summary-insight-section h3 {
    font-size: 0.9rem;
}

.insight-event-modal-item {
    min-height: 54px;
    grid-template-columns: 66px minmax(0, 1fr) 32px;
    padding: 8px 4px;
}

.insight-event-modal-item .insight-event-date,
.insight-event-modal-item .insight-event-copy strong {
    font-size: 0.78rem;
}

.insight-event-modal-item .insight-event-venue,
.insight-event-modal-item .insight-event-type {
    font-size: 0.68rem;
}

html[dir="rtl"] .insight-advice-card ul,
html[dir="rtl"] .summary-insight-advice {
    padding-inline-start: 0;
    padding-inline-end: 18px;
}

@media (max-width: 980px), (max-height: 700px) {
    .appointment-insights-list {
        overflow: visible;
    }
    .insight-mini-grid {
        height: auto;
    }
}

/* Desktop balance: keep the decision panel useful at 1280×820 without
   reducing the appointment list below a practical height. */
@media (min-width: 981px) and (min-height: 701px) {
    .summary-column {
        grid-template-rows: minmax(0, 0.48fr) minmax(0, 0.52fr);
    }

    .insight-mini-card {
        min-height: 66px;
        padding: 7px 8px;
    }

    .insight-mini-card h3,
    .insight-events-card h3,
    .insight-advice-card h3 {
        margin-bottom: 4px;
        font-size: 0.68rem;
    }

    .insight-events-card {
        padding: 7px 8px 5px;
    }

    .insight-event-list {
        gap: 2px;
    }

    .insight-event-item {
        min-height: 30px;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .insight-advice-card {
        padding: 6px 8px;
    }

    .insight-advice-card ul {
        font-size: 0.59rem;
        line-height: 1.25;
    }
}

/* ============================================
   HOTFIX 13 — Recurrence, Reminder & Conflict
   ============================================ */
#eventModal .appointment-scheduling-options {
    margin-top: 18px;
    padding: 15px 16px 16px;
    border: 1px solid #d9e4ef;
    border-radius: 14px;
    background: #f8fbfe;
}

#eventModal .appointment-options-heading {
    margin-bottom: 12px;
    color: #173f64;
    font-size: 0.98em;
    font-weight: 800;
    text-align: left;
}

#eventModal .appointment-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

#eventModal .appointment-option-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    color: #334f68;
    font-size: 0.9em;
    font-weight: 700;
    text-align: left;
}

#eventModal .appointment-option-field select,
#eventModal .appointment-option-field input[type="date"] {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid #cbd9e6;
    border-radius: 10px;
    background: #fff;
    color: #243b50;
    padding: 9px 12px;
    font: inherit;
    font-weight: 600;
    outline: none;
}

#eventModal .appointment-option-field select:focus,
#eventModal .appointment-option-field input[type="date"]:focus {
    border-color: #2b80bd;
    box-shadow: 0 0 0 3px rgba(43, 128, 189, 0.12);
}

#eventModal .appointment-option-field select:disabled,
#eventModal .appointment-option-field input[type="date"]:disabled {
    color: #687b8c;
    background: #eef3f7;
    cursor: not-allowed;
}

#eventModal .recurrence-end-field {
    grid-column: 1 / -1;
}

#eventModal .recurrence-edit-hint {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #e2eaf1;
    color: #66798b;
    font-size: 0.82em;
    text-align: left;
}

#eventModal .recurrence-edit-hint[hidden],
#eventModal .recurrence-end-field[hidden] {
    display: none !important;
}

.conflict-popup .conflict-content {
    width: min(520px, calc(100vw - 36px));
    max-height: min(680px, calc(100vh - 36px));
    overflow: auto;
    border-radius: 18px;
    border-top: 5px solid #e3a21b;
    text-align: left;
}

.conflict-popup .conflict-title {
    margin: 4px 0 8px;
    color: #263f56;
    font-size: 1.2em;
    text-align: center;
}

.conflict-popup .conflict-date-list {
    display: grid;
    gap: 7px;
    width: 100%;
    margin: 10px 0 15px;
}

.conflict-popup .conflict-date-item {
    display: grid;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid #dce5ed;
    border-left: 4px solid #e3a21b;
    background: #f8fafc;
    color: #4d6274;
    font-size: 0.88em;
}

.conflict-popup .conflict-date-item strong {
    color: #263f56;
}

html[dir="rtl"] #eventModal .appointment-options-heading,
html[dir="rtl"] #eventModal .appointment-option-field,
html[dir="rtl"] #eventModal .recurrence-edit-hint,
html[dir="rtl"] .conflict-popup .conflict-content {
    text-align: right;
}

html[dir="rtl"] .conflict-popup .conflict-date-item {
    border-left: 1px solid #dce5ed;
    border-right: 4px solid #e3a21b;
}

@media (max-width: 760px) {
    #eventModal .appointment-options-grid {
        grid-template-columns: 1fr;
    }

    #eventModal .recurrence-end-field {
        grid-column: auto;
    }
}

/* ============================================
   HOTFIX 16 — Slate-blue application background
   Scope: soften only the outer application canvas. Calendar, toolbar,
   insight cards, appointment list, modal surfaces and behavior remain
   identical to Hotfix 15.
   ============================================ */
html,
body {
    background-color: #2F3A46;
}

body {
    background-image:
        radial-gradient(circle at 12% -8%, rgba(109, 135, 158, 0.18), transparent 35%),
        linear-gradient(145deg, #2B3642 0%, #2F3A46 58%, #3A4652 100%);
}

/* ============================================
   HOTFIX 17 — Warm white/orange theme, flag language picker,
   pencil appointment action, stronger calendar grid, and year view.
   Existing appointment, weather, recurrence, reminder, conflict,
   storage, trial and Store behavior remains unchanged.
   ============================================ */
:root {
    --primary: #E98224;
    --primary-dark: #A84F10;
    --primary-light: #FFF0DE;
    --primary-soft: #FFF5E9;
    --bg: #C8C3BC;
    --bg-white: #FFFFFF;
    --surface-muted: #FBF9F6;
    --border: #D7D0C7;
    --border-light: #CFC8BE;
    --text: #2E3338;
    --text-light: #62605D;
    --text-muted: #817C76;
    --success: #3D8A63;
}

html,
body {
    background-color: #C8C3BC;
}

body {
    background-image:
        radial-gradient(circle at 12% -10%, rgba(255, 255, 255, 0.35), transparent 34%),
        linear-gradient(145deg, #C2BDB6 0%, #C8C3BC 55%, #D0CBC4 100%);
}

.app-header,
.calendar-container,
.calendar-summary-panel {
    border-color: #D8D1C8;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(75, 63, 49, 0.10);
}

.app-header {
    background: rgba(255, 255, 255, 0.97);
}

.brand-mark {
    color: #fff;
    background: linear-gradient(145deg, #F39A3C, #D86B13);
    box-shadow: 0 5px 14px rgba(216, 107, 19, 0.25);
}

.brand-title {
    color: #8F4310;
}

.region-label svg {
    color: #D96C15;
}

.trial-status-bar {
    border-color: #F0D1B1;
    color: #874718;
    background: #FFF6EC;
}

/* Flag-based language selector. The native select remains as the
   application data source but is visually hidden. */
.native-country-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.language-picker {
    position: relative;
    min-width: 216px;
}

.language-picker-button {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    border: 1px solid #D8D0C6;
    border-radius: 9px;
    color: #34383C;
    background: #FBF9F6;
    font-size: 0.86rem;
    font-weight: 620;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.language-picker-button:hover,
.language-picker.open .language-picker-button {
    border-color: #E29A56;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(233, 130, 36, 0.11);
}

.language-flag {
    width: 28px;
    height: 19px;
    object-fit: cover;
    border: 1px solid rgba(55, 49, 43, 0.18);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.language-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #756E67;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.language-picker.open .language-chevron {
    transform: rotate(180deg);
}

.language-picker-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1500;
    width: 280px;
    max-height: min(430px, calc(100vh - 110px));
    padding: 6px;
    overflow-y: auto;
    border: 1px solid #D9D1C8;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(71, 57, 42, 0.20);
}

.language-picker-menu[hidden] {
    display: none !important;
}

.language-picker-menu button {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 7px;
    color: #34383C;
    background: transparent;
    font-size: 0.84rem;
    font-weight: 580;
    text-align: left;
    cursor: pointer;
}

.language-picker-menu button:hover,
.language-picker-menu button:focus-visible {
    outline: none;
    background: #FFF2E3;
}

.language-picker-menu button.selected {
    color: #8E450F;
    background: #FFF0DE;
    font-weight: 720;
}

html[dir="rtl"] .language-picker-button,
html[dir="rtl"] .language-picker-menu button {
    text-align: right;
}

html[dir="rtl"] .language-picker-menu {
    right: auto;
    left: 0;
}

/* Warm white calendar header with orange accent rather than a blue band. */
.header {
    min-height: 62px;
    color: #2E3338;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F2 100%);
    border-top: 5px solid #E98224;
    border-bottom: 1px solid #D9D1C8;
    box-shadow: none;
}

#monthYear {
    color: #8F4310;
    text-shadow: none;
}

.header .month-nav-button {
    color: #A84F10;
    border-color: #F0D2B5;
    background: #FFF8F0;
}

.header .month-nav-button:hover {
    color: #8E3F09;
    border-color: #E9A565;
    background: #FFF0DE;
}

.header .today-button,
.header .today-button:hover {
    color: #8F4310;
}

.header .today-button {
    border-color: #E8B27C;
    background: #FFF8F0;
}

.header .today-button:hover {
    border-color: #E98224;
    background: #FFF0DE;
}

.calendar-view-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid #E3D8CD;
    border-radius: 999px;
    background: #F5F1EC;
}

.calendar-view-button {
    min-width: 64px;
    min-height: 28px;
    margin: 0;
    padding: 4px 11px;
    border: 0;
    border-radius: 999px;
    color: #716A63;
    background: transparent;
    font-size: 0.70rem;
    font-weight: 720;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.calendar-view-button:hover {
    color: #8F4310;
    background: rgba(255, 255, 255, 0.7);
}

.calendar-view-button.active {
    color: #FFFFFF;
    background: #E98224;
    box-shadow: 0 2px 6px rgba(195, 92, 14, 0.20);
}

.calendar-view-button:focus-visible {
    outline: 3px solid rgba(233, 130, 36, 0.22);
    outline-offset: 1px;
}

/* Stronger but still soft calendar grid. */
.weekdays {
    background: linear-gradient(180deg, #FBF8F4 0%, #F2ECE5 100%);
    border-bottom-color: #CFC8BE;
}

.weekdays div {
    color: #4F4A45;
    border-right-color: #CFC8BE;
}

.weekdays .weekend {
    color: #B94747;
    background: rgba(255, 244, 241, 0.80);
}

.days,
.days .day-cell,
.days .empty {
    background: #FFFFFF;
}

.days .day-cell,
.days .empty {
    border-right-color: #CFC8BE;
    border-bottom-color: #CFC8BE;
}

.days .day-cell.weekend {
    color: #B94747;
    background: #FFF8F6;
}

.days .empty {
    background: #F6F3EF;
}

.days .day-cell:hover {
    background: #FFF5E9;
    box-shadow: inset 0 0 0 1px #E7A96B;
}

.days .day-cell.selected-day {
    background: #FFF0DE;
    box-shadow: inset 0 0 0 2px #E98224;
}

.days .day-cell:focus-visible {
    box-shadow: inset 0 0 0 2px #E98224, 0 0 0 2px rgba(233, 130, 36, 0.14);
}

.today-number {
    background: #E98224;
    box-shadow: 0 3px 9px rgba(195, 92, 14, 0.24);
}

.event-text {
    color: #8F4310;
    border-color: #F0CFAC;
    background: #FFF4E7;
}

.add-more-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #C65E10;
    border-radius: 5px;
    transition: color 150ms ease, background 150ms ease;
}

.add-more-text:hover {
    color: #8F4310;
    background: #FFF0DE;
}

.add-appointment-symbol {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.add-appointment-symbol svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-appointment-plus {
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 0.8;
}

/* Warm accent bands on the right-hand cards. */
.appointment-insights-panel::before {
    background: linear-gradient(90deg, #E98224, #F3B25F);
}

.monthly-appointments-panel::before {
    background: linear-gradient(90deg, #B86A3A, #D99A69);
}

.insights-icon {
    color: #A84F10;
    background: #FFF0DE;
}

.appointment-icon {
    color: #9B5124;
    background: #FBEDE4;
}

.calendar-summary-count {
    color: #7A4A27;
    border-color: #E8D6C4;
    background: #FBF7F2;
}

.monthly-appointment-item:hover,
.important-date-item:hover {
    background: #FFF7ED;
}

.monthly-appointment-date-badge {
    color: #9A4B14;
    background: #FFF0DE;
}

/* Year calendar view. */
.year-view {
    min-height: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 9px;
    overflow: hidden;
    background: #F7F3EE;
}

.year-view[hidden] {
    display: none !important;
}

.calendar-container.year-mode {
    grid-template-rows: auto minmax(0, 1fr) !important;
}

.year-month-card {
    min-width: 0;
    min-height: 0;
    padding: 6px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    border: 1px solid #D5CEC5;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 2px 7px rgba(82, 67, 50, 0.07);
    overflow: hidden;
}

.year-month-title {
    width: 100%;
    min-height: 24px;
    margin: 0 0 3px;
    padding: 2px 5px;
    border: 0;
    border-radius: 6px;
    color: #8F4310;
    background: #FFF5E9;
    font-size: clamp(0.66rem, 0.75vw, 0.82rem);
    font-weight: 800;
    cursor: pointer;
}

.year-month-title:hover,
.year-month-title:focus-visible {
    outline: none;
    color: #FFFFFF;
    background: #E98224;
}

.year-month-weekdays,
.year-month-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
}

.year-month-weekdays {
    min-height: 17px;
    align-items: center;
    color: #746D66;
    font-size: clamp(0.46rem, 0.52vw, 0.58rem);
    font-weight: 700;
}

.year-month-weekdays span:first-child,
.year-month-weekdays span:last-child {
    color: #B94747;
}

.year-month-days {
    min-height: 0;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}

.year-day {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 1px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    color: #3F4143;
    background: transparent;
    font-size: clamp(0.50rem, 0.58vw, 0.65rem);
    font-weight: 650;
    cursor: pointer;
}

.year-day:hover,
.year-day:focus-visible {
    outline: none;
    color: #8F4310;
    background: #FFF0DE;
}

.year-day.weekend,
.year-day.holiday {
    color: #B94747;
}

.year-day.today {
    color: #FFFFFF;
    background: #E98224;
    font-weight: 800;
}

.year-day.selected:not(.today) {
    box-shadow: inset 0 0 0 1.5px #E98224;
    background: #FFF5E9;
}

.year-day-empty {
    cursor: default;
}

.year-day-markers {
    position: absolute;
    left: 50%;
    bottom: 1px;
    display: flex;
    gap: 2px;
    transform: translateX(-50%);
}

.year-day-markers b {
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

.year-day-markers .event-marker {
    background: #E98224;
}

.year-day-markers .holiday-marker {
    background: #C84C4C;
}

.year-day.today .year-day-markers b {
    background: #FFFFFF;
}

@media (min-width: 981px) and (min-height: 701px) {
    .calendar-container.year-mode {
        height: 100%;
    }

    .year-view {
        height: 100%;
    }
}

@media (max-width: 1180px) and (min-width: 981px) and (min-height: 701px) {
    .calendar-period {
        gap: 7px;
    }

    .calendar-view-button {
        min-width: 52px;
        padding-inline: 8px;
    }

    .year-view {
        gap: 6px;
        padding: 7px;
    }

    .year-month-card {
        padding: 4px;
    }
}

@media (max-width: 980px), (max-height: 700px) {
    .language-picker {
        min-width: 200px;
    }

    .year-view {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
        grid-template-rows: none;
        overflow: visible;
    }

    .calendar-container.year-mode {
        display: block;
    }

    .year-month-card {
        min-height: 210px;
    }
}

@media (max-width: 700px) {
    .calendar-period {
        flex-wrap: wrap;
        gap: 6px;
    }

    .calendar-view-switch {
        order: 3;
    }

    .year-view {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .language-picker-menu {
        width: min(280px, calc(100vw - 28px));
    }
}

/* Keep only the active calendar surface in the layout. */
.weekdays[hidden],
.days[hidden] {
    display: none !important;
}

.header .calendar-view-button {
    color: #716A63;
    background: transparent;
}

.header .calendar-view-button:hover {
    color: #8F4310;
    background: rgba(255, 255, 255, 0.78);
}

.header .calendar-view-button.active,
.header .calendar-view-button.active:hover {
    color: #FFFFFF;
    background: #E98224;
}

/* Complete the warm-white treatment across secondary information and dialogs. */
.insight-mini-card,
.insight-events-card,
.insight-advice-card,
.summary-insight-section {
    border-color: #E3DCD3;
    background: #FFFFFF;
}

.insight-weather-card,
.insight-holiday-card {
    background: #FFFFFF;
}

.insight-events-card {
    background: #FFFFFF;
}

.insight-advice-card {
    background: #FAF7F2;
}

.insight-event-item {
    border-bottom-color: #E8E0D7;
}

.insight-event-link:hover {
    background: #FFF0DE;
}

.monthly-appointment-item {
    border-color: #DED5CB;
    background: #FFFFFF;
}

.monthly-appointments-toggle,
.summary-view-all {
    color: #8F4310;
    border-color: #E3C6A8;
    background: #FFF8F0;
}

.monthly-appointments-toggle:hover,
.summary-view-all:hover {
    color: #FFFFFF;
    border-color: #E98224;
    background: #E98224;
}

#eventModal .modal-wrapper,
#eventModal .modal-content {
    border-color: #D8D0C6;
    background: #FFFFFF;
}

#eventModal #modalTitle {
    color: #2E3338 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF7EE 100%);
    border-bottom: 1px solid #E0D7CD;
    box-shadow: 0 7px 20px rgba(83, 64, 43, 0.09);
}

#eventModal #modalTitle span {
    color: #6F6861 !important;
}

#eventModal .modal-scroll-body {
    background: linear-gradient(180deg, #FFF9F2 0, #FFFFFF 125px);
}

#eventModal .modal-scroll-body::-webkit-scrollbar-thumb {
    background: #B9A998;
    border-color: #FFFFFF;
}

#eventModal .event-list-item {
    border-color: #E0D8CF;
    border-left-color: #EDB47D;
}

#eventModal .event-list-item:hover,
#eventModal .event-list-item:focus-within {
    background: #FFF5E9;
    border-color: #E7BE95;
    border-left-color: #E98224;
}

#eventModal .action-btn {
    border-color: #DED4C9;
}

#eventModal .action-btn:hover,
#eventModal .action-btn:focus-visible {
    background: #FFF0DE;
    border-color: #E4B17C;
}

#eventModal #eventMessage,
#eventModal .time-input-container,
#eventModal .appointment-option-field select,
#eventModal .appointment-option-field input[type="date"],
#eventModal #eventLocation {
    border-color: #D8D0C6;
}

#eventModal #eventMessage:focus,
#eventModal .appointment-option-field select:focus,
#eventModal .appointment-option-field input[type="date"]:focus,
#eventModal #eventLocation:focus {
    border-color: #E98224;
    box-shadow: 0 0 0 3px rgba(233, 130, 36, 0.13);
}

#eventModal .appointment-scheduling-options,
#eventModal .appointment-weather-panel {
    border-color: #E2D9CF;
    background: #FCF9F5;
}

#eventModal .appointment-options-heading,
#eventModal .appointment-option-field,
#eventModal .weather-field-label,
#eventModal .appointment-weather-heading {
    color: #5E4633;
}

/* ============================================
   HOTFIX 18 — Foreground language menu, neutral month/year title,
   and solid orange appointment date badges.
   Scope is visual only; all calendar, appointment, weather,
   recurrence, reminder, conflict, storage and Store behavior remains unchanged.
   ============================================ */

/* Keep the app brand in the approved warm brown-orange colour, but make the
   active month/year heading match the dark heading tone used by the
   "Appointments this month" card. */
#monthYear {
    color: #263445 !important;
}

/* The header uses backdrop-filter and therefore forms its own stacking
   context. Give that context an explicit layer above the dashboard so the
   language list always opens in front of the calendar and right-hand cards. */
.app-header {
    position: relative;
    z-index: 100;
    overflow: visible;
}

.header-actions,
.settings-bar,
.language-picker {
    overflow: visible;
}

.dashboard-layout {
    position: relative;
    z-index: 1;
}

.language-picker-menu {
    z-index: 20;
}

/* Match the appointment date tile to the main orange used for the selected
   current date in month view. */
.monthly-appointment-date-badge {
    color: #FFFFFF;
    border: 1px solid #D96C15;
    background: #E98224;
    box-shadow: 0 3px 9px rgba(190, 91, 18, 0.20);
}

.monthly-appointment-date-badge strong,
.monthly-appointment-date-badge small {
    color: inherit;
}

/* ============================================
   HOTFIX 19: EXECUTIVE ONE-PAGE REPORTS
   ============================================ */
.executive-report-launch {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(233, 130, 36, 0.38);
    border-radius: 12px;
    background: #fff7ee;
    color: #8b4515;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    flex: 0 0 auto;
}
.executive-report-launch svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.executive-report-launch:hover {
    background: #fff0df;
    border-color: #e98224;
    transform: translateY(-1px);
}
.executive-report-launch:focus-visible {
    outline: 3px solid rgba(233, 130, 36, 0.28);
    outline-offset: 2px;
}

body.executive-report-open { overflow: hidden !important; }
.executive-report-modal[hidden] { display: none !important; }
.executive-report-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(39, 35, 31, 0.72);
    backdrop-filter: blur(5px);
}
.executive-report-card {
    width: min(1240px, 96vw);
    height: min(920px, 94vh);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    background: #f6f2ed;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(24, 20, 17, .35);
}
.executive-report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #ded8d0;
}
.executive-report-toolbar-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.executive-report-toolbar-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #e98224;
    box-shadow: 0 7px 18px rgba(233, 130, 36, .25);
    flex: 0 0 auto;
}
.executive-report-toolbar-icon svg,
.executive-report-actions svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.executive-report-toolbar h2 {
    margin: 0;
    color: #263442;
    font-size: 1.15rem;
    line-height: 1.25;
}
.executive-report-toolbar p {
    margin: 3px 0 0;
    color: #716b65;
    font-size: .82rem;
}
.executive-report-close {
    width: 38px;
    height: 38px;
    border: 1px solid #e4ddd5;
    border-radius: 50%;
    background: #fff;
    color: #7b746d;
    font-size: 1.15rem;
    cursor: pointer;
    flex: 0 0 auto;
}
.executive-report-close:hover { background: #fff3e7; color: #b85c16; }
.executive-report-controls {
    min-height: 58px;
    padding: 10px 18px;
    display: grid;
    grid-template-columns: auto minmax(340px, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: #fffaf5;
    border-bottom: 1px solid #ded8d0;
}
.executive-report-range {
    padding: 3px;
    display: inline-flex;
    gap: 3px;
    border: 1px solid #dfd8cf;
    border-radius: 12px;
    background: #fff;
}
.executive-report-range button {
    min-width: 86px;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #5d5751;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
}
.executive-report-range button.active {
    background: #e98224;
    color: #fff;
    box-shadow: 0 4px 10px rgba(233, 130, 36, .22);
}
.executive-report-period {
    color: #263442;
    font-size: .94rem;
    font-weight: 800;
    text-align: center;
}
.executive-report-search-group {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.executive-report-date-search {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 8px;
}
.executive-report-date-search label {
    display: grid;
    grid-template-columns: auto minmax(138px, 1fr);
    align-items: center;
    gap: 7px;
    color: #5d5751;
    font-size: .78rem;
    font-weight: 800;
}
.executive-report-date-search input {
    min-height: 34px;
    padding: 0 9px;
    border: 1px solid #d8d1c8;
    border-radius: 9px;
    background: #fff;
    color: #263442;
    font: inherit;
    font-size: .82rem;
}
.executive-report-date-separator {
    padding-bottom: 8px;
    color: #8a8178;
    font-weight: 800;
}
.executive-report-actions { display: flex; align-items: center; gap: 8px; }
.executive-report-actions button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font: inherit;
    font-size: .83rem;
    font-weight: 800;
    cursor: pointer;
}
.executive-report-actions .secondary {
    border: 1px solid #d8d1c8;
    background: #fff;
    color: #5c5650;
}
.executive-report-actions .primary {
    border: 1px solid #d86f14;
    background: #e98224;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.executive-report-preview {
    min-height: 0;
    overflow: auto;
    padding: 18px;
    scrollbar-gutter: stable;
}
.executive-report-page {
    width: min(1120px, 100%);
    min-height: 718px;
    aspect-ratio: 297 / 210;
    margin: 0 auto;
    padding: 22px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    overflow: hidden;
    color: #27323d;
    background: #fff;
    border: 1px solid #d8d1c8;
    border-radius: 4px;
    box-shadow: 0 12px 30px rgba(55, 45, 36, .14);
    font-family: 'Segoe UI Variable', 'Segoe UI', Tahoma, sans-serif;
}
.executive-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 9px;
    border-bottom: 3px solid #e98224;
}
.executive-page-kicker {
    display: block;
    margin-bottom: 3px;
    color: #a55417;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.executive-page-header h1 {
    margin: 0;
    color: #263442;
    font-size: 1.34rem;
    line-height: 1.2;
}
.executive-page-header p {
    margin: 4px 0 0;
    color: #a55417;
    font-size: .95rem;
    font-weight: 800;
}
.executive-page-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: #716b65;
    font-size: .68rem;
    text-align: end;
}
.executive-page-meta strong { color: #9b3f37; font-size: .74rem; }
.executive-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}
.executive-metric {
    min-height: 54px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    border: 1px solid #ded8d0;
    border-left: 4px solid #b9aea2;
    background: #fbfaf8;
}
.executive-metric span {
    color: #716b65;
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.15;
}
.executive-metric strong {
    color: #263442;
    font-size: .93rem;
    line-height: 1.15;
}
.executive-metric.primary { border-left-color: #e98224; background: #fff7ee; }
.executive-metric.warning { border-left-color: #c84c4c; background: #fff6f4; }
.executive-month-body {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.64fr) minmax(285px, .76fr);
    gap: 10px;
}
.executive-report-section {
    min-height: 0;
    padding: 10px;
    border: 1px solid #ded8d0;
    background: #fff;
    overflow: hidden;
}
.executive-report-section > h2 {
    margin: 0 0 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e4ded7;
    color: #263442;
    font-size: .83rem;
}
.executive-appointment-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .67rem;
}
.executive-appointment-table th {
    padding: 5px 6px;
    color: #6d645c;
    background: #f4f0eb;
    border: 1px solid #ded8d0;
    text-align: start;
    font-weight: 800;
}
.executive-appointment-table td {
    padding: 5px 6px;
    border: 1px solid #e3ded7;
    vertical-align: top;
    line-height: 1.22;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.executive-appointment-table th:nth-child(1),
.executive-appointment-table td:nth-child(1) { width: 19%; }
.executive-appointment-table th:nth-child(2),
.executive-appointment-table td:nth-child(2) { width: 13%; }
.executive-appointment-table th:nth-child(3),
.executive-appointment-table td:nth-child(3) { width: 39%; }
.executive-appointment-table th:nth-child(4),
.executive-appointment-table td:nth-child(4) { width: 29%; }
.executive-inline-tag {
    margin-inline-start: 5px;
    color: #d86f14;
    font-weight: 900;
}
.executive-more-line {
    margin-top: 5px;
    color: #9b551e;
    font-size: .66rem;
    font-weight: 800;
    text-align: end;
}
.executive-empty {
    min-height: 120px;
    display: grid;
    place-items: center;
    color: #8a837c;
    font-size: .76rem;
    font-style: italic;
}
.executive-insight-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.executive-insight-grid > div {
    padding: 7px 8px;
    border-left: 3px solid #e98224;
    background: #fbfaf8;
}
.executive-insight-grid h3 { margin: 0 0 3px; color: #3c4752; font-size: .7rem; }
.executive-insight-grid p,
.executive-insight-grid ul { margin: 0; color: #625c56; font-size: .63rem; line-height: 1.33; }
.executive-insight-grid ul { padding-inline-start: 16px; }
.executive-page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 6px;
    border-top: 1px solid #ded8d0;
    color: #817970;
    font-size: .58rem;
}
.executive-year-overview { flex: 1; }
.executive-year-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.executive-year-month {
    min-height: 112px;
    padding: 8px;
    border: 1px solid #ded8d0;
    background: #fbfaf8;
    overflow: hidden;
}
.executive-year-month.has-appointments { border-top: 3px solid #e98224; background: #fffaf4; }
.executive-year-month header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.executive-year-month header strong { color: #263442; font-size: .75rem; }
.executive-year-month header span {
    min-width: 25px;
    height: 25px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e98224;
    color: #fff;
    font-size: .66rem;
    font-weight: 900;
}
.executive-year-month:not(.has-appointments) header span { background: #c9c2ba; }
.executive-year-month-stats { margin-top: 6px; display: flex; justify-content: space-between; gap: 4px; color: #756e67; font-size: .58rem; }
.executive-year-month-stats .conflict { color: #b8413c; font-weight: 800; }
.executive-year-month p {
    margin: 8px 0 0;
    color: #5f5851;
    font-size: .62rem;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.executive-year-notes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}
.executive-year-notes > div {
    min-height: 38px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #ded8d0;
    background: #fbfaf8;
    font-size: .64rem;
}
.executive-year-notes strong { color: #5a5149; }
.executive-year-notes span { color: #263442; font-weight: 800; text-align: end; }

@media (max-width: 1400px) {
    .executive-report-launch { width: 40px; padding: 0; }
    .executive-report-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 900px) {
    .executive-report-modal { padding: 8px; }
    .executive-report-card { width: 100%; height: 98vh; border-radius: 16px; }
    .executive-report-controls { grid-template-columns: 1fr; }
    .executive-report-search-group { order: -1; }
    .executive-report-date-search { flex-wrap: wrap; }
    .executive-report-actions { justify-content: stretch; }
    .executive-report-actions button { flex: 1; }
    .executive-report-page { min-width: 960px; }
}

@media print {
    @page { size: A4 landscape; margin: 7mm; }
    html, body {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
    }
    body > *:not(.executive-report-modal) { display: none !important; }
    .executive-report-modal[hidden] { display: none !important; }
    .executive-report-modal {
        position: static !important;
        inset: auto !important;
        display: block !important;
        padding: 0 !important;
        background: #fff !important;
        backdrop-filter: none !important;
    }
    .executive-report-card {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    .executive-report-toolbar,
    .executive-report-controls { display: none !important; }
    .executive-report-preview {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    .executive-report-page {
        width: 100% !important;
        height: 190mm !important;
        min-height: 190mm !important;
        max-height: 190mm !important;
        aspect-ratio: auto !important;
        margin: 0 !important;
        padding: 5mm 6mm 3mm !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
        overflow: hidden !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
    .executive-page-header h1 { font-size: 15pt !important; }
    .executive-metric { min-height: 11mm !important; }
    .executive-appointment-table { font-size: 7.2pt !important; }
    .executive-year-month { min-height: 27mm !important; }
}

/* Hotfix 19 print-width correction: override the app's centered flex body. */
@media print {
    html, body { display: block !important; }
    .executive-report-modal,
    .executive-report-card,
    .executive-report-preview { width: 100% !important; max-width: none !important; }
}


/* ============================================
   HOTFIX 20 — PRINT APPOINTMENT OVERVIEW + TRIAL FOOTER
   ============================================ */
/* Trial status is an account/status message, so it now sits in a compact
   footer at the lower-right rather than competing with primary header actions. */
.app-status-footer {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline: 2px;
    pointer-events: none;
}

.app-status-footer .trial-status-bar {
    min-height: 26px;
    max-width: min(340px, 70vw);
    padding: 4px 11px;
    border: 1px solid rgba(233, 130, 36, 0.30);
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.94);
    color: #6E4A2D;
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 3px 10px rgba(77, 61, 47, 0.10);
    pointer-events: auto;
}

.app-status-footer .trial-status-bar.is-warning {
    border-color: #E8BE78;
    background: #FFF5DF;
    color: #855113;
}

.app-status-footer .trial-status-bar.is-urgent,
.app-status-footer .trial-status-bar.is-expired {
    border-color: #E3A0A0;
    background: #FFF0F0;
    color: #9A2D2D;
}

@media (min-width: 981px) and (min-height: 701px) {
    .app-shell {
        grid-template-rows: 64px minmax(0, 1fr) 28px;
        gap: 8px;
    }
}

@media (max-width: 980px), (max-height: 700px) {
    .app-status-footer {
        margin-top: 8px;
        padding-inline: 0;
    }
}

@media (max-width: 640px) {
    .app-status-footer {
        justify-content: center;
    }
    .app-status-footer .trial-status-bar {
        max-width: 100%;
        font-size: 0.70rem;
    }
}

/* =========================================================
   HOTFIX 21 — Local appointment image attachments
   ========================================================= */
.appointment-attachments-panel {
    margin-top: 18px;
    padding: 14px 15px;
    border: 1px solid #E2D8CE;
    border-radius: 14px;
    background: #FFFDFB;
}

.appointment-attachments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}

.appointment-attachments-heading > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.appointment-attachments-heading strong {
    color: #2E3338;
    font-size: 0.98rem;
    font-weight: 760;
}

.appointment-attachment-count {
    color: #7B7168;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.attachment-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #E7B37D;
    border-radius: 10px;
    color: #8F4310;
    background: #FFF4E7;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.attachment-add-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.attachment-add-button:hover:not(:disabled) {
    border-color: #E98224;
    background: #FFEBD4;
    transform: translateY(-1px);
}

.attachment-add-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.appointment-attachment-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    gap: 9px;
    min-height: 84px;
}

.appointment-attachment-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78px;
    border: 1px dashed #D8CFC6;
    border-radius: 10px;
    color: #8A8178;
    background: #FFFFFF;
    font-size: 0.84rem;
}

.appointment-attachment-tile {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #D8CFC6;
    border-radius: 10px;
    background: #FFFFFF;
}

.appointment-attachment-open {
    display: block;
    width: 100%;
    height: 76px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #F4F0EB;
    cursor: zoom-in;
}

.appointment-attachment-open img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 180ms ease;
}

.appointment-attachment-open:hover img {
    transform: scale(1.045);
}

.appointment-attachment-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 50%;
    color: #FFFFFF;
    background: rgba(177, 53, 53, 0.90);
    box-shadow: 0 2px 7px rgba(0,0,0,0.22);
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
}

.appointment-attachment-name {
    display: block;
    padding: 6px 7px 7px;
    overflow: hidden;
    color: #5C554F;
    font-size: 0.69rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-attachment-status {
    min-height: 18px;
    margin-top: 6px;
    color: #B04B38;
    font-size: 0.75rem;
}

.appointment-attachment-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 3px;
}

.appointment-attachment-hint {
    color: #81786F;
    font-size: 0.73rem;
    line-height: 1.35;
}

.attachment-report-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #5D554E;
    font-size: 0.76rem;
    font-weight: 650;
    white-space: nowrap;
}

.attachment-report-option.is-disabled {
    opacity: 0.5;
}

.event-attachment-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.event-attachment-thumb {
    width: 42px;
    height: 34px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #DDD4CB;
    border-radius: 6px;
    background: #F5F1EC;
    cursor: zoom-in;
}

.event-attachment-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.event-attachment-strip > span {
    color: #796F66;
    font-size: 0.74rem;
    font-weight: 700;
}


.executive-subject-cell {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.executive-appointment-image {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    object-fit: cover;
    border: 0.5pt solid #D4C8BC;
    border-radius: 3px;
}

html[dir="rtl"] .appointment-attachment-remove {
    right: auto;
    left: 5px;
}

@media (max-width: 760px) {
    .appointment-attachment-grid {
        grid-template-columns: repeat(3, minmax(74px, 1fr));
    }

    .appointment-attachments-heading,
    .appointment-attachment-options {
        align-items: stretch;
        flex-direction: column;
    }

    .attachment-report-option {
        white-space: normal;
    }
}


/* HOTFIX 22 — Offline productivity suite; weather service removed */
.weather-disabled .day-weather-slot,.weather-disabled .appointment-weather-panel,.weather-disabled .insight-weather-card,.weather-disabled .summary-insight-section:has(.insight-weather-result){display:none!important}
.productivity-hub-launch{border-color:#D8C9B9;background:#fff;color:#5B4435}.productivity-hub-launch:hover{background:#FFF4E8;border-color:#E98224}
.appointment-local-tools{margin-top:14px;padding:14px;border:1px solid #E6DED4;background:#FCFBF9;border-radius:12px}.local-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.appointment-checklist-field{display:grid;gap:7px;margin-top:12px;text-align:left;font-weight:700}.appointment-checklist-field textarea{min-height:76px;border:1px solid #D8D1C8;border-radius:8px;padding:10px;resize:vertical;font:inherit}
.productivity-modal{position:fixed;inset:0;z-index:22000;background:rgba(36,31,27,.46);display:grid;place-items:center;padding:24px}.productivity-modal[hidden]{display:none}.productivity-card{width:min(1080px,96vw);height:min(760px,90vh);background:#fff;border-radius:20px;box-shadow:0 28px 80px rgba(0,0,0,.28);overflow:hidden;display:grid;grid-template-rows:auto auto 1fr}.productivity-header{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 26px;background:linear-gradient(135deg,#FFF7EE,#fff);border-bottom:1px solid #E8DED2}.productivity-header h2{margin:0;color:#2E3338}.productivity-header p{margin:5px 0 0;color:#6C655E}.productivity-header button{border:0;background:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer}.productivity-tabs{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid #E6DED4;background:#FAF8F5}.productivity-tabs button{border:0;background:transparent;padding:9px 14px;border-radius:8px;font-weight:700;color:#5E5852;cursor:pointer}.productivity-tabs button.active{background:#E98224;color:#fff}.productivity-pane{display:none;padding:20px 24px;overflow:auto}.productivity-pane.active{display:block}.productivity-filter-row{display:grid;grid-template-columns:1fr 180px;gap:10px;position:sticky;top:-20px;background:#fff;padding:0 0 14px;z-index:2}.productivity-filter-row input,.productivity-filter-row select{border:1px solid #D7CFC6;border-radius:8px;padding:10px;font:inherit}.agenda-results{display:grid;gap:8px}.agenda-item{border:1px solid #E4DED5;background:#fff}.agenda-item:hover{background:#FFF7EE}.agenda-item>button{display:grid;width:100%;text-align:left;border:0;background:transparent;padding:11px 14px;cursor:pointer}.agenda-item strong{color:#2E3338}.agenda-item small,.agenda-date{color:#756D65}.trash-item{display:flex;align-items:center;justify-content:space-between;padding:11px 14px}.trash-item>div:first-child{display:grid}.trash-item button,.productivity-actions button,.trash-heading button{border:1px solid #D7CFC6;background:#fff;border-radius:7px;padding:8px 11px;cursor:pointer}.trash-item button:hover,.productivity-actions button:hover{border-color:#E98224;background:#FFF4E8}.trash-item button.danger{color:#B23A3A}.trash-heading{display:flex;justify-content:space-between;align-items:flex-start}.productivity-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.tool-status{min-height:24px;color:#386A3F;font-weight:700}.tool-empty{padding:40px;text-align:center;color:#81786F;border:1px dashed #D8D1C8;border-radius:10px}
@media(max-width:760px){.productivity-filter-row{grid-template-columns:1fr}.local-tools-grid{grid-template-columns:1fr}.productivity-tabs{overflow-x:auto}.productivity-card{height:94vh}.productivity-modal{padding:8px}}
.event-checklist-preview{margin:6px 0 0 18px;padding:0;color:#5F5851;font-size:.83rem}.event-checklist-preview li{margin:2px 0}
.insight-mini-grid-no-weather{grid-template-columns:1fr 1fr}.insight-mini-grid-no-weather .insight-events-card,.insight-mini-grid-no-weather .insight-advice-card{min-height:0}
@media (forced-colors: active){.productivity-card,.appointment-local-tools,.agenda-item{border:1px solid CanvasText}.productivity-tabs button.active{outline:2px solid Highlight}}

/* ============================================
   HOTFIX 24 — CONTACT FIELDS, TODAY-FIRST REPORT,
   PDF GUIDANCE AND MONTH LIST NAVIGATION
   ============================================ */
.monthly-appointments-navigation {
    min-height: 34px;
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.monthly-appointments-navigation button {
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #ded5cb;
    border-radius: 8px;
    background: #fff;
    color: #71431f;
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
}
.monthly-appointments-navigation button:hover,
.monthly-appointments-navigation button:focus-visible {
    border-color: #e98224;
    background: #fff4e8;
    outline: none;
}
.monthly-appointments-navigation strong {
    min-width: 112px;
    color: #263445;
    font-size: .79rem;
    font-weight: 850;
    text-align: center;
}
.monthly-appointments-divider {
    color: #b7aa9d;
    font-size: .8rem;
    font-weight: 500;
}
.monthly-appointments-navigation + .monthly-appointments-list {
    margin-top: 7px;
}

.appointment-contact-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.appointment-contact-field {
    min-width: 0;
    display: grid;
    gap: 7px;
    color: #5e4633;
    font-size: .95em;
    font-weight: 700;
    text-align: left;
}
.appointment-contact-field input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 11px;
    border: 1px solid #d8d0c6;
    border-radius: 8px;
    background: #fff;
    color: #263442;
    font: inherit;
}
.appointment-contact-field input:focus {
    border-color: #e98224;
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 130, 36, .13);
}
.event-contact-text {
    display: block;
    margin-top: 5px;
    color: #5f5851;
    font-size: .84rem;
    line-height: 1.35;
}

.executive-report-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 330px;
}
.executive-report-pdf-help {
    flex: 1 0 100%;
    color: #756d65;
    font-size: .64rem;
    line-height: 1.25;
    text-align: end;
}
.executive-month-body {
    grid-template-columns: minmax(0, 1.85fr) minmax(235px, .65fr);
}
.executive-appointment-table {
    font-size: .62rem;
}
.executive-appointment-table th,
.executive-appointment-table td {
    padding-inline: 4px;
}
.executive-appointment-table th:nth-child(1),
.executive-appointment-table td:nth-child(1) { width: 15%; }
.executive-appointment-table th:nth-child(2),
.executive-appointment-table td:nth-child(2) { width: 10%; }
.executive-appointment-table th:nth-child(3),
.executive-appointment-table td:nth-child(3) { width: 30%; }
.executive-appointment-table th:nth-child(4),
.executive-appointment-table td:nth-child(4) { width: 17%; }
.executive-appointment-table th:nth-child(5),
.executive-appointment-table td:nth-child(5) { width: 16%; }
.executive-appointment-table th:nth-child(6),
.executive-appointment-table td:nth-child(6) { width: 12%; }
.executive-phone-cell {
    white-space: nowrap;
    direction: ltr;
    text-align: start;
}

@media (max-width: 760px) {
    .appointment-contact-grid { grid-template-columns: 1fr; }
    .monthly-appointments-navigation { gap: 5px; }
    .monthly-appointments-navigation button { padding-inline: 7px; }
    .monthly-appointments-navigation strong { min-width: 94px; }
    .executive-report-actions { max-width: none; }
    .executive-report-pdf-help { text-align: center; }
}

@media print {
    .executive-appointment-table { font-size: 6.6pt !important; }
}


/* ============================================
   HOTFIX 25 — CLEAR RANGE SEARCH, FULL REPORT,
   AND EXPLICIT MONTH NAVIGATION
   ============================================ */
.executive-report-controls {
    grid-template-columns: minmax(620px, 1fr) auto;
    gap: 16px;
    align-items: center;
}
.executive-report-range { display: none !important; }
.executive-report-search-group { gap: 5px; }
.executive-report-date-search {
    align-items: center;
    gap: 10px;
}
.executive-report-date-block {
    min-width: 0;
    margin: 0;
    padding: 5px 8px 7px;
    display: grid;
    grid-template-columns: minmax(74px, .7fr) minmax(135px, 1.35fr) minmax(92px, .9fr);
    gap: 7px;
    border: 1px solid #ded5cb;
    border-radius: 10px;
    background: #fff;
}
.executive-report-date-block legend {
    padding: 0 6px;
    color: #71431f;
    font-size: .7rem;
    font-weight: 850;
}
.executive-report-date-block label {
    min-width: 0;
    display: grid;
    gap: 3px;
    color: #71685f;
    font-size: .62rem;
    font-weight: 750;
}
.executive-report-date-block select {
    width: 100%;
    min-width: 0;
    min-height: 33px;
    padding: 0 26px 0 8px;
    border: 1px solid #d8d1c8;
    border-radius: 8px;
    background: #fff;
    color: #263442;
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
}
.executive-report-date-block select:focus {
    border-color: #e98224;
    outline: none;
    box-shadow: 0 0 0 3px rgba(233,130,36,.13);
}
.executive-report-actions .search {
    border: 1px solid #bd5d0c;
    background: #fff0df;
    color: #9a4e0a;
}
.executive-report-actions .search:hover,
.executive-report-actions .search:focus-visible {
    background: #e98224;
    color: #fff;
    outline: none;
}
.executive-report-page.range-report {
    min-height: 718px;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
}
.range-report .executive-report-section,
.range-report .executive-range-appointments {
    overflow: visible;
}
.range-report .executive-appointment-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
.range-report .executive-page-footer { margin-top: auto; }

@media (max-width: 1100px) {
    .executive-report-controls { grid-template-columns: 1fr; }
    .executive-report-actions { max-width: none; justify-content: center; }
}
@media (max-width: 760px) {
    .executive-report-date-search { align-items: stretch; flex-direction: column; }
    .executive-report-date-separator { display: none; }
    .executive-report-date-block { grid-template-columns: minmax(64px,.65fr) minmax(130px,1.35fr) minmax(88px,.9fr); }
}

@media print {
    .executive-report-page.range-report {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 5mm 6mm 3mm !important;
        overflow: visible !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
    }
    .range-report .executive-page-header,
    .range-report .executive-metrics,
    .range-report .executive-page-footer {
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
    }
    .range-report .executive-report-section {
        overflow: visible !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }
    .range-report .executive-appointment-table {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }
    .range-report .executive-appointment-table thead {
        display: table-header-group !important;
    }
    .range-report .executive-appointment-table tbody {
        display: table-row-group !important;
    }
    .range-report .executive-appointment-table tr {
        page-break-inside: avoid !important;
        break-inside: avoid-page !important;
    }
    .range-report .executive-appointment-table td {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .range-report .executive-page-footer { margin-top: 4mm !important; }
}

/* Hotfix 25 control-layout refinement: keep each date selector clear and independent. */
.executive-report-controls {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 9px;
}
.executive-report-date-search {
    align-items: stretch;
}
.executive-report-date-block {
    width: min(430px, 46%);
    flex: 1 1 360px;
}
.executive-report-date-block label {
    grid-template-columns: 1fr;
    align-items: stretch;
}
.executive-report-actions {
    max-width: none;
    justify-content: center;
}
.executive-report-pdf-help {
    flex: 0 1 420px;
    text-align: start;
}
@media (max-width: 760px) {
    .executive-report-date-block { width: 100%; max-width: none; }
    .executive-report-pdf-help { flex-basis: 100%; text-align: center; }
}

/* ============================================
   HOTFIX 26 — COMPACT DATE CONTROLS AND
   ALIGNED REPORT ACTIONS
   ============================================ */
.executive-report-date-search {
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
}
.executive-report-date-block {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    grid-template-columns: 84px 190px 110px;
}
.executive-report-date-block label {
    width: auto;
}
.executive-report-actions {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-content: center;
    align-items: center;
    gap: 7px 10px;
}
.executive-report-actions button {
    white-space: nowrap;
}
.executive-report-pdf-help {
    grid-column: 1 / -1;
    width: min(720px, 100%);
    max-width: 720px;
    justify-self: center;
    flex: none;
    text-align: center;
}

@media (max-width: 940px) {
    .executive-report-date-search {
        align-items: stretch;
        flex-direction: column;
    }
    .executive-report-date-separator {
        display: none;
    }
    .executive-report-date-block {
        width: min(430px, 100%);
        max-width: 100%;
        flex: none;
    }
}

@media (max-width: 620px) {
    .executive-report-date-block {
        grid-template-columns: 78px minmax(136px, 1fr) 98px;
    }
    .executive-report-actions {
        width: min(520px, 100%);
        margin-inline: auto;
        grid-template-columns: 1fr 1fr;
    }
    .executive-report-actions button {
        justify-content: center;
    }
    .executive-report-actions .primary {
        grid-column: 1 / -1;
    }
    .executive-report-pdf-help {
        grid-column: 1 / -1;
    }
}

/* ============================================
   HOTFIX 27 — SEQUENCE, APPOINTMENT TIME,
   16PX FLEXIBLE REPORT TABLE
   ============================================ */
.executive-appointment-table {
    width: 100%;
    table-layout: auto;
    font-size: 16px;
}
.executive-appointment-table th,
.executive-appointment-table td {
    min-width: 0;
    padding: 7px 8px;
    font-size: 16px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: normal;
}
.executive-appointment-table th:nth-child(n),
.executive-appointment-table td:nth-child(n) {
    width: auto;
}
.executive-appointment-table th:nth-child(1),
.executive-appointment-table td:nth-child(1),
.executive-appointment-table th:nth-child(2),
.executive-appointment-table td:nth-child(2),
.executive-appointment-table th:nth-child(3),
.executive-appointment-table td:nth-child(3),
.executive-appointment-table th:nth-child(7),
.executive-appointment-table td:nth-child(7) {
    width: 1%;
    white-space: nowrap;
}
.executive-appointment-table th:nth-child(4),
.executive-appointment-table td:nth-child(4) {
    width: 32%;
}
.executive-appointment-table th:nth-child(5),
.executive-appointment-table td:nth-child(5) {
    width: 18%;
}
.executive-appointment-table th:nth-child(6),
.executive-appointment-table td:nth-child(6) {
    width: 16%;
}
.executive-sequence-cell,
.executive-appointment-table th:first-child {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.executive-phone-cell {
    white-space: nowrap !important;
}

@media (max-width: 980px) {
    .executive-appointment-table th,
    .executive-appointment-table td {
        padding-inline: 6px;
    }
    .executive-appointment-table th:nth-child(4),
    .executive-appointment-table td:nth-child(4) {
        width: 28%;
    }
}

@media print {
    .executive-appointment-table,
    .executive-appointment-table th,
    .executive-appointment-table td {
        font-size: 16px !important;
    }
    .executive-appointment-table {
        table-layout: auto !important;
    }
    .executive-appointment-table th,
    .executive-appointment-table td {
        padding: 5px 6px !important;
    }
}


/* ============================================
   HOTFIX 28 — PRINT TYPOGRAPHY STANDARD,
   STABLE DATE COLUMNS, AND NORMAL SUBJECT TEXT
   ============================================ */
.executive-report-page {
    font-family: "Segoe UI Variable", "Segoe UI", "Leelawadee UI", Tahoma, sans-serif;
    font-size: 10pt;
}
.executive-page-kicker {
    font-size: 8.5pt;
}
.executive-page-header h1 {
    font-size: 15pt;
    font-weight: 800;
}
.executive-page-header p {
    font-size: 11pt;
}
.executive-page-meta {
    font-size: 8.5pt;
}
.executive-page-meta strong {
    font-size: 9pt;
}
.executive-metric span {
    font-size: 9.5pt;
}
.executive-metric strong {
    font-size: 10pt;
}
.executive-report-section > h2 {
    font-size: 11pt;
    font-weight: 800;
}
.executive-appointment-table {
    width: 100%;
    table-layout: fixed;
    font-size: 10pt;
}
.executive-appointment-table col.executive-col-sequence { width: 7%; }
.executive-appointment-table col.executive-col-date { width: 15%; }
.executive-appointment-table col.executive-col-time { width: 12%; }
.executive-appointment-table col.executive-col-subject { width: 26%; }
.executive-appointment-table col.executive-col-location { width: 14%; }
.executive-appointment-table col.executive-col-contact { width: 14%; }
.executive-appointment-table col.executive-col-phone { width: 12%; }
.executive-appointment-table th,
.executive-appointment-table td {
    width: auto;
    min-width: 0;
    padding: 5px 6px;
    font-size: 10pt;
    line-height: 1.3;
    vertical-align: top;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: break-word;
}
.executive-appointment-table th {
    font-weight: 800;
}
.executive-appointment-table td {
    font-weight: 400;
}
.executive-appointment-table th:nth-child(1),
.executive-appointment-table td:nth-child(1),
.executive-appointment-table th:nth-child(2),
.executive-appointment-table td:nth-child(2),
.executive-appointment-table th:nth-child(3),
.executive-appointment-table td:nth-child(3),
.executive-appointment-table th:nth-child(7),
.executive-appointment-table td:nth-child(7) {
    width: auto;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
.executive-appointment-table th:nth-child(4),
.executive-appointment-table td:nth-child(4),
.executive-appointment-table th:nth-child(5),
.executive-appointment-table td:nth-child(5),
.executive-appointment-table th:nth-child(6),
.executive-appointment-table td:nth-child(6) {
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
}
.executive-subject-cell,
.executive-subject-cell > span,
.executive-subject-cell strong {
    font-weight: 400;
}
.executive-page-footer {
    font-size: 8.5pt;
}
.executive-empty {
    font-size: 10pt;
}
.executive-insight-grid h3 {
    font-size: 10pt;
}
.executive-insight-grid p,
.executive-insight-grid ul {
    font-size: 9.5pt;
}

@media print {
    .executive-report-page {
        font-family: "Segoe UI Variable", "Segoe UI", "Leelawadee UI", Tahoma, sans-serif !important;
        font-size: 10pt !important;
    }
    .executive-page-kicker { font-size: 8.5pt !important; }
    .executive-page-header h1 {
        font-size: 15pt !important;
        font-weight: 800 !important;
    }
    .executive-page-header p { font-size: 11pt !important; }
    .executive-page-meta { font-size: 8.5pt !important; }
    .executive-page-meta strong { font-size: 9pt !important; }
    .executive-metric span { font-size: 9.5pt !important; }
    .executive-metric strong { font-size: 10pt !important; }
    .executive-report-section > h2 { font-size: 11pt !important; }
    .executive-appointment-table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 10pt !important;
    }
    .executive-appointment-table th,
    .executive-appointment-table td {
        padding: 4px 5px !important;
        font-size: 10pt !important;
        line-height: 1.25 !important;
    }
    .executive-appointment-table td { font-weight: 400 !important; }
    .executive-subject-cell,
    .executive-subject-cell > span,
    .executive-subject-cell strong { font-weight: 400 !important; }
    .executive-page-footer { font-size: 8.5pt !important; }
    .executive-empty { font-size: 10pt !important; }
}

@media print {
    .executive-appointment-table th:nth-child(1),
    .executive-appointment-table td:nth-child(1),
    .executive-appointment-table th:nth-child(2),
    .executive-appointment-table td:nth-child(2),
    .executive-appointment-table th:nth-child(3),
    .executive-appointment-table td:nth-child(3),
    .executive-appointment-table th:nth-child(7),
    .executive-appointment-table td:nth-child(7) {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
}

/* =========================================================
   HOTFIX 29 — Useful attachments, PDF, Wan Phra and tool labels
   ========================================================= */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.appointment-attachment-grid {
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    align-items: stretch;
}

.appointment-attachment-tile {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: minmax(58px, auto) auto;
    min-height: 96px;
    overflow: hidden;
}

.appointment-attachment-open {
    grid-row: 1 / 3;
    width: 76px;
    height: 100%;
    min-height: 96px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.appointment-attachment-open.is-pdf,
.appointment-attachment-tile.is-pdf .appointment-attachment-open {
    background: #FFF5F3;
}

.appointment-attachment-details {
    min-width: 0;
    padding: 9px 9px 3px;
}

.appointment-attachment-details .appointment-attachment-name {
    padding: 0;
    color: #39342f;
    font-size: 0.76rem;
    line-height: 1.25;
}

.appointment-attachment-details small {
    display: block;
    margin-top: 5px;
    color: #81786f;
    font-size: 0.67rem;
}

.appointment-attachment-actions {
    display: flex;
    gap: 6px;
    align-items: end;
    padding: 3px 9px 8px;
}

.appointment-attachment-actions button {
    min-height: 27px;
    padding: 4px 8px;
    border: 1px solid #d6c9bd;
    border-radius: 7px;
    color: #554a41;
    background: #fff;
    font: inherit;
    font-size: 0.67rem;
    font-weight: 700;
    cursor: pointer;
}

.appointment-attachment-actions button:hover { background: #fff5e9; }
.appointment-attachment-actions button.danger { color: #a13d35; border-color: #e4b8b2; }

.attachment-pdf-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 54px;
}

.attachment-pdf-icon svg {
    width: 100%;
    height: 100%;
    fill: #fff;
    stroke: #c74336;
    stroke-width: 2;
    stroke-linejoin: round;
}

.attachment-pdf-icon text {
    fill: #c74336;
    stroke: none;
    font: 800 11px "Segoe UI", sans-serif;
}

.event-attachment-thumb.is-pdf {
    display: grid;
    place-items: center;
    background: #fff5f3;
    cursor: pointer;
}

.event-attachment-thumb .attachment-pdf-icon {
    width: 24px;
    height: 28px;
}

.event-attachment-summary {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #d9cec3;
    border-radius: 8px;
    color: #665c53;
    background: #fffaf5;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}

.attachment-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 7px;
    padding: 2px 6px;
    border: 1px solid #dec9b5;
    border-radius: 999px;
    color: #754617;
    background: #fff5e9;
    font-size: 0.72em;
    font-weight: 750;
    white-space: nowrap;
    vertical-align: middle;
}

.executive-attachment-summary {
    margin-top: 4px;
    color: #625950;
    font-size: 0.82em;
    line-height: 1.25;
}

.executive-attachment-summary span {
    display: block;
    font-weight: 700;
}

.executive-attachment-summary small {
    display: block;
    overflow-wrap: anywhere;
    color: #756c63;
    font-size: 0.95em;
    font-weight: 400;
}

.days .day-cell { position: relative; }
.wan-phra-marker {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid #e2bd68;
    border-radius: 50%;
    background: #fff8d9;
    box-shadow: 0 1px 3px rgba(104, 74, 16, 0.18);
}

.wan-phra-marker img {
    width: 14px;
    height: 14px;
    display: block;
}

.year-day .wan-phra-marker.compact {
    top: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.year-day .wan-phra-marker.compact img { width: 9px; height: 9px; }
.year-day.today .wan-phra-marker { filter: brightness(0) invert(1); }

@media (max-width: 720px) {
    .appointment-attachment-grid { grid-template-columns: 1fr; }
}

@media print {
    .executive-attachment-summary {
        margin-top: 2pt;
        font-size: 8.5pt;
        line-height: 1.2;
    }
}


/* HOTFIX 29: every saved attachment remains directly visible and openable. */
.event-attachment-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid #d9cec3;
    border-radius: 8px;
    color: #665c53;
    background: #fffaf5;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   HOTFIX 30 — Buy during trial + Store subscription actions
   ========================================================= */
.trial-purchase-strip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    pointer-events: auto;
}

.trial-buy-now-button {
    min-height: 26px;
    padding: 4px 12px;
    border: 1px solid #D96C15;
    border-radius: 999px;
    background: #E98224;
    color: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(217, 108, 21, 0.18);
}

.trial-buy-now-button:hover { background: #D96C15; }
.trial-buy-now-button:focus-visible {
    outline: 3px solid rgba(233, 130, 36, 0.28);
    outline-offset: 2px;
}
.trial-buy-now-button[hidden] { display: none !important; }

.app-status-footer .trial-status-bar.is-active {
    border-color: #9BCBA8;
    background: #EFFAF2;
    color: #246B38;
}

.trial-notice-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.paywall-card { max-width: 460px; }
.paywall-billing-note {
    color: #7A4A18;
    background: #FFF6E9;
    border: 1px solid #F1D1AB;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88em;
    line-height: 1.45;
}
.paywall-btn-tertiary {
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border-light);
}
.paywall-btn:disabled,
.paywall-plan.is-disabled {
    opacity: 0.58;
    cursor: wait;
}
.paywall-store-status {
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 9px;
    background: #F4F6F8;
    color: var(--text-light);
    font-size: 0.86em;
    line-height: 1.4;
}
.paywall-store-status.is-success {
    background: #ECF8EF;
    color: #246B38;
    border: 1px solid #B8DCC1;
}
.paywall-store-status.is-error {
    background: #FFF1F1;
    color: #9A2D2D;
    border: 1px solid #E9B8B8;
}
.paywall-store-status.is-working {
    background: #EEF5FC;
    color: #245A86;
    border: 1px solid #C7DBEE;
}

@media (max-width: 640px) {
    .trial-purchase-strip {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .trial-buy-now-button { font-size: 0.70rem; }
    .trial-notice-actions { grid-template-columns: 1fr; }
}

/* ============================================
   HOTFIX 31: Clear backup/restore and ICS guidance
   ============================================ */
.tool-explanation {
    display: grid;
    gap: 8px;
    margin: 10px 0 2px;
    padding: 12px 14px;
    border: 1px solid #E5DDD3;
    border-radius: 10px;
    background: #FCFAF7;
    color: #5E5750;
    line-height: 1.55;
}

.tool-explanation p {
    margin: 0;
}

.tool-explanation p + p {
    padding-top: 8px;
    border-top: 1px dashed #DDD3C8;
    color: #8A4E1D;
}

.backup-location-panel,
.ics-import-summary {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #D9D1C7;
    border-radius: 10px;
    background: #FFF9F1;
    color: #433E39;
}

.backup-location-panel[hidden],
.ics-import-summary[hidden],
.agenda-mode-banner[hidden] {
    display: none !important;
}

#backupLocationText {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.backup-location-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.backup-location-actions button,
.ics-import-summary > button,
.agenda-mode-banner button {
    border: 1px solid #D7CFC6;
    border-radius: 7px;
    padding: 8px 11px;
    background: #FFFFFF;
    color: #4A443F;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.backup-location-actions button:hover,
.ics-import-summary > button:hover,
.agenda-mode-banner button:hover {
    border-color: #E98224;
    background: #FFF4E8;
}

.ics-import-preview {
    display: grid;
    gap: 6px;
    max-height: 230px;
    overflow: auto;
}

.ics-import-preview > div {
    display: grid;
    grid-template-columns: minmax(145px, auto) 1fr;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #E5DED5;
    border-radius: 8px;
    background: #FFFFFF;
}

.ics-import-preview span {
    color: #756D65;
    white-space: nowrap;
}

.ics-import-preview strong {
    color: #2E3338;
    overflow-wrap: anywhere;
}

.agenda-mode-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid #F1C99E;
    border-radius: 9px;
    background: #FFF6EA;
    color: #7A4215;
    font-weight: 700;
}

@media (max-width: 700px) {
    .ics-import-preview > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .ics-import-preview span {
        white-space: normal;
    }

    .agenda-mode-banner {
        align-items: stretch;
        flex-direction: column;
    }
}


/* ============================================
   HOTFIX 32 — COMPACT MULTILINGUAL GUIDANCE AND ARROW-ONLY MONTH NAVIGATION
   ============================================ */
.calendar-hint-row {
    position: relative;
    min-width: 0;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-light);
}
.calendar-hint-symbol {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    display: inline-grid;
    place-items: center;
    color: #b45d16;
}
.calendar-hint-symbol svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.calendar-hint-row .title-text {
    max-width: none;
    margin: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
.calendar-hint-button {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 0;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid #d7cabc;
    border-radius: 50%;
    background: #fff;
    color: #8b4d1d;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.calendar-hint-button:hover,
.calendar-hint-button:focus-visible,
.calendar-hint-button[aria-expanded="true"] {
    border-color: #e98224;
    background: #fff4e8;
    outline: none;
}
.calendar-hint-popover {
    position: absolute;
    z-index: 180;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: min(360px, 72vw);
    padding: 9px 11px;
    border: 1px solid #ddcdbd;
    border-radius: 9px;
    background: #fffdf9;
    box-shadow: 0 10px 28px rgba(72, 48, 28, .18);
    color: #4f443b;
    font-size: .78rem;
    font-weight: 550;
    line-height: 1.45;
    white-space: normal;
}
.calendar-hint-popover[hidden] { display: none; }
html[dir="rtl"] .calendar-hint-popover {
    right: 0;
    left: auto;
    text-align: right;
}

.monthly-appointments-navigation {
    gap: 12px;
    direction: ltr;
}
.monthly-appointments-navigation .monthly-nav-arrow {
    position: relative;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border-radius: 9px;
    font-size: 1.28rem;
    line-height: 1;
}
.monthly-appointments-navigation .monthly-nav-arrow::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 80;
    bottom: calc(100% + 7px);
    left: 50%;
    padding: 6px 8px;
    border: 1px solid #decfbe;
    border-radius: 7px;
    background: #2f2b28;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .14s ease, transform .14s ease;
}
.monthly-appointments-navigation .monthly-nav-arrow:hover::after,
.monthly-appointments-navigation .monthly-nav-arrow:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.monthly-appointments-navigation strong {
    min-width: 126px;
    max-width: calc(100% - 92px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[dir="rtl"] .monthly-appointments-navigation {
    flex-direction: row-reverse;
}
@media (max-width: 760px) {
    .calendar-hint-row .title-text { white-space: normal; }
    .calendar-hint-popover { max-width: min(300px, 82vw); }
    .monthly-appointments-navigation { gap: 8px; }
    .monthly-appointments-navigation strong { min-width: 96px; }
}

/* ============================================
   HOTFIX 33 — COMPLETE 12-LANGUAGE AUDIT
   Responsive safeguards for long translated text.
   ============================================ */
.productivity-modal,
.executive-report-modal,
.paywall-overlay {
    box-sizing: border-box;
    max-width: 100vw;
}
.productivity-card {
    width: min(1080px, calc(100vw - 48px));
    max-width: 100%;
    max-height: calc(100vh - 48px);
    min-width: 0;
    box-sizing: border-box;
}
.productivity-header > div,
.productivity-pane,
.productivity-tabs,
.trash-heading > div,
.executive-report-toolbar-copy,
.executive-report-toolbar-copy > div {
    min-width: 0;
}
.productivity-header h2,
.productivity-header p,
.productivity-pane h3,
.productivity-pane p,
.trash-heading h3,
.trash-heading p,
.executive-report-toolbar-copy h2,
.executive-report-toolbar-copy p,
.paywall-title,
.paywall-subtitle,
.paywall-plan-title,
.paywall-plan-note,
.paywall-billing-note {
    overflow-wrap: anywhere;
    word-break: normal;
}
.productivity-tabs {
    flex-wrap: wrap;
    overflow: visible;
}
.productivity-tabs button,
.productivity-actions button,
.trash-heading button,
.executive-report-actions button,
.paywall-btn,
.trial-notice-actions button {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
.productivity-filter-row > *,
.local-tools-grid > *,
.executive-report-controls > *,
.executive-report-date-search > * {
    min-width: 0;
}
html[dir="rtl"] .productivity-modal,
html[dir="rtl"] .executive-report-modal,
html[dir="rtl"] .paywall-overlay {
    direction: ltr;
}
html[dir="rtl"] .productivity-card,
html[dir="rtl"] .executive-report-card,
html[dir="rtl"] .paywall-card {
    direction: rtl;
}
@media (max-width: 900px), (max-height: 620px) {
    .productivity-modal { padding: 8px; }
    .productivity-card {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
        border-radius: 14px;
    }
    .productivity-header { padding: 14px 16px; gap: 12px; }
    .productivity-tabs { padding: 8px 10px; }
    .productivity-tabs button { flex: 1 1 180px; }
    .productivity-pane { padding: 14px 16px; }
    .executive-report-card {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
    }
}
@media (max-width: 560px) {
    .productivity-tabs button { flex-basis: 135px; padding: 8px 9px; }
    .productivity-actions,
    .trial-notice-actions,
    .paywall-actions { align-items: stretch; }
    .productivity-actions button,
    .trial-notice-actions button,
    .paywall-actions button { flex: 1 1 100%; }
    .trash-heading { gap: 10px; flex-wrap: wrap; }
}

/* Use the modal content box rather than 100vw so Windows scrollbar width at
   125–150% scaling cannot push the card outside the visible viewport. */
@media (max-width: 900px), (max-height: 620px) {
    .productivity-card,
    .executive-report-card {
        width: 100%;
        max-width: 100%;
    }
}


/* =========================================================
   HOTFIX 34 — Green add symbol and one-click attachment export
   ========================================================= */
.add-appointment-plus {
    color: #198754;
}

.monthly-appointment-item {
    position: relative;
    cursor: pointer;
}

.monthly-appointment-open-button {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.monthly-appointment-item:has(.monthly-appointment-open-button:focus-visible) {
    outline: 3px solid rgba(233, 130, 36, .28);
    outline-offset: 2px;
}

.monthly-appointment-item .attachment-export-badge {
    position: relative;
    z-index: 2;
}

.attachment-export-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 46px;
    min-height: 28px;
    margin-inline-start: 7px;
    padding: 3px 8px;
    border: 1px solid #cfb99f;
    border-radius: 999px;
    color: #754617;
    background: #fff8ef;
    font: inherit;
    font-size: .78em;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.attachment-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 46px;
    min-height: 28px;
    margin-inline-start: 7px;
    padding: 3px 8px;
    border: 1px solid #cfb99f;
    border-radius: 999px;
    color: #754617;
    background: #fff8ef;
    font: inherit;
    font-size: .78em;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    pointer-events: none;
}

.monthly-appointment-message .attachment-status-badge {
    vertical-align: middle;
}

.attachment-export-badge:hover,
.attachment-export-badge:focus-visible {
    border-color: #e98224;
    background: #fff0df;
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 130, 36, .14);
}

.monthly-appointment-message .attachment-export-badge {
    vertical-align: middle;
}

.executive-appointment-table col.executive-col-sequence { width: 6%; }
.executive-appointment-table col.executive-col-date { width: 14%; }
.executive-appointment-table col.executive-col-time { width: 11%; }
.executive-appointment-table col.executive-col-subject { width: 24%; }
.executive-appointment-table col.executive-col-location { width: 12%; }
.executive-appointment-table col.executive-col-contact { width: 12%; }
.executive-appointment-table col.executive-col-phone { width: 11%; }
.executive-appointment-table col.executive-col-attachments { width: 10%; }

.executive-appointment-table th:nth-child(8),
.executive-appointment-table td:nth-child(8) {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    text-align: center;
}

.executive-attachment-cell .attachment-export-badge {
    margin: 0;
}

.attachment-export-toast {
    position: fixed;
    z-index: 40000;
    inset-inline-end: 22px;
    bottom: 22px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 11px 15px;
    border: 1px solid #a8cdb2;
    border-radius: 10px;
    color: #164d28;
    background: #effaf2;
    box-shadow: 0 12px 32px rgba(30, 44, 34, .2);
    font-size: .86rem;
    font-weight: 750;
    line-height: 1.35;
}
.attachment-export-toast[hidden] { display: none; }
.attachment-export-toast[data-tone="progress"] { color: #6e480e; border-color: #e4c28d; background: #fff8ea; }
.attachment-export-toast[data-tone="neutral"] { color: #54504c; border-color: #d7d1ca; background: #fff; }
.attachment-export-toast[data-tone="error"] { color: #8a2929; border-color: #e0b2b2; background: #fff3f3; }

@media print {
    .attachment-export-badge {
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: inherit !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 10pt !important;
        cursor: default !important;
    }
    .attachment-export-toast { display: none !important; }
    .executive-appointment-table th:nth-child(8),
    .executive-appointment-table td:nth-child(8) {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
}

@media (max-width: 900px) {
    .attachment-export-badge {
        min-width: 42px;
        padding-inline: 6px;
    }
}

/* =========================================================
   HOTFIX 35 — Milestone trial popups and one-time purchase
   ========================================================= */
@media (min-width: 981px) and (min-height: 701px) {
    .app-shell {
        grid-template-rows: 68px minmax(0, 1fr);
        gap: 12px;
    }
}

.trial-notice-content {
    width: min(500px, calc(100vw - 32px));
    padding: 28px;
}

.trial-notice-title {
    margin: 2px 0 10px;
    color: #2f3338;
    font-size: 1.22rem;
    line-height: 1.3;
}

.trial-notice-content .confirm-message {
    color: #5f5851;
    line-height: 1.65;
}

.trial-notice-purchase-note {
    margin: 16px 0 2px;
    padding: 10px 14px;
    border: 1px solid #ead1b4;
    border-radius: 10px;
    background: #fff8ef;
    color: #824817;
    font-size: .88rem;
    font-weight: 800;
    text-align: center;
}

.trial-notice-actions {
    margin-top: 18px;
    gap: 10px;
}

.paywall-plan-list.single-plan {
    grid-template-columns: minmax(0, 1fr);
}

.paywall-plan.lifetime-plan {
    cursor: default;
}

.paywall-plan.lifetime-plan:hover {
    transform: none;
}

.license-pane-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.license-pane-heading h3 {
    margin: 0;
    color: #2f3338;
    font-size: 1.2rem;
}

.license-pane-heading p {
    margin: 5px 0 0;
    color: #756d65;
    line-height: 1.45;
}

.license-pane-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid #ead6c1;
    border-radius: 12px;
    background: #fff7ee;
    font-size: 1.35rem;
}

.license-status-card {
    padding: 22px;
    border: 1px solid #e3d9ce;
    border-radius: 16px;
    background: linear-gradient(145deg, #fffdfb, #fff8f1);
    box-shadow: 0 10px 28px rgba(80, 58, 37, .08);
}

.license-status-label {
    display: block;
    color: #776d63;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.license-status-value {
    display: block;
    margin-top: 7px;
    color: #80501f;
    font-size: 1.22rem;
    line-height: 1.3;
}

.license-status-value.is-active { color: #19714a; }
.license-status-value.is-expired { color: #a23a35; }

.license-status-detail {
    margin: 10px 0 0;
    color: #5f5851;
    line-height: 1.55;
}

.license-purchase-note {
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid #e8c9a8;
    border-radius: 10px;
    background: #fff4e7;
    color: #804515;
    font-weight: 800;
}

.license-actions {
    margin-bottom: 4px;
}

.license-purchase-button {
    border-color: #dc741b !important;
    background: #e98224 !important;
    color: #fff !important;
    font-weight: 800;
}

.license-purchase-button:hover {
    background: #d66f18 !important;
}

.license-store-status {
    margin-top: 12px;
}

.about-app-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 2px 0;
    border-top: 1px solid #eee5dc;
    color: #777069;
    font-size: .82rem;
}

html[dir="rtl"] .license-pane-heading,
html[dir="rtl"] .license-status-card,
html[dir="rtl"] .about-app-meta {
    text-align: right;
}

@media (max-width: 560px) {
    .trial-notice-content { padding: 22px 18px; }
    .about-app-meta { flex-direction: column; }
}

.trial-notice-actions .confirm-btn-yes {
    border-color: #d86f18;
    background: #e98224;
    color: #fff;
}
.trial-notice-actions .confirm-btn-yes:hover,
.trial-notice-actions .confirm-btn-yes:focus-visible {
    background: #d66f18;
}


/* ============================================
   HOTFIX 37 — Simplified appointment popup
   Reminder, recurrence, category and status controls were removed from the
   appointment popup. The preparation checklist remains as the only local tool.
   ============================================ */
#eventModal .appointment-local-tools.appointment-checklist-only {
    margin-top: 16px;
    padding: 15px 16px 16px;
}

#eventModal .appointment-local-tools.appointment-checklist-only .appointment-checklist-field {
    margin-top: 0;
}

/* ============================================
   HOTFIX 39 — About app replaces Calendar tools
   ============================================ */
.about-app-launch svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.about-app-open {
    overflow: hidden;
}

.about-app-card {
    width: min(620px, calc(100vw - 32px));
    height: auto;
    max-height: min(720px, calc(100vh - 32px));
    grid-template-rows: auto minmax(0, 1fr);
}

.about-app-header {
    align-items: center;
}

.about-app-body {
    padding: 24px 26px 26px;
    overflow: auto;
}

.about-app-body .license-actions button {
    min-height: 42px;
}

@media (max-width: 560px) {
    .about-app-card {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .about-app-body {
        padding: 18px;
    }

    .about-app-body .license-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* ============================================
   HOTFIX 41 — MULTILINGUAL CLICK-DATE GUIDANCE
   Keep longer translated guidance fully visible in the fixed header.
   ============================================ */
html[lang="fr"] .calendar-hint-row .title-text,
html[lang="de"] .calendar-hint-row .title-text,
html[lang="pt"] .calendar-hint-row .title-text {
    font-size: 0.80rem;
    letter-spacing: -0.006em;
}

html[lang="es"] .calendar-hint-row .title-text,
html[lang="ru"] .calendar-hint-row .title-text {
    font-size: 0.80rem;
    letter-spacing: -0.006em;
}

html[lang="fr"] .brand-copy,
html[lang="de"] .brand-copy,
html[lang="pt"] .brand-copy {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

html[lang="fr"] .calendar-hint-row,
html[lang="de"] .calendar-hint-row,
html[lang="pt"] .calendar-hint-row {
    max-width: 100%;
}


/* ============================================
   HOTFIX 43: Local-first OneDrive sync
   ============================================ */
.cloud-sync-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(0, 86, 179, 0.18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(239, 247, 255, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: 0 8px 22px rgba(0, 52, 112, 0.08);
}
.cloud-sync-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.cloud-sync-heading h3 { margin: 0 0 4px; font-size: 1.02rem; color: #103c6e; }
.cloud-sync-heading p { margin: 0; color: #52677e; line-height: 1.45; }
.cloud-sync-provider {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e8f2ff;
    color: #0056b3;
    font-size: 0.76rem;
    font-weight: 750;
}
.cloud-sync-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.cloud-sync-facts > div {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(16, 60, 110, 0.1);
}
.cloud-sync-facts span { display: block; margin-bottom: 3px; color: #66788c; font-size: 0.76rem; }
.cloud-sync-facts strong { display: block; overflow: hidden; text-overflow: ellipsis; color: #173b63; font-size: 0.84rem; }
.cloud-sync-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-sync-actions button { min-height: 38px; }
.cloud-primary-button { background: #0056b3 !important; color: #fff !important; border-color: #0056b3 !important; }
.cloud-sync-status { margin: 0; }
.cloud-sync-privacy { margin: 0; color: #65788b; font-size: 0.78rem; line-height: 1.45; }
.cloud-sync-status.is-success { color: #176b3a; background: #edf9f1; }
.cloud-sync-status.is-error { color: #a4262c; background: #fff1f1; }
.cloud-sync-status.is-working { color: #0056b3; background: #edf6ff; }
@media (max-width: 760px) {
    .cloud-sync-heading { display: grid; }
    .cloud-sync-provider { justify-self: start; }
    .cloud-sync-facts { grid-template-columns: 1fr; }
}

/* Hotfix 43 compact fit for the fixed 1280x820 window. */
.about-app-modal .about-app-body { padding: 18px 22px 20px; }
.about-app-modal .license-status-card { padding: 16px 18px; }
.about-app-modal .license-status-detail { margin-top: 5px; line-height: 1.4; }
.about-app-modal .license-purchase-note { margin-top: 10px; padding: 9px 11px; }
.about-app-modal .license-actions { margin-top: 10px; }
.about-app-modal .about-app-meta { margin-top: 10px; padding-top: 9px; }
.about-app-modal .cloud-sync-card { gap: 8px; padding: 12px 14px; }
.about-app-modal .cloud-sync-heading h3 { margin-bottom: 2px; }
.about-app-modal .cloud-sync-heading p { line-height: 1.35; }
.about-app-modal .cloud-sync-facts > div { padding: 7px 9px; }
.about-app-modal .cloud-sync-privacy { line-height: 1.35; }


/* ============================================
   HOTFIX 44: OneDrive + Google Drive provider scaffold
   ============================================ */
.about-app-card { width: min(980px, calc(100vw - 32px)); }
.cloud-sync-provider-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
.cloud-sync-provider-grid .cloud-sync-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.cloud-sync-provider-grid .cloud-sync-facts strong {
    white-space: normal;
    line-height: 1.25;
}
.google-drive-card {
    border-color: rgba(15, 157, 88, 0.22);
    background: linear-gradient(145deg, rgba(240, 252, 246, 0.97), rgba(255, 255, 255, 0.98));
    box-shadow: 0 8px 22px rgba(15, 110, 68, 0.08);
}
.google-drive-card .cloud-sync-heading h3 { color: #176b43; }
.google-drive-provider { background: #eaf8f0; color: #137347; }
.google-cloud-primary-button { background: #188038 !important; color: #fff !important; border-color: #188038 !important; }
.google-drive-card .cloud-sync-status.is-working { color: #176b43; background: #eefaf3; }
@media (max-width: 840px) {
    .cloud-sync-provider-grid { grid-template-columns: 1fr; }
    .about-app-card { width: min(650px, calc(100vw - 20px)); }
}


/* ============================================
   HOTFIX 45: First-run cloud sync experience
   ============================================ */
body.cloud-sync-open,
body.cloud-welcome-open { overflow: hidden !important; }

.cloud-status-launch {
    position: relative;
    min-width: 142px;
    border-color: rgba(26, 115, 96, 0.30);
    background: #f1faf7;
    color: #176b52;
}
.cloud-status-launch:hover { border-color: #1c8b6d; background: #e9f7f2; }
.cloud-status-launch svg { width: 19px; height: 19px; }
.cloud-status-indicator {
    width: 8px;
    height: 8px;
    margin-inline-start: -2px;
    border-radius: 50%;
    background: #9aa6b2;
    box-shadow: 0 0 0 3px rgba(154,166,178,.14);
}
.cloud-status-launch.is-connected .cloud-status-indicator { background:#2f80c9; box-shadow:0 0 0 3px rgba(47,128,201,.14); }
.cloud-status-launch.is-synced .cloud-status-indicator { background:#2f9d62; box-shadow:0 0 0 3px rgba(47,157,98,.16); }
.cloud-status-launch.is-syncing .cloud-status-indicator { background:#e98224; animation:cloud-status-pulse 1.1s ease-in-out infinite; }
.cloud-status-launch.is-error { color:#a4262c; border-color:#e0a9ad; background:#fff3f3; }
.cloud-status-launch.is-error .cloud-status-indicator { background:#c43b43; box-shadow:0 0 0 3px rgba(196,59,67,.14); }
@keyframes cloud-status-pulse { 50% { transform:scale(1.35); opacity:.55; } }

/* Keep this important discovery button labelled at the standard 1280px app size. */
@media (max-width:1400px) {
    .cloud-status-launch { width:auto; padding:0 12px; }
    .cloud-status-launch span { position:static; width:auto; height:auto; overflow:visible; clip:auto; }
}
@media (max-width:1120px) {
    .cloud-status-launch { min-width:40px; width:40px; padding:0; }
    .cloud-status-launch #cloudStatusButtonText { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
    .cloud-status-indicator { position:absolute; top:6px; right:6px; width:7px; height:7px; }
}

.cloud-sync-dialog-card {
    width:min(1020px, calc(100vw - 32px));
    height:auto;
    max-height:min(760px, calc(100vh - 28px));
    grid-template-rows:auto minmax(0,1fr);
}
.cloud-sync-dialog-header { align-items:center; }
.cloud-sync-dialog-body {
    display:grid;
    gap:14px;
    padding:18px 22px 20px;
    overflow:auto;
}
.cloud-sync-local-first-note {
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border:1px solid #cfe1d9;
    border-radius:13px;
    background:#f2faf6;
    color:#234f40;
}
.cloud-sync-local-first-note svg { width:30px; height:30px; flex:0 0 30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cloud-sync-local-first-note div { display:grid; gap:2px; }
.cloud-sync-local-first-note strong { font-size:.9rem; }
.cloud-sync-local-first-note span { color:#527064; font-size:.78rem; line-height:1.35; }
.cloud-primary-provider-fieldset { min-width:0; margin:0; padding:0; border:0; }
.cloud-primary-provider-fieldset legend { padding:0; color:#263445; font-weight:800; }
.cloud-primary-provider-fieldset > p { margin:3px 0 10px; color:#6b7785; font-size:.79rem; }
.cloud-primary-choice {
    display:flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    padding:6px 9px;
    border:1px solid #d9e1e8;
    border-radius:999px;
    background:#fff;
    color:#46576a;
    font-size:.76rem;
    font-weight:750;
    cursor:pointer;
}
.cloud-primary-choice input { accent-color:#1d755d; }
.cloud-sync-card.is-primary-provider { border-width:2px; box-shadow:0 10px 26px rgba(23,107,82,.13); }
.google-drive-card.is-primary-provider { box-shadow:0 10px 26px rgba(24,128,56,.13); }
.cloud-sync-dialog-body .cloud-sync-card { gap:8px; padding:12px 14px; }
.cloud-sync-dialog-body .cloud-sync-heading h3 { margin-bottom:2px; }
.cloud-sync-dialog-body .cloud-sync-heading p { line-height:1.35; }
.cloud-sync-dialog-body .cloud-sync-facts > div { padding:7px 9px; }
.cloud-sync-dialog-body .cloud-sync-privacy { line-height:1.35; }
.cloud-sync-ownership-note { margin:0; text-align:center; color:#6c7682; font-size:.76rem; }

/* About returns to licensing/product information only. */
.about-app-card { width:min(620px, calc(100vw - 32px)); }

.cloud-welcome-card {
    width:min(650px, calc(100vw - 28px));
    height:auto;
    max-height:calc(100vh - 28px);
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    grid-template-rows:1fr;
    border-radius:22px;
}
.cloud-welcome-hero {
    display:grid;
    place-items:center;
    min-height:390px;
    color:#fff;
    background:linear-gradient(155deg,#175d8f,#1f876b);
}
.cloud-welcome-hero svg { width:112px; height:112px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 10px 20px rgba(0,0,0,.18)); }
.cloud-welcome-body { display:flex; flex-direction:column; justify-content:center; padding:30px 32px; overflow:auto; }
.cloud-welcome-eyebrow { color:#1a745d; font-size:.77rem; font-weight:800; letter-spacing:.02em; }
.cloud-welcome-body h2 { margin:7px 0 10px; color:#263445; font-size:1.55rem; line-height:1.2; }
.cloud-welcome-body > p { margin:0; color:#657181; line-height:1.55; }
.cloud-welcome-actions { display:grid; gap:10px; margin:22px 0 13px; }
.welcome-provider-button,
.welcome-local-button {
    min-height:46px;
    border-radius:11px;
    font:inherit;
    font-weight:750;
    cursor:pointer;
}
.welcome-provider-button { display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid #ccd6df; background:#fff; color:#263445; text-align:left; }
.welcome-provider-button:hover { border-color:#7798b5; background:#f7fafc; }
.welcome-provider-mark { width:26px; height:26px; display:grid; place-items:center; flex:0 0 26px; border-radius:7px; color:#fff; background:#2367a6; font-weight:850; }
.welcome-provider-button.google .welcome-provider-mark { background:#188038; }
.welcome-local-button { border:1px solid transparent; background:transparent; color:#697684; }
.welcome-local-button:hover { background:#f2f5f7; color:#344556; }
.cloud-welcome-privacy { font-size:.75rem; color:#7a8490 !important; }

.cloud-backup-reminder {
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:23000;
    width:min(520px, calc(100vw - 28px));
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:13px 14px;
    border:1px solid #cbded5;
    border-radius:15px;
    background:rgba(255,255,255,.98);
    color:#263445;
    box-shadow:0 18px 48px rgba(28,55,73,.22);
    transform:translateY(16px);
    opacity:0;
    transition:opacity .18s ease, transform .18s ease;
}
.cloud-backup-reminder[hidden] { display:none !important; }
.cloud-backup-reminder.is-visible { transform:translateY(0); opacity:1; }
.cloud-backup-reminder-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#e9f7f2; color:#176b52; font-size:1.25rem; }
.cloud-backup-reminder-copy { display:grid; gap:2px; min-width:0; }
.cloud-backup-reminder-copy strong { font-size:.84rem; }
.cloud-backup-reminder-copy span { color:#657181; font-size:.75rem; line-height:1.35; }
.cloud-backup-reminder-actions { display:flex; gap:7px; }
.cloud-backup-reminder-actions button { border:1px solid #d1d9df; border-radius:8px; padding:7px 9px; background:#fff; color:#445466; font:inherit; font-size:.74rem; font-weight:750; cursor:pointer; white-space:nowrap; }
.cloud-backup-reminder-actions button:first-child { border-color:#1f8065; background:#1f8065; color:#fff; }

@media (max-width:840px) {
    .cloud-sync-dialog-card { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
    .cloud-sync-dialog-body { padding:14px; }
    .cloud-welcome-card { grid-template-columns:1fr; }
    .cloud-welcome-hero { display:none; }
}
@media (max-width:620px) {
    .cloud-backup-reminder { grid-template-columns:auto minmax(0,1fr); }
    .cloud-backup-reminder-actions { grid-column:1 / -1; justify-content:flex-end; }
}
html[dir="rtl"] .cloud-backup-reminder { right:auto; left:22px; }
html[dir="rtl"] .welcome-provider-button { text-align:right; }

/* Hotfix 45 header-space safeguard: preserve the full multilingual guidance. */
@media (max-width: 1650px) {
    .executive-report-launch:not(.cloud-status-launch) { width:40px; padding:0; }
    .executive-report-launch:not(.cloud-status-launch) span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}
@media (max-width: 1100px) {
    .app-header { flex-direction:column; align-items:stretch; padding:12px; }
    .brand-block { justify-content:flex-start; }
    .header-actions { width:100%; justify-content:space-between; }
    .settings-bar { width:100%; min-width:0; }
}


/* ============================================
   HOTFIX 46: Visible appointment report action
   Keep the globe, remove only the visible country label, and never collapse
   the primary report action to an icon-only button.
   ============================================ */
.region-label {
    width: 22px;
    min-width: 22px;
    flex: 0 0 22px;
    justify-content: center;
    gap: 0;
    cursor: pointer;
}
.region-label svg {
    width: 20px;
    height: 20px;
}
.settings-bar {
    min-width: 0;
    gap: 6px;
}
.language-picker {
    min-width: 168px;
}

#executiveReportButton.executive-report-primary-launch {
    width: auto !important;
    min-width: 214px;
    max-width: 300px;
    min-height: 40px;
    padding: 5px 13px !important;
    border-color: rgba(216, 107, 19, 0.58);
    background: #fff2e3;
    color: #7f3d10;
    line-height: 1.16;
    white-space: normal;
    text-align: center;
}
#executiveReportButton.executive-report-primary-launch:hover {
    border-color: #d86b13;
    background: #ffe8cf;
}
#executiveReportButton.executive-report-primary-launch #executiveReportButtonText {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
}

/* About remains icon-only to protect room for the report and cloud actions. */
.about-app-launch {
    width: 40px !important;
    min-width: 40px;
    padding: 0 !important;
}
.about-app-launch #aboutAppButtonText {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

/* Keep cloud status understandable, but allow long translations to wrap. */
.cloud-status-launch {
    width: auto !important;
    min-width: 124px;
    max-width: 154px;
    min-height: 40px;
    padding: 5px 9px !important;
    line-height: 1.12;
    white-space: normal;
}
.cloud-status-launch #cloudStatusButtonText {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    text-align: center;
}
.cloud-status-launch .cloud-status-indicator {
    position: static;
    flex: 0 0 8px;
}

@media (max-width: 1400px) and (min-width: 1101px) {
    .app-header { gap: 12px; }
    .header-actions { gap: 7px; }
    .language-picker { min-width: 164px; }
    #executiveReportButton.executive-report-primary-launch {
        min-width: 205px;
        max-width: 240px;
        font-size: .82rem;
    }
    .cloud-status-launch {
        min-width: 124px;
        max-width: 126px;
        padding-inline: 9px !important;
    }
}

@media (max-width: 1100px) {
    #executiveReportButton.executive-report-primary-launch {
        min-width: 210px;
        max-width: 320px;
    }
}

@media (max-width: 760px) {
    .header-actions { flex-wrap: wrap; }
    .settings-bar { flex: 1 1 100%; }
    #executiveReportButton.executive-report-primary-launch {
        flex: 1 1 230px;
        max-width: none;
    }
}

/* ============================================
   HOTFIX 47: Visible About App action
   Use the remaining header space to keep the information icon and show the
   translated About label instead of leaving this important action icon-only.
   ============================================ */
.about-app-launch {
    width: auto !important;
    min-width: 118px;
    max-width: 178px;
    min-height: 40px;
    padding: 5px 12px !important;
    line-height: 1.12;
    white-space: normal;
    text-align: center;
}
.about-app-launch #aboutAppButtonText {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    text-align: center;
}

@media (max-width: 1400px) and (min-width: 1101px) {
    .about-app-launch {
        min-width: 112px;
        max-width: 138px;
        padding-inline: 9px !important;
        font-size: .81rem;
    }
}

@media (max-width: 1100px) {
    .about-app-launch {
        min-width: 128px;
        max-width: 220px;
    }
}

@media (max-width: 760px) {
    .about-app-launch {
        flex: 1 1 150px;
        max-width: none;
    }
}
.about-app-launch svg {
    flex: 0 0 18px;
}

/* Let the multilingual guidance use the remaining vertical room instead of
   being ellipsized when the About action is visible. */
@media (max-width: 1650px) and (min-width: 1101px) {
    .calendar-hint-row .title-text {
        min-width: 0;
        flex: 1 1 auto;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

/* ============================================
   HOTFIX 51: Scrollable monthly appointment list
   Keep the panel header, month navigation, and "View all" action fixed while
   allowing the appointment cards themselves to scroll vertically.
   ============================================ */
.monthly-appointments-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
}

.monthly-appointments-list {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-end: 7px;
    padding-bottom: 2px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

.monthly-appointments-list:focus-visible {
    outline: 2px solid rgba(233, 130, 36, 0.55);
    outline-offset: 3px;
    border-radius: 10px;
}

.monthly-appointments-list::-webkit-scrollbar {
    width: 10px;
}

.monthly-appointments-list::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #f1ece6;
}

.monthly-appointments-list::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 2px solid #f1ece6;
    border-radius: 999px;
    background: #c58a5c;
}

.monthly-appointments-list::-webkit-scrollbar-thumb:hover {
    background: #a96535;
}

.monthly-appointments-list .calendar-summary-empty {
    min-height: 100%;
}

/* In the stacked/mobile layout the page itself may scroll, but keep a
   practical list viewport so a long month does not create an excessively
   tall card. */
@media (max-width: 980px), (max-height: 700px) {
    .monthly-appointments-list {
        max-height: min(430px, 55vh);
    }
}

@media (forced-colors: active) {
    .monthly-appointments-list {
        scrollbar-color: CanvasText Canvas;
    }
}


/* ============================================
   HOTFIX 52: Monthly planning information
   Keep the heading, month selector and full-view action fixed. Holidays,
   country events and monthly considerations scroll inside the panel. Both
   right-side panels share the calendar's active month.
   ============================================ */
.appointment-insights-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
}

.monthly-insights-navigation {
    margin-top: 8px;
    padding: 7px 4px 8px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #eadfd4;
    border-bottom: 1px solid #eadfd4;
}

.monthly-insights-navigation .monthly-nav-arrow {
    width: 42px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #e3d5c8;
    border-radius: 12px;
    color: #8d4a1d;
    background: #fffdfb;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.monthly-insights-navigation .monthly-nav-arrow:hover,
.monthly-insights-navigation .monthly-nav-arrow:focus-visible {
    border-color: #e7a469;
    background: #fff4e8;
    outline: none;
}

.monthly-insights-navigation strong {
    min-width: 0;
    color: #23374a;
    font-size: .88rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.appointment-insights-list {
    min-height: 0;
    margin-top: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-end: 7px;
    padding-bottom: 2px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

.appointment-insights-list:focus-visible {
    outline: 2px solid rgba(233, 130, 36, 0.55);
    outline-offset: 3px;
    border-radius: 10px;
}

.appointment-insights-list::-webkit-scrollbar { width: 10px; }
.appointment-insights-list::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #f1ece6;
}
.appointment-insights-list::-webkit-scrollbar-thumb {
    min-height: 36px;
    border: 2px solid #f1ece6;
    border-radius: 999px;
    background: #c58a5c;
}
.appointment-insights-list::-webkit-scrollbar-thumb:hover { background: #a96535; }

.insight-monthly-stack {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-month-section {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #e4ddd5;
    border-radius: 10px;
    background: rgba(255,255,255,.82);
}

.insight-month-section h3 {
    margin: 0 0 6px;
    color: #2d455b;
    font-size: .7rem;
    font-weight: 780;
    line-height: 1.25;
}

.insight-month-holidays { background: linear-gradient(145deg, #fff9ef, #fff); }
.insight-month-holiday-list { display: flex; flex-direction: column; gap: 3px; }
.insight-month-holiday-item {
    min-width: 0;
    min-height: 38px;
    padding: 4px 2px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #eee5dc;
}
.insight-month-holiday-item:last-child { border-bottom: 0; }
.insight-month-holiday-item .insight-event-copy strong {
    color: #59422f;
    font-size: .67rem;
    white-space: normal;
}
.insight-month-holiday-item .insight-event-copy small {
    color: #8c7969;
    font-size: .57rem;
}

.appointment-insights-panel .insight-events-card,
.appointment-insights-panel .insight-advice-card {
    grid-column: auto;
    overflow: visible;
}

.insight-month-holiday-modal-item { min-height: 48px; }
.insight-month-holiday-modal-item .insight-event-copy strong { font-size: .78rem; }
.insight-month-holiday-modal-item .insight-event-copy small { font-size: .67rem; }

html[dir="rtl"] .monthly-insights-navigation { direction: rtl; }

@media (max-width: 980px), (max-height: 700px) {
    .appointment-insights-list { max-height: min(430px, 55vh); overflow-y: auto; }
}

@media (forced-colors: active) {
    .appointment-insights-list { scrollbar-color: CanvasText Canvas; }
}

/* ============================================
   HOTFIX 53 — Clickable appointment detail report
   ============================================ */
.executive-appointment-click-hint {
    margin: 0 0 8px;
    color: #7a5a3c;
    font-size: .78rem;
    font-weight: 700;
}
.executive-appointment-row {
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.executive-appointment-row:hover td {
    background: #fff4e8;
}
.executive-appointment-row:focus-visible {
    outline: 3px solid rgba(233,130,36,.42);
    outline-offset: -3px;
}
.executive-appointment-row:focus-visible td {
    background: #fff8f0;
}

.appointment-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 26000;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(31, 35, 40, .58);
    backdrop-filter: blur(4px);
}
.appointment-detail-modal[hidden] { display: none; }
.appointment-detail-card {
    width: min(1030px, 97vw);
    height: min(96vh, 1180px);
    min-height: 620px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid #dfd4c7;
    border-radius: 22px;
    background: #f4f0eb;
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
}
.appointment-detail-toolbar {
    padding: 17px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e5d9cc;
    background: linear-gradient(135deg,#fff8f0,#fff);
}
.appointment-detail-toolbar h2 {
    margin: 2px 0 3px;
    color: #263442;
    font-size: 1.35rem;
}
.appointment-detail-toolbar p {
    margin: 0;
    color: #71685f;
    font-size: .86rem;
}
.appointment-detail-kicker {
    color: #b45d16;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.appointment-detail-close {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #e1d5c8;
    border-radius: 50%;
    background: #fff;
    color: #7b3e20;
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
}
.appointment-detail-close:hover,
.appointment-detail-close:focus-visible {
    border-color: #e98224;
    background: #fff2e4;
    outline: none;
}
.appointment-detail-preview {
    min-height: 0;
    overflow: auto;
    padding: 22px;
    display: grid;
    align-items: start;
    justify-items: center;
}
.appointment-detail-actions {
    padding: 13px 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid #e0d5ca;
    background: #fff;
}
.appointment-detail-actions button {
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid #d7cec4;
    border-radius: 10px;
    background: #fff;
    color: #473d35;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.appointment-detail-actions button:hover,
.appointment-detail-actions button:focus-visible {
    border-color: #e98224;
    background: #fff5ea;
    outline: none;
}
.appointment-detail-actions button.primary {
    border-color: #c76614;
    background: #e98224;
    color: #fff;
}
.appointment-detail-page {
    width: 794px;
    height: 1123px;
    max-width: none;
    overflow: hidden;
    border: 1px solid #d8d0c7;
    background: #fff;
    box-shadow: 0 18px 46px rgba(45,36,29,.16);
    color: #293642;
    font-family: "Segoe UI Variable", "Segoe UI", "Leelawadee UI", Tahoma, sans-serif;
}
.appointment-detail-page-content {
    min-height: 100%;
    box-sizing: border-box;
    padding: 44px 48px 34px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    transform-origin: top left;
}
.appointment-detail-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 18px;
    border-bottom: 4px solid #e98224;
}
.appointment-detail-page-header > div:first-child > span {
    color: #b25c18;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.appointment-detail-page-header h1 {
    margin: 5px 0 4px;
    color: #263442;
    font-size: 30px;
    line-height: 1.15;
}
.appointment-detail-page-header p {
    margin: 0;
    color: #6e655d;
    font-size: 14px;
}
.appointment-detail-generated {
    min-width: 178px;
    padding: 11px 13px;
    display: grid;
    gap: 4px;
    border: 1px solid #e0d8cf;
    background: #fbfaf8;
    color: #756d65;
    font-size: 12px;
    text-align: end;
}
.appointment-detail-generated strong {
    color: #5f554d;
    font-size: 12px;
    font-weight: 850;
}
.appointment-detail-generated span {
    color: #33404d;
    font-size: 13px;
    font-weight: 400;
}
.appointment-detail-contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr .8fr;
    gap: 12px;
}
.appointment-detail-field {
    min-height: 64px;
    padding: 12px 14px;
    display: grid;
    align-content: center;
    gap: 5px;
    border: 1px solid #ded7cf;
    border-left: 4px solid #e98224;
    background: #fcfbf9;
}
html[dir="rtl"] .appointment-detail-field {
    border-left: 1px solid #ded7cf;
    border-right: 4px solid #e98224;
}
.appointment-detail-field-label {
    color: #5f554d;
    font-size: 15px;
    font-weight: 850;
}
.appointment-detail-field-value {
    color: #263442;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.appointment-detail-phone .appointment-detail-field-value {
    direction: ltr;
    unicode-bidi: plaintext;
}
.appointment-detail-summary-section {
    padding: 15px 17px;
    display: grid;
    gap: 12px;
    border: 1px solid #ded7cf;
    border-left: 4px solid #e98224;
    background: #fff;
}
html[dir="rtl"] .appointment-detail-summary-section {
    border-left: 1px solid #ded7cf;
    border-right: 4px solid #e98224;
}
.appointment-detail-title-line,
.day-appointment-title-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    color: #253443;
    font-size: 20px;
    line-height: 1.35;
}
.appointment-detail-title-line strong,
.day-appointment-title-line strong {
    font-weight: 900;
}
.appointment-detail-title-line > span:last-child,
.day-appointment-title-line > span:last-child {
    font-weight: 400;
}
.appointment-detail-subject-line,
.day-appointment-subject-line {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    color: #253443;
    font-size: 17px;
    line-height: 1.5;
}
.appointment-detail-subject-line strong,
.day-appointment-subject-line strong {
    font-weight: 850;
}
.appointment-detail-subject-line > span:last-child,
.day-appointment-subject-line > span:last-child {
    min-width: 0;
    flex: 1 1 220px;
    font-weight: 400;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.appointment-detail-section {
    padding: 14px 16px;
    border: 1px solid #ded7cf;
    background: #fff;
}
.appointment-detail-section h2 {
    margin: 0 0 10px;
    color: #72431f;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.2;
}
.appointment-detail-section h2 span {
    display: inline-grid;
    min-width: 23px;
    height: 23px;
    margin-inline-start: 6px;
    place-items: center;
    border-radius: 50%;
    background: #fff0df;
    color: #a44e09;
    font-size: 11px;
}
.appointment-detail-subject {
    min-height: 62px;
    color: #1f2f3e;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.appointment-detail-checklist-section ul {
    margin: 0;
    padding-inline-start: 23px;
    display: grid;
    gap: 6px;
    color: #384654;
    font-size: 14px;
    line-height: 1.4;
}
.appointment-detail-empty {
    padding: 12px;
    border: 1px dashed #d8d0c7;
    color: #847a71;
    background: #fbfaf8;
    font-size: 13px;
    text-align: center;
}
.appointment-detail-attachment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}
.appointment-detail-attachment {
    min-width: 0;
    min-height: 112px;
    padding: 8px;
    display: grid;
    grid-template-rows: 75px auto;
    gap: 7px;
    border: 1px solid #ded7cf;
    border-radius: 8px;
    background: #fbfaf8;
    color: #3c4854;
    font: inherit;
    cursor: pointer;
}
.appointment-detail-attachment:hover,
.appointment-detail-attachment:focus-visible {
    border-color: #e98224;
    background: #fff7ee;
    outline: none;
}
.appointment-detail-attachment img {
    width: 100%;
    height: 75px;
    object-fit: contain;
    background: #f0ede9;
}
.appointment-detail-attachment .attachment-pdf-icon {
    width: 58px;
    height: 68px;
    margin: auto;
}
.appointment-detail-attachment span:last-child {
    min-width: 0;
    color: #3c4854;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.appointment-detail-page-footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid #dcd4cb;
    color: #756d65;
    font-size: 11px;
}
.appointment-detail-page[data-fit="compact"] .appointment-detail-page-content { gap: 11px; padding: 34px 40px 28px; }
.appointment-detail-page[data-fit="compact"] .appointment-detail-section { padding: 10px 12px; }
.appointment-detail-page[data-fit="compact"] .appointment-detail-title-line { font-size: 18px; }
.appointment-detail-page[data-fit="compact"] .appointment-detail-subject-line { font-size: 15px; }
.appointment-detail-page[data-fit="compact"] .appointment-detail-attachment { min-height: 92px; grid-template-rows: 56px auto; }
.appointment-detail-page[data-fit="compact"] .appointment-detail-attachment img { height: 56px; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-page-content { gap: 8px; padding: 26px 32px 22px; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-page-header { padding-bottom: 10px; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-page-header h1 { font-size: 25px; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-section { padding: 8px 10px; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-field { min-height: 50px; padding: 8px 10px; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-title-line { font-size: 16px; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-subject-line { font-size: 14px; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-attachment { min-height: 76px; grid-template-rows: 42px auto; }
.appointment-detail-page[data-fit="tight"] .appointment-detail-attachment img { height: 42px; }

@media (max-width: 860px) {
    .appointment-detail-modal { padding: 8px; }
    .appointment-detail-card { width: 100%; height: 98vh; border-radius: 15px; }
    .appointment-detail-preview { justify-items: start; padding: 14px; }
    .appointment-detail-actions button { flex: 1 1 190px; }
}

@media print {
    body.appointment-detail-printing > * { display: none !important; }
    body.appointment-detail-printing > .appointment-detail-modal { display: block !important; }
    body.appointment-detail-printing .executive-report-modal { display: none !important; }
    body.appointment-detail-printing .appointment-detail-modal {
        position: static !important;
        inset: auto !important;
        padding: 0 !important;
        background: #fff !important;
        backdrop-filter: none !important;
    }
    body.appointment-detail-printing .appointment-detail-card {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    body.appointment-detail-printing .appointment-detail-toolbar,
    body.appointment-detail-printing .appointment-detail-actions { display: none !important; }
    body.appointment-detail-printing .appointment-detail-preview {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    body.appointment-detail-printing .appointment-detail-page {
        width: 194mm !important;
        height: 277mm !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        border: 0 !important;
        box-shadow: none !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
    }
    body.appointment-detail-printing .appointment-detail-page-content {
        padding: 9mm 10mm 7mm !important;
    }
    body.appointment-detail-printing .appointment-detail-attachment {
        cursor: default !important;
    }
    body.appointment-detail-printing .executive-appointment-click-hint { display: none !important; }
    @page { size: A4 portrait; margin: 8mm; }
}
body.appointment-detail-open { overflow: hidden; }

/* ============================================
   HOTFIX 54 — Day details and direct monthly reports
   ============================================ */
.monthly-appointments-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.monthly-appointment-open-button {
    cursor: pointer;
}

.days .day-cell {
    overflow: hidden;
}

.days .day-cell .event-text-container {
    width: 100%;
    max-width: 100%;
    margin-top: auto;
    padding: 0;
    display: grid;
    gap: 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.event-count-button,
.day-view-button,
.day-add-button {
    font-family: inherit;
    cursor: pointer;
}

.days .day-cell .event-count-button {
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 2px 6px;
    border: 1px solid #efcda9;
    border-radius: 7px;
    color: #93440f;
    background: #fff4e7;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-cell-actions {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 5px;
}

.day-view-button,
.day-add-button {
    min-width: 0;
    padding: 0;
    border: 0;
    color: #a54d10;
    background: transparent;
    font-size: .56rem;
    font-weight: 780;
    line-height: 1.25;
    text-align: start;
}

.day-view-button:hover,
.day-view-button:focus-visible,
.day-add-button:hover,
.day-add-button:focus-visible {
    color: #7d3508;
    text-decoration: underline;
    outline: none;
}

.day-add-button {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #b85c16;
}

.empty-day-action {
    width: 100%;
    margin-top: auto;
    display: flex;
    align-items: flex-end;
}

.empty-day-action .day-add-button {
    opacity: .74;
}

.days .day-cell:hover .empty-day-action .day-add-button,
.days .day-cell:focus-within .empty-day-action .day-add-button {
    opacity: 1;
}

.day-appointments-modal {
    position: fixed;
    inset: 0;
    z-index: 25000;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(31, 35, 40, .58);
    backdrop-filter: blur(4px);
}

.day-appointments-modal[hidden] {
    display: none;
}

.day-appointments-card {
    width: min(1120px, 97vw);
    height: min(94vh, 980px);
    min-height: 590px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid #dfd4c7;
    border-radius: 22px;
    background: #f4f0eb;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
}

.day-appointments-toolbar {
    padding: 17px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e5d9cc;
    background: linear-gradient(135deg, #fff8f0, #fff);
}

.day-appointments-toolbar h2 {
    margin: 2px 0 3px;
    color: #263442;
    font-size: 1.35rem;
}

.day-appointments-toolbar p {
    margin: 0;
    color: #71685f;
    font-size: .86rem;
}

.day-appointments-kicker {
    color: #b45d16;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.day-appointments-close {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid #e1d5c8;
    border-radius: 50%;
    background: #fff;
    color: #7b3e20;
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
}

.day-appointments-close:hover,
.day-appointments-close:focus-visible {
    border-color: #e98224;
    background: #fff2e4;
    outline: none;
}

.day-appointments-list {
    min-height: 0;
    padding: 20px;
    display: grid;
    align-content: start;
    gap: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.day-appointments-list:focus-visible {
    outline: 3px solid rgba(233, 130, 36, .38);
    outline-offset: -3px;
}

.day-appointment-card {
    padding: 18px;
    display: grid;
    gap: 13px;
    border: 1px solid #ded5cb;
    border-left: 5px solid #e98224;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(50, 40, 30, .08);
}

html[dir="rtl"] .day-appointment-card {
    border-left: 1px solid #ded5cb;
    border-right: 5px solid #e98224;
}

.day-appointment-card-header {
    display: grid;
    gap: 9px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0dfcf;
}
.day-appointment-title-line {
    font-size: 1.12rem;
}
.day-appointment-title-line strong:last-of-type {
    color: #8d430f;
}
.day-appointment-subject-line {
    font-size: .95rem;
}

.day-appointment-primary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.day-appointment-field {
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    display: grid;
    align-content: center;
    gap: 4px;
    border: 1px solid #e1d8cf;
    background: #fcfbf9;
}

.day-appointment-field-label {
    color: #5f554d;
    font-size: .84rem;
    font-weight: 850;
}
.day-appointment-field-value {
    color: #2c3a48;
    font-size: .84rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.day-appointment-phone .day-appointment-field-value {
    direction: ltr;
    unicode-bidi: plaintext;
}

.day-appointment-section {
    padding: 11px 13px;
    border: 1px solid #e1d8cf;
    background: #fff;
}

.day-appointment-section h4 {
    margin: 0 0 8px;
    color: #77441f;
    font-size: .9rem;
    font-weight: 850;
}

.day-appointment-section h4 span {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    margin-inline-start: 5px;
    place-items: center;
    border-radius: 50%;
    background: #fff0df;
    color: #a44e09;
    font-size: .67rem;
}

.day-appointment-section ul {
    margin: 0;
    padding-inline-start: 21px;
    display: grid;
    gap: 4px;
    color: #3e4a56;
    font-size: .84rem;
    font-weight: 400;
}

.day-appointment-empty {
    padding: 9px;
    border: 1px dashed #ddd4cb;
    color: #847a71;
    background: #fbfaf8;
    font-size: .78rem;
    text-align: center;
}

.day-appointment-attachment-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.day-appointment-attachment {
    min-width: 0;
    min-height: 86px;
    padding: 7px;
    display: grid;
    grid-template-rows: 53px auto;
    gap: 5px;
    border: 1px solid #ddd4cb;
    border-radius: 8px;
    background: #fbfaf8;
    color: #3c4854;
    font: inherit;
    cursor: pointer;
}

.day-appointment-attachment:hover,
.day-appointment-attachment:focus-visible {
    border-color: #e98224;
    background: #fff7ee;
    outline: none;
}

.day-appointment-attachment img {
    width: 100%;
    height: 53px;
    object-fit: contain;
    background: #f0ede9;
}

.day-appointment-attachment .attachment-pdf-icon {
    width: 42px;
    height: 50px;
    margin: auto;
}

.day-appointment-attachment span:last-child {
    min-width: 0;
    font-size: .68rem;
    font-weight: 400;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.day-appointment-card-actions,
.day-appointments-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
}

.day-appointment-card-actions {
    padding-top: 2px;
}

.day-appointment-card-actions button,
.day-appointments-actions button {
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid #d7cec4;
    border-radius: 9px;
    background: #fff;
    color: #473d35;
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
}

.day-appointment-card-actions button:hover,
.day-appointment-card-actions button:focus-visible,
.day-appointments-actions button:hover,
.day-appointments-actions button:focus-visible {
    border-color: #e98224;
    background: #fff5ea;
    outline: none;
}

.day-appointment-card-actions button.primary,
.day-appointments-actions button.primary {
    border-color: #c76614;
    background: #e98224;
    color: #fff;
}

.day-appointment-card-actions button.danger,
.appointment-detail-actions button.danger {
    border-color: #d99b9b;
    color: #a92f2f;
    background: #fff8f8;
}

.day-appointment-card-actions button.danger:hover,
.day-appointment-card-actions button.danger:focus-visible,
.appointment-detail-actions button.danger:hover,
.appointment-detail-actions button.danger:focus-visible {
    border-color: #c64b4b;
    color: #8f1f1f;
    background: #ffecec;
}

.day-appointments-actions {
    padding: 13px 20px;
    justify-content: center;
    border-top: 1px solid #e0d5ca;
    background: #fff;
}

.day-appointments-empty {
    min-height: 300px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 15px;
    color: #756d65;
    text-align: center;
}

.day-appointments-empty button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #c76614;
    border-radius: 9px;
    color: #fff;
    background: #e98224;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 980px) {
    .day-appointments-modal { padding: 8px; }
    .day-appointments-card { width: 100%; height: 98vh; min-height: 0; border-radius: 15px; }
    .day-appointment-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .day-appointment-attachment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .day-appointment-card-header { display: grid; }
    .day-appointment-primary-grid { grid-template-columns: 1fr; }
    .day-appointment-attachment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .day-appointment-card-actions button,
    .day-appointments-actions button { flex: 1 1 180px; }
}

@media print {
    body.day-appointments-printing > * { display: none !important; }
    body.day-appointments-printing > .day-appointments-modal { display: block !important; }
    body.day-appointments-printing .day-appointments-modal {
        position: static !important;
        inset: auto !important;
        padding: 0 !important;
        background: #fff !important;
        backdrop-filter: none !important;
    }
    body.day-appointments-printing .day-appointments-card {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    body.day-appointments-printing .day-appointments-toolbar,
    body.day-appointments-printing .day-appointments-actions,
    body.day-appointments-printing .day-appointment-card-actions { display: none !important; }
    body.day-appointments-printing .day-appointments-list {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    body.day-appointments-printing .day-appointment-card {
        margin: 0 0 10mm !important;
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
}


/* ============================================
   HOTFIX 55 — Clean day cells and modal return stack
   - Center occupied-day actions.
   - Empty dates remain clean; clicking the date cell still creates an appointment.
   - Delete confirmation is always the topmost modal.
   ============================================ */
.days .day-cell .event-text-container {
    justify-items: center;
    text-align: center;
}

.days .day-cell .event-count-button {
    margin-inline: auto;
}

.day-cell-actions {
    justify-content: center;
    text-align: center;
}

.day-view-button,
.day-add-button {
    text-align: center;
}

#confirmPopup {
    z-index: 60000;
    isolation: isolate;
}

#confirmPopup .confirm-content {
    position: relative;
    z-index: 1;
}

body.confirm-delete-open {
    overflow: hidden;
}


/* ============================================
   HOTFIX 62 — ADAPTIVE ADVANCE REMINDERS
   Explain the automatic reminder policy in About app.
   ============================================ */
.about-reminder-card {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(76, 98, 130, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(245, 248, 253, 0.96), rgba(237, 243, 251, 0.92));
    color: #22324a;
}

.about-reminder-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.about-reminder-icon {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1.3;
}

.about-reminder-heading h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: #183152;
}

.about-reminder-heading p {
    margin: 3px 0 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #53647d;
}

.about-reminder-rules {
    margin: 10px 0 0 1.3rem;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1.48;
    color: #344761;
}

.about-reminder-rules li + li {
    margin-top: 3px;
}

.about-reminder-footer {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px solid rgba(76, 98, 130, 0.14);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.4;
    color: #9a4f12;
}

html[dir="rtl"] .about-reminder-heading {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .about-reminder-rules {
    margin-left: 0;
    margin-right: 1.3rem;
}


/* ============================================
   HOTFIX 66: 24-hour wheel time picker
   ============================================ */
#eventModal .time-input-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    margin-top: 7px;
    padding: 0 18px;
    color: #233d52;
    background: #fff;
    border: 1px solid #cbd9e4;
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(22, 52, 77, 0.035);
    cursor: pointer;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#eventModal .time-input-container:hover {
    border-color: #78a9cb;
    box-shadow: 0 0 0 3px rgba(39, 126, 188, 0.09);
}
#eventModal .time-input-container:focus-visible {
    outline: none;
    border-color: #4e97cd;
    box-shadow: 0 0 0 4px rgba(39, 126, 188, 0.16);
}
#eventModal .time-input-value {
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: .035em;
    font-variant-numeric: tabular-nums;
}
#eventModal .time-input-clock {
    color: #456d8c;
    font-size: 1.55rem;
    line-height: 1;
}
.time-picker-overlay[hidden] { display: none !important; }
.time-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(14, 29, 42, .58);
    backdrop-filter: blur(3px);
}
.time-picker-card {
    width: min(430px, calc(100vw - 28px));
    padding: 22px;
    color: #21394d;
    background: #fffdf9;
    border: 1px solid #ead8c8;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(13, 31, 46, .34);
}
.time-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.time-picker-header h2 {
    margin: 0;
    color: #223e55;
    font-size: 1.28rem;
}
.time-picker-close {
    width: 38px;
    height: 38px;
    padding: 0;
    color: #536b7e;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
    cursor: pointer;
}
.time-picker-close:hover,
.time-picker-close:focus-visible { background: #edf3f7; outline: none; }
.time-picker-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 12px;
}
.time-picker-column { min-width: 0; }
.time-picker-column > strong {
    display: block;
    margin-bottom: 8px;
    color: #526a7c;
    text-align: center;
    font-size: .9rem;
}
.time-picker-separator {
    align-self: center;
    margin-top: 24px;
    color: #e98220;
    font-size: 2rem;
    font-weight: 800;
}
.time-picker-wheel-frame {
    position: relative;
    height: 240px;
}
.time-picker-wheel-frame::after {
    content: '';
    position: absolute;
    z-index: 0;
    left: 1px;
    right: 1px;
    top: calc(50% - 24px);
    height: 48px;
    pointer-events: none;
    background: rgba(255, 243, 231, .92);
    border-top: 1px solid #efad70;
    border-bottom: 1px solid #efad70;
}
.time-picker-wheel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 96px 0;
    background: #f7fafc;
    border: 1px solid #d8e3eb;
    border-radius: 14px;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
}
.time-picker-wheel:focus-visible {
    outline: 3px solid rgba(39, 126, 188, .20);
    outline-offset: 2px;
}
.time-picker-option {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #718494;
    background: transparent;
    border: 0;
    border-radius: 0;
    scroll-snap-align: center;
    font-size: 1.15rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.time-picker-option:hover { color: #263f53; }
.time-picker-option.is-selected {
    color: #d76800;
    font-size: 1.45rem;
    font-weight: 800;
}
.time-picker-selected {
    margin-top: 14px;
    color: #243f55;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}
.time-picker-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}
.time-picker-actions button {
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #cad7e0;
    border-radius: 10px;
    background: #fff;
    color: #2d4a60;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.time-picker-actions button:hover { background: #f1f6f9; }
.time-picker-actions button.primary {
    color: #fff;
    background: #e87816;
    border-color: #e87816;
}
.time-picker-actions button.primary:hover { background: #cf650d; }
body.time-picker-open { overflow: hidden; }
@media (max-width: 520px) {
    .time-picker-card { padding: 18px 14px; }
    .time-picker-wheel-frame, .time-picker-wheel { height: 216px; }
    .time-picker-wheel { padding-block: 84px; }
}


/* ============================================================
   HOTFIX 73 — KANAA LOGO IN THE IN-APP WEBVIEW HEADER
   Replace the legacy white calendar SVG on an orange tile with
   the approved multicolour Kanaa Calendar mark.
   ============================================================ */
.brand-mark {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    color: inherit;
    background: transparent;
    box-shadow: 0 5px 14px rgba(18, 63, 109, 0.18);
}

.brand-mark .brand-mark-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: inherit;
}

@media (max-width: 760px) {
    .brand-mark {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 13px;
    }
}


/* =========================================================
   HOTFIX 76 — Unified appointment report layout
   Single appointment, one-day, and multi-day reports now use
   the same document hierarchy, field labels, and portrait flow.
   ========================================================= */
.executive-report-page.unified-detail-report {
    width: 794px;
    min-width: 794px;
    min-height: 1123px;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    padding: 0;
    gap: 0;
    overflow: visible;
    border: 1px solid #d8d0c7;
    background: #fff;
    color: #293642;
    font-family: "Segoe UI Variable", "Segoe UI", "Leelawadee UI", Tahoma, sans-serif;
}
.unified-detail-report-content {
    min-height: 1123px;
    box-sizing: border-box;
    padding: 44px 48px 34px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}
.unified-report-page-header { flex: 0 0 auto; }
.unified-report-overview {
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #ded7cf;
    border-left: 4px solid #e98224;
    background: #fcfbf9;
}
html[dir="rtl"] .unified-report-overview {
    border-left: 1px solid #ded7cf;
    border-right: 4px solid #e98224;
}
.unified-report-overview > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.unified-report-overview strong {
    color: #263442;
    font-size: 16px;
    line-height: 1.35;
}
.unified-report-overview span {
    color: #6f665e;
    font-size: 13px;
    font-weight: 700;
}
.unified-report-open-hint {
    margin: -4px 0 0;
    color: #756d65;
    font-size: 12px;
    text-align: end;
}
.unified-report-date-groups {
    display: grid;
    gap: 22px;
}
.unified-report-date-group {
    display: grid;
    gap: 11px;
}
.unified-report-date-header {
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 2px solid #e98224;
    background: #fff8f0;
}
.unified-report-date-header h2 {
    margin: 0;
    color: #263442;
    font-size: 17px;
    line-height: 1.3;
}
.unified-report-date-header span {
    flex: 0 0 auto;
    color: #8a4917;
    font-size: 12px;
    font-weight: 850;
}
.unified-report-card-list {
    display: grid;
    gap: 17px;
}
.unified-report-appointment-card {
    padding: 15px;
    display: grid;
    gap: 12px;
    border: 1px solid #dcd4cb;
    border-left: 5px solid #e98224;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(50, 40, 30, .06);
    cursor: pointer;
}
html[dir="rtl"] .unified-report-appointment-card {
    border-left: 1px solid #dcd4cb;
    border-right: 5px solid #e98224;
}
.unified-report-appointment-card:hover {
    border-color: #e98224;
    background: #fffdf9;
}
.unified-report-appointment-card:focus-visible {
    outline: 3px solid rgba(233, 130, 36, .34);
    outline-offset: 2px;
}
.unified-report-appointment-card .appointment-detail-title-line { font-size: 17px; }
.unified-report-appointment-card .appointment-detail-subject-line { font-size: 15px; }
.unified-report-appointment-card .appointment-detail-field {
    min-height: 55px;
    padding: 9px 11px;
}
.unified-report-appointment-card .appointment-detail-field-label,
.unified-report-appointment-card .appointment-detail-field-value { font-size: 13px; }
.unified-report-appointment-card .appointment-detail-section { padding: 10px 12px; }
.unified-report-appointment-card .appointment-detail-section h2 {
    margin-bottom: 8px;
    font-size: 14px;
}
.unified-report-appointment-card .appointment-detail-checklist-section ul {
    font-size: 13px;
    gap: 4px;
}
.unified-report-attachment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.unified-report-attachment {
    min-width: 0;
    min-height: 78px;
    padding: 7px;
    display: grid;
    grid-template-rows: 46px auto;
    gap: 5px;
    border: 1px solid #ddd4cb;
    border-radius: 7px;
    background: #fbfaf8;
    color: #3c4854;
}
.unified-report-attachment img {
    width: 100%;
    height: 46px;
    object-fit: contain;
    background: #f0ede9;
}
.unified-report-attachment .attachment-pdf-icon {
    width: 37px;
    height: 44px;
    margin: auto;
}
.unified-report-file-type {
    width: 42px;
    height: 42px;
    margin: auto;
    display: grid;
    place-items: center;
    border: 1px solid #d8cec4;
    border-radius: 7px;
    color: #8a541f;
    background: #fff5e9;
    font-size: 10px;
    font-weight: 900;
}
.unified-report-attachment > span:last-child {
    min-width: 0;
    color: #45515d;
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.unified-report-empty {
    min-height: 260px;
    display: grid;
    place-items: center;
    border: 1px dashed #d8d0c7;
    color: #847a71;
    background: #fbfaf8;
    font-size: 14px;
    text-align: center;
}
.unified-report-footer { margin-top: auto; }

@media (max-width: 900px) {
    .executive-report-page.unified-detail-report { min-width: 794px; }
}

@media print {
    @page { size: A4 portrait; margin: 8mm; }
    body.executive-report-printing .executive-report-page.unified-detail-report {
        width: 194mm !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 277mm !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        box-shadow: none !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
    body.executive-report-printing .unified-detail-report-content {
        min-height: 277mm !important;
        padding: 9mm 10mm 7mm !important;
        gap: 4.5mm !important;
    }
    body.executive-report-printing .unified-report-open-hint { display: none !important; }
    body.executive-report-printing .unified-report-date-group {
        break-before: auto;
        page-break-before: auto;
    }
    body.executive-report-printing .unified-report-date-header,
    body.executive-report-printing .appointment-detail-summary-section,
    body.executive-report-printing .appointment-detail-contact-grid,
    body.executive-report-printing .appointment-detail-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.executive-report-printing .unified-report-appointment-card {
        margin-bottom: 5mm;
        cursor: default !important;
        box-shadow: none !important;
        break-inside: auto;
        page-break-inside: auto;
    }
    body.executive-report-printing .unified-report-footer {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* HOTFIX 76: the day report uses the same document header as the range report. */
.day-appointments-toolbar-side {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.day-appointments-generated {
    min-width: 168px;
}

@media (max-width: 700px) {
    .day-appointments-generated { display: none; }
}

@media print {
    body.day-appointments-printing .day-appointments-toolbar {
        display: flex !important;
        padding: 9mm 10mm 5mm !important;
        border-bottom: 4px solid #e98224 !important;
        background: #fff !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
    body.day-appointments-printing .day-appointments-toolbar h2 {
        margin: 2mm 0 1mm !important;
        font-size: 20pt !important;
    }
    body.day-appointments-printing .day-appointments-toolbar p {
        font-size: 10.5pt !important;
    }
    body.day-appointments-printing .day-appointments-kicker {
        font-size: 8.5pt !important;
    }
    body.day-appointments-printing .day-appointments-toolbar-side {
        display: block !important;
    }
    body.day-appointments-printing .day-appointments-generated {
        display: grid !important;
        min-width: 42mm !important;
    }
    body.day-appointments-printing .day-appointments-close {
        display: none !important;
    }
    body.day-appointments-printing .day-appointments-list {
        padding: 6mm 10mm 8mm !important;
    }
}


/* =========================================================
   HOTFIX 77 — Day multi-appointment report paper layout
   The day report now uses the exact same A4 document frame and
   information hierarchy as the single appointment detail report.
   Multiple appointments are repeated as document blocks.
   ========================================================= */
.day-appointments-toolbar-side,
.day-appointments-generated { display: none !important; }

.day-appointments-preview {
    min-height: 0;
    overflow: auto;
    padding: 22px;
    display: grid;
    align-items: start;
    justify-items: center;
    background: #f1ede8;
}
.day-appointments-list {
    width: max-content;
    max-width: none;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
}
.day-appointments-report-page {
    width: 794px;
    min-width: 794px;
    height: auto;
    min-height: 1123px;
    max-height: none;
    overflow: visible;
}
.day-appointments-report-content {
    min-height: 1123px;
    height: auto;
}
.day-report-appointment-list {
    display: grid;
    gap: 22px;
}
.day-report-appointment-block {
    display: grid;
    gap: 13px;
    padding-bottom: 22px;
    border-bottom: 2px solid #eee5dc;
}
.day-report-appointment-block:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.day-report-appointment-block .day-appointment-attachment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.day-report-appointment-block .day-appointment-attachment {
    min-height: 112px;
    grid-template-rows: 75px auto;
}
.day-report-appointment-block .day-appointment-attachment img {
    height: 75px;
}
.day-report-appointment-block .day-appointment-attachment .attachment-pdf-icon {
    width: 58px;
    height: 68px;
}
.day-report-screen-actions {
    padding-top: 0;
}
.day-report-empty {
    min-height: 640px;
}

@media (max-width: 900px) {
    .day-appointments-report-page { min-width: 794px; }
}

@media print {
    @page { size: A4 portrait; margin: 8mm; }
    body.day-appointments-printing .day-appointments-preview {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
        background: #fff !important;
    }
    body.day-appointments-printing .day-appointments-list {
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
    }
    body.day-appointments-printing .day-appointments-report-page {
        width: 194mm !important;
        min-width: 0 !important;
        min-height: 277mm !important;
        height: auto !important;
        margin: 0 auto !important;
        overflow: visible !important;
        border: 0 !important;
        box-shadow: none !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
    body.day-appointments-printing .day-appointments-report-content {
        min-height: 277mm !important;
        height: auto !important;
        padding: 9mm 10mm 7mm !important;
        gap: 4.5mm !important;
    }
    body.day-appointments-printing .day-report-appointment-list {
        gap: 6mm !important;
    }
    body.day-appointments-printing .day-report-appointment-block {
        break-inside: auto;
        page-break-inside: auto;
        gap: 3.5mm !important;
        padding-bottom: 6mm !important;
        margin: 0 !important;
    }
    body.day-appointments-printing .day-report-appointment-block .appointment-detail-summary-section,
    body.day-appointments-printing .day-report-appointment-block .appointment-detail-contact-grid,
    body.day-appointments-printing .day-report-appointment-block .appointment-detail-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    body.day-appointments-printing .day-report-screen-actions {
        display: none !important;
    }
    body.day-appointments-printing .appointment-detail-page-footer {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


/* HOTFIX 78 — Monthly appointment card labels */
.monthly-appointment-subject-label {
    color: var(--text);
    font-weight: 700;
}


/* ============================================
   PWA STEP 5 — Browser UI compatibility layer
   Scope: responsive browser/mobile layout only. No calendar/storage logic is changed.
   ============================================ */
:root {
    --kanaa-safe-top: env(safe-area-inset-top, 0px);
    --kanaa-safe-right: env(safe-area-inset-right, 0px);
    --kanaa-safe-bottom: env(safe-area-inset-bottom, 0px);
    --kanaa-safe-left: env(safe-area-inset-left, 0px);
    --kanaa-touch-target: 44px;
    --kanaa-mobile-gap: 12px;
    --kanaa-visual-height: 100vh;
    --kanaa-window-height: 100vh;
}

html.kanaa-pwa-runtime {
    min-width: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

html.kanaa-pwa-runtime body.pwa-browser-ui {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    touch-action: manipulation;
}

body.pwa-browser-ui button,
body.pwa-browser-ui [role="button"],
body.pwa-browser-ui .language-picker-button,
body.pwa-browser-ui .month-nav-button,
body.pwa-browser-ui .calendar-view-button,
body.pwa-browser-ui .monthly-nav-arrow,
body.pwa-browser-ui .summary-view-all,
body.pwa-browser-ui .executive-report-launch,
body.pwa-browser-ui .time-input-container,
body.pwa-browser-ui .attachment-add-button {
    min-height: var(--kanaa-touch-target);
    -webkit-tap-highlight-color: rgba(233, 130, 36, 0.18);
    touch-action: manipulation;
}

body.pwa-browser-ui input,
body.pwa-browser-ui textarea,
body.pwa-browser-ui select,
body.pwa-browser-ui button {
    font-size: max(16px, 1rem);
}

body.pwa-browser-ui img,
body.pwa-browser-ui svg {
    max-width: 100%;
}

body.pwa-browser-ui .modal,
body.pwa-browser-ui .summary-modal,
body.pwa-browser-ui .productivity-modal,
body.pwa-browser-ui .executive-report-modal,
body.pwa-browser-ui .day-appointments-modal,
body.pwa-browser-ui .appointment-detail-modal,
body.pwa-browser-ui .paywall-overlay,
body.pwa-browser-ui .confirm-popup {
    padding-top: calc(12px + var(--kanaa-safe-top));
    padding-right: calc(12px + var(--kanaa-safe-right));
    padding-bottom: calc(12px + var(--kanaa-safe-bottom));
    padding-left: calc(12px + var(--kanaa-safe-left));
}

body.pwa-browser-ui .modal-wrapper,
body.pwa-browser-ui .summary-modal-card,
body.pwa-browser-ui .productivity-card,
body.pwa-browser-ui .paywall-card,
body.pwa-browser-ui .appointment-detail-card,
body.pwa-browser-ui .day-appointments-card {
    max-width: min(100%, 96vw);
}

body.pwa-browser-ui .modal-content,
body.pwa-browser-ui .modal-scroll-body,
body.pwa-browser-ui .summary-modal-list,
body.pwa-browser-ui .productivity-pane,
body.pwa-browser-ui .appointment-detail-body,
body.pwa-browser-ui .day-appointments-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@supports (height: 100dvh) {
    body.pwa-browser-ui .modal,
    body.pwa-browser-ui .summary-modal,
    body.pwa-browser-ui .productivity-modal,
    body.pwa-browser-ui .executive-report-modal,
    body.pwa-browser-ui .day-appointments-modal,
    body.pwa-browser-ui .appointment-detail-modal,
    body.pwa-browser-ui .paywall-overlay {
        min-height: 100dvh;
    }
}

@media (hover: none), (pointer: coarse) {
    body.pwa-browser-ui .days .day-cell:hover,
    body.pwa-browser-ui .monthly-appointment-item:hover,
    body.pwa-browser-ui .summary-view-all:hover {
        transform: none;
    }

    body.pwa-browser-ui .days .day-cell:active,
    body.pwa-browser-ui .monthly-appointment-item:active,
    body.pwa-browser-ui .summary-view-all:active,
    body.pwa-browser-ui .executive-report-launch:active {
        filter: brightness(0.98);
    }
}

@media (max-width: 980px), (max-height: 700px) {
    html.kanaa-pwa-runtime,
    html.kanaa-pwa-runtime body.pwa-browser-ui {
        height: auto;
        overflow: auto;
    }

    body.pwa-browser-ui {
        display: block;
        width: 100%;
        padding-top: calc(10px + var(--kanaa-safe-top));
        padding-right: calc(10px + var(--kanaa-safe-right));
        padding-bottom: calc(16px + var(--kanaa-safe-bottom));
        padding-left: calc(10px + var(--kanaa-safe-left));
        background-attachment: fixed;
    }

    body.pwa-browser-ui .app-shell {
        width: 100%;
        max-width: 880px;
        min-width: 0;
        margin: 0 auto;
        display: grid;
        gap: var(--kanaa-mobile-gap);
    }

    body.pwa-browser-ui .app-header {
        position: sticky;
        top: max(8px, var(--kanaa-safe-top));
        z-index: 500;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
        border-radius: 18px;
        backdrop-filter: blur(18px);
    }

    body.pwa-browser-ui .brand-block {
        width: 100%;
        justify-content: flex-start;
        align-items: center;
    }

    body.pwa-browser-ui .brand-copy,
    body.pwa-browser-ui .calendar-hint-row,
    body.pwa-browser-ui .title-text {
        min-width: 0;
        max-width: 100%;
    }

    body.pwa-browser-ui .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
    }

    body.pwa-browser-ui .settings-bar {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    body.pwa-browser-ui .language-picker,
    body.pwa-browser-ui .language-picker-button,
    body.pwa-browser-ui .language-picker-menu,
    body.pwa-browser-ui .executive-report-primary-launch,
    body.pwa-browser-ui .cloud-status-launch,
    body.pwa-browser-ui .about-app-launch {
        width: 100%;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.pwa-browser-ui .language-picker-menu {
        left: 0;
        right: 0;
        max-height: min(360px, calc(var(--kanaa-visual-height) - 160px));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.pwa-browser-ui .executive-report-launch {
        justify-content: center;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }

    body.pwa-browser-ui .dashboard-layout {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--kanaa-mobile-gap);
        align-items: stretch;
    }

    body.pwa-browser-ui .calendar-column,
    body.pwa-browser-ui .summary-column {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    body.pwa-browser-ui .calendar-container,
    body.pwa-browser-ui .calendar-summary-panel {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        border-radius: 18px;
    }

    body.pwa-browser-ui .calendar-container {
        overflow: hidden;
    }

    body.pwa-browser-ui .header {
        display: grid;
        grid-template-columns: var(--kanaa-touch-target) minmax(0, 1fr) var(--kanaa-touch-target);
        gap: 6px;
        padding: 8px;
        align-items: center;
    }

    body.pwa-browser-ui .calendar-period {
        min-width: 0;
        display: grid;
        justify-items: center;
        gap: 5px;
    }

    body.pwa-browser-ui #monthYear {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(0.95rem, 4vw, 1.15rem);
    }

    body.pwa-browser-ui .calendar-view-switch {
        width: 100%;
        max-width: 240px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    body.pwa-browser-ui .calendar-view-button {
        min-width: 0;
        min-height: 36px;
        padding-inline: 7px;
        font-size: 0.75rem;
    }

    body.pwa-browser-ui .weekdays div {
        padding: 7px 1px;
        font-size: clamp(0.63rem, 2.8vw, 0.8rem);
    }

    body.pwa-browser-ui .days {
        grid-auto-rows: auto;
    }

    body.pwa-browser-ui .days .day-cell,
    body.pwa-browser-ui .days .empty {
        min-height: clamp(62px, 14vw, 92px);
        padding: 6px 1px;
    }

    body.pwa-browser-ui .date-number {
        width: 28px;
        height: 28px;
        margin-bottom: 2px;
        font-size: clamp(0.82rem, 3.3vw, 1rem);
    }

    body.pwa-browser-ui .holiday-text,
    body.pwa-browser-ui .event-text {
        max-width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: break-word;
    }

    body.pwa-browser-ui .holiday-text {
        font-size: clamp(0.54rem, 2.4vw, 0.66rem);
    }

    body.pwa-browser-ui .event-text {
        padding: 1px 3px;
        font-size: clamp(0.54rem, 2.4vw, 0.66rem);
    }

    body.pwa-browser-ui .summary-column {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--kanaa-mobile-gap);
    }

    body.pwa-browser-ui .calendar-summary-panel {
        max-height: none;
        padding: 13px;
    }

    body.pwa-browser-ui .appointment-insights-list,
    body.pwa-browser-ui .monthly-appointments-list {
        max-height: min(50vh, 430px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 640px) {
    body.pwa-browser-ui .brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    body.pwa-browser-ui .brand-title {
        font-size: 1rem;
    }

    body.pwa-browser-ui .calendar-hint-row {
        align-items: flex-start;
    }

    body.pwa-browser-ui .title-text {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.76rem;
    }

    body.pwa-browser-ui .settings-bar {
        grid-template-columns: 1fr;
    }

    body.pwa-browser-ui .region-label {
        display: none;
    }

    body.pwa-browser-ui .header {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
    }

    body.pwa-browser-ui .month-nav-button {
        width: 40px;
        min-width: 40px;
        padding-inline: 0;
    }

    body.pwa-browser-ui .days .day-cell,
    body.pwa-browser-ui .days .empty {
        min-height: clamp(56px, 15vw, 78px);
    }

    body.pwa-browser-ui .event-text-container {
        gap: 2px;
    }

    body.pwa-browser-ui #eventModal .modal-wrapper {
        width: 100%;
        max-width: 100%;
    }

    body.pwa-browser-ui #eventModal .modal-content {
        width: 100%;
        height: auto;
        max-height: calc(var(--kanaa-visual-height) - 30px - var(--kanaa-safe-top) - var(--kanaa-safe-bottom));
        border-radius: 18px;
    }

    body.pwa-browser-ui #eventModal .modal-scroll-body {
        max-height: calc(var(--kanaa-visual-height) - 128px - var(--kanaa-safe-top) - var(--kanaa-safe-bottom));
    }

    body.pwa-browser-ui .appointment-contact-grid,
    body.pwa-browser-ui .appointment-local-tools,
    body.pwa-browser-ui .location-input-row,
    body.pwa-browser-ui .appointment-attachments-heading,
    body.pwa-browser-ui .appointment-attachment-options {
        grid-template-columns: 1fr;
    }

    body.pwa-browser-ui .appointment-attachment-grid {
        grid-template-columns: 1fr;
    }

    body.pwa-browser-ui .summary-modal-card,
    body.pwa-browser-ui .productivity-card,
    body.pwa-browser-ui .appointment-detail-card,
    body.pwa-browser-ui .day-appointments-card,
    body.pwa-browser-ui .paywall-card {
        width: 100%;
        max-height: calc(var(--kanaa-visual-height) - 24px - var(--kanaa-safe-top) - var(--kanaa-safe-bottom));
        border-radius: 18px;
    }

    body.pwa-browser-ui .productivity-header,
    body.pwa-browser-ui .about-app-header {
        padding: 16px;
    }

    body.pwa-browser-ui .productivity-tabs {
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

@media (max-width: 420px) {
    body.pwa-browser-ui {
        padding-inline: calc(6px + var(--kanaa-safe-left));
    }

    body.pwa-browser-ui .app-header,
    body.pwa-browser-ui .calendar-container,
    body.pwa-browser-ui .calendar-summary-panel {
        border-radius: 14px;
    }

    body.pwa-browser-ui .weekdays div {
        font-size: 0.58rem;
    }

    body.pwa-browser-ui .date-number {
        width: 24px;
        height: 24px;
    }

    body.pwa-browser-ui .holiday-text,
    body.pwa-browser-ui .event-text,
    body.pwa-browser-ui .add-more-text {
        font-size: 0.52rem;
        line-height: 1.1;
    }

    body.pwa-browser-ui .monthly-appointment-item {
        grid-template-columns: 42px minmax(0, 1fr) 14px;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    body.pwa-browser-ui .app-header {
        position: relative;
        top: auto;
    }

    body.pwa-browser-ui #eventModal .modal-content,
    body.pwa-browser-ui .summary-modal-card,
    body.pwa-browser-ui .productivity-card {
        max-height: calc(var(--kanaa-visual-height) - 14px);
    }
}

/* ============================================
   Step PWA-6: Browser attachment preview / download layer
   ============================================ */
.pwa-attachment-preview {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
}
.pwa-attachment-preview[hidden] { display: none !important; }
.pwa-attachment-preview-card {
    width: min(96vw, 980px);
    max-height: min(92vh, var(--kanaa-visual-height, 92vh));
    background: #fffaf4;
    border-radius: 24px;
    box-shadow: 0 24px 72px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pwa-attachment-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(180, 83, 9, 0.16);
}
.pwa-attachment-preview-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #7c2d12;
    overflow-wrap: anywhere;
}
.pwa-attachment-preview-header p {
    margin: 4px 0 0;
    color: #78716c;
    font-size: 0.86rem;
}
.pwa-attachment-preview-close {
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}
.pwa-attachment-preview-body {
    overflow: auto;
    padding: 14px;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}
.pwa-attachment-preview-body img {
    max-width: 100%;
    height: auto;
    max-height: calc(min(92vh, var(--kanaa-visual-height, 92vh)) - 112px);
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.18);
    background: #fff;
}
.appointment-attachment-tile .appointment-attachment-actions {
    gap: 6px;
    flex-wrap: wrap;
}
.appointment-attachment-tile .appointment-attachment-actions button {
    min-height: 38px;
}
@media (max-width: 640px) {
    .pwa-attachment-preview-card {
        width: 100%;
        max-height: min(96vh, var(--kanaa-visual-height, 96vh));
        border-radius: 18px;
    }
    .pwa-attachment-preview-header {
        padding: 12px;
    }
    .pwa-attachment-preview-body {
        padding: 10px;
    }
}

/* ============================================
   Step PWA-7: In-App Alarm (3-minute persistent popup)
   ============================================ */
.pwa-in-app-alarm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(10px);
}
.pwa-in-app-alarm-overlay[hidden] { display: none !important; }
.pwa-in-app-alarm-card {
    width: min(94vw, 720px);
    max-height: min(92vh, var(--kanaa-visual-height, 92vh));
    overflow: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    padding: clamp(18px, 4vw, 30px);
    border-radius: 30px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 64%, #ffedd5 100%);
    border: 1px solid rgba(234, 88, 12, 0.24);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.42);
    -webkit-overflow-scrolling: touch;
}
.pwa-in-app-alarm-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: #fed7aa;
    color: #9a3412;
    font-size: 2.35rem;
    box-shadow: inset 0 -10px 22px rgba(154, 52, 18, 0.10);
}
.pwa-in-app-alarm-content { min-width: 0; }
.pwa-in-app-alarm-kicker {
    margin: 0 0 6px;
    color: #9a3412;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.pwa-in-app-alarm-content h2 {
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 4.4vw, 2.45rem);
    line-height: 1.1;
    color: #7c2d12;
}
.pwa-in-app-alarm-details {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
}
.pwa-in-app-alarm-details div {
    display: grid;
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 247, 237, 0.9);
    border: 1px solid rgba(251, 146, 60, 0.16);
}
.pwa-in-app-alarm-details dt {
    margin: 0;
    color: #9a3412;
    font-weight: 800;
    white-space: nowrap;
}
.pwa-in-app-alarm-details dd {
    margin: 0;
    color: #1f2937;
    overflow-wrap: anywhere;
    font-weight: 650;
}
.pwa-in-app-alarm-countdown {
    margin: 12px 0 4px;
    font-weight: 800;
    color: #b45309;
}
.pwa-in-app-alarm-note {
    margin: 4px 0 18px;
    color: #78716c;
    font-size: 0.9rem;
}
.pwa-in-app-alarm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pwa-in-app-alarm-actions button {
    min-height: 46px;
    border-radius: 999px;
    border: none;
    padding: 0 18px;
    font-weight: 850;
    cursor: pointer;
}
.pwa-in-app-alarm-open {
    background: #ea580c;
    color: #fff;
    box-shadow: 0 10px 24px rgba(234, 88, 12, 0.28);
}
.pwa-in-app-alarm-ack {
    background: #ffedd5;
    color: #7c2d12;
    border: 1px solid rgba(234, 88, 12, 0.24) !important;
}
body.pwa-in-app-alarm-open {
    overflow: hidden;
}
@media (max-width: 640px) {
    .pwa-in-app-alarm-card {
        grid-template-columns: 1fr;
        width: 100%;
        border-radius: 24px;
        gap: 12px;
    }
    .pwa-in-app-alarm-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 1.9rem;
    }
    .pwa-in-app-alarm-details div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .pwa-in-app-alarm-actions button {
        width: 100%;
    }
}


/* ============================================
   Step PWA-8: Basic Web Notification permission panel
   ============================================ */
.pwa-web-notification-panel {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 10040;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: min(920px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(234, 88, 12, 0.26);
    background: rgba(255, 247, 237, 0.96);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(12px);
}
.pwa-web-notification-panel[hidden] { display: none !important; }
.pwa-web-notification-panel-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #ffedd5;
    color: #9a3412;
    font-size: 1.45rem;
}
.pwa-web-notification-panel-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.pwa-web-notification-panel-copy strong {
    color: #7c2d12;
    font-size: 0.96rem;
}
.pwa-web-notification-panel-copy span,
.pwa-web-notification-panel-copy small {
    color: #78716c;
    overflow-wrap: anywhere;
}
.pwa-web-notification-panel-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pwa-web-notification-panel-actions button {
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(234, 88, 12, 0.24);
    padding: 0 14px;
    font-weight: 850;
    cursor: pointer;
}
#pwaWebNotificationAllowButton {
    background: #ea580c;
    color: #fff;
    border-color: #ea580c;
}
#pwaWebNotificationLaterButton {
    background: #fff7ed;
    color: #7c2d12;
}
@media (max-width: 720px) {
    .pwa-web-notification-panel {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .pwa-web-notification-panel-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .pwa-web-notification-panel-actions button {
        flex: 1 1 160px;
    }
}


/* Step PWA-9: local JSON backup/restore card */
.pwa-json-backup-card {
  border-color: rgba(15, 118, 110, 0.22);
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.95), rgba(255, 255, 255, 0.98));
}
.pwa-json-backup-actions {
  align-items: stretch;
}
.pwa-json-backup-status {
  margin-top: 10px;
  min-height: 1.4em;
  white-space: pre-wrap;
}
.backup-location-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(15, 118, 110, 0.35);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.backup-location-panel[hidden] { display: none; }
#backupLocationText {
  flex: 1 1 240px;
  font-size: 0.9rem;
  word-break: break-all;
  color: #334155;
}
@media (max-width: 640px) {
  .pwa-json-backup-actions button,
  .backup-location-panel button {
    width: 100%;
  }
}


/* ============================================
   STEP PWA-10 INSTALL FLOW
   Browser/PWA install nudge shown inside the app shell.
   ============================================ */
.pwa-install-nudge {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 9990;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(233,130,36,.28);
    background: rgba(255,250,245,.96);
    box-shadow: 0 20px 60px rgba(69,39,17,.20);
    backdrop-filter: blur(16px);
    color: #3f2819;
}
.pwa-install-nudge[hidden] { display: none !important; }
.pwa-install-nudge-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #fff0df;
    font-size: 24px;
}
.pwa-install-nudge-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.pwa-install-nudge-copy strong { font-size: 15px; }
.pwa-install-nudge-copy span { color: #73513f; line-height: 1.45; font-size: 13px; }
.pwa-install-nudge-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pwa-install-nudge-actions button,
.pwa-install-nudge-actions a {
    border: 0;
    min-height: 38px;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
#pwaInstallNudgePrimary {
    background: #E98224;
    color: #fff;
}
#pwaInstallNudgeHelp {
    background: #fff0df;
    color: #7b3f08;
    border: 1px solid rgba(233,130,36,.28);
}
#pwaInstallNudgeClose {
    width: 38px;
    padding: 0;
    background: rgba(63,40,25,.08);
    color: #654534;
    font-size: 20px;
}
.kanaa-standalone .pwa-install-nudge { display: none !important; }
@media (max-width: 720px) {
    .pwa-install-nudge {
        grid-template-columns: auto 1fr;
        border-radius: 20px;
    }
    .pwa-install-nudge-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .pwa-install-nudge-actions button,
    .pwa-install-nudge-actions a {
        flex: 1 1 auto;
        justify-content: center;
        display: inline-flex;
        align-items: center;
    }
    #pwaInstallNudgeClose { flex: 0 0 42px; }
}


/* ============================================
   STEP PWA-11 OFFLINE MODE
   Online/offline status, app-shell readiness, and offline fallback page polish.
   ============================================ */
.kanaa-online body { --kanaa-connection-accent: #15803d; }
.kanaa-offline body { --kanaa-connection-accent: #b45309; }
.pwa-offline-status-panel {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    top: max(14px, env(safe-area-inset-top));
    z-index: 9992;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 20px;
    border: 1px solid rgba(180,83,9,.26);
    background: rgba(255,251,235,.96);
    color: #4a2f0f;
    box-shadow: 0 18px 54px rgba(69,39,17,.18);
    backdrop-filter: blur(16px);
}
.pwa-offline-status-panel[hidden] { display: none !important; }
.pwa-offline-status-panel[data-online="true"][data-offline-ready="true"] {
    border-color: rgba(21,128,61,.22);
    background: rgba(240,253,244,.96);
    color: #123d21;
}
.pwa-offline-status-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #b45309;
    box-shadow: 0 0 0 5px rgba(180,83,9,.14);
}
.pwa-offline-status-panel[data-online="true"] .pwa-offline-status-dot {
    background: #15803d;
    box-shadow: 0 0 0 5px rgba(21,128,61,.14);
}
.pwa-offline-status-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.pwa-offline-status-copy strong { font-size: 14px; }
.pwa-offline-status-copy span { font-size: 12.5px; line-height: 1.45; opacity: .82; }
.pwa-offline-status-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.pwa-offline-status-actions button {
    border: 0;
    min-height: 36px;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
    background: rgba(255,255,255,.82);
    color: inherit;
    box-shadow: inset 0 0 0 1px rgba(69,39,17,.12);
}
#pwaOfflineCloseButton {
    width: 36px;
    padding: 0;
    font-size: 20px;
}
.kanaa-offline .pwa-install-nudge {
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 82px));
}
body.offline-page {
    background: linear-gradient(145deg, #fff7ed, #f8fafc 45%, #eef2ff);
}
.offline-card.step11 {
    border: 1px solid rgba(233,130,36,.22);
}
.offline-feature-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.offline-feature-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    color: #334155;
    line-height: 1.55;
}
.offline-feature-list li::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-weight: 900;
}
@media (max-width: 720px) {
    .pwa-offline-status-panel {
        grid-template-columns: auto 1fr;
        top: max(10px, env(safe-area-inset-top));
        border-radius: 18px;
    }
    .pwa-offline-status-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .pwa-offline-status-actions button { flex: 1 1 auto; }
    #pwaOfflineCloseButton { flex: 0 0 40px; }
}


/* ============================================
   PWA UI POLISH — Date buttons and cloud sync label
   - Today/date badge remains a true circle.
   - Appointment count badge height fits the text.
   - Occupied dates show compact "view / add" actions only when appointments exist.
   - Cloud sync button label stays on one line on desktop.
   ============================================ */
.days .day-cell .date-number,
.days .day-cell .today-number {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.days .day-cell .event-text-container {
    margin-top: auto !important;
    gap: 5px !important;
    align-items: center !important;
}

.days .day-cell .event-count-button {
    min-height: 0 !important;
    height: auto !important;
    padding: 3px 8px !important;
    line-height: 1.15 !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
}

.day-cell-actions {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.day-view-button,
.day-add-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    padding: 1px 2px !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    font-size: .62rem !important;
}

.day-view-button {
    color: #9a480f !important;
}

.day-add-button {
    color: #c05a12 !important;
    gap: 2px !important;
}

.day-add-button .add-appointment-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(232, 118, 20, .12);
    font-weight: 900;
    line-height: 1;
}

.cloud-status-launch {
    min-width: 158px !important;
    max-width: none !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    line-height: 1.1 !important;
}

.cloud-status-launch #cloudStatusButtonText {
    white-space: nowrap !important;
    word-break: keep-all !important;
}

@media (max-width: 760px) {
    .days .day-cell .date-number,
    .days .day-cell .today-number {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
    }

    .day-cell-actions {
        gap: 5px !important;
    }

    .day-view-button,
    .day-add-button {
        font-size: .55rem !important;
    }

    .cloud-status-launch {
        min-width: 146px !important;
    }
}


/* =========================================================
   POST PWA-13 TEXT POLISH — Center day actions and keep attachment title on one line
   ========================================================= */
.days .day-cell .event-text-container {
    justify-items: center;
    text-align: center;
}

.day-cell-actions {
    justify-content: center;
    text-align: center;
}

.day-view-button,
.day-add-button {
    text-align: center;
}

.appointment-attachments-heading > div:first-child {
    flex: 0 0 auto;
    white-space: nowrap;
}

.appointment-attachments-heading strong,
#attachmentPanelTitleUI {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}

/* =========================================================
   POST PWA-13 TEXT POLISH 2 — Strictly center occupied-day controls
   - Keeps the existing labels: "มีนัด x เรื่อง" and "ดูนัด   +เพิ่มนัดหมาย".
   - Centers the count badge and the action-button group inside the day cell.
   - Keeps the one-line attachment label fix from the previous package.
   ========================================================= */
.days .day-cell .event-text-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.days .day-cell .event-count-button {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.days .day-cell .day-cell-actions {
    align-self: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}