/* =====================================================================
   Яркая тема «Лента» — подключается ПОСЛЕ styles.css.
   Светлый каркас с чёткими границами, холодный фон, белые карточки,
   насыщенные статусы. Чтобы вернуть старый вид — уберите <link> на этот файл.
   ===================================================================== */

:root {
    /* Каркас и поверхности */
    --ink: #141a3d;
    --ink-2: #1d2552;
    --ink-line: rgba(255, 255, 255, .09);
    --bg: #e8ebf4;
    --surface: #ffffff;
    --surface-2: #f4f6fb;
    --surface-3: #eceff8;
    --border: #d6dbe8;
    --border-strong: #b9c0d4;

    /* Текст — контрастнее */
    --text: #10142e;
    --text-2: #2b3157;
    --muted: #555d80;
    --faint: #8a91ad;

    /* Акценты */
    --primary: #3b3bf5;
    --primary-hover: #2a2ad8;
    --primary-soft: #ebebff;
    --primary-ring: rgba(59, 59, 245, .22);
    --ribbon: #ff3d7f;

    /* Статусы — насыщенные */
    --success: #0b8a44;
    --success-bright: #12b05a;
    --success-soft: #daf6e6;
    --warning: #c25400;
    --warning-soft: #ffeccf;
    --danger: #e0203a;
    --danger-soft: #ffe1e5;
    --info: #0670c2;
    --info-soft: #dcefff;
    --violet: #6d2fe6;
    --violet-soft: #ece3ff;
    --slate-soft: #e6e9f2;

    --radius-sm: 9px;
    --radius: 11px;
    --radius-lg: 14px;

    --shadow-xs: 0 1px 0 rgba(16, 20, 46, .04);
    --shadow-sm: 0 1px 2px rgba(16, 20, 46, .08), 0 2px 6px rgba(16, 20, 46, .05);
    --shadow-lg: 0 24px 48px -16px rgba(16, 20, 46, .35), 0 8px 16px -8px rgba(16, 20, 46, .12);

    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

body { font-size: 14px; letter-spacing: -.003em; }
h1, h2, h3, .content-title, .panel-title, .kpi-value { letter-spacing: -.02em; }

/* ---------- Шапка: светлая, с чёткой нижней границей ---------- */
.app-header {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1.5px solid var(--border);
    box-shadow: 0 2px 10px -6px rgba(16, 20, 46, .18);
}
.app-title { color: var(--text); font-weight: 800; font-size: 17px; }
.app-logo {
    background: var(--ribbon);
    border-radius: 9px;
    box-shadow: 0 4px 10px -3px rgba(255, 61, 127, .55);
}
.user-stats { border-right: 1.5px solid var(--border); }
.user-stat-text { color: var(--muted); }
.user-stat-text b { color: var(--text); font-weight: 800; }
.user-avatar { background: var(--primary); color: #fff; font-weight: 700; }
.user-name { color: var(--text); font-weight: 700; }

/* ---------- Меню слева: белое, яркий активный пункт ---------- */
.sidebar {
    background: #ffffff;
    border-right: 1.5px solid var(--border);
}
.nav { gap: 3px; }
.nav-item {
    position: relative;
    color: var(--text-2);
    font-weight: 700;
    height: 40px;
}
.nav-item .ic { color: var(--muted); }
.nav-item:hover { background: var(--primary-soft); color: var(--primary); }
.nav-item:hover .ic { color: var(--primary); }
.nav-item.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(59, 59, 245, .6);
}
.nav-item.active .ic { color: #fff; }
.nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--ribbon);
}

.today-orders-sidebar { border-top: 1.5px solid var(--border); }
.today-orders-header h3 { color: var(--text-2); letter-spacing: 0; text-transform: none; font-size: 12.5px; font-weight: 800; }
.today-order-item { background: var(--surface-2); border: 1.5px solid var(--border); }
.today-order-phone { color: var(--muted); }
.today-order-highlight { background: var(--primary-soft); border-color: var(--primary); }
.today-order-empty { color: var(--muted); border: 1.5px dashed var(--border-strong); }

/* ---------- Контент ---------- */
.content-title { font-size: 26px; font-weight: 800; color: var(--text); }
.section-heading, .report-title, .block-title { font-weight: 800; }

/* Поиск и поля — чёткие рамки */
.search-input,
.form-control,
.client-phone-input {
    border: 1.5px solid var(--border);
    box-shadow: none;
    color: var(--text);
    font-weight: 500;
}
.search-input:hover,
.form-control:hover,
.client-phone-input:hover { border-color: var(--border-strong); }
.search-input:focus,
.form-control:focus,
.client-phone-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-ring); }
.form-label { color: var(--text-2); font-weight: 700; }

/* Кнопки */
.btn { font-weight: 700; }
.btn-primary { background: var(--primary); box-shadow: 0 6px 14px -6px rgba(59, 59, 245, .65); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-outline, .btn-secondary { border: 1.5px solid var(--border); color: var(--text); }
.btn-outline:hover:not(:disabled), .btn-secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
.btn-outline.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.btn-danger { background: var(--danger); }

/* Чипы фильтров */
.segmented-scroll > button {
    height: 36px;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    font-weight: 700;
}
.segmented-scroll > button:hover { border-color: var(--primary); color: var(--primary); }
.segmented-scroll > button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(59, 59, 245, .8);
}

/* Переключатели (Цех / Офис, способы оплаты) */
.segmented { background: var(--surface-3); border: 1.5px solid var(--border); }
.segmented > button { font-weight: 700; color: var(--muted); }
.segmented > button.active,
.segmented > button.addorder-toggle-btn-active,
.segmented > button.addorder-method-btn-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(59, 59, 245, .6);
}
.addorder-toggle-group > .addorder-toggle-btn-active,
.edit-place-toggle > .addorder-toggle-btn-active { color: #fff; }

/* Карточки / панели */
.panel, .kpi, .report-block, .orders-table-container {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.panel-title { font-weight: 800; }
.panel-step, .panel-icon { background: var(--primary); color: #fff; }

/* KPI в финансах */
.kpi { border-top: 4px solid var(--border-strong); }
.kpi-label { color: var(--muted); font-weight: 700; }
.kpi-value { font-size: 26px; font-weight: 800; }
.kpi-success { border-top-color: var(--success-bright); }
.kpi-danger { border-top-color: var(--danger); }
.kpi:not(.kpi-success):not(.kpi-danger) { border-top-color: var(--primary); }

/* ---------- Таблицы ---------- */
.orders-table th {
    background: #f0f2fa;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 800;
    border-bottom: 1.5px solid var(--border);
    padding-top: 12px;
    padding-bottom: 12px;
}
.orders-table td { border-bottom: 1px solid #e3e7f1; }
.orders-table tbody tr:hover { background: #f5f5ff; }
.order-id { font-weight: 800; font-size: 15px; }
.order-date { color: var(--muted); font-weight: 500; }
.customer-title { font-weight: 700; }
.customer-phone-line { color: var(--text-2); font-weight: 500; }

/* Деньги */
.finance-debt { color: var(--danger); font-weight: 800; font-size: 15px; }
.finance-debt small { color: var(--muted); font-weight: 600; }
.finance-no-debt { color: var(--success); font-weight: 800; }
.pay-ok {
    background: var(--success-soft);
    color: var(--success);
    font-weight: 800;
    border: 1px solid #a9e8c4;
}

/* Статусы — заметные плашки */
.status-badge {
    height: 26px;
    padding: 0 11px;
    font-size: 12.5px;
    font-weight: 800;
    border: 1px solid transparent;
}
.status-badge::before { width: 7px; height: 7px; opacity: 1; }
.status-new { background: var(--warning-soft); color: var(--warning); border-color: #ffd29a; }
.status-ready { background: var(--info-soft); color: var(--info); border-color: #a9d6ff; }
.status-notinstalled { background: var(--violet-soft); color: var(--violet); border-color: #d2bcff; }
.status-delivered { background: var(--success-soft); color: var(--success); border-color: #a9e8c4; }
.status-completed { background: var(--slate-soft); color: #3d4466; border-color: #cdd2e2; }
.status-deleted { background: var(--danger-soft); color: var(--danger); border-color: #ffb7c2; }
.status-active { background: var(--success-soft); color: var(--success); border-color: #a9e8c4; }
.status-inactive { background: var(--slate-soft); color: var(--muted); border-color: #cdd2e2; }

.tag { font-weight: 700; }
.tag-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #ffb7c2; }
.tag-violet { background: var(--violet-soft); color: var(--violet); border: 1px solid #d2bcff; }

/* Кнопки действий в строках */
.action-btn { border: 1.5px solid var(--border); color: var(--text-2); }
.action-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.action-btn.success { color: var(--success-bright); }
.action-btn.success:hover:not(:disabled) { background: var(--success-bright); border-color: var(--success-bright); color: #fff; }
.action-btn.danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }
.action-btn.pay-btn { background: var(--primary); border-color: var(--primary); color: #fff; }
.action-btn.pay-btn:hover { background: var(--primary-hover); }

.preview-mini, .preview-more { border-radius: 9px; border: 1.5px solid var(--border); }

/* Телефон — ссылка */
.phone-link { color: var(--primary) !important; font-weight: 600; text-decoration-color: rgba(59, 59, 245, .35) !important; }

/* ---------- Вход ---------- */
.login-screen {
    background:
        radial-gradient(800px 480px at 12% 0%, rgba(59, 59, 245, .16) 0%, transparent 60%),
        radial-gradient(700px 480px at 100% 100%, rgba(255, 61, 127, .14) 0%, transparent 60%),
        var(--bg);
}
.login-card { border: 1.5px solid var(--border); box-shadow: 0 30px 60px -24px rgba(16, 20, 46, .3); }
.login-logo { background: var(--ribbon); box-shadow: 0 8px 20px -6px rgba(255, 61, 127, .6); }
.login-title { font-weight: 800; font-size: 22px; }

/* ---------- Модальные окна ---------- */
.modal-header { border-bottom: 1.5px solid var(--border); }
.modal-content, .modal-dialog { border: none; }

/* ---------- Мобильная версия ---------- */
@media (max-width: 900px) {
    .sidebar { background: #ffffff; }
    .nav-item.active::before { left: -12px; }
}
@media (max-width: 760px) {
    .content-title { font-size: 22px; }
}

/* Видимый фокус с клавиатуры */
.nav-item:focus-visible,
.segmented-scroll > button:focus-visible,
.action-btn:focus-visible { outline: 2px solid var(--ribbon); outline-offset: 2px; }

/* Compact today-order cards; preserve client link and notification action. */
.sidebar .today-orders-sidebar { padding-top: 10px; }
.sidebar .today-orders-header h3 { padding: 0 2px 6px; font-size: 12px; }
.sidebar .today-orders-list { gap: 3px; }
.sidebar .today-order-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    grid-template-areas: "number notify" "phone notify";
    align-items: center;
    gap: 0 4px;
    padding: 4px 6px;
    border-width: 1px;
    border-radius: 6px;
}
.sidebar .today-order-number { grid-area: number; min-width: 0; font-size: 12px; line-height: 15px; overflow-wrap: anywhere; }
.sidebar .today-order-phone { grid-area: phone; min-width: 0; margin: 0; font-size: 11px; line-height: 15px; overflow-wrap: anywhere; }
.sidebar .today-order-phone .phone-link { font-size: inherit; }
.sidebar .today-order-notify-btn {
    grid-area: notify;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 5px;
}
.sidebar .today-order-notify-btn .ic { width: 15px; height: 15px; pointer-events: none; }
@media (pointer: coarse) {
    .sidebar .today-order-notify-btn { height: 32px; }
}