/*
 * Pickup-Point UI — компоненты: card, button, badge, input, table, alert.
 * Override Bootstrap 4 classes где нужно (forms, buttons), плюс наши .pp-*
 * для всего нового. Bootstrap grid (container/row/col) не трогаем.
 */

/* === Cards === */

.pp-card {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    box-shadow: var(--pp-shadow-sm);
    transition: box-shadow var(--pp-transition), transform var(--pp-transition);
}
.pp-card:not(.pp-card--static):hover {
    box-shadow: var(--pp-shadow);
}
.pp-card__header {
    padding: var(--pp-sp-5) var(--pp-sp-6) var(--pp-sp-3);
    border-bottom: 1px solid var(--pp-bg-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pp-sp-3);
}
.pp-card__title {
    font-size: var(--pp-fs-lg);
    font-weight: 600;
    margin: 0;
    color: var(--pp-fg);
}
.pp-card__subtitle {
    font-size: var(--pp-fs-sm);
    color: var(--pp-fg-muted);
    margin: 0;
}
.pp-card__body {
    padding: var(--pp-sp-5) var(--pp-sp-6);
}
.pp-card__footer {
    padding: var(--pp-sp-3) var(--pp-sp-6);
    border-top: 1px solid var(--pp-bg-divider);
    display: flex;
    justify-content: flex-end;
    gap: var(--pp-sp-2);
}

/* Метрика — крупная цифра в карточке */
.pp-metric {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    padding: var(--pp-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--pp-sp-2);
    transition: box-shadow var(--pp-transition), transform var(--pp-transition);
}
.pp-metric:hover {
    box-shadow: var(--pp-shadow);
    transform: translateY(-1px);
}
.pp-metric__label {
    font-size: var(--pp-fs-sm);
    color: var(--pp-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.pp-metric__value {
    font-size: var(--pp-fs-3xl);
    font-weight: 700;
    color: var(--pp-fg);
    line-height: 1;
}
.pp-metric__hint {
    font-size: var(--pp-fs-sm);
    color: var(--pp-fg-subtle);
}
.pp-metric--brand .pp-metric__value { color: var(--pp-brand); }
.pp-metric--success .pp-metric__value { color: var(--pp-success-fg); }
.pp-metric--warning .pp-metric__value { color: var(--pp-warning-fg); }
.pp-metric--danger .pp-metric__value { color: var(--pp-danger-fg); }

/* === Buttons === */

.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pp-sp-2);
    padding: 10px 18px;
    font-family: var(--pp-font-sans);
    font-size: var(--pp-fs-base);
    font-weight: 500;
    line-height: 1.25;
    border: 1px solid transparent;
    border-radius: var(--pp-radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--pp-transition), color var(--pp-transition),
                border-color var(--pp-transition), box-shadow var(--pp-transition);
    white-space: nowrap;
}
.pp-btn:focus-visible {
    outline: 2px solid var(--pp-brand);
    outline-offset: 2px;
}
.pp-btn:disabled,
.pp-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Primary — gradient как в maxweb */
.pp-btn--primary {
    background: linear-gradient(88deg, var(--pp-brand) 1%, var(--pp-brand-light) 98%);
    color: var(--pp-fg-inverse);
}
.pp-btn--primary:hover:not(:disabled) {
    color: var(--pp-fg-inverse);
    box-shadow: 0 4px 14px rgba(17, 43, 102, 0.28);
    opacity: 0.95;
}

/* Secondary — нейтральный outlined */
.pp-btn--secondary {
    background: var(--pp-bg-card);
    color: var(--pp-fg);
    border-color: var(--pp-border-strong);
}
.pp-btn--secondary:hover:not(:disabled) {
    background: var(--pp-bg-subtle);
    border-color: var(--pp-fg-subtle);
    color: var(--pp-fg);
}

/* Ghost — без фона, текстовый */
.pp-btn--ghost {
    background: transparent;
    color: var(--pp-fg-muted);
}
.pp-btn--ghost:hover:not(:disabled) {
    background: var(--pp-bg-subtle);
    color: var(--pp-brand);
}

/* Danger */
.pp-btn--danger {
    background: var(--pp-danger);
    color: var(--pp-fg-inverse);
}
.pp-btn--danger:hover:not(:disabled) {
    background: var(--pp-danger-fg);
    color: var(--pp-fg-inverse);
}

/* Success */
.pp-btn--success {
    background: var(--pp-success);
    color: var(--pp-fg-inverse);
}
.pp-btn--success:hover:not(:disabled) {
    background: var(--pp-success-fg);
    color: var(--pp-fg-inverse);
}

/* Sizes */
.pp-btn--sm {
    padding: 6px 12px;
    font-size: var(--pp-fs-sm);
    border-radius: var(--pp-radius-sm);
}
.pp-btn--lg {
    padding: 14px 24px;
    font-size: var(--pp-fs-md);
}
.pp-btn--block {
    width: 100%;
}

/* === Badges (статусы) === */

.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--pp-sp-1);
    padding: 4px 10px;
    font-size: var(--pp-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--pp-radius-pill);
    white-space: nowrap;
    background: var(--pp-st-neutral-bg);
    color: var(--pp-st-neutral-fg);
}
.pp-badge--success { background: var(--pp-st-active-bg); color: var(--pp-st-active-fg); }
.pp-badge--info { background: var(--pp-st-info-bg); color: var(--pp-st-info-fg); }
.pp-badge--warning { background: var(--pp-st-warn-bg); color: var(--pp-st-warn-fg); }
.pp-badge--danger { background: var(--pp-st-danger-bg); color: var(--pp-st-danger-fg); }
.pp-badge--pending { background: var(--pp-st-pending-bg); color: var(--pp-st-pending-fg); }
.pp-badge--neutral { background: var(--pp-st-neutral-bg); color: var(--pp-st-neutral-fg); }

/* === Form inputs (override Bootstrap) ===
 * Floating labels — оставляем существующий механизм проекта (jQuery handler в main.js
 * добавляет .active при фокусе/непустом значении). Стили input/label обновляем.
 */

.pp-app .form-group {
    margin-bottom: var(--pp-sp-4);
    position: relative;
}

.pp-app .form-control {
    height: auto;
    min-height: 48px;
    padding: 14px 14px 6px;
    font-family: var(--pp-font-sans);
    font-size: var(--pp-fs-base);
    line-height: 1.4;
    color: var(--pp-fg);
    background: var(--pp-bg-input);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
}
.pp-app .form-control:focus {
    outline: none;
    border-color: var(--pp-brand);
    box-shadow: 0 0 0 3px rgba(17, 43, 102, 0.12);
}
.pp-app .form-control:disabled,
.pp-app .form-control[readonly] {
    background: var(--pp-bg-input-disabled);
    color: var(--pp-fg-disabled);
}

/* Floating label (используем существующий паттерн form_settings) */
.pp-app .form-group label {
    position: absolute;
    top: 14px;
    left: 14px;
    color: var(--pp-fg-subtle);
    font-size: var(--pp-fs-base);
    pointer-events: none;
    transition: top var(--pp-transition), font-size var(--pp-transition), color var(--pp-transition);
    background: transparent;
    padding: 0;
    margin: 0;
    font-weight: 400;
}
.pp-app .form-group label.active,
.pp-app .form-group .form-control:focus + label {
    top: 4px;
    font-size: var(--pp-fs-xs);
    color: var(--pp-fg-muted);
    font-weight: 500;
}
.pp-app .form-group label.control-label.active {
    top: 4px;
    font-size: var(--pp-fs-xs);
    color: var(--pp-fg-muted);
}

/* Select rendering — Bootstrap select имеет свою высоту */
.pp-app select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23707070'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    padding-right: 40px;
}

/* Select без обёртки form-group (просто pp-app select) — обычная высота, без
 * лишнего padding-top для floating label которого нет */
.pp-app select.form-control:not(.form-group select) {
    padding-top: 0;
    padding-bottom: 0;
    height: 48px;
}
/* Self-standing select (как на orders selector локации) */
.pp-app .pp-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--pp-bg-card) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23707070'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding: 0 40px 0 14px;
    height: 44px;
    font-size: var(--pp-fs-base);
    color: var(--pp-fg);
    cursor: pointer;
}
.pp-app .pp-select:focus {
    outline: none;
    border-color: var(--pp-brand);
    box-shadow: 0 0 0 3px rgba(17, 43, 102, 0.12);
}

/* === Pagination (Yii LinkPager + Bootstrap pagination override) === */
.pp-app .pagination {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}
.pp-app .pagination > li {
    display: inline-block;
}
.pp-app .pagination > li > a,
.pp-app .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-bg-card);
    color: var(--pp-fg);
    font-size: var(--pp-fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--pp-transition), border-color var(--pp-transition), color var(--pp-transition);
}
.pp-app .pagination > li > a:hover,
.pp-app .pagination > li > span:hover {
    background: var(--pp-bg-subtle);
    border-color: var(--pp-fg-subtle);
    color: var(--pp-brand);
    text-decoration: none;
}
.pp-app .pagination > li.active > a,
.pp-app .pagination > li.active > span {
    background: var(--pp-brand);
    border-color: var(--pp-brand);
    color: var(--pp-fg-inverse);
    cursor: default;
}
.pp-app .pagination > li.active > a:hover,
.pp-app .pagination > li.active > span:hover {
    background: var(--pp-brand);
    color: var(--pp-fg-inverse);
}
.pp-app .pagination > li.disabled > a,
.pp-app .pagination > li.disabled > span {
    color: var(--pp-fg-disabled);
    background: var(--pp-bg-muted);
    cursor: not-allowed;
    pointer-events: none;
}

/* Textarea */
.pp-app textarea.form-control {
    min-height: 96px;
    padding-top: 22px;
}

/* File input — нет смысла во floating-label (значение "Файл не выбран" не
 * управляется placeholder'ом). Label статично сверху, input собственный стиль. */
.pp-app .form-group:has(input[type="file"]) > label,
.pp-app .form-group.pp-field--file > label {
    position: static;
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-size: var(--pp-fs-sm);
    color: var(--pp-fg-muted);
    font-weight: 500;
    pointer-events: auto;
    background: transparent;
    transition: none;
}
.pp-app input[type="file"].form-control,
.pp-app input[type="file"] {
    padding: 10px 12px;
    height: auto;
    line-height: 1.4;
    cursor: pointer;
    background: var(--pp-bg-input);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    font-size: var(--pp-fs-sm);
}
.pp-app input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-border);
    background: var(--pp-bg-card);
    color: var(--pp-fg);
    cursor: pointer;
    font-size: var(--pp-fs-sm);
    transition: background var(--pp-transition);
}
.pp-app input[type="file"]::file-selector-button:hover {
    background: var(--pp-bg-subtle);
    border-color: var(--pp-fg-subtle);
}

/* Help text & errors */
.pp-app .help-block {
    margin-top: var(--pp-sp-1);
    font-size: var(--pp-fs-sm);
    color: var(--pp-fg-subtle);
}
.pp-app .has-error .form-control,
.pp-app .form-control.is-invalid {
    border-color: var(--pp-danger);
}
.pp-app .has-error .help-block,
.pp-app .invalid-feedback,
.pp-app .help-block.help-block-error,
.pp-app .pp-addr-error {
    color: var(--pp-danger-fg);
    font-size: var(--pp-fs-sm);
    margin-top: 4px;
}
.pp-app .form-control.is-invalid {
    border-color: var(--pp-danger);
}

/* Submit-кнопки в формах используют наш .pp-btn, но для совместимости с
 * legacy-формами переопределяем .default (использовался в afterreg.php) */
.pp-app .default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pp-sp-2);
    padding: 10px 18px;
    font-family: var(--pp-font-sans);
    font-size: var(--pp-fs-base);
    font-weight: 500;
    line-height: 1.25;
    border: 1px solid transparent;
    border-radius: var(--pp-radius-md);
    cursor: pointer;
    text-decoration: none;
    background: linear-gradient(88deg, var(--pp-brand) 1%, var(--pp-brand-light) 98%);
    color: var(--pp-fg-inverse);
    transition: background var(--pp-transition), box-shadow var(--pp-transition);
}
.pp-app .default:hover {
    color: var(--pp-fg-inverse);
    box-shadow: 0 4px 14px rgba(17, 43, 102, 0.28);
    opacity: 0.95;
}
.pp-app .default.solid.gray {
    background: var(--pp-bg-card);
    color: var(--pp-fg);
    border-color: var(--pp-border-strong);
}
.pp-app .default.solid.gray:hover {
    background: var(--pp-bg-subtle);
    color: var(--pp-fg);
}

/* === Alerts (flash messages) === */

.pp-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--pp-sp-3);
    padding: var(--pp-sp-3) var(--pp-sp-4);
    border-radius: var(--pp-radius);
    margin-bottom: var(--pp-sp-4);
    border: 1px solid transparent;
}
.pp-alert i {
    flex-shrink: 0;
    margin-top: 3px;
}
.pp-alert__title {
    font-weight: 600;
    margin-right: var(--pp-sp-2);
}
.pp-alert--success {
    background: var(--pp-st-active-bg);
    color: var(--pp-st-active-fg);
    border-color: rgba(21, 128, 61, 0.2);
}
.pp-alert--info {
    background: var(--pp-st-info-bg);
    color: var(--pp-st-info-fg);
    border-color: rgba(14, 165, 233, 0.25);
}
.pp-alert--warning {
    background: var(--pp-st-warn-bg);
    color: var(--pp-st-warn-fg);
    border-color: rgba(180, 83, 9, 0.2);
}
.pp-alert--danger {
    background: var(--pp-st-danger-bg);
    color: var(--pp-st-danger-fg);
    border-color: rgba(185, 28, 28, 0.2);
}

/* === Tables === */

.pp-table-wrap {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    overflow: hidden;
}
.pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pp-fs-base);
}
.pp-table thead th {
    text-align: left;
    padding: var(--pp-sp-3) var(--pp-sp-4);
    background: var(--pp-bg-muted);
    color: var(--pp-fg-muted);
    font-size: var(--pp-fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--pp-border);
}
.pp-table tbody td {
    padding: var(--pp-sp-3) var(--pp-sp-4);
    border-bottom: 1px solid var(--pp-bg-divider);
    color: var(--pp-fg);
}
.pp-table tbody tr:last-child td { border-bottom: none; }
.pp-table tbody tr:hover { background: var(--pp-bg-muted); }

/* === Empty state === */

.pp-empty {
    text-align: center;
    padding: var(--pp-sp-12) var(--pp-sp-6);
    color: var(--pp-fg-subtle);
}
.pp-empty__icon {
    font-size: 48px;
    color: var(--pp-fg-disabled);
    margin-bottom: var(--pp-sp-4);
}
.pp-empty__title {
    font-size: var(--pp-fs-lg);
    font-weight: 600;
    color: var(--pp-fg);
    margin: 0 0 var(--pp-sp-2);
}
.pp-empty__desc {
    font-size: var(--pp-fs-base);
    color: var(--pp-fg-muted);
    margin: 0 auto var(--pp-sp-5);
    max-width: 380px;
}

/* === Page heading === */

.pp-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pp-sp-4);
    margin-bottom: var(--pp-sp-6);
    flex-wrap: wrap;
}
.pp-page-head__title {
    font-size: var(--pp-fs-2xl);
    font-weight: 600;
    margin: 0;
    color: var(--pp-fg);
}
.pp-page-head__subtitle {
    font-size: var(--pp-fs-base);
    color: var(--pp-fg-muted);
    margin: var(--pp-sp-1) 0 0;
}
.pp-page-head__actions {
    display: flex;
    gap: var(--pp-sp-2);
}

/* === Section heading (внутри карточек) === */

.pp-section-head {
    margin-bottom: var(--pp-sp-4);
}
.pp-section-head__title {
    font-size: var(--pp-fs-xl);
    font-weight: 600;
    margin: 0 0 var(--pp-sp-1);
    color: var(--pp-fg);
}
.pp-section-head__subtitle {
    font-size: var(--pp-fs-sm);
    color: var(--pp-fg-muted);
    margin: 0;
}

/* === Stepper (для onboarding wizard) === */

.pp-stepper {
    display: flex;
    align-items: center;
    gap: var(--pp-sp-2);
    margin-bottom: var(--pp-sp-8);
}
.pp-stepper__step {
    display: flex;
    align-items: center;
    gap: var(--pp-sp-2);
    color: var(--pp-fg-subtle);
    font-size: var(--pp-fs-sm);
    font-weight: 500;
    flex: 0 0 auto;
}
.pp-stepper__dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pp-bg-subtle);
    color: var(--pp-fg-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: all var(--pp-transition);
}
.pp-stepper__step.is-current .pp-stepper__dot {
    background: var(--pp-brand);
    color: var(--pp-fg-inverse);
    box-shadow: 0 0 0 4px rgba(17, 43, 102, 0.12);
}
.pp-stepper__step.is-current { color: var(--pp-fg); }
.pp-stepper__step.is-done .pp-stepper__dot {
    background: var(--pp-success);
    color: var(--pp-fg-inverse);
}
.pp-stepper__step.is-done { color: var(--pp-fg-muted); }
.pp-stepper__line {
    flex: 1;
    height: 2px;
    background: var(--pp-bg-subtle);
    border-radius: 1px;
    min-width: 24px;
}
.pp-stepper__line.is-done {
    background: var(--pp-success);
}
@media (max-width: 575.98px) {
    .pp-stepper__step span { display: none; }
}

/* === Search/filter bar === */

.pp-toolbar {
    display: flex;
    align-items: center;
    gap: var(--pp-sp-2);
    margin-bottom: var(--pp-sp-5);
    flex-wrap: wrap;
}
.pp-tabs {
    display: inline-flex;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-md);
    padding: 4px;
    gap: 2px;
}
.pp-tabs__item {
    padding: 6px 14px;
    font-size: var(--pp-fs-sm);
    font-weight: 500;
    color: var(--pp-fg-muted);
    background: transparent;
    border: none;
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--pp-transition), color var(--pp-transition);
    white-space: nowrap;
}
.pp-tabs__item:hover {
    background: var(--pp-bg-subtle);
    color: var(--pp-fg);
}
.pp-tabs__item.is-active {
    background: var(--pp-brand);
    color: var(--pp-fg-inverse);
}