/* ============================================================
   BOLTCAD TaskPlanner — style.css  v2.1
   ============================================================
   Изменения v2.1:
   • Базовый шрифт 14px → 16px (все относительные em/rem растут)
   • Шапка выше (52px → 60px), навигация читаема
   • Таблицы: крупнее th/td, больше padding
   • Формы: крупнее inputs, labels
   • Badges, KPI-карты, прогресс-бары — пропорционально
   • Полная мобильная адаптация (burger, card-table, stacked forms)
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    /* Цвета */
    --clr-primary:        #1a56db;
    --clr-primary-dark:   #1344ad;
    --clr-primary-light:  #e8effc;
    --clr-success:        #16a34a;
    --clr-success-light:  #dcfce7;
    --clr-danger:         #dc2626;
    --clr-danger-light:   #fee2e2;
    --clr-warning:        #d97706;
    --clr-warning-light:  #fef3c7;
    --clr-purple:         #7c3aed;
    --clr-purple-light:   #ede9fe;
    --clr-orange:         #ea580c;
    --clr-orange-light:   #fff7ed;

    --clr-gray-50:   #f9fafb;
    --clr-gray-100:  #f3f4f6;
    --clr-gray-200:  #e5e7eb;
    --clr-gray-300:  #d1d5db;
    --clr-gray-400:  #9ca3af;
    --clr-gray-500:  #6b7280;
    --clr-gray-600:  #4b5563;
    --clr-gray-700:  #374151;
    --clr-gray-800:  #1f2937;
    --clr-gray-900:  #111827;
    --clr-bg:        #f0f2f5;
    --clr-white:     #ffffff;

    /* Типографика */
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fs-xs:  0.75rem;   /*  12px */
    --fs-sm:  0.875rem;  /*  14px */
    --fs-md:  1rem;      /*  16px — base */
    --fs-lg:  1.125rem;  /*  18px */
    --fs-xl:  1.25rem;   /*  20px */
    --fs-2xl: 1.5rem;    /*  24px */
    --fs-3xl: 1.875rem;  /*  30px */

    /* Геометрия */
    --radius:    8px;
    --radius-sm: 5px;
    --radius-lg: 12px;

    /* Тени */
    --shadow:    0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);

    /* Анимации */
    --transition: .18s ease;
}

/* ── Base ───────────────────────────────────────────────────── */
html { font-size: 16px; }   /* ← было 14px, теперь 16px */

body {
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-gray-800);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--clr-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Login ──────────────────────────────────────────────────── */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a5f 0%, #1a56db 100%);
}
.login-container {
    background: var(--clr-white);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    width: 100%; max-width: 420px;
}
.login-logo            { text-align: center; margin-bottom: 1.75rem; }
.login-logo h1         { font-size: var(--fs-3xl); color: var(--clr-primary); letter-spacing: 2px; }
.login-logo p          { color: var(--clr-gray-500); font-size: var(--fs-md); margin-top: .25rem; }

/* ── Header ─────────────────────────────────────────────────── */
.main-header {
    background: var(--clr-white);
    border-bottom: 1px solid var(--clr-gray-200);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem;
    height: 60px;            /* ← было 52px */
    position: sticky; top: 0; z-index: 100;
    box-shadow: var(--shadow);
}
.header-left  { display: flex; align-items: center; gap: .85rem; }

.logo         { font-weight: 700; font-size: var(--fs-lg); color: var(--clr-gray-900); white-space: nowrap; }
.logo span    { font-weight: 400; color: var(--clr-gray-500); }
.logo:hover   { text-decoration: none; }

.hamburger    { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; padding: .25rem; }

.main-nav     { display: flex; gap: .3rem; }

.nav-link {
    padding: .45rem .8rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);     /* 14px — крупнее прежнего .82rem */
    color: var(--clr-gray-600);
    transition: background var(--transition), color var(--transition);
    text-decoration: none; cursor: pointer;
    white-space: nowrap;
}
.nav-link:hover        { background: var(--clr-gray-100); color: var(--clr-primary); text-decoration: none; }
.nav-link.active       { background: var(--clr-gray-100); color: var(--clr-primary); font-weight: 600; }
.nav-link.active:hover { background: var(--clr-gray-100); }

/* Nav Dropdown */
.nav-dropdown          { position: relative; }
.nav-dropdown-btn      { background: none; border: none; }
.nav-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    min-width: 200px; z-index: 200; padding: .3rem;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu .nav-link { display: block; font-size: var(--fs-sm); }

.header-right { display: flex; align-items: center; gap: .85rem; }
.user-info    { font-size: var(--fs-sm); color: var(--clr-gray-600); }
.user-info small { color: var(--clr-gray-400); display: block; font-size: var(--fs-xs); }

.notif-bell  { position: relative; font-size: 1.25rem; text-decoration: none; }
.notif-badge {
    position: absolute; top: -6px; right: -8px;
    background: var(--clr-danger); color: #fff;
    font-size: .6rem; padding: 1px 4px; border-radius: 10px;
}

/* ── Layout shell ───────────────────────────────────────────── */
.main-content {
    flex: 1;
    padding: 1.5rem;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* ── Footer ─────────────────────────────────────────────────── */
.main-footer {
    text-align: center;
    padding: 1rem;
    font-size: var(--fs-sm);
    color: var(--clr-gray-400);
    border-top: 1px solid var(--clr-gray-200);
}

/* ── Page Header ────────────────────────────────────────────── */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .65rem; margin-bottom: 1.25rem;
}
.page-header h2 {
    font-size: var(--fs-xl);      /* 20px ← было 1.2rem≈17px */
    font-weight: 700; color: var(--clr-gray-900);
}
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.period-info {
    background: var(--clr-gray-50); padding: .6rem 1rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm); margin-bottom: 1rem; color: var(--clr-gray-600);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem;           /* ← было .4rem .8rem */
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);       /* 14px ← было .82rem */
    font-weight: 500; border: 1px solid transparent;
    cursor: pointer; transition: all var(--transition);
    text-decoration: none; line-height: 1.4; white-space: nowrap;
}
.btn:hover          { text-decoration: none; }
.btn-primary        { background: var(--clr-primary); color: #fff; }
.btn-primary:hover  { background: var(--clr-primary-dark); }
.btn-success        { background: var(--clr-success); color: #fff; }
.btn-success:hover  { opacity: .9; }
.btn-danger         { background: var(--clr-danger); color: #fff; }
.btn-danger:hover   { opacity: .9; }
.btn-outline        { border: 1px solid var(--clr-gray-300); color: var(--clr-gray-700); background: var(--clr-white); }
.btn-outline:hover  { background: var(--clr-gray-50); }
.btn-sm             { padding: .3rem .65rem; font-size: var(--fs-xs); }
.btn-lg             { padding: .65rem 1.25rem; font-size: var(--fs-md); }
.btn-full           { width: 100%; justify-content: center; }

/* ── Flash messages ──────────────────────────────────────────── */
.flash {
    padding: .75rem 1rem; border-radius: var(--radius-sm);
    font-size: var(--fs-sm); margin-bottom: 1rem; font-weight: 500;
}
.flash-error   { background: var(--clr-danger-light);  color: var(--clr-danger); }
.flash-success { background: var(--clr-success-light); color: var(--clr-success); }
.flash-info    { background: var(--clr-primary-light); color: var(--clr-primary); }
.flash-warning { background: var(--clr-warning-light); color: var(--clr-warning); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }

.form-label,
.form-group label {
    display: block; font-weight: 600;
    font-size: var(--fs-sm);       /* 14px ← было .8rem */
    margin-bottom: .3rem; color: var(--clr-gray-700);
}

.form-input,
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="search"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .55rem .8rem;         /* ← было .4rem .6rem */
    border: 1px solid var(--clr-gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);       /* 14px ← было .82rem */
    font-family: var(--font);
    transition: border var(--transition);
    background: var(--clr-white);
    color: var(--clr-gray-800);
}
.form-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none; border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px var(--clr-primary-light);
}
.form-group input[readonly],
.form-group textarea[readonly],
.form-group select:disabled {
    background: var(--clr-gray-100); color: var(--clr-gray-500);
}
.form-row              { display: flex; gap: .85rem; flex-wrap: wrap; }
.form-row-3 > .form-group { flex: 1; min-width: 160px; }
.form-group-wide       { flex: 1 1 100%; }
.form-actions          { margin-top: 1.25rem; display: flex; gap: .5rem; flex-wrap: wrap; }

input[type="range"] { width: 100%; accent-color: var(--clr-primary); cursor: pointer; }

.hint { font-size: var(--fs-xs); color: var(--clr-gray-400); margin-top: .2rem; }

/* Filters bar */
.filters-bar {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.filters-bar .form-group { margin-bottom: 0; min-width: 130px; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
    margin-bottom: 1rem;
}
.card-title {
    font-size: var(--fs-lg); font-weight: 700;
    margin-bottom: 1rem; color: var(--clr-gray-900);
    padding-bottom: .5rem; border-bottom: 1px solid var(--clr-gray-200);
}

/* ── KPI Grid ────────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.kpi-card {
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    border-radius: var(--radius); padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow);
}
.kpi-value {
    font-size: var(--fs-3xl);      /* 30px — хорошо читается */
    font-weight: 700; line-height: 1.1; color: var(--clr-gray-900);
}
.kpi-label {
    font-size: var(--fs-xs);
    color: var(--clr-gray-500); margin-top: .3rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .04em;
}
.kpi-success .kpi-value { color: var(--clr-success); }
.kpi-danger  .kpi-value { color: var(--clr-danger); }
.kpi-warning .kpi-value { color: var(--clr-warning); }
.kpi-primary .kpi-value { color: var(--clr-primary); }

/* ── Tables ──────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
    width: 100%; border-collapse: collapse;
    background: var(--clr-white); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
}
.data-table th {
    background: var(--clr-gray-50);
    font-size: var(--fs-xs);       /* 12px uppercase */
    font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--clr-gray-500);
    padding: .75rem 1rem;          /* ← было .5rem .6rem */
    text-align: left; border-bottom: 2px solid var(--clr-gray-200);
    white-space: nowrap;
}
.data-table td {
    padding: .75rem 1rem;          /* ← было .5rem .6rem */
    border-bottom: 1px solid var(--clr-gray-100);
    font-size: var(--fs-sm);       /* 14px ← было .82rem */
    vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover         { background: var(--clr-gray-50); }
.data-table tbody tr.row-overdue   { background: var(--clr-danger-light); }

/* Compact таблица для вложенных блоков */
.data-table-compact th,
.data-table-compact td { padding: .5rem .75rem; font-size: var(--fs-xs); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: .2rem .6rem;          /* ← было .12rem .45rem */
    border-radius: 999px;
    font-size: var(--fs-xs);       /* 12px */
    font-weight: 600; white-space: nowrap; line-height: 1.4;
}
/* ── Status-Badges (DB-Werte: draft|submitted|in_progress|done|accepted) ── */
.badge-done,
.badge-accepted,
.badge-green,
.badge-teal      { background: var(--clr-success-light); color: #15803d; }

.badge-eingereicht,
.badge-submitted,
.badge-blue      { background: var(--clr-primary-light); color: #1d4ed8; }

.badge-in-progress,
.badge-orange    { background: #ffedd5; color: #9a3412; }

.badge-entwurf,
.badge-draft,
.badge-gray      { background: var(--clr-gray-100); color: var(--clr-gray-700); }

.badge-rejected,
.badge-red       { background: var(--clr-danger-light); color: var(--clr-danger); }

.badge-warning,
.badge-yellow    { background: var(--clr-warning-light); color: #92400e; }

.badge-purple    { background: var(--clr-purple-light); color: var(--clr-purple); }

/* ── Priorität-Badges ── */
.badge-dringend  { background: #fee2e2; color: #991b1b; }
.badge-hoch      { background: #ffedd5; color: #9a3412; }
.badge-mittel    { background: #fef9c3; color: #854d0e; }
.badge-niedrig   { background: var(--clr-success-light); color: #166534; }

/* ── Progress Bar ────────────────────────────────────────────── */
.progress-bar-wrap {
    background: var(--clr-gray-100); border-radius: 999px;
    height: 10px; overflow: hidden; min-width: 80px;
}
.progress-bar-fill {
    height: 100%; border-radius: 999px;
    background: var(--clr-primary); transition: width .3s;
}
.progress-bar-fill.done { background: var(--clr-success); }
.progress-bar-fill.low  { background: var(--clr-warning); }

/* Inline прогресс (таблица) */
.prog-wrap { display: flex; align-items: center; gap: .5rem; min-width: 120px; }
.prog-bar  { flex: 1; background: var(--clr-gray-100); border-radius: 999px; height: 8px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 999px; background: var(--clr-primary); }
.prog-fill.done { background: var(--clr-success); }
.prog-fill.low  { background: var(--clr-warning); }
.prog-pct  { font-size: var(--fs-xs); font-weight: 600; color: var(--clr-gray-600); min-width: 36px; text-align: right; }

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs       { display: flex; gap: .3rem; border-bottom: 2px solid var(--clr-gray-200); margin-bottom: 1rem; }
.tab-btn {
    padding: .6rem 1.1rem;         /* ← было .4rem .75rem */
    font-size: var(--fs-sm);
    font-weight: 500; border: none; background: none; cursor: pointer;
    color: var(--clr-gray-500); border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all var(--transition);
}
.tab-btn:hover  { color: var(--clr-primary); }
.tab-btn.active { color: var(--clr-primary); border-bottom-color: var(--clr-primary); font-weight: 700; }
.tab-content    { display: none; }
.tab-content.active { display: block; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200;
    display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal {
    background: var(--clr-white); border-radius: var(--radius-lg);
    padding: 1.75rem; max-width: 580px; width: 100%;
    max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md);
}
.modal h3       { font-size: var(--fs-xl); margin-bottom: 1.25rem; }
.modal-actions  { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.5rem; flex-wrap: wrap; }

/* ── Notifications ────────────────────────────────────────────── */
.notif-list   { display: flex; flex-direction: column; gap: .5rem; }
.notif-item   { display: flex; gap: .75rem; padding: .75rem; border-radius: var(--radius-sm);
                background: var(--clr-gray-50); border: 1px solid var(--clr-gray-200); }
.notif-item.unread { background: #dbeafe; border-color: #93c5fd; }
.notif-icon   { font-size: 1.2rem; }
.notif-title  { font-weight: 600; font-size: var(--fs-sm); }
.notif-body   { font-size: var(--fs-xs); color: var(--clr-gray-600); margin-top: .15rem; }
.notif-time   { font-size: var(--fs-xs); color: var(--clr-gray-400); white-space: nowrap; }

/* ── Timer ───────────────────────────────────────────────────── */
.timer-controls--inline {
    display: flex; align-items: center; gap: .85rem;
    padding: .65rem .9rem; background: var(--clr-gray-50);
    border: 1px solid var(--clr-gray-200); border-radius: var(--radius);
    margin-bottom: 1.1rem; flex-wrap: wrap;
}
.timer-controls--inline .timer-running { margin: 0; font-size: var(--fs-sm); }
.timer-display {
    font-size: var(--fs-2xl); font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--clr-gray-900);
}

/* ── Misc helpers ────────────────────────────────────────────── */
.text-red     { color: var(--clr-danger); font-weight: 600; }
.text-green   { color: var(--clr-success); }
.text-muted   { color: var(--clr-gray-500); }
.text-sm      { font-size: var(--fs-sm); }
.text-xs      { font-size: var(--fs-xs); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.nowrap       { white-space: nowrap; }
.empty-state  {
    text-align: center; padding: 3rem 1rem;
    color: var(--clr-gray-500); font-size: var(--fs-lg);
}
hr.section-divider { border: none; border-top: 1px solid var(--clr-gray-200); margin: 1rem 0; }

/* Diff summary */
.diff-summary { font-size: var(--fs-xs); color: var(--clr-gray-600); }

/* ── var(--clr-muted) alias ── */
:root {
    --clr-muted: var(--clr-gray-500);
}

/* ── Extra badge colors ───────────────────────────────────────── */
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-gray   { background: var(--clr-gray-100); color: var(--clr-gray-700); }

/* ── Statistik / Charts ──────────────────────────────────────── */
.stat-bar-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.stat-bar-label { font-size: var(--fs-sm); min-width: 140px; color: var(--clr-gray-700); }
.stat-bar-wrap  { flex: 1; background: var(--clr-gray-100); border-radius: 999px; height: 12px; }
.stat-bar-fill  { height: 100%; border-radius: 999px; background: var(--clr-primary); }
.stat-bar-val   { font-size: var(--fs-xs); color: var(--clr-gray-500); min-width: 50px; text-align: right; }

/* ── KPI-Box (для PDF-export preview) ───────────────────────── */
.kpi-row  { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.kpi-box  { background: var(--clr-white); border: 1px solid var(--clr-gray-200);
            border-radius: var(--radius); padding: 1rem 1.25rem; flex: 1 1 130px; }
.kpi-box .val { font-size: var(--fs-2xl); font-weight: 700; color: var(--clr-gray-900); }
.kpi-box .lbl { font-size: var(--fs-xs);  color: var(--clr-gray-500); margin-top: .2rem; }

/* ── Übersicht nach Mitarbeiter (Dashboard) ──────────────────── */
.ma-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem; margin-bottom: 1.75rem;
}
.ma-card {
    background: var(--clr-white); border: 1px solid var(--clr-gray-200);
    border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
}
.ma-card-head  { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.ma-card-name  { font-size: var(--fs-lg); font-weight: 700; }
.ma-card-pct   { font-size: var(--fs-xl); font-weight: 700; color: var(--clr-primary); }
.ma-bar-wrap   { background: var(--clr-gray-100); border-radius: 999px; height: 10px; overflow: hidden; margin-bottom: .75rem; }
.ma-bar        { height: 100%; border-radius: 999px; background: var(--clr-primary); transition: width .4s; }
.ma-bar.high   { background: var(--clr-success); }
.ma-bar.low    { background: var(--clr-warning); }
.ma-stats      { display: flex; gap: .85rem; font-size: var(--fs-xs); color: var(--clr-gray-500); flex-wrap: wrap; margin-bottom: .75rem; }
.ma-overdue    { color: var(--clr-danger); font-weight: 700; }

/* ── Section heading ─────────────────────────────────────────── */
.section-hd {
    font-size: var(--fs-lg); font-weight: 700;
    margin: 1.5rem 0 .85rem;
    padding-bottom: .4rem; border-bottom: 2px solid var(--clr-gray-200);
    color: var(--clr-gray-900);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile First
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    .main-content { padding: 1.25rem 1rem; }
    .kpi-grid     { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    html { font-size: 15px; } /* чуть уменьшаем, но больше 14px */

    /* Hamburger */
    .hamburger { display: flex; }

    .main-nav {
        display: none;
        position: absolute; top: 60px; left: 0; right: 0;
        background: var(--clr-white); flex-direction: column;
        padding: .5rem; border-bottom: 1px solid var(--clr-gray-200);
        box-shadow: var(--shadow); z-index: 99;
    }
    .main-nav.open { display: flex; }
    .main-nav .nav-link { font-size: var(--fs-md); padding: .6rem .9rem; }

    /* Dropdown в мобиле — всегда показываем */
    .nav-dropdown-menu { position: static; box-shadow: none; border: none;
        border-left: 3px solid var(--clr-gray-200); margin-left: 1rem; display: block; }

    .header-right { gap: .5rem; }
    .user-info    { display: none; }

    .main-content { padding: 1rem .75rem; }

    /* Page header */
    .page-header         { flex-direction: column; align-items: flex-start; }
    .page-header h2      { font-size: var(--fs-xl); }

    /* KPI */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .kpi-value { font-size: var(--fs-2xl); }

    /* Forms */
    .form-row           { flex-direction: column; }
    .form-row-3 > .form-group { min-width: 100%; }
    .filters-bar        { flex-direction: column; }
    .filters-bar .form-group { width: 100%; min-width: unset; }

    /* Mitarbeiter grid */
    .ma-grid { grid-template-columns: 1fr; }

    /* Tabs */
    .tabs    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn { padding: .5rem .85rem; white-space: nowrap; }

    /* Modal */
    .modal { padding: 1.25rem; }

    /* ── Card-mode для data-table ── */
    .data-table.card-on-mobile thead { display: none; }
    .data-table.card-on-mobile tbody tr {
        display: block;
        border: 1px solid var(--clr-gray-200); border-radius: var(--radius);
        margin-bottom: .85rem; padding: .85rem;
        background: var(--clr-white); box-shadow: var(--shadow);
    }
    .data-table.card-on-mobile tbody td {
        display: flex; justify-content: space-between; align-items: flex-start;
        padding: .35rem 0; border: none; font-size: var(--fs-sm); gap: .5rem;
    }
    .data-table.card-on-mobile tbody td::before {
        content: attr(data-label);
        font-weight: 700; color: var(--clr-gray-500); font-size: var(--fs-xs);
        text-transform: uppercase; letter-spacing: .04em;
        white-space: nowrap; flex-shrink: 0; margin-right: .5rem; padding-top: 2px;
    }
    .data-table.card-on-mobile tbody tr.row-overdue {
        border-left: 3px solid var(--clr-danger); background: var(--clr-danger-light);
    }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
    html { font-size: 14.5px; }

    .main-content { padding: .75rem .6rem; }

    .kpi-grid  { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .kpi-card  { padding: .85rem 1rem; }
    .kpi-value { font-size: var(--fs-xl); }

    .btn    { font-size: var(--fs-xs); padding: .4rem .75rem; }
    .btn-lg { font-size: var(--fs-sm); }

    .modal { padding: 1rem; border-radius: var(--radius); }
}