/* =========================================
   1. ЗМІННІ КОЛЬОРІВ ТА ШРИФТІВ (Стиль iOS)
   ========================================= */
:root {
    /* Світла тема */
    --bg-main: #f2f2f7; 
    --bg-glass: rgba(255, 255, 255, 0.75); 
    --bg-element: #ffffff; 
    --text-main: #000000; 
    --text-muted: #8e8e93; 
    
    --primary: #007aff; 
    --success: #34c759; 
    --warning: #ff9f0a; 
    --danger: #ff3b30; 
    --ai-color: #5856d6; 
    
    --border-color: rgba(60, 60, 67, 0.15); 
    --input-border: #e5e7eb; 
    
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.05);
    --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.1); 
    
    --radius-main: 12px; 
    --radius-float: 24px; /* М'якші кути для модальних вікон */
    
    /* Змінні для Дизайну */
    --modal-bg: #ffffff;
    --modal-text: #000000;
    --app-font-size: 13px; /* Керується з JS */
}

body.dark-mode {
    --bg-main: #000000; 
    --bg-glass: rgba(28, 28, 30, 0.75); 
    --bg-element: #1c1c1e; 
    --text-main: #ffffff; 
    --text-muted: #ebebf5; 
    --border-color: rgba(84, 84, 88, 0.65);
    --input-border: rgba(84, 84, 88, 0.8);
    --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.5); 
    --modal-bg: #1c1c1e;
    --modal-text: #ffffff;
}

/* =========================================
   2. БАЗОВІ НАЛАШТУВАННЯ
   ========================================= */
* { box-sizing: border-box; }

html, body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, sans-serif;
    margin: 0; padding: 0; overflow: hidden; 
    font-size: var(--app-font-size); /* Підключено змінну розміру */
    transition: font-size 0.3s ease;
}

h1, h2, h3, h4, p, label, div, span { color: var(--text-main); transition: color 0.3s ease; }
h1 { font-size: 1.3rem; margin: 0; font-weight: 600; } 
a { color: var(--primary); text-decoration: none; font-weight: 500; }

/* =========================================
   3. БОКОВІ ПАНЕЛІ (Ліва і Права)
   ========================================= */
.main-layout { display: flex; height: 100vh; width: 100vw; }

.sidebar, .right-sidebar {
    width: 300px; 
    height: calc(100vh - 20px); 
    margin: 10px; 
    display: flex; flex-direction: column; gap: 12px; 
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), padding 0.3s ease; 
    flex-shrink: 0; z-index: 50; overflow: hidden; white-space: nowrap; 
}
.right-sidebar { background: var(--bg-glass); backdrop-filter: blur(25px); border: 1px solid var(--border-color); border-radius: var(--radius-main); box-shadow: var(--shadow-soft); }

.sidebar.collapsed, .right-sidebar.collapsed { width: 55px; padding-left: 5px; padding-right: 5px; } 
.sidebar.collapsed .sidebar-content, .sidebar.collapsed .sidebar-bottom, .sidebar.collapsed h3, .sidebar.collapsed #sidebar-title,
.right-sidebar.collapsed .notes-container, .right-sidebar.collapsed .right-sidebar-footer, .right-sidebar.collapsed h3 { display: none !important; }
.sidebar-header, .right-sidebar-header { display: flex; align-items: center; justify-content: space-between; }
.sidebar.collapsed .sidebar-header, .right-sidebar.collapsed .right-sidebar-header { justify-content: center !important; border: none; }

.sidebar-block {
    background: var(--bg-glass); backdrop-filter: blur(25px);
    border: 1px solid var(--border-color); border-radius: var(--radius-main);
    box-shadow: var(--shadow-soft); padding: 15px; display: flex; flex-direction: column;
}
.sidebar-top { flex: 1; overflow-y: auto; }
.sidebar-bottom { flex-shrink: 0; min-height: 150px; }
.right-sidebar-header { padding: 15px; border-bottom: 1px solid var(--border-color); }
.notes-container { padding: 15px; flex: 1; overflow-y: auto; white-space: normal; }
.right-sidebar-footer { padding: 15px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 10px; }

.filter-header label { font-size: 0.85em; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; display: block; }
.sidebar-header h3, .right-sidebar-header h3 { font-size: 1.1em; font-weight: 600; color: var(--text-main); }
.filter-group { margin-bottom: 12px; } 

.note-item { background: var(--bg-element); padding: 12px; border-radius: 10px; margin-bottom: 10px; border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0,0,0,0.02); font-size: 0.95em;}
.note-time { font-size: 0.8em; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; }

.main-content { flex: 1; display: flex; flex-direction: column; padding: 10px 10px 10px 0; height: 100vh; overflow: hidden; }

/* =========================================
   4. ВЕРХНЯ ПАНЕЛЬ (ШАПКА) ТА ЕЛЕМЕНТИ
   ========================================= */
.top-bar {
    background: var(--bg-glass); backdrop-filter: blur(25px);
    border: 1px solid var(--border-color); border-radius: var(--radius-main);
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; margin-bottom: 12px; min-height: 55px; box-shadow: var(--shadow-soft);
}
.top-bar > div:first-child { flex: 1; display: flex; align-items: center; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.summary-container { display: flex; gap: 12px; margin-bottom: 12px; }
.summary-card {
    background: var(--bg-glass); backdrop-filter: blur(25px); border: 1px solid var(--border-color);
    border-radius: var(--radius-main); box-shadow: var(--shadow-soft);
    flex: 1; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;
    border-left: 4px solid var(--primary); 
}
.summary-card h3 { font-size: 0.85em; color: var(--text-muted); text-transform: uppercase; margin: 0; font-weight: 600;}
.summary-card .value { font-size: 1.4em; font-weight: bold; color: var(--text-main); margin: 0; }

/* =========================================
   5. ТАБЛИЦЯ
   ========================================= */
.table-container {
    background: var(--bg-glass); backdrop-filter: blur(25px); border: 1px solid var(--border-color);
    border-radius: var(--radius-main); box-shadow: var(--shadow-soft); flex: 1; overflow: auto; 
}
table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--app-font-size); } 
th {
    background: var(--bg-element); color: var(--text-muted); font-weight: 600; padding: 10px 12px; 
    position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border-color); white-space: nowrap; 
}
td { padding: 8px 12px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
tr:hover td { background-color: rgba(0, 122, 255, 0.05); }
th.drag-over { border-left: 3px solid var(--primary); background-color: rgba(0, 122, 255, 0.1); }

/* =========================================
   6. КНОПКИ ТА ПОЛЯ ВВОДУ (Сучасні)
   ========================================= */
.btn, button {
    background-color: var(--primary); color: #ffffff; 
    border: none; border-radius: 10px; padding: 8px 14px; 
    font-weight: 600; font-size: var(--app-font-size); 
    cursor: pointer; transition: all 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); filter: brightness(1.05); }

/* Масивні кнопки для меню (ios26) */
.btn-stacked {
    width: 100%; background: var(--primary) !important; color: white !important;
    border-radius: 14px !important; padding: 14px !important; font-size: 1.1em !important;
    margin-bottom: 12px; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

.top-actions .btn { border-radius: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); border: 1px solid var(--border-color); }
.toggle-btn { background: transparent; color: var(--text-main); font-size: 18px; padding: 0; width: 30px; box-shadow: none; border: none; }
.toggle-btn:hover { background: var(--border-color); transform: none; box-shadow: none; }
.btn-success { background-color: var(--success); } 
.btn-warning { background-color: var(--warning); color: #000; }
.btn-danger { background-color: var(--danger); } 
.btn-ai { background-color: var(--ai-color); }

input[type="text"], input[type="number"], input[type="password"], select, input[type="file"], textarea {
    background-color: #f8fafc; color: #000; border: 1px solid var(--input-border); 
    border-radius: 10px; padding: 10px 14px; width: 100%; font-family: inherit; 
    font-size: var(--app-font-size); transition: border-color 0.2s, box-shadow 0.2s;
}
body.dark-mode input[type="text"], body.dark-mode input[type="number"], body.dark-mode input[type="password"], body.dark-mode select, body.dark-mode textarea {
    background-color: rgba(255,255,255,0.05); color: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); background-color: var(--bg-element); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.7; }

/* =========================================
   7. ВЕЛИКІ МОДАЛЬНІ ВІКНА (ios26)
   ========================================= */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 1000; 
    justify-content: center; align-items: center; padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-content {
    background: var(--modal-bg); color: var(--modal-text);
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-float); /* 24px для краси */
    box-shadow: var(--shadow-float);
    padding: 35px 30px; /* Більше простору */
    max-height: 90vh; overflow-y: auto; position: relative; width: 100%; 
}
.modal-content h3, .modal-content label { color: var(--modal-text); }

/* Сучасна кнопка закриття (сірий квадрат) */
.modal-close {
    position: absolute; top: 15px; right: 15px; 
    background: #f1f5f9; color: #64748b !important;
    font-size: 20px; width: 36px; height: 36px; 
    border-radius: 12px; padding: 0; border: none;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer; transition: all 0.2s; z-index: 10;
}
body.dark-mode .modal-close { background: #333; color: #ccc !important; }
.modal-close:hover { background: #e2e8f0; color: #000 !important; transform: scale(1.05); }
body.dark-mode .modal-close:hover { background: #444; color: #fff !important; }

/* =========================================
   8. НОВЕ ВІКНО АВТОРИЗАЦІЇ (Як на референсі)
   ========================================= */
#auth-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); /* Ніжний блакитний */
    z-index: 10000; display: flex; justify-content: center; align-items: center;
}
body.dark-mode #auth-overlay { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); }
.auth-box {
    background: #ffffff; padding: 40px 35px; border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border: none; width: 360px; text-align: center;
}
body.dark-mode .auth-box { background: #1c1c1e; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }
.auth-box h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; color: #000; }
body.dark-mode .auth-box h2 { color: #fff; }
.auth-box p { font-size: 1.1em; margin-bottom: 25px; color: #64748b; }
.auth-box input { margin-bottom: 16px; font-size: 1.1em; border-radius: 12px; padding: 14px 16px; background: #f8fafc; border: 1px solid #e2e8f0; }
.auth-box button { width: 100%; border-radius: 20px; padding: 14px; font-size: 1.1em; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); }

/* =========================================
   9. КАЛЬКУЛЯТОР ТА ЛОАДЕР
   ========================================= */
#calc-modal .modal-content { background: #000000 !important; border-radius: 35px; padding: 25px; border: 1px solid #333; }
#calc-display { background: transparent !important; border: none !important; color: #ffffff; font-size: 48px; text-align: right; margin-bottom: 20px; padding: 0;}
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; }
.calc-btn { aspect-ratio: 1/1; border-radius: 50%; font-size: 24px; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; padding: 0;}
.calc-btn.num { background: #333333; color: #ffffff; }
.calc-btn.op { background: #ff9f0a; color: #ffffff; font-size: 30px;}
.calc-btn.func { background: #a5a5a5; color: #000000; }
.calc-btn.eq { background: #ff9f0a; color: #ffffff; }
.calc-btn.zero { aspect-ratio: auto; grid-column: span 2; border-radius: 40px; justify-content: flex-start; padding-left: 30px;}

#global-loader-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85);
    z-index: 999999; display: none; flex-direction: column; justify-content: center; align-items: center;
    color: white; text-align: center; backdrop-filter: blur(10px);
}
#global-loader-spinner { font-size: 60px; margin-bottom: 20px; animation: spin 2s linear infinite; }
#global-loader-percent { font-size: 50px; font-weight: bold; color: var(--success); margin-bottom: 15px; }
@keyframes spin { 100% { transform: rotate(360deg); } }