/* ==========================================================================
   Centralna definicja kolorów interfejsu – CSS Custom Properties
   Plik musi być ładowany PRZED pozostałymi arkuszami stylów.
   ========================================================================== */

:root {

    /* ── Brand / Primary ────────────────────────────────────────────────── */
    --color-highlight:                #28587c;
    --color-highlight-dark:           #104769;
    --color-primary:                 #75b4c3;
    --color-primary-hover:           #65a4b3;
    --color-primary-dark:            #65a4b3;
    --color-primary-light:           #a4dbe8;
    --color-primary-light-hover:     #8fc6d2;
    --color-primary-overlay:         rgba(117, 180, 195, 0.85);
    --color-contrast:               #e35f2d;
    --color-contrast-dark:          #c54514;
    --color-primary-gray:           #8e8e8e;

    /* ── Header ─────────────────────────────────────────────────────────── */
    --color-header-bg:              #006d41;
    --color-header-version:         #a8d601;
    --color-header-date-text:       #c7e6d9;

    /* ── Text ───────────────────────────────────────────────────────────── */
    --color-text:                   #000000;
    --color-text-dark:              #494949;  /* also covers ~#434343, #424242, #4f4f4f */
    --color-text-toolbar:           #575757;
    --color-text-medium:            #666666;
    --color-text-muted:             #999999;
    --color-text-light:             #afafaf;
    --color-text-tab-inactive:      #888888;
    --color-text-toolbar-name:      #878787;
    --color-text-white:             #ffffff;
    --color-text-link:              #FE700F;
    --color-text-link-blue:         #0000FF;
    --color-text-warning-inline:    #f18e31;

    /* ── Backgrounds ────────────────────────────────────────────────────── */
    --color-bg:                     #ffffff;
    --color-bg-light:               #f7f7f7;
    --color-bg-alt:                 #f2f2f2;
    --color-bg-hover:               #e3e3e3;
    --color-bg-disabled:            #f4f4f4;
    --color-bg-input-edited:        #EBEBE4;
    --color-bg-section:             #e7e7e7;
    --color-bg-tab:                 #f6f6f6;
    --color-bg-gray:                #eeeeee;

    /* ── Borders ────────────────────────────────────────────────────────── */
    --color-border:                 #d4d4d4;
    --color-border-light:           #dfdfdf;
    --color-border-lighter:         #ddd;
    --color-border-tab:             #D9DDDD;
    --color-border-input:           #ebeaea;
    --color-border-input-bottom:    #f2f2f2;
    --color-border-dark:            #999999;
    --color-border-search:          #ccc;
    --color-border-gray:            #ababab;

    /* ── Status / State ─────────────────────────────────────────────────── */
    --color-error:                  #FF0000;
    --color-error-dark:             #DD0000;
    --color-warning:                #ffa630;
    --color-warning-dark:           #dd8930;
    --color-success:                #99BB55;
    --color-success-light:          #f0fff0;
    --color-success-border:         #7DC27D;
    --color-error-form:             #A90329;

    /* ── Grid ───────────────────────────────────────────────────────────── */
    --color-grid-bg:                #ffffff;
    --color-grid-header-bg:         #f0f0f0;
    --color-grid-header-text:       #434343;
    --color-grid-cell-text:         #434343;
    --color-grid-mandatory:         #d4f3fe;
    --color-grid-row-selected:      #e3e3e3;
    --color-grid-row-hover:         #d4d4d4;
    --color-grid-purple:            #DED3E1;
    --color-grid-orange:            #ffa630;
    --color-grid-orange-selected:   #dd8930;
    --color-grid-yellow:            #ffdb95;
    --color-grid-yellow-selected:   #ffbb37;
    --color-grid-red:               #ffbb99;
    --color-grid-red-selected:      #cc7755;
    --color-grid-green:             #ccff99;
    --color-grid-green-selected:    #99bb55;
    --color-grid-grey:              #f7f7f7;
    --color-grid-grey-selected:     #bcbcbc;
    --color-grid-group:             #C9A880;
    --color-grid-link:              #3300CC;
    --color-grid-checking-master:   #9B5;
    --color-grid-checking-slave:    #b6d280;

    /* ── Coral / Danger ─────────────────────────────────────────────────── */
    --color-coral:                  #ef798a;
    --color-coral-dark:             #a84448;
    --color-coral-light:            #fff0f0;

    /* IE9-specific grid overrides (IE9_dhtmlXGrid.css) */
    --color-grid-ie9-blue:                  #d9edf7;
    --color-grid-ie9-blue-selected:         #7adaea;
    --color-grid-ie9-hover-cell:            #ecf3f8;
    --color-grid-ie9-red:                   #ef798a;
    --color-grid-ie9-red-selected:          #a84448;
    --color-grid-ie9-red-hover:             #e37383;
    --color-grid-ie9-red-selected-hover:    #9f4144;
    --color-grid-ie9-selected-hover:        #becfd8;
    --color-grid-ie9-sent:                  #d9edf7;

    /* ── Logo ──────────────────────────────────────────────────────────── */
    --color-logo-green:             #00985a;
    --color-logo-green-light:       #7ec140;
    --color-green-dark:             #496949;

    /* ── Calendar ───────────────────────────────────────────────────────── */
    --color-calendar-header-bg:     #265e8b;
    --color-calendar-header-text:   #ffffff;
    --color-calendar-footer-bg:     #e4e0d8;
    --color-calendar-time-border:   #889;
    --color-calendar-weekend:       #f00;
    --color-calendar-weekend-muted: #faa;
    --color-calendar-other-month:   #aaa;
    --color-calendar-today:         #00f;
    --color-calendar-active-border: #f00;
    --color-calendar-active-bg:     #000;
    --color-calendar-active-text:   #0f0;

    /* ── Menu (dhtmlX) ──────────────────────────────────────────────────── */
    --color-menu-highlight:         #316ac5;
    --color-menu-bg:                #ece9d8;
    --color-menu-border:            #808080;
    --color-menu-scroller:          #CAC8D4;
    --color-menu-context-hover:     #eaeaea;
    --color-menu-bg-fallback:       #E2E2E2;
    --color-menu-link-text:         rgb(97,97,97);
    --color-menu-link-hover:        #999;

    /* ── Dojo Menu ──────────────────────────────────────────────────────── */
    --color-dojo-menu-border:               #4A70F0;
    --color-dojo-menu-disabled:             #607a9e;
    --color-dojo-menu-separator-top:        #7a98c4;
    --color-dojo-menu-separator-bottom:     #c9deff;
    --color-dojo-menu-bar-bg:               #85aeec;
    --color-dojo-menu-bar-border:           #6b9fec;
    --color-dojo-menu-bar-hover:            #d2e4fd;
    --color-dojo-menu-bar-disabled:         #4f6582;

    /* ── Toolbar ────────────────────────────────────────────────────────── */
    --color-toolbar-bg:             #f2f2f2;
    --color-toolbar-text:           #575757;
    --color-toolbar-name:           #878787;
    --color-toolbar-border-right:   #D5DDDD;
    --color-toolbar-border-top:     #C4CCCC;
    --color-toolbar-divider:        #D4D0C8;
    --color-toolbar-button-down:    #EFEFEF;

    /* ── Document Editor ────────────────────────────────────────────────── */
    --color-editor-element-bg:      #CCFF99;
    --color-editor-element-border:  #99BB55;
    --color-editor-control-bg:      #FFBB99;
    --color-editor-control-border:  #CC7755;
    --color-editor-item-bg:         #dbdbff;

    /* ── Forms / Select ─────────────────────────────────────────────────── */
    --color-form-selected:          #d9edf7;
    --color-form-highlighted:       #ecf3f8;

    /* ── Corner Ribbon ──────────────────────────────────────────────────── */
    --color-ribbon-red:             #8F0808;
    --color-ribbon-red-light:       #F70505;

    /* ── Shadows ────────────────────────────────────────────────────────── */
    --color-shadow:                 #333;

    /* ── Overlays / Misc ───────────────────────────────────────────────── */
    --color-hover-overlay:          rgba(0, 0, 0, 0.05);
    --color-grid-drag-highlight:    #FFCCCC;
}

/* ── Utility classes for JS usage (instead of inline hardcoded colors) ── */

.js-color-grid-red-bg {
    background-color: var(--color-grid-red) !important;
}

.js-color-warning-bar {
    background-color: var(--color-warning) !important;
    color: var(--color-text-white) !important;
}

.js-color-text-medium {
    color: var(--color-text-medium) !important;
}

.js-color-error-border {
    border-color: var(--color-error) !important;
}

.js-color-drag-highlight {
    background-color: var(--color-grid-drag-highlight) !important;
}