/**
 * Guare Admin UI — единая дизайн-система для Orchid-админки.
 * Токены + базовые компоненты: поля, подписи, кнопки.
 * Подключать до orchid-dashboard.css (переменные доступны и там).
 */

:root {
    /*
     * Figma: Analytics Dashboard (Community)
     * https://www.figma.com/design/vpRNF57cpw7l9fhAU4hOhX
     */
    --guare-ui-color-text: #151e23;
    --guare-ui-color-text-secondary: rgba(0, 0, 0, 0.7);
    --guare-ui-color-text-muted: #848a95;
    --guare-ui-color-placeholder: #b0b4bc;
    --guare-ui-color-border: #eff0f6;
    --guare-ui-color-border-strong: #e4e5e7;
    --guare-ui-color-surface: #fff;
    --guare-ui-color-surface-muted: #f9f9f9;
    --guare-ui-color-page: #f9f9f9;
    --guare-ui-color-surface-subtle: #f2f7ff;
    --guare-ui-color-primary: #1b59f8;
    --guare-ui-color-primary-focus: rgba(27, 89, 248, 0.45);
    --guare-ui-focus-ring: 0 0 0 2px rgba(27, 89, 248, 0.12);
    --guare-ui-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.05);

    /* Control metrics */
    --guare-ui-radius-control: 10px;
    --guare-ui-radius-card: 20px;
    --guare-ui-control-min-height: 2.2rem;
    --guare-ui-control-padding-y: 0.48rem;
    --guare-ui-control-padding-x: 0.75rem;
    --guare-ui-font-size-control: 0.8125rem;
    --guare-ui-line-height-control: 1.35;
    --guare-ui-font-size-label: 0.8125rem;
    --guare-ui-font-weight-label: 500;
    --guare-ui-font-size-section: 0.875rem;
    --guare-ui-font-weight-section: 600;
    --guare-ui-color-section: rgba(0, 0, 0, 0.5);

    /* Buttons */
    --guare-ui-btn-padding-y: 0.48rem;
    --guare-ui-btn-padding-x: 0.95rem;
    --guare-ui-btn-font-size: 0.8125rem;
    --guare-ui-btn-font-weight: 500;
    --guare-ui-btn-min-height: 2.2rem;
    --guare-ui-btn-radius: 10px;
}

/* -------------------------------------------------------------------------- */
/* Labels                                                                     */
/* -------------------------------------------------------------------------- */

.guare-ui-label,
.guare-hub-filter-field > .form-label,
.guare-ui-form .form-label {
    font-size: var(--guare-ui-font-size-label);
    font-weight: var(--guare-ui-font-weight-label);
    letter-spacing: 0.01em;
    color: var(--guare-ui-color-text-muted);
    margin-bottom: 0.26rem;
}

.guare-ui-section-title,
.guare-edit-block-title {
    font-size: var(--guare-ui-font-size-section);
    font-weight: var(--guare-ui-font-weight-section);
    color: var(--guare-ui-color-section);
    margin: 0 0 0.75rem;
}

/* -------------------------------------------------------------------------- */
/* Text inputs & selects                                                      */
/* -------------------------------------------------------------------------- */

.guare-ui-control,
.guare-hub-filter-control {
    border-radius: var(--guare-ui-radius-control) !important;
    border: 1px solid var(--guare-ui-color-border) !important;
    background: var(--guare-ui-color-surface) !important;
    box-shadow: none !important;
    padding: var(--guare-ui-control-padding-y) var(--guare-ui-control-padding-x) !important;
    font-size: var(--guare-ui-font-size-control) !important;
    line-height: var(--guare-ui-line-height-control) !important;
    min-height: var(--guare-ui-control-min-height) !important;
    color: var(--guare-ui-color-text) !important;
}

.guare-ui-control::placeholder {
    color: var(--guare-ui-color-placeholder);
}

select.guare-ui-control,
select.guare-hub-filter-control {
    background-position: right 0.65rem center;
    background-size: 0.8rem 0.8rem;
    padding-right: 2rem !important;
}

.guare-ui-control:focus,
.guare-hub-filter-control:focus {
    border-color: var(--guare-ui-color-primary-focus) !important;
    box-shadow: var(--guare-ui-focus-ring) !important;
}

/* Bootstrap sm/neutralize smaller variant inside unified forms */
.guare-ui-form .form-control-sm,
.guare-ui-form .form-select-sm {
    min-height: var(--guare-ui-control-min-height);
    padding: var(--guare-ui-control-padding-y) var(--guare-ui-control-padding-x);
    font-size: var(--guare-ui-font-size-control);
    border-radius: var(--guare-ui-radius-control);
}

/* Input groups (иконки слева) */
.guare-ui-input-group .guare-ui-input-addon,
.guare-ui-input-group .guare-edit-input-icon,
.guare-ui-input-group .input-group-text {
    background: var(--guare-ui-color-surface-subtle) !important;
    border-color: var(--guare-ui-color-border-strong) !important;
    color: var(--guare-ui-color-text-muted);
    font-size: var(--guare-ui-font-size-control);
}

.guare-ui-input-group .guare-ui-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.guare-ui-input-group .guare-ui-input-addon:first-child {
    border-top-left-radius: var(--guare-ui-radius-control);
    border-bottom-left-radius: var(--guare-ui-radius-control);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.guare-ui-btn {
    --bs-btn-padding-y: var(--guare-ui-btn-padding-y);
    --bs-btn-padding-x: var(--guare-ui-btn-padding-x);
    --bs-btn-font-size: var(--guare-ui-btn-font-size);
    --bs-btn-font-weight: var(--guare-ui-btn-font-weight);
    --bs-btn-line-height: var(--guare-ui-line-height-control);
    --bs-btn-border-radius: var(--guare-ui-btn-radius);
    border-radius: var(--guare-ui-btn-radius) !important;
    min-height: var(--guare-ui-btn-min-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guare-ui-btn--secondary.btn-light {
    background: var(--guare-ui-color-surface) !important;
    border-color: var(--guare-ui-color-border) !important;
    color: var(--guare-ui-color-text-muted) !important;
}

/* -------------------------------------------------------------------------- */
/* Cards / surfaces                                                           */
/* -------------------------------------------------------------------------- */

.guare-ui-card,
.guare-edit-party-card,
.guare-edit-subcard {
    background: var(--guare-ui-color-surface);
    border: 1px solid var(--guare-ui-color-border);
    border-radius: var(--guare-ui-radius-card);
    padding: 1rem 1rem 1.1rem;
    box-shadow: var(--guare-ui-shadow-card);
}

/* Orchid / Bootstrap controls inside admin shell */
body:not(.guare-auth-page) .form-control,
body:not(.guare-auth-page) .form-select {
    border-color: var(--guare-ui-color-border);
    border-radius: var(--guare-ui-radius-control);
    font-size: var(--guare-ui-font-size-control);
    color: var(--guare-ui-color-text);
}

body:not(.guare-auth-page) .form-control:focus,
body:not(.guare-auth-page) .form-select:focus {
    border-color: var(--guare-ui-color-primary-focus);
    box-shadow: var(--guare-ui-focus-ring);
}

/* Modal shell */
.modal-content.guare-order-edit-modal,
.modal-content.guare-order-edit-modal .modal-body {
    background: var(--guare-ui-color-surface-muted);
}

.guare-order-edit-footer.guare-order-edit-footer {
    background: var(--guare-ui-color-surface-muted);
}