/* ==========================================================================
   1. СКИДАННЯ СТИЛІВ ТА БАЗОВІ НАЛАШТУВАННЯ
   ========================================================================== */
* { 
    box-sizing: border-box; 
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; 
    margin: 0; 
    padding: 0; 
}

body { 
    display: flex; 
    background: #f4f6f9; 
    color: #333; 
    height: 100vh; 
    overflow: hidden; 
}

/* ==========================================================================
   2. ЛІВЕ НАВІГАЦІЙНЕ МЕНЮ (SIDEBAR) ТА ВИПАДАЮЧІ СПИСКИ ЗА КЛІКОМ
   ========================================================================== */
.sidebar { 
    width: 280px; 
    background: #1e293b; 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.sidebar h3 { 
    padding: 20px; 
    background: #0f172a; 
    text-align: center; 
    font-size: 16px; 
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #38bdf8;
    font-weight: 700;
}

.sidebar a { 
    padding: 12px 20px; 
    color: #94a3b8; 
    text-decoration: none; 
    display: block; 
    font-size: 14px; 
    border-left: 4px solid transparent; 
    transition: all 0.2s ease;
}

.sidebar a:hover {
    background: #334155; 
    color: #f8fafc; 
    border-left-color: #0284c7; 
}

.sidebar a.active { 
    background: #0f172a; 
    color: #fff; 
    border-left-color: #38bdf8; 
    font-weight: 600;
}

/* Контейнери випадаючих списків */
.dropdown-container {
    position: relative;
    width: 100%;
}

.dropdown-btn {
    padding: 12px 20px;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
    border-left: 4px solid transparent;
    user-select: none; /* Запобігає виділенню тексту при подвійному кліку */
}

/* Зміна кольору головної кнопки ТІЛЬКИ коли меню відкрито */
.dropdown-container.open .dropdown-btn {
    background: #334155;
    color: #38bdf8;
}

.dropdown-btn .arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
    color: #64748b;
}

/* Поворот стрілки ТІЛЬКИ коли меню відкрито */
.dropdown-container.open .arrow {
    transform: rotate(180deg);
    color: #38bdf8;
}

/* Вміст списку приховано за замовчуванням */
.dropdown-content {
    display: none;
    background: #0f172a; 
    padding-left: 10px;  
}

/* Відображення списку ТІЛЬКИ при наявності класу .open (після кліку) */
.dropdown-container.open .dropdown-content {
    display: block;
}

/* Внутрішні посилання всередині довідників */
.dropdown-content a {
    padding: 10px 20px;
    font-size: 13px;
    color: #94a3b8;
    border-left: 2px solid transparent;
}

.dropdown-content a:hover {
    color: #f8fafc;
    background: #1e293b;
    border-left-color: #0284c7;
}

.dropdown-content a.active {
    color: #fff;
    background: #1e293b;
    border-left-color: #38bdf8;
    font-weight: 500;
}

/* ==========================================================================
   3. ГОЛОВНА ОБЛАСТЬ КОНТЕНТУ ТА ШАПКА (HEADER)
   ========================================================================== */
.main-content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}

header { 
    background: #fff; 
    padding: 15px 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02); 
}

header span {
    font-size: 14px;
    color: #64748b;
}

header span strong {
    color: #0f172a;
}

.logout-btn { 
    color: #ef4444; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background 0.2s;
}

.logout-btn:hover {
    background: #fee2e2;
}

.content-wrapper { 
    padding: 25px; 
    overflow-y: auto; 
    flex: 1; 
}

/* ==========================================================================
   4. КАРТКИ-БЛОКИ, СІТКА ФОРМИ ТА ЕЛЕМЕНТИ КЕРУВАННЯ
   ========================================================================== */
.card { 
    background: #fff; 
    padding: 25px; 
    border-radius: 8px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
    margin-bottom: 25px; 
    border: 1px solid #e2e8f0;
}

h2 { 
    margin-bottom: 20px; 
    color: #1e293b; 
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
}

h3 {
    margin-bottom: 15px;
    color: #334155;
    font-size: 16px;
    font-weight: 600;
}

/* Сітка для ідеального горизонтального вирівнювання полів */
.grid-form { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
    gap: 20px; 
    margin-bottom: 20px; 
    align-items: end; 
}

.form-group { 
    display: flex;
    flex-direction: column;
}

.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: 600; 
    font-size: 13px; 
    color: #475569;
}

input, select { 
    width: 100%; 
    padding: 10px 12px; 
    border: 1px solid #cbd5e1; 
    border-radius: 6px; 
    font-size: 14px; 
    color: #334155;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 41px; /* Однакова висота для полів і селектів */
}

input:focus, select:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

button { 
    background: #0284c7; 
    color: white; 
    border: none; 
    padding: 11px 24px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 14px;
    transition: background 0.2s;
    height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button:hover { 
    background: #0369a1; 
}

/* Панель швидкого пошуку */
.search-box { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 20px; 
    max-width: 500px; 
}

.search-box input {
    flex: 1;
}

/* ==========================================================================
   5. ТАБЛИЦІ ДАНИХ ТА КНОПКИ ДІЙ (РЕДАГУВАННЯ / ВИДАЛЕННЯ)
   ========================================================================== */
.table-responsive { 
    overflow-x: auto; 
    margin-top: 15px; 
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

table { 
    width: 100%; 
    border-collapse: collapse; 
    background: white; 
    font-size: 14px; 
    text-align: left;
}

th, td { 
    padding: 14px 18px; 
    border-bottom: 1px solid #e2e8f0; 
    vertical-align: middle;
    white-space: nowrap; /* Захист від некрасивого переносу слів */
}

th { 
    background: #f8fafc; 
    font-weight: 600; 
    color: #475569; 
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover { 
    background: #f8fafc; 
}

/* Стилізація кнопок дій усередині таблиць */
.btn-action { 
    padding: 5px 10px; 
    font-size: 12px; 
    border-radius: 4px; 
    text-decoration: none; 
    font-weight: 600; 
    display: inline-block; 
    margin-right: 5px; 
    height: auto; 
    transition: background 0.2s;
}

.btn-edit { 
    background: #f59e0b; 
    color: #fff; 
}

.btn-edit:hover { 
    background: #d97706; 
}

.btn-delete { 
    background: #ef4444; 
    color: #fff; 
}

.btn-delete:hover { 
    background: #dc2626; 
}

/* Системні шифровані коди або ідентифікатори */
code {
    background: #f1f5f9;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #0f172a;
    font-size: 13px;
}

/* ==========================================================================
   6. СТОРІНКА АВТОРИЗАЦІЇ (LOGIN PAGE)
   ========================================================================== */
.login-container { 
    max-width: 400px; 
    margin: 120px auto; 
    background: white; 
    padding: 35px; 
    border-radius: 12px; 
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.login-container h2 { 
    text-align: center; 
    margin-bottom: 25px; 
    border: none;
    padding: 0;
    color: #0f172a;
}

.login-container button { 
    width: 100%; 
    margin-top: 10px; 
}