:root {
    --font-size: 14px;
    --accent-color: #0ea5a0;
    --accent-light: rgba(14, 165, 160, 0.15);
    --border-radius: 10px;
    --sidebar-width: 240px;
    --row-height: 78px;
    --col-width: 180px; 
    --border-color: #e8e5e0;
    --muted: #718096;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0;
    -webkit-tap-highlight-color: transparent !important;
    scrollbar-width: thin; 
    scrollbar-color: var(--border-color, #e8e5e0) var(--input-bg, transparent);
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    font-size: var(--font-size);
    transition: background 0.25s ease, color 0.25s ease; 
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
input, select, textarea, .selectable { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;
    user-select: text; 
}

input:focus, select:focus, textarea:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 3px var(--accent-light); outline: none; }
button:disabled { opacity: 0.6; cursor: not-allowed; }

button, .compact-appt-card, .fab-button, .day-schedule { touch-action: manipulation; }

button:active, .compact-appt-card:active, .fab-button:active, .ios-scroll-item:active {
    transform: scale(0.95) !important;
    opacity: 0.8 !important;
    transition: transform 0.08s cubic-bezier(0.4,0,0.2,1), opacity 0.08s ease !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--input-bg, transparent); }
::-webkit-scrollbar-thumb { background: var(--border-color, #e8e5e0); border-radius: 4px; }

.app-container { display: flex; height: 100dvh; overflow: hidden; position: relative; z-index: 1; }
.sidebar { flex-shrink: 0; display: flex; flex-direction: column; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10001;
box-shadow: 4px 0 15px rgba(0,0,0,0.05); overflow: hidden; white-space: nowrap; width: var(--sidebar-width); }
.sidebar.closed { width: 70px; }
.sidebar.closed .sidebar-text { opacity: 0; pointer-events: none; display: none; }
.sidebar.closed nav button { justify-content: center; padding: 12px 0; }

.main-content { flex: 1; overflow: auto; padding: 20px; position: relative; display: flex; flex-direction: column; z-index: 5;}

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; animation: fadeIn 0.15s ease; }
.modal-content { background: #fff; border-radius: var(--border-radius);
width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.4); animation: slideUp 0.22s cubic-bezier(0.34, 1.1, 0.64, 1); overflow: hidden; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000; backdrop-filter: blur(2px); animation: fadeIn 0.2s ease; }

.top-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 10px 15px; border-radius: var(--border-radius); border: 1px solid; min-height: 50px; z-index: 1000; position: relative; transition: background 0.25s ease, border-color 0.25s ease; }
.date-nav-btn { padding: 8px 12px; border-radius: calc(var(--border-radius) - 2px); font-weight: 600; font-size: 0.85em; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; }
.stat-card { padding: 8px 12px; border-radius: var(--border-radius); border: 1px solid; display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 32px; height: 32px; border-radius: calc(var(--border-radius) - 2px); display: flex; align-items: center; justify-content: center; font-size: 1.1em; }

@media (max-width: 900px) {
    :root { --font-size: 13px; }
    .app-container { position: relative; }
    .sidebar { position: absolute; left: 0; top: 0; bottom: 0; height: 100%; width: 260px !important; transform: translateX(0); }
    .sidebar.closed { transform: translateX(-100%); }
    .sidebar-text { display: block !important; opacity: 1 !important; pointer-events: auto !important; }
    .sidebar nav button { justify-content: flex-start !important; padding: 12px 14px !important; }
    .mobile-overlay.active { display: block; }
    .main-content { padding: 10px; width: 100%; margin-left: 0; }
    .two-col { grid-template-columns: 1fr; }
    .service-card-grid { grid-template-columns: 1fr !important; }
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-content { max-height: 95vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .day-column { min-width: 140px !important; }
    .weekly-grid { min-width: 800px; } 
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 12px !important; }
    .stat-card { padding: 8px 10px !important; }
    .stat-icon { width: 28px !important; height: 28px !important; font-size: 0.9em !important; }
    .top-header { flex-wrap: nowrap !important; padding: 6px 8px !important; gap: 4px !important; min-height: 44px !important; }

    input, select, textarea {
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: 0.88em !important;
    }

    button {
        min-height: 36px !important;
        font-size: 0.85em !important;
    }

    .fab-button {
        bottom: 20px !important;
        right: 16px !important;
        padding: 11px 18px !important;
        font-size: 0.95em !important;
    }

    .modal-content {
        max-height: 92vh !important;
    }

    .modal-overlay {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .day-column-header {
        font-size: 0.82em !important;
        padding: 5px 4px !important;
    }

    .compact-appt-card {
        padding: 2px 4px !important;
    }

    .ios-scroll-item {
        padding: 7px 12px !important;
        font-size: 0.85em !important;
    }

    .stat-card {
        padding: 6px 8px !important;
    }

    .backup-table td, .backup-table th {
        padding: 8px 10px !important;
        font-size: 0.85em !important;
    }
}

@media (max-width: 480px) {
    :root { --font-size: 12px; }

    .main-content { padding: 6px; }

    .top-header {
        padding: 4px 6px !important;
        gap: 3px !important;
        min-height: 40px !important;
    }

    .modal-content {
        max-height: 96vh !important;
        border-radius: 14px 14px 0 0 !important;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .stat-card {
        padding: 5px 7px !important;
    }

    .stat-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8em !important;
    }

    .fab-button {
        bottom: 16px !important;
        right: 12px !important;
        padding: 9px 15px !important;
        font-size: 0.88em !important;
    }

    .ios-scroll-item {
        padding: 6px 10px !important;
        font-size: 0.8em !important;
    }

    .day-column-header {
        font-size: 0.75em !important;
        padding: 4px 2px !important;
    }

    .compact-appt-card {
        padding: 1px 3px !important;
    }

    .compact-appt-card .appt-name {
        font-size: 0.75em !important;
    }

    .backup-table td, .backup-table th {
        padding: 6px 8px !important;
        font-size: 0.8em !important;
    }

    input, select, textarea {
        min-height: 34px !important;
        padding: 6px 8px !important;
        font-size: 0.85em !important;
    }

    button {
        min-height: 32px !important;
        font-size: 0.82em !important;
    }

    .two-col { grid-template-columns: 1fr !important; }
}

.weekly-grid-container { overflow-x: auto; position: relative; }
.weekly-grid { display: flex; width: 100%; min-width: max-content; }
.day-column { flex: 1; min-width: var(--col-width); border-right: 1.5px solid var(--border-color); display: flex; flex-direction: column; }
.day-column:last-child { border-right: none; }
.day-column-header { padding: 8px; text-align: center; font-weight: 700; border-bottom: 1px solid; position: sticky; top: 0; z-index: 25; font-size: 0.95em; }

.day-schedule { display: flex; flex-direction: column; transition: background 0.2s; }
.day-schedule:hover { background: rgba(0,0,0,0.02); } 
.hour-slot { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border-color); z-index: 1; pointer-events: auto; height: var(--row-height) !important; cursor: pointer; } 
.hour-label { position: absolute; top: 2px; left: 4px; font-size: 0.7em; font-weight: 700; color: var(--muted); background: var(--bg-color); padding: 0 4px; z-index: 5; pointer-events: none; border-radius: 4px;}

.compact-appt-card { 
    z-index: 10; 
    border-radius: 4px; 
    left: 48px; 
    right: 2px; 
    overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; 
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); 
    box-sizing: border-box;
    padding: 2px 6px;
}
.compact-appt-card:hover { filter: brightness(0.92); box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important; z-index: 18 !important; transform: scale(1.015); }
.compact-appt-card.status-iptal { text-decoration: line-through; opacity: 0.6 !important; }

.ios-scroll-container { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 8px; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
.ios-scroll-container::-webkit-scrollbar { display: none; }
.ios-scroll-item { scroll-snap-align: start; padding: 10px 16px; border-radius: var(--border-radius); border: 1px solid; font-weight: 700; font-size: 0.9em; cursor: pointer; transition: 0.2s; white-space: nowrap; flex-shrink: 0; }

.backup-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.95em; }
.backup-table th { text-align: left; padding: 12px 15px; font-weight: 700; }
.backup-table td { padding: 12px 15px; border-bottom: 1px solid; vertical-align: middle; min-height: 44px; }

.sidebar-toggle-btn { background: rgba(255,255,255,0.1); border: none; color: white; width: 44px; height: 44px; border-radius: var(--border-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; }

.fab-button { position: fixed; bottom: 35px; right: 35px; background: var(--accent-color); color: white; border: none; border-radius: 50px; padding: 15px 25px; font-size: 1.1em; font-weight: 800; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: 0 10px 25px var(--accent-light); transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; }
.fab-button:hover { transform: translateY(-5px); box-shadow: 0 15px 35px var(--accent-light); filter: brightness(1.1); }
@media (max-width: 900px) { .fab-button { bottom: 25px; right: 25px; padding: 12px 20px; font-size: 1em; } }

.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; animation: fadeIn 0.15s ease; padding: 20px; }
.dialog-box { border-radius: 20px; width: 100%; max-width: 400px; padding: 30px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: slideUp 0.2s ease; border: 1px solid; }

.current-time-line { position: absolute; left: 0; right: 0; height: 2px; background: #ef4444; z-index: 20; pointer-events: none; box-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }
.current-time-dot { position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }