/**
 * SYSTEM Panel foundation (Phase 1: A-001 + A-003)
 * - Design tokens for SYSTEM pages
 * - Shared modal header/body/footer patterns
 */

:root {
    --sys-font-ui: var(--font-ui, "Segoe UI", Tahoma, Arial, sans-serif);
    --sys-space-1: 4px;
    --sys-space-2: 8px;
    --sys-space-3: 12px;
    --sys-space-4: 16px;
    --sys-space-5: 20px;
    --sys-space-6: 24px;

    --sys-radius-sm: 6px;
    --sys-radius-md: 10px;
    --sys-radius-lg: 14px;

    --sys-color-bg: #ffffff;
    --sys-color-text: #1f2937;
    --sys-color-muted: #6b7280;
    --sys-color-border: #d1d5db;
    --sys-color-primary: #0d6efd;
    --sys-color-primary-text: #ffffff;
    --sys-color-secondary: #6c757d;
    --sys-color-warning: #b45309;
    --sys-color-success: #166534;
    --sys-color-overlay: rgba(0, 0, 0, 0.5);

    --sys-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.08);
    --sys-focus-ring: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

:is(body.sys-crm-page).sys-density-compact {
    --sys-space-2: 6px;
    --sys-space-3: 10px;
    --sys-space-4: 12px;
    --sys-space-5: 16px;
    --sys-space-6: 18px;
}

:is(body.sys-crm-page) .modal.sys-modal {
    background: var(--sys-color-overlay);
}

:is(body.sys-crm-page) .modal-box.sys-modal-box {
    font-family: var(--sys-font-ui);
    background: var(--sys-color-bg);
    color: var(--sys-color-text);
    border-radius: var(--sys-radius-md);
    box-shadow: var(--sys-shadow-sm);
    padding: var(--sys-space-6);
}

:is(body.sys-crm-page) .sys-modal-title {
    margin: 0 0 var(--sys-space-4);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sys-color-text);
}

:is(body.sys-crm-page) .sys-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sys-space-3);
    margin-bottom: var(--sys-space-4);
}

:is(body.sys-crm-page) .sys-modal-header .sys-modal-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

:is(body.sys-crm-page) .sys-modal-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--sys-color-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: 0.75;
}

:is(body.sys-crm-page) .sys-modal-close:hover {
    opacity: 1;
}

:is(body.sys-crm-page) .sys-modal-close:focus-visible {
    outline: none;
    box-shadow: var(--sys-focus-ring);
    border-radius: var(--sys-radius-sm);
}

/* E-002: баннер ошибки / подсказка над полями формы в модалке (+ портал услуг .crm-service-page) */
:is(body.sys-crm-page) .sys-form-banner,
:is(body.crm-service-page) .sys-form-banner {
    display: none;
    margin: 0 0 var(--sys-space-4);
    padding: var(--sys-space-3) var(--sys-space-4);
    border-radius: var(--sys-radius-sm);
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--sys-color-border);
    background: #f8fafc;
    color: var(--sys-color-text);
}

:is(body.sys-crm-page) .sys-form-banner.is-visible,
:is(body.crm-service-page) .sys-form-banner.is-visible {
    display: block;
}

:is(body.sys-crm-page) .sys-form-banner--error,
:is(body.crm-service-page) .sys-form-banner--error {
    border-color: #f87171;
    background: #fef2f2;
    color: #991b1b;
}

:is(body.sys-crm-page) .sys-input-invalid,
:is(body.sys-crm-page) .sys-modal-box input.sys-input-invalid,
:is(body.sys-crm-page) .sys-modal-box select.sys-input-invalid,
:is(body.sys-crm-page) .sys-modal-box textarea.sys-input-invalid,
:is(body.crm-service-page) .sys-input-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2);
}

:is(body.sys-crm-page).sys-density-compact .sys-modal-title {
    font-size: 18px;
}

:is(body.sys-crm-page).sys-density-compact .sys-modal-box label {
    font-size: 11px;
    margin-top: 8px;
}

:is(body.sys-crm-page).sys-density-compact .sys-modal-box input,
:is(body.sys-crm-page).sys-density-compact .sys-modal-box select,
:is(body.sys-crm-page).sys-density-compact .sys-modal-box textarea {
    padding: 8px 10px;
    font-size: 13px;
}

:is(body.sys-crm-page) .sys-modal-hint {
    display: block;
    color: var(--sys-color-muted);
    margin-top: var(--sys-space-2);
}

:is(body.sys-crm-page) .sys-modal-hint--success {
    color: var(--sys-color-success);
}

:is(body.sys-crm-page) .sys-modal-hint--warn {
    color: var(--sys-color-warning);
}

:is(body.sys-crm-page) .sys-google-mount {
    display: none;
    margin-bottom: var(--sys-space-2);
}

:is(body.sys-crm-page) .sys-file-hidden {
    display: none;
}

:is(body.sys-crm-page) .sys-status-line {
    display: none;
    color: var(--sys-color-muted);
    margin-top: var(--sys-space-1);
}

:is(body.sys-crm-page) .sys-status-line--warn {
    color: var(--sys-color-warning);
}

:is(body.sys-crm-page) .sys-status-line--ok {
    color: var(--sys-color-success);
}

:is(body.sys-crm-page) .sys-required-mark {
    color: #c00;
}

:is(body.sys-crm-page) .sys-form-row {
    display: flex;
    gap: var(--sys-space-3);
    margin-top: var(--sys-space-3);
}

:is(body.sys-crm-page) .sys-form-col {
    flex: 1;
    min-width: 0;
}

:is(body.sys-crm-page) .sys-modal-actions {
    display: flex;
    gap: var(--sys-space-3);
    margin-top: var(--sys-space-5);
}

:is(body.sys-crm-page) .sys-modal-actions .btn-blue {
    flex: 1;
}

:is(body.sys-crm-page) .sys-btn-cancel {
    flex: 1;
    background: var(--sys-color-secondary);
    color: var(--sys-color-primary-text);
    border: none;
    border-radius: var(--sys-radius-sm);
    cursor: pointer;
    font-weight: 600;
}

:is(body.sys-crm-page) .sys-btn-cancel:focus-visible,
:is(body.sys-crm-page) .btn-blue:focus-visible {
    outline: none;
    box-shadow: var(--sys-focus-ring);
}