/**
 * Google Material Design 3 Inspired Stylesheet
 * @author Kanao & Gemini
 * @version 2.8.0
 */

/* 1. Root & Color Palette */
:root {
    --primary: #AEC6FF;
    --on-primary: #002E69;
    --primary-container: #264375;
    --on-primary-container: #D8E2FF;
    --surface: #1D1B1E;
    --on-surface: #E3E2E6;
    --surface-variant: #44474E;
    --on-surface-variant: #C4C6CF;
    --surface-container-highest: #33353A;
    --surface-container-high: #323033;
    --surface-container: #1F2125;
    --outline: #8E9199;
    --error: #FFB4AB;
    --error-container: #93000A;
    --on-error: #690005;
    --scrim: #000000;
}

/* 2. Base & Typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--surface);
    color: var(--on-surface);
    display: flex;
    flex-direction: column;
}

body.no-scroll {
    overflow: hidden;
}

main {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 16px;
}

/* 3. Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.headline-large {
    font-size: 23px;
    font-weight: 500;
    line-height: 40px;
    color: var(--on-primary-container);
    margin: 0;
}

.avatar-container {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--surface-container-high);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--outline);
}

.avatar-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4. Typography Classes */
.title-large { font-size: 16px; font-weight: 500; line-height: 28px; color: var(--on-primary-container); }
.title-info-for-container { font-size: 17px; font-weight: 500; line-height: 28px; margin-left: 12px; letter-spacing: 0.16px; color: var(--on-primary-container); margin-top: 16px; }
.title-medium { font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.15px; color: var(--on-surface-variant); }
.body-medium { font-size: 14px; font-weight: 400; line-height: 20px; color: var(--on-surface-variant); }
.body-large { font-size: 13px; font-weight: 400; line-height: 24px; color: var(--on-surface-variant); text-align: right; flex-shrink: 0; }
.select-label { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--primary); padding: 0 4px; margin: 2px 0 5px; }

/* 5. Cards */
.card, .settings-card { background-color: var(--surface-container-high); border-radius: 15px; padding: 16px; margin: 16px 0; }
.card-title { margin-bottom: 20px; }

.card-for-opening, .card-for-middle, .card-for-closing { background-color: var(--surface-container-high); padding: 16px; margin-bottom: 3px; }
.card-for-opening { border-radius: 27px 27px 5px 5px; margin-top: 16px; }
.card-for-middle { border-radius: 5px; }
.card-for-closing { border-radius: 5px 5px 27px 27px; margin-bottom: 16px; }

.card-opening-for-banner { position: relative; overflow: hidden; border-radius: 34px; padding: 16px; height: 200px; margin-bottom: 3px; color: white; }
.card-opening-for-banner::before, .card-opening-for-banner::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.card-opening-for-banner::before { background: url('/assets/dex71638.webp') center/cover; filter: blur(2px); opacity: 0.8; z-index: 0; }
.card-opening-for-banner::after { background-color: rgba(0, 0, 0, 0.3); z-index: 1; }
.card-opening-for-banner > * { position: relative; z-index: 2; }

.card-maintenance { background-color: #FFC5EC; border-radius: 20px; padding: 16px; display: flex; margin: 30px 0; align-items: center; gap: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.icon-maintenance { width: 40px; height: 40px; background-color: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-maintenance svg { width: 20px; height: 20px; fill: white; }
.content-maintenance { flex: 1; }
.title-maintain { font-size: 18px; font-weight: 600; color: #333; margin: 0 0 4px; }
.subtitle-maintain { font-size: 14px; color: #3B3B3B; margin: 0; }

.card-support { background-color: #5e1d1f; border-radius: 15px; padding: 16px; margin: 16px 0; cursor: pointer; transition: box-shadow 0.3s ease; }
.card-support:hover { box-shadow: 0 0 25px rgba(255, 180, 171, 0.6); }
.card-icon-header { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; color: var(--error); }
.card-support .title-large, .card-support .body-medium { color: var(--error); }
.card-support .body-medium { opacity: 0.8; }

.settings-card { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-top: 0; }
.settings-card .title-large { color: var(--on-surface); }
.settings-card .icon-button { width: 32px; height: 32px; color: var(--on-surface-variant); }

/* 6. Info Items & Status */
.info-item, .info-header { display: flex; align-items: center; gap: 8px; }
.info-item { justify-content: space-between; }
.info-item .title-large { color: var(--on-surface); }
.icon-container { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 18px; background-color: var(--surface-variant); margin-right: 8px; }
.info-icon { width: 20px; height: 20px; color: currentColor; }
.status-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; color: #fff; text-align: center; }
.status-text { font-weight: 600; font-size: 1.55rem; color: var(--on-primary-container); margin-bottom: .25rem; }
.status-message { font-size: .75rem; color: rgba(230, 225, 229, .7); }

/* 7. Form Elements */
.select-container { margin-bottom: 5px; display: flex; flex-direction: column; }
select { width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--outline); background-color: transparent; color: var(--on-surface); font-size: 16px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E3E2E6'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 16px center; background-size: 24px; cursor: pointer; }
select:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
select option:disabled { color: var(--on-surface-variant); }

.toggle-container { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; }
.toggle-text { display: flex; flex-direction: column; margin-right: 16px; }
.toggle-text .title-medium { color: var(--on-surface); }
.toggle-switch { position: relative; display: inline-block; width: 52px; height: 32px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--surface-variant); transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 4px; background-color: var(--outline); transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(20px); background-color: var(--on-primary); }

/* 8. Buttons */
.button-filled, .button-outlined { width: 100%; padding: 20px 24px; border-radius: 20px; font-size: 14px; font-weight: 500; letter-spacing: 0.1px; cursor: pointer; border: none; text-align: center; margin: 14px 0; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.button-filled { background-color: var(--primary); color: var(--on-primary); }
.button-filled:hover { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); }

.button-outlined { background-color: transparent; color: var(--primary); border: 1px solid var(--outline); }
/* ADDED: Hover effect for outlined buttons */
.button-outlined:hover { background-color: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: none; background-color: transparent; color: var(--on-surface-variant); cursor: pointer; transition: background-color 0.2s; }
.icon-button:hover { background-color: rgba(255, 255, 255, 0.08); }

.reset-button-container { display: flex; justify-content: flex-end; margin-top: 8px; }
.button-reset { width: auto; padding: 10px 24px; margin: 1px; border-radius: 100px; }

/* 9. Dialogs & Popups */
.dialog-scrim, .api-warning-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.dialog-scrim.active, .api-warning-popup.active { opacity: 1; pointer-events: all; }
.dialog-container, .api-warning-content { background-color: var(--surface-container-highest); border-radius: 28px; box-shadow: 0 4px 20px rgba(0, 0, 0, .2); width: clamp(280px, 90%, 560px); padding: 24px; display: flex; flex-direction: column; max-height: 90vh; transform: scale(0.95); transition: transform 0.3s ease; }
.dialog-container--card-width { width: clamp(280px, 90%, 420px); }
.dialog-scrim.active .dialog-container, .api-warning-popup.active .api-warning-content { transform: scale(1); }
.dialog-header, .api-warning-header { display: flex; align-items: center; margin-bottom: 16px; color: var(--on-surface); }
.dialog-header { justify-content: space-between; gap: 16px; }
.dialog-title { font-size: 24px; font-weight: 400; white-space: nowrap; }
.api-warning-header { justify-content: flex-start; gap: 16px; }
.api-warning-header svg { color: var(--error); }
.api-warning-text { color: var(--on-surface-variant); margin-bottom: 24px; }
.dialog-content { overflow-y: auto; padding-right: 8px; margin-right: -8px; }
.dialog-supporting-text { color: var(--on-surface-variant); font-size: 14px; line-height: 20px; margin: 0 0 16px; }

.search-input-container { position: relative; display: flex; align-items: center; width: 100%; }
.search-icon { position: absolute; left: 12px; color: var(--on-surface-variant); }
.dialog-search-input { width: 100%; max-width: 220px; padding: 8px 16px 8px 40px; font-size: 14px; color: var(--on-surface); background-color: var(--surface-container); border: 1px solid var(--outline); border-radius: 100px; transition: border-color 0.2s; }
.dialog-search-input:focus { outline: none; border-color: var(--primary); }
.dialog-search-input::placeholder { color: var(--on-surface-variant); }

.dialog-textarea { width: 100%; padding: 16px; border-radius: 4px; border: none; height: 350px; border-bottom: 2px solid var(--outline); background-color: var(--surface-container); color: var(--on-surface); font-family: inherit; font-size: 14px; resize: vertical; }
.dialog-textarea:focus { outline: none; border-bottom: 2px solid var(--primary); }
.dialog-actions { display: flex; gap: 12px; padding-top: 24px; }
.dialog-actions .button-text, .dialog-actions .button-filled { width: 100%; margin: 0; padding: 10px 15px; border-radius: 100px; }
.dialog-actions .button-text { background-color: transparent; color: var(--primary); }
.dialog-actions .button-filled { background-color: var(--primary); color: var(--on-primary); }