/* dtco-check styles following Geotab's Zenith design tokens
   (source: dev/Development libs/javascript/react-library commonStyles). */

:root {
    /* Zenith colour tokens */
    --text-primary: #1f2833;
    --text-secondary: #4e677e;
    --text-placeholder: #8da4b9;
    --text-hyperlink: #005aa8;
    --text-error-message: #c51a11;

    --backgrounds-main: #ffffff;
    --backgrounds-content-0: #f9fafb;
    --backgrounds-content-1: #f2f5f7;
    --backgrounds-content-2: #d9e1e8;
    --backgrounds-hover: #e6ebef;
    --backgrounds-overlay: rgba(31, 40, 51, 0.4);
    --backgrounds-primary-brand: #25477b;

    --borders-general: #c0ccd8;
    --borders-secondary: #748faa;
    --borders-form-field--active: #0078d3;

    --action-primary--default: #0078d3;
    --action-primary--hover: #005aa8;
    --action-primary--active: #004080;

    --accents-warning--main: #fef7ed;
    --accents-warning--detail: #59480d;
    --accents-error--main: #ffeceb;
    --accents-error--detail: #a01f0e;
    --accents-success--main: #edfef2;
    --accents-success--detail: #2b6436;
    --accents-general--main: #ebf6ff;
    --accents-general--detail: #25477b;

    /* Zenith common tokens */
    --border-width-default: 1px;
    --border-radius-default: 4px;
    --padding-top-bottom: 8px;
    --padding-left-right: 8px;

    /* Zenith typography */
    --main-font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
}

body {
    font-family: var(--main-font-family);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--backgrounds-main);
    margin: 0;
    padding: 8px;
}

h1, h2 { text-align: center; font-weight: 300; }

table {
    min-width: 750px;
    max-width: 750px;
    margin: 0 auto;
    border: 0;
    padding: 2px;
    border-spacing: 0;
    font-family: var(--main-font-family);
    font-size: 14px;
}
td { padding: var(--padding-top-bottom) var(--padding-left-right); }

a, a:visited { text-decoration: none; color: var(--text-hyperlink); }
a:hover { text-decoration: underline; }

.lang-bar { border: 0; }

.page-header {
    background-color: var(--backgrounds-primary-brand);
    color: #fff;
    border-radius: var(--border-radius-default);
}
.page-header b > div { font-size: 20px; font-weight: 400; line-height: 24px; }
.page-header .version { float: right; font-size: 12px; opacity: 0.8; }

.data-table {
    border: var(--border-width-default) solid var(--borders-general);
    border-radius: var(--border-radius-default);
    background: var(--backgrounds-main);
}
.help-title { color: var(--backgrounds-primary-brand); }

/* Forms */
textarea {
    border: var(--border-width-default) solid var(--borders-general);
    border-radius: var(--border-radius-default);
    padding: var(--padding-top-bottom) var(--padding-left-right);
    font-family: var(--main-font-family);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--backgrounds-main);
}
textarea:focus {
    outline: none;
    border-color: var(--borders-form-field--active);
}
textarea::placeholder { color: var(--text-placeholder); }

/* Side-by-side input panels: both stretch to the same height and the
   dropzone fills its panel, so the boxes stay aligned by construction. */
.panels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
}
.panel {
    flex: 1 1 370px;
    max-width: 370px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-sizing: border-box;
}
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 32px;
    margin-bottom: 12px;
}
.panel form { flex: 1; }
.panel textarea {
    width: 100%;
    min-height: 145px;
    box-sizing: border-box;
    resize: vertical;
}

.form-actions {
    margin-top: 12px;
    text-align: left;
}

.submit {
    background: var(--action-primary--default);
    color: #fff;
    border: 0;
    border-radius: var(--border-radius-default);
    padding: var(--padding-top-bottom) 16px;
    font-family: var(--main-font-family);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.submit:hover { background: var(--action-primary--hover); }
.submit:active { background: var(--action-primary--active); }

.help-icon { cursor: pointer; vertical-align: middle; }

/* Compatibility results table */
.result-table { min-width: 730px; }
.title {
    background-color: var(--backgrounds-content-1);
    color: var(--text-primary);
}
.theader_center { text-align: center; min-width: 40px; }
.row0 { background-color: var(--backgrounds-main); }
.row1 { background-color: var(--backgrounds-content-0); }
.c0, .c1 { text-align: center; }
.footer {
    border-top: var(--border-width-default) solid var(--borders-general);
    background-color: var(--backgrounds-content-1);
    font-size: 12px;
    color: var(--text-secondary);
    text-align: right;
}

/* Status pills (Zenith pill + accent styles) */
.legend-table { min-width: 730px; }
.status-pill {
    display: inline-block;
    min-width: 24px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.status-success { background: var(--accents-success--main); color: var(--accents-success--detail); }
.status-caution { background: var(--accents-warning--main); color: var(--accents-warning--detail); }
.status-error { background: var(--accents-error--main); color: var(--accents-error--detail); }

/* Dropzone (Zenith-flavoured) */
.dropzone {
    border: 2px dashed var(--borders-secondary) !important;
    border-radius: var(--border-radius-default);
    background: var(--backgrounds-content-0);
    transition: background 0.15s ease;
    padding: 12px;
    min-height: 145px;
}
.dropzone.dz-drag-hover { background: var(--backgrounds-hover); }
.dropzone .dz-message {
    color: var(--text-secondary);
    margin: 0;
    padding: 6px 0;
}

/* Error banner */
.error-banner {
    text-align: center;
    color: var(--text-error-message);
    padding: var(--padding-top-bottom);
}

/* Languages */
.lang_display { display: inline; }

/* Modals */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 160px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--backgrounds-overlay);
}
.modal-content {
    background-color: var(--backgrounds-main);
    margin: auto;
    padding: 20px;
    border: var(--border-width-default) solid var(--borders-general);
    border-radius: var(--border-radius-default);
    width: 700px;
    max-width: 90%;
    box-shadow: 0 4px 16px rgba(31, 40, 51, 0.2);
}
.modal-close {
    color: var(--text-placeholder);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.modal-close:hover,
.modal-close:focus { color: var(--text-primary); text-decoration: none; }

/* Compatibility info page */
.compatibility-page img {
    border-radius: var(--border-radius-default);
    vertical-align: top;
}