/*
  Site-wide color definitions
*/

:root {
    --base-brown: rgb(163, 106, 42);
    --base-brown-gradient: rgb(186, 114, 45);
    --base-orange: rgb(250, 179, 46);
    --base-orange-gradient: rgb(245, 149, 69);

    --body-back: #eee;
    --body-fore: #000;
    --page-content-back: #fff;
    --page-content-fore: #000;

    --default-box-shadow: rgba(34, 34, 34, 0.75);

    /* Top bar */
    --topbar-navlink-back: none;
    --topbar-navlink-fore: #000;
    --topbar-navlink-back-hover: #fff;
    --topbar-navlink-fore-hover: #000;
    --topbar-nav-separators: #ccc;
    --topbar-username-fore: #000;

    /* Integrations */
    --integrations-border: #ccc;
    --integrations-in-back: #8ff;
    --integrations-in-fore: #000;
    --integrations-out-back: #8f8;
    --integrations-out-fore: #000;
    --integrations-inout-back: #f88;
    --integrations-inout-fore: #000;
    --integrations-email-back: #44f;
    --integrations-email-fore: #fff;
    --integrations-login-back: #88f;
    --integrations-login-fore: #fff;
    --integrations-password-back: #ff8;
    --integrations-password-fore: #000;
    --integrations-other-back: #eee;
    --integrations-other-fore: #000;

    /* Top tabs (primary and secondary level) */
    --tabs-pri-back: linear-gradient(var(--base-orange), var(--base-orange-gradient));
    --tabs-pri-tab-fore: #000;
    --tabs-pri-tab-back-hover: linear-gradient(var(--base-brown), var(--base-brown-gradient));
    --tabs-pri-tab-fore-hover: #fff;
    --tabs-pri-current-back: var(--tabs-pri-tab-back-hover);
    --tabs-pri-current-fore: #fff;
    --tabs-sec-back: linear-gradient(var(--base-brown-gradient) 35%, var(--base-brown) 60%);
    --tabs-sec-tab-fore: #e6e6d8;
    --tabs-sec-tab-back-hover: #fff;
    --tabs-sec-tab-fore-hover: #000;

    /* Flash messages */
    --flash-success-back: #e6efc2;
    --flash-success-fore: #264409;
    --flash-success-border: #c6d880;
    --flash-notice-back: #86b410;
    --flash-notice-fore: #000;
    --flash-notice-border: #56340e;
    --flash-alert-back: #a00;
    --flash-alert-fore: #fff;
    --flash-alert-border: #f00;

    /* Generic "information boxes". Various notifications, reminders, warnings, etc. embedded on pages.
       Not flash messages. */
    --generic-notice-back: #cfc;
    --generic-notice-fore: #000;
    --generic-notice-border: #0f0;
    --generic-warning-back: #ffc;
    --generic-warning-fore: #000;
    --generic-warning-border: #ff0;
    --generic-error-back: #faa;
    --generic-error-fore: #000;
    --generic-error-border: #f00;

    /* Search boxes */
    --search-back: #fff;
    --search-fore: #000;
    --search-results-back: #fff;
    --search-results-border: #cccaaa;
    --search-no-results: #aaa;
    --search-topbar-border: #c8c8c8;    /* the default form element border looks too dark here */

    /* Extended search */
    --extendedsearch-error: #f00;
    --extendedsearch-no-results: #00f;
    --extendedsearch-no-matches: #666;
    --extendedsearch-results-back: #ccc;
    --extendedsearch-results-fore: #000;
    --extendedsearch-results-divider: #000;
    --extendedsearch-button-fore: #000;
    --extendedsearch-button-back-hover: #fff;

    /* Common page elements */
    --hx-border: #000;      /* H1/H2/H3 element border */
    --admin-owner: #00f;    /* Highlight admins and owners in tables */
    --missing-data: #f00;   /* Indicate required missing things */
    --owners-only: #f00;    /* Things that only organisation owners can see */

    /* Toolboxes (tool buttons and buttons with dropdown menus) */
    --tools--back: none;
    --tools-dropdown-back: #fff;
    --tools-dropdown-border: #aaa;
    --tools-dropdown-link-fore: #000;
    --tools-dropdown-link-back-hover: var(--base-orange-gradient);
    --tools-dropdown-link-fore-hover: #000;
    --tools-dropdown-separator: #ccc;

    /* Ordinary links on page content areas */
    --link-back: none;
    --link-fore: #13243f;
    --link-back-hover: none;
    --link-fore-hover: #352608;
    --link-focus-back: none;
    --link-focus-fore: #000;

    /* Links styled as clickable buttons. Also used on form submit/reset buttons,
       so verify your changes thoroughly! */
    --button-border-hi: #f0f0f0;
    --button-border-lo: #b0b0b0;
    --button-back: #d0d0d0;
    --button-fore: #000;
    --button-fore-disabled: #888;
    --button-back-hover: #e0e0e0;
    --button-danger-border-hi: #f00;
    --button-danger-border-lo: #600;
    --button-danger-back: #a00;
    --button-danger-fore: #fff;
    --button-danger-fore-disabled: #888;
    --button-danger-back-hover: #c00;

    /* Content boxes on "show" pages */
    --contentbox-border: #999;
    --contentbox-shadow: #aaa;
    --contentbox-header-back: var(--base-orange-gradient);
    --contentbox-header-fore: #000;
    --contentbox-subheader-back: #ccc;
    --contentbox-subheader-fore: #000;
    --contentbox-contents-back: #f0f0f0;
    --contentbox-contents-fore: #000;
    --contentbox-table-odd-back: #f0f0f0;
    --contentbox-table-even-back: #e0e0e0;
    --contentbox-multiline-item-border: #ccc;
    --contentbox-table-heading-back: #ccc;

    /* SuperTables. Contains unused/obsolete variables. */
    --st-temporary-bg: #faa;
    --st-temporary-fg: #000;
    --st-temporary-border: #f00;
    --st-common-border: #888;
    --st-fieldset-border: #aaa;
    --st-controls-border: #888;
    --st-buttons-border: #999;
    --st-buttons-back: #eee;
    --st-buttons-hover-border: #999;
    --st-buttons-hover-back: #ccc;
    --st-buttons-disabled: #666;
    --st-buttons-danger-border: #f99;
    --st-buttons-danger-back: #fdd;
    --st-buttons-danger-fore: #f00;
    --st-buttons-danger-hover-back: #fbb;
    --st-tab-bg: #ccc;
    --st-tab-fg: #000;
    --st-tab-hover-bg: #ddd;
    --st-tab-hover-fg: #000;
    --st-tab-active-bg: var(--st-tab-container-bg);
    --st-tab-active-fg: #000;
    --st-tab-disabled-bg: #aaa;
    --st-tab-disabled-fg: #888;
    --st-tab-container-bg: #fff;
    --st-tab-container-fg: #000;
    --st-summary-bg: #eee;
    --st-summary-fg: #00f;
    --st-summary-hover-bg: #e0e0e0;
    --st-summary-hover-fg: #f00;
    --st-details-open-bg: #fff;
    --st-details-open-fg: #000;
    --st-textarea-bg: #fff;
    --st-textarea-fg: #000;
    --st-textarea-disabled-bg: #ddd;
    --st-textarea-disabled-fg: #888;
    --st-commontable-bg: #fff;
    --st-commontable-fg: #000;
    --st-commontable-th-bg: #ccc;
    --st-commontable-th-fg: #000;
    --st-commontable-border: #888;
    --st-commontable-code-bg: #ccc;
    --st-commontable-code-fg: #000;
    --st-scroll-list-hover-bg: #ccc;
    --st-scroll-list-disabled-fg: #888;
    --st-columnhelp-invisible-bg: #ff8;
    --st-columnhelp-invisible-fg: #000;
    --st-filters-unsaved-fg: #f00;
    --st-filters-error-bg: #f88;
    --st-filters-error-fg: #000;
    --st-filters-operator: #080;
    --st-filters-value: #00f;
    --st-filters-table-separator: #ccc;
    --st-filters-pretty-hover-back: #ddd;
    --st-filters-editorwrapper-back: #eee;
    --st-filters-open-back: #ddd;
    --st-filters-save-icon: #0a0;
    --st-filters-cancel-icon: #f00;
    --st-status-border: #888;
    --st-status-bg: #fff;
    --st-status-fg: #000;
    --st-status-success-bg: #6f6;
    --st-status-success-fg: #000;
    --st-status-fail-bg: #f66;
    --st-status-fail-fg: #000;
    --st-error-bg: #f44;
    --st-error-fg: #fff;
    --st-error-border: #f00;
    --st-border: #888;
    --st-bg: #fff;
    --st-fg: #000;
    --st-header-bg: #bbb;
    --st-header-fg: #000;
    --st-sortable-hover-bg: linear-gradient(rgb(239, 158, 6), rgb(242, 121, 21));
    --st-sortable-hover-fg: #000;
    --st-row-hover-bg: var(--list-row-back-hover);
    --st-row-sorted-column: #e0e0e0;
    --st-row-sorted-hover-bg: #efeabd;
    --st-row-processed-fg: #000;
    --st-row-processing-bg: #aff;
    --st-row-processing-hover-bg: #8ff;
    --st-row-processing-sorted-bg: #80ffff;
    --st-row-processing-sorted-hover-bg: #6ff;
    --st-row-success-bg: #afa;
    --st-row-success-hover-bg: #8f8;
    --st-row-success-sorted-bg: #80ff80;
    --st-row-success-sorted-hover-bg: #6f6;
    --st-row-fail-bg: #faa;
    --st-row-fail-hover-bg: #f88;
    --st-row-fail-sorted-bg: #ff8080;
    --st-row-fail-sorted-hover-bg: #f66;
    --st-checkbox-border: var(--st-common-border);
    --st-checkbox-bg: #fff;
    --st-previous-row: #00f;
    --st-dropmarker: #00f;

    /* Popups */
    --popup-background: #fff;
    --popup-border: #5595e5;

    /* In-page tabs (JavaScript-based, does not cause page reloads) */
    --inpagetabs-border: #888;
    --inpagetabs-tab-back: #ccc;
    --inpagetabs-tab-fore: #000;
    --inpagetabs-tab-back-hover: var(--base-orange);
    --inpagetabs-tab-fore-hover: 000;
    --inpagetabs-tab-back-active: #fff;
    --inpagetabs-tab-fore-active: #000;

    /* Basic info blocks about users, devices, etc. */
    --basic-info-borders: #ccc;
    --basic-info-notice: #00f;  /* notifications about important users, etc. */
    --basic-info-warn: #f00;    /* warnings about users, etc. */
    --basic-info-error: #f00;   /* user errors, etc. */

    /* puavo-conf tables */
    --puavoconf-border: #ccc;
    --puavoconf-odd-back: #f0f0f0;
    --puavoconf-even-back: #e0e0e0;
    --puavoconf-overridden-odd-back: #faa;
    --puavoconf-overridden-even-back: #fcc;
    --puavoconf-source-organisation: #ff2b00;
    --puavoconf-source-school: #9c64ff;
    --puavoconf-source-device: #00bb66;

    /* puavo-conf editor */
    --pce-error-fore: #f00;
    --pce-error-back: #f88;
    --pce-error-border: #f00;
    --pce-delete-back: none;
    --pce-delete-fore: #f00;
    --pce-delete-border: transparent;
    --pce-delete-back-hover: #f88;
    --pce-delete-fore-hover: #f00;
    --pce-delete-border-hover: #f00;
    --pce-autocomplete-back: #fff;
    --pce-autocomplete-fore: #000;
    --pce-autocomplete-border: #000;
    --pce-autocomplete-hint: #888;
    --pce-autocomplete-entry-hover-back: #00f;
    --pce-autocomplete-entry-hover-fore: #fff;
    --pce-autocomplete-match-back: #ccc;
    --pce-autocomplete-match-fore: #000;

    /* School admin permissions page */
    --admin-permissions-allow-back: #0f0;
    --admin-permissions-allow-fore: #000;
    --admin-permissions-deny-back: #f00;
    --admin-permissions-deny-fore: #fff;

    /* Password requirements info boxes */
    --password-requirements-back: #d9edf7;
    --password-requirements-border: #afd9ee;

    /* Forms */
    --form-fieldset-border: #ccc;
    --form-fore: #000;
    --form-label-fore: #000;
    --form-error-fore: #f00;
    --form-odd-back: #f5f5f5;
    --form-even-back: #e9e9e9;
    --form-button-row-back: #ccc;
    --form-element-border: #90919f;

    /* Lists */
    --list-heading-back: linear-gradient(var(--base-orange), var(--base-orange-gradient));
    --list-heading-fore: #000;
    --list-heading-border: #888;
    --list-fore: #000;
    --list-odd-back: #ebebeb;
    --list-even-back: #fafafa;
    --list-row-back-hover: #f9f7e6;
    --list-row-border: #c8c8c8;

    /* Sortable Tables (not supertables) */
    --list-selected-column: #d0d0d0;
    --list-sortable-column-hover: linear-gradient(#f9aa15, #f4872d);
    --list-sortable-odd-selected-back: #c3c3c3;
    --list-sortable-even-selected-back: #dddddd;
    --list-sortable-selected-column-back: #efeabd;

    /* Group member lists */
    --group-member-marked-deletion-odd-back: #faa;
    --group-member-marked-deletion-even-back: #fcc;

    /* Hardware info */
    --devices-hwinfo-border: #aaa;
    --devices-hwinfo-title-back: #eee;

    /* Image usage statistics */
    --devices-imagestats-header-back: var(--list-odd-back);
    --devices-imagestats-header-fore: #00;
    --devices-imagestats-release-name: #088;
    --devices-imagestats-separator: #000;
    --devices-imagestats-percentage-border: #000;
    --devices-imagestats-percentage-back: #fff;
    --devices-imagestats-percentage-fore: #080;
    --devices-imagestats-devicelist-border: #aaa;

    --devices-imagestats-release-stretch: #008;
    --devices-imagestats-release-buster: #080;
    --devices-imagestats-release-bullseye: #a00;
    --devices-imagestats-release-bookworm: #808;

    /* Page footer (build info, hostname, uptime, etc.) */
    --footer-fore: #999;
    --footer-border: #ccc;
}

/* Other variables */
:root {
    --basic-info-thumbnail-padding: 10px;
}
