// Тема DOCPAT (новый дизайн)
:root {
    --DARK-GREY: #191F29;
    --GRAY-SOFT: #ABB1C2;
    --MIDLE-GRAY: #232a36;
    --GRAY: #69758D;
    --LIGHT-GRAY: #E2E8EA;

    // основные цвета
    --WHITE: #FFFFFF;
    --BLACK: #191F29;
    --PRIMARY: #3469F4;
    --SUCCESS: #019F3C;
    --INFO: #1998FF;
    --WARNING: #F29100;
    --DANGER: #F51743;
    --DEFAULT: #acbee7;

    // дополнительные цвета
    --ADD-COLOR-1: #00B288;
    --ADD-COLOR-2: #1192BB;
    --ADD-COLOR-3: #6952F5;
    --ADD-COLOR-4: #9924FF;
    --ADD-COLOR-5: #E33A82;
    --ADD-COLOR-6: #FA5300;

    // шрифты
    --font: 'Manrope-Regular';
    --font-light: 'Manrope-Light';
    --font-medium: 'Manrope-Medium';
    --font-bold: 'Manrope-Bold';

    // размеры
    --index: calc(1vw + 1vh);

    // модальные окна
    --MODAL-RADIUS: 24px;
    --MODAL-PADDING: 24px;
    --MODAL-BORDER: 1px solid #E2E8EA;
    --MODAL-SHADOW: 0 12px 48px rgba(68, 83, 113, 0.14);
    --MODAL-FOOTER-GAP: 10px;
    --BTN-RADIUS: 12px;
    --BTN-LIGHT-BORDER-WIDTH: 2px;
    --BTN-LIGHT-HOVER-BG: rgba(68, 83, 113, 0.06);
    // поля ввода
    --INPUT-RADIUS: 12px;
    --INPUT-BORDER: #dadde4;
    --INPUT-BORDER-HOVER: #9ca3af;
    --INPUT-PLACEHOLDER: #B4BAC6;
    --INPUT-VALUE-FILLED: #191F29;
    --INPUT-HEIGHT: 44px;
    --INPUT-HEIGHT-XS: 22px;
    --INPUT-HEIGHT-S: 30px;
    --INPUT-HEIGHT-L: 58px;
    --INPUT-HEIGHT-XL: 88px;
    --INPUT-FONT-XS: 12px;
    --INPUT-FONT-S: 13px;
    --INPUT-FONT-L: 16px;
    --INPUT-FONT-XL: 18px;
    --INPUT-LABEL-XS: 11px;
    --INPUT-LABEL-S: 12px;
    --INPUT-LABEL-L: 13px;
    --INPUT-LABEL-XL: 14px;
    --INPUT-INFIX-PAD-XS: 14px;
    --INPUT-INFIX-PAD-S: 16px;
    --INPUT-INFIX-PAD-L: 20px;
    --INPUT-INFIX-PAD-XL: 22px;
    --INPUT-PADDING-X: 14px;
    // правый отступ input, когда есть informer / suffix / ₽ / % и т.п.
    --INPUT-PADDING-R-ICON: 50px;

    // иконки внутри поля (informer, календарь, suffix в mat-form-field)
    --FIELD-INFO-RIGHT: 7px;
    --FIELD-INFO-TOP: 32px;
    --FIELD-INFO-TOP-DATETIME: 29px;
    --FIELD-INFO-TOP-TEXTAREA: 30px;
    --FIELD-SUFFIX-TOP: 41px;
    --FIELD-SUFFIX-TOP-TEXTAREA: 14px;
    --FIELD-SUFFIX-TOP-XS: 26px;
    --FIELD-SUFFIX-TOP-S: 31px;
    --FIELD-SUFFIX-TOP-L: 50px;
    --FIELD-SUFFIX-TOP-XL: 67px;
    --FIELD-COLOR-BTN-MARGIN-TOP: 5px;
    --FIELD-COLOR-BTN-MARGIN-LEFT: 10px;

    // checkbox / slide-toggle
    --CHECKBOX-SIZE: 18px;
    --CHECKBOX-RADIUS: 6px;
    --CONTROL-BORDER: var(--INPUT-BORDER);
    --CONTROL-BORDER-HOVER: var(--INPUT-BORDER-HOVER);
    --SLIDE-TRACK-OFF: var(--LIGHT-GRAY);
    --SLIDE-TRACK-ON: var(--PRIMARY);
    --SLIDE-HANDLE: var(--WHITE);

    // кнопка +/- в фильтре колонки грида
    --FILTER-BTN-HEIGHT: var(--INPUT-HEIGHT);
    --FILTER-BTN-MIN-HEIGHT: 40px;
    --FILTER-BTN-MIN-WIDTH: 45px;
    --FILTER-BTN-TOP: 18px;
    --FILTER-BTN-BORDER-WIDTH: 1px;
    --FILTER-BTN-BORDER-COLOR: var(--INPUT-BORDER);
    --FILTER-BTN-RADIUS: 0 var(--INPUT-RADIUS) var(--INPUT-RADIUS) 0;
    --FILTER-BTN-HOVER-BG: rgba(68, 83, 113, 0.06);
    --FILTER-BTN-HEIGHT-S: 28px;
    --FILTER-BTN-MIN-WIDTH-S: 30px;
    --FILTER-BTN-TOP-S: 17px;
    --FILTER-BTN-ICON-SIZE-S: 10px;
    --FILTER-COMBO-CLEAR-RIGHT: 52px;
    --FILTER-COMBO-CLEAR-TOP: 20px;

    // кнопки тулбара грида (иконки, sln-add/save/cancel) — отдельно от INPUT-*
    --GRID-BTN-SIZE: 44px;
    --GRID-BTN-SIZE-S: 33px;
    --GRID-BTN-SIZE-XS: 22px;
    --GRID-BTN-SIZE-L: 58px;
    --GRID-BTN-SIZE-XL: 88px;
    --GRID-BTN-PADDING: 8px;
    --GRID-BTN-PADDING-S: 5px;
    --GRID-BTN-PADDING-XS: 4px;
    --GRID-BTN-PADDING-L: 11px;
    --GRID-BTN-PADDING-XL: 16px;
    --GRID-BTN-RADIUS: 12px;
    --GRID-BTN-BG: transparent;
    --GRID-BTN-BORDER-WIDTH: 2px;
    --GRID-BTN-BORDER-COLOR: var(--INPUT-BORDER);
    --GRID-BTN-ICON-BORDER-WIDTH: 2px;
    --GRID-BTN-ICON-BORDER-COLOR: var(--INPUT-BORDER);
    --GRID-BTN-ADD-BORDER-COLOR: var(--PRIMARY);
    --GRID-BTN-ADD-MARGIN-TOP: 0;
    --GRID-BTN-ICON-GAP: 10px;

    // текстовые кнопки (.btn-primary, sln-btn-full-*)
    --BTN-FULL-HEIGHT: var(--INPUT-HEIGHT);
    --BTN-FULL-MIN-WIDTH: var(--INPUT-HEIGHT);
    --BTN-FULL-FONT-SIZE: 11px;
    --BTN-FULL-PADDING-X: 15px;

    // widgets
    --WIDGET-RADIUS: 12px;
    --WIDGET-FONT-SIZE: 14px;
    --WIDGET-TEXT-TRANSFORM: uppercase;

    // grid 
    --GRID-BORDER-RADIUS: 12px;
    --GRID-SURFACE-BG: var(--WHITE);
    --GRID-RADIUS: 12px;
    --GRID-TOOLBAR-PADDING-TOP: 10px;
    --GRID-TOOLBAR-PADDING-BOTTOM: 10px;
    --GRID-TABLE-WIDTH: 95%;
    --GRID-CELL-GAP: 10px;
    --GRID-TH-FONT-SIZE: 14px;
    --GRID-TH-FONT-FAMILY: var(--font-bold);
    --GRID-TH-TEXT-ALIGN: center;
    --GRID-TH-JUSTIFY-CONTENT: center;
    --GRID-TH-PADDING-LEFT: 0;
    --GRID-TH-PADDING-RIGHT: 0;
    --GRID-TD-FONT-SIZE: 13px;
    --GRID-TD-FONT-FAMILY: var(--font);
    --GRID-TEXT-COLOR: var(--DARK-GREY);
    --GRID-ROW-HIGHLIGHT: rgba(68, 83, 113, 0.06);
    --GRID-MENU-HOVER-BG: rgba(68, 83, 113, 0.06);
    --GRID-HEADER-ROW-HEIGHT: 30px;
    --GRID-IN-CARD-PANEL-PADDING: 0;
    // multi commands
    --GRID-MULTI-CMD-BG: #e8effe;
    --GRID-MULTI-CMD-BG-HOVER: #dce8fd;
    --GRID-MULTI-CMD-COLOR: var(--PRIMARY);
    --GRID-MULTI-CMD-RADIUS: 8px;
    --GRID-MULTI-CMD-PADDING-Y: 8px;
    --GRID-MULTI-CMD-PADDING-X: 14px;
    --GRID-MULTI-CMD-GAP: 8px;
    --GRID-MULTI-CMD-FONT-SIZE: 14px;
    --GRID-CELL-BORDER-BOTTOM-COLOR: #e8effe;

    // panels (mat-expansion-panel / sln-card-panel)
    // panel common
    --PANEL-RADIUS: 12px;
    --PANEL-BORDER-WIDTH: 1px;
    --PANEL-BORDER-COLOR: #E2E8EA;
    --PANEL-SHADOW: 0 4px 16px rgba(68, 83, 113, 0.08);
    --PANEL-INNER-SHADOW: none;
    --PANEL-MARGIN-BOTTOM: 10px;
    --PANEL-SURFACE-BG: var(--WHITE);
    // panel header
    --PANEL-HEADER-MIN-HEIGHT: 48px;
    --PANEL-HEADER-MAX-HEIGHT: 72px;
    --PANEL-HEADER-PADDING-X: 16px;
    --PANEL-HEADER-FONT-SIZE: 14px;
    --PANEL-HEADER-TEXT-TRANSFORM: uppercase;
    --PANEL-HEADER-LETTER-SPACING: 0.02em;
    --PANEL-HEADER-HOVER-BG: #f8f9fb;
    --PANEL-HEADER-EXPANDED-HOVER-BG: #f8f9fb;
    --PANEL-INDICATOR-COLOR: var(--MIDLE-GRAY);
    // panel body
    --PANEL-BODY-PADDING-X: 16px;
    --PANEL-BODY-PADDING-Y: 16px;
    --PANEL-BODY-BORDER-TOP: 1px solid #E2E8EA;
    --PANEL-BODY-FONT-SIZE: 14px;
    --PANEL-BODY-COLOR: var(--DARK-GREY);
    // default panel
    --PANEL-DEFAULT-BORDER-COLOR: #E2E8EA;
    --PANEL-DEFAULT-HEADER-BG: var(--WHITE);
    --PANEL-DEFAULT-HEADER-COLOR: var(--DARK-GREY);
    --PANEL-DEFAULT-HEADER-HOVER-BG: #f8f9fb;
    // primary panel
    --PANEL-PRIMARY-BORDER-COLOR: var(--PRIMARY);
    --PANEL-PRIMARY-HEADER-BG: var(--PRIMARY);
    --PANEL-PRIMARY-HEADER-COLOR: var(--WHITE);
    --PANEL-PRIMARY-HEADER-HOVER-BG: #2a5ae0;
    // success panel
    --PANEL-SUCCESS-BORDER-COLOR: var(--SUCCESS);
    --PANEL-SUCCESS-HEADER-BG: var(--SUCCESS);
    --PANEL-SUCCESS-HEADER-COLOR: var(--WHITE);
    --PANEL-SUCCESS-HEADER-HOVER-BG: #018a35;
    // warning panel
    --PANEL-WARNING-BORDER-COLOR: var(--WARNING);
    --PANEL-WARNING-HEADER-BG: var(--WARNING);
    --PANEL-WARNING-HEADER-COLOR: var(--WHITE);
    --PANEL-WARNING-HEADER-HOVER-BG: #d98200;
    // danger panel
    --PANEL-DANGER-BORDER-COLOR: var(--DANGER);
    --PANEL-DANGER-HEADER-BG: var(--DANGER);
    --PANEL-DANGER-HEADER-COLOR: var(--WHITE);
    --PANEL-DANGER-HEADER-HOVER-BG: #d9133c;
    // info panel
    --PANEL-INFO-BORDER-COLOR: var(--INFO);
    --PANEL-INFO-HEADER-BG: var(--INFO);
    --PANEL-INFO-HEADER-COLOR: var(--WHITE);
    --PANEL-INFO-HEADER-HOVER-BG: #1585e6;

    // комплексные поля (organization, license, address, identification-doc, requisite)
    --COMPLEX-FIELD-RADIUS: 12px;
    --COMPLEX-FIELD-MIN-HEIGHT: 100px;
    --COMPLEX-FIELD-BORDER-WIDTH: 1px;
    --COMPLEX-FIELD-BORDER-COLOR: #E2E8EA;
    --COMPLEX-FIELD-BG: var(--WHITE);
    --COMPLEX-FIELD-TITLE-FONT-SIZE: 12px;
    --COMPLEX-FIELD-TITLE-MARGIN-BOTTOM: 4px;
    --COMPLEX-FIELD-TITLE-LETTER-SPACING: 0.02em;
    --COMPLEX-FIELD-TITLE-TRANSFORM: uppercase;
    --COMPLEX-FIELD-TITLE-COLOR: var(--BLACK);
    --COMPLEX-FIELD-VALUE-FONT-SIZE: 14px;
    --COMPLEX-FIELD-VALUE-FONT-WEIGHT: 400;
    --COMPLEX-FIELD-VALUE-COLOR: var(--DARK-GREY);
    --COMPLEX-FIELD-VALUE-WIDTH: 100%;
    --COMPLEX-FIELD-INFO-PADDING-Y: 10px;
    --COMPLEX-FIELD-INFO-PADDING-X: 16px;
    --COMPLEX-FIELD-INFO-WIDTH: 100%;
    --COMPLEX-FIELD-ACTION-WIDTH: 48px;
    --COMPLEX-FIELD-ACTION-HEIGHT: auto;
    --COMPLEX-FIELD-ACTION-BORDER-LEFT: 1px solid #E2E8EA;
    --COMPLEX-FIELD-DIVIDER-WIDTH: 1px;
    --COMPLEX-FIELD-DIVIDER-HEIGHT: 60%;
    --COMPLEX-FIELD-DIVIDER-RIGHT: 48px;
    --COMPLEX-FIELD-DIVIDER-RIGHT-READONLY: 48px;
    --COMPLEX-FIELD-DIVIDER-COLOR: #E2E8EA;

    // core-file-uploader
    --UPLOADER-RADIUS: 12px;
    --UPLOADER-BG: var(--WHITE);
    --UPLOADER-BORDER-WIDTH: 1px;
    --UPLOADER-BORDER-COLOR: #E2E8EA;
    --UPLOADER-HEADER-HEIGHT: 60px;
    --UPLOADER-HEADER-PADDING-X: 16px;
    --UPLOADER-TITLE-FONT-SIZE: 14px;
    --UPLOADER-TITLE-FONT-WEIGHT: 500;
    --UPLOADER-TITLE-TRANSFORM: uppercase;
    --UPLOADER-TITLE-COLOR: var(--BLACK);
    --UPLOADER-CHOOSE-BTN-MIN-WIDTH: 120px;
    --UPLOADER-CHOOSE-BTN-HEIGHT: 36px;
    --UPLOADER-CHOOSE-BTN-RADIUS: 12px;
    --UPLOADER-CHOOSE-BTN-BORDER: 2px solid var(--PRIMARY);
    --UPLOADER-CHOOSE-BTN-BG: var(--WHITE);
    --UPLOADER-CHOOSE-BTN-COLOR: var(--PRIMARY);
    --UPLOADER-CHOOSE-BTN-DISPLAY: flex;
    --UPLOADER-CHOOSE-BTN-FONT-SIZE: 13px;
    --UPLOADER-CHOOSE-BTN-TEXT-TRANSFORM: none;
    --UPLOADER-LIST-BORDER-TOP: 1px solid #E2E8EA;
    --UPLOADER-LIST-PADDING: 16px;
    --UPLOADER-DROPZONE-HEIGHT: 20vh;
    --UPLOADER-DROPZONE-BORDER: dashed 1px #dadde4;
    --UPLOADER-DROPZONE-PADDING: 16px;
    --UPLOADER-DROPZONE-RADIUS: 12px;
    --UPLOADER-DROPZONE-BG: #f8f9fb;
    --UPLOADER-ICON-SIZE: 44px;

    // identification-doc card (.sln-identification-docs)
    --ID-DOC-BORDER-WIDTH: 1px;
    --ID-DOC-BORDER-COLOR: #E2E8EA;
    --ID-DOC-RADIUS: 12px;
    --ID-DOC-PADDING: 16px;
    --ID-DOC-BG: var(--WHITE);
    --ID-DOC-MARGIN-TOP: 8px;
    --ID-DOC-MARGIN-BOTTOM: 12px;
    --ID-DOC-LABEL-TOP: -28px;
    --ID-DOC-LABEL-FONT-SIZE: 12px;

    // calendar month view
    --CALENDAR-GRID-BORDER: #E2E8EA;
    --CALENDAR-WEEKEND-COLOR: var(--DANGER);
    --CALENDAR-DAY-WEEKDAY: var(--DARK-GREY);
    --CALENDAR-DAY-OUT: #d1d5db;
    --CALENDAR-EVENT-DOT: var(--DANGER);
    --CALENDAR-TODAY-BG: #f0fdf4;
    --CALENDAR-TODAY-BORDER: #dcfce7;
    --CALENDAR-TODAY-COLOR: #019F3C;
    --CALENDAR-TODAY-DOT: #019F3C;
    --CALENDAR-HEADER-MARGIN-BOTTOM: 20px;

    // widgets
}
