/*
 * nexfit-ui.css
 * Единая дизайн-система NexFit.
 * Основана на стилях страницы /home (dashboard).
 *
 * ПОДКЛЮЧЕНИЕ: добавьте в layouts/app.blade.php перед @stack('styles'):
 *   <link rel="stylesheet" href="{{ asset('css/nexfit-ui.css') }}">
 */

/* ════════════════════════════════════════════════════════════════
   ПЕРЕМЕННЫЕ
════════════════════════════════════════════════════════════════ */
:root {
    --nf-blue:        #435fe5;
    --nf-blue-dark:   #374fc3;
    --nf-blue-light:  #eef1fd;
    --nf-green:       #60b399;
    --nf-green-light: #eaf6f1;
    --nf-red:         #ca5d56;
    --nf-red-light:   #fdf0ef;
    --nf-orange:      #f1aa60;
    --nf-orange-light:#fef6ec;
    --nf-text:        #1e1e1e;
    --nf-muted:       #7a7a7a;
    --nf-bg:          #f3f6fb;
    --nf-card:        #ffffff;
    --nf-border:      #e2e8f0;
    --nf-gray:        #edf2f6;
    --nf-shadow:      0 2px 8px rgba(67,95,229,.10);
    --nf-shadow-md:   0 4px 16px rgba(67,95,229,.14);
    --nf-radius:      8px;
    --nf-radius-sm:   6px;
    --nf-font:        'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ════════════════════════════════════════════════════════════════
   ТИПОГРАФИЯ
════════════════════════════════════════════════════════════════ */
body, .dashboard-page {
    font-family: var(--nf-font);
    color: var(--nf-text);
    background: var(--nf-bg);
}

.nf-page-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--nf-text);
}

.nf-section-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
}

.nf-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--nf-muted);
    margin-bottom: 4px;
    display: block;
}

/* ════════════════════════════════════════════════════════════════
   КНОПКИ
════════════════════════════════════════════════════════════════ */
.nf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--nf-radius-sm);
    padding: 8px 16px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--nf-border);
    background: var(--nf-card);
    color: var(--nf-text);
    cursor: pointer;
    transition: all .18s;
    text-decoration: none;
    white-space: nowrap;
}
.nf-btn:hover { background: var(--nf-gray); border-color: #c5cde8; text-decoration: none; }
.nf-btn:active { transform: scale(.97); }

.nf-btn-primary {
    background: var(--nf-blue);
    color: #fff;
    border-color: var(--nf-blue);
}
.nf-btn-primary:hover { background: var(--nf-blue-dark); border-color: var(--nf-blue-dark); color: #fff; }

.nf-btn-success {
    background: var(--nf-green);
    color: #fff;
    border-color: var(--nf-green);
}
.nf-btn-success:hover { background: #4fa086; border-color: #4fa086; color: #fff; }

.nf-btn-danger {
    background: var(--nf-red);
    color: #fff;
    border-color: var(--nf-red);
}
.nf-btn-danger:hover { background: #b84f48; border-color: #b84f48; color: #fff; }

.nf-btn-warning {
    background: var(--nf-orange);
    color: #fff;
    border-color: var(--nf-orange);
}
.nf-btn-warning:hover { background: #d9924a; color: #fff; }

.nf-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--nf-blue);
}
.nf-btn-ghost:hover { background: var(--nf-blue-light); }

.nf-btn-sm { padding: 5px 11px; font-size: 12px; }
.nf-btn-lg { padding: 11px 22px; font-size: 15px; }

.nf-btn-icon { padding: 7px 9px; }

/* ════════════════════════════════════════════════════════════════
   КАРТОЧКИ
════════════════════════════════════════════════════════════════ */
.nf-card {
    background: var(--nf-card);
    border-radius: var(--nf-radius);
    box-shadow: var(--nf-shadow);
    overflow: hidden;
}
.nf-card-header {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid var(--nf-border);
    display: flex;
    align-items: center;
    gap: 6px;
}
.nf-card-body { padding: 16px; }
.nf-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--nf-border);
    background: var(--nf-gray);
}

/* ════════════════════════════════════════════════════════════════
   БЕЙДЖИ / ПЛАШКИ
════════════════════════════════════════════════════════════════ */
.nf-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.nf-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.nf-badge-success  { background: var(--nf-green-light);  color: var(--nf-green); }
.nf-badge-danger   { background: var(--nf-red-light);    color: var(--nf-red); }
.nf-badge-warning  { background: var(--nf-orange-light); color: var(--nf-orange); }
.nf-badge-primary  { background: var(--nf-blue-light);   color: var(--nf-blue); }
.nf-badge-neutral  { background: var(--nf-gray);         color: var(--nf-muted); }

/* ════════════════════════════════════════════════════════════════
   ИНПУТЫ
════════════════════════════════════════════════════════════════ */
.nf-input, .nf-select {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--nf-font);
    color: var(--nf-text);
    background: var(--nf-card);
    border: 1px solid var(--nf-border);
    border-radius: var(--nf-radius-sm);
    transition: border-color .18s, box-shadow .18s;
    outline: none;
}
.nf-input:focus, .nf-select:focus {
    border-color: var(--nf-blue);
    box-shadow: 0 0 0 3px rgba(67,95,229,.12);
}
.nf-input::placeholder { color: #b0b8cc; font-weight: 400; }
.nf-select { cursor: pointer; }

/* ════════════════════════════════════════════════════════════════
   ТАБЛИЦЫ
════════════════════════════════════════════════════════════════ */
.nf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: var(--nf-font);
}
.nf-table thead th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--nf-muted);
    background: var(--nf-gray);
    border-bottom: 1px solid var(--nf-border);
    white-space: nowrap;
}
.nf-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--nf-border);
    vertical-align: middle;
    font-weight: 600;
}
.nf-table tbody tr:last-child td { border-bottom: 0; }
.nf-table tbody tr:hover td { background: var(--nf-blue-light); transition: background .15s; }

/* ════════════════════════════════════════════════════════════════
   МОДАЛКИ ОПЛАТЫ
════════════════════════════════════════════════════════════════ */
.nf-total-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--nf-blue);
    color: #fff;
    border-radius: var(--nf-radius-sm);
    padding: 12px 18px;
}
.nf-total-label { font-size: 14px; font-weight: 700; opacity: .85; }
.nf-total-value { font-size: 22px; font-weight: 800; }

.nf-pay-methods {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.nf-pay-method-btn {
    flex: 1;
    min-width: 100px;
    cursor: pointer;
}
.nf-pay-method-btn input[type="radio"] { display: none; }
.nf-pay-method-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: 2px solid var(--nf-border);
    border-radius: var(--nf-radius-sm);
    font-weight: 700;
    font-size: 13px;
    background: var(--nf-card);
    transition: all .18s;
    white-space: nowrap;
}
.nf-pay-method-btn input:checked + span {
    border-color: var(--nf-blue);
    background: var(--nf-blue-light);
    color: var(--nf-blue);
}
.nf-pay-method-btn:hover span { border-color: var(--nf-blue); }

.nf-badge-info {
    background: var(--nf-gray);
    border-radius: var(--nf-radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nf-blue);
}

.nf-check-row { display: flex; align-items: center; }
.nf-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.nf-check { width: 16px; height: 16px; accent-color: var(--nf-blue); cursor: pointer; }

/* ════════════════════════════════════════════════════════════════
   СТАТУС-СТРОКИ (абонементы, услуги, товары)
════════════════════════════════════════════════════════════════ */
.nf-item-card {
    background: var(--nf-card);
    border-radius: var(--nf-radius);
    box-shadow: var(--nf-shadow);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .18s;
}
.nf-item-card:hover { box-shadow: var(--nf-shadow-md); }
.nf-item-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}
.nf-item-card-title {
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}
.nf-item-card-body {
    padding: 0 16px 14px;
    border-top: 1px solid var(--nf-border);
}
.nf-item-card.collapsed .nf-item-card-body { display: none; }

.nf-progress {
    height: 6px;
    background: var(--nf-gray);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}
.nf-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--nf-blue);
    transition: width .4s ease;
}
.nf-progress-bar.danger  { background: var(--nf-red); }
.nf-progress-bar.success { background: var(--nf-green); }

/* ════════════════════════════════════════════════════════════════
   СТРАНИЦЫ
════════════════════════════════════════════════════════════════ */
.nf-page {
    background: var(--nf-bg);
    min-height: 100vh;
    padding: 24px 20px 40px;
    font-family: var(--nf-font);
}

/* Хлебные крошки / back */
.nf-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nf-muted);
    text-decoration: none;
    margin-bottom: 16px;
}
.nf-back-link:hover { color: var(--nf-blue); }

/* ════════════════════════════════════════════════════════════════
   АЛЕРТЫ
════════════════════════════════════════════════════════════════ */
.nf-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--nf-radius-sm);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}
.nf-alert-success { background: var(--nf-green-light);  color: #2d7a5e; }
.nf-alert-danger  { background: var(--nf-red-light);    color: #9a2a25; }
.nf-alert-warning { background: var(--nf-orange-light); color: #9a5c1a; }
.nf-alert-info    { background: var(--nf-blue-light);   color: var(--nf-blue-dark); }

/* ════════════════════════════════════════════════════════════════
   РЕСЕПШН — кнопка "Выпустить всех"
════════════════════════════════════════════════════════════════ */
.nf-release-all-btn {
    background: linear-gradient(135deg, var(--nf-red) 0%, #e06060 100%);
    color: #fff;
    border: none;
    border-radius: var(--nf-radius-sm);
    padding: 8px 16px;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: opacity .18s, transform .12s;
    box-shadow: 0 2px 8px rgba(202,93,86,.3);
}
.nf-release-all-btn:hover  { opacity: .88; }
.nf-release-all-btn:active { transform: scale(.96); }

/* ════════════════════════════════════════════════════════════════
   ФОТО КЛИЕНТА — камера
════════════════════════════════════════════════════════════════ */
.nf-webcam-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nf-blue);
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: background .18s;
}
.nf-webcam-btn:hover { background: var(--nf-blue-dark); }

.nf-contract-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--nf-radius-sm);
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
}
.nf-contract-badge.filled  { background: var(--nf-green-light);  color: var(--nf-green); }
.nf-contract-badge.missing { background: var(--nf-red-light);    color: var(--nf-red); }

/* ════════════════════════════════════════════════════════════════
   ВОЗВРАТ — плашка на карточке
════════════════════════════════════════════════════════════════ */
.nf-refund-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--nf-red-light);
    color: var(--nf-red);
}
.nf-refund-badge i { font-size: 11px; }

/* ════════════════════════════════════════════════════════════════
   ПОСЕЩЕНИЯ УСЛУГ
════════════════════════════════════════════════════════════════ */
.nf-visit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--nf-border);
    font-size: 12px;
    font-weight: 600;
}
.nf-visit-item:last-child { border-bottom: 0; }
.nf-visit-time { color: var(--nf-blue); font-weight: 700; }
.nf-visit-trainer { color: var(--nf-muted); }

/* ════════════════════════════════════════════════════════════════
   УТИЛИТЫ
════════════════════════════════════════════════════════════════ */
.nf-divider {
    border: 0;
    border-top: 1px solid var(--nf-border);
    margin: 12px 0;
}
.nf-text-blue   { color: var(--nf-blue); }
.nf-text-green  { color: var(--nf-green); }
.nf-text-red    { color: var(--nf-red); }
.nf-text-orange { color: var(--nf-orange); }
.nf-text-muted  { color: var(--nf-muted); }
.nf-fw-800      { font-weight: 800; }

/* ════════════════════════════════════════════════════════════════
   АДАПТИВ
════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .nf-pay-methods { flex-direction: column; }
    .nf-pay-method-btn { min-width: unset; }
    .nf-total-value { font-size: 18px; }
}