:root {
    /* ══════════════════════════════════════════════
       LAYER 1: Brand Palette (TBM-specific)
       To rebrand: change only these 7 hex values.
       These must ONLY be referenced inside :root.
       ══════════════════════════════════════════════ */
    --tbm-blue: #3275b5;
    --tbm-blue-dark: #2A6399;
    --tbm-green: #7cc242;
    --tbm-gold: #cbb956;
    --tbm-orange: #bf5329;
    --tbm-gray: #707070;
    --tbm-purple: #7b5c9f;
    --tbm-teal: #17a2b8;

    /* ══════════════════════════════════════════════
       LAYER 2: Semantic Tokens
       Components reference ONLY these --color-* vars.
       ══════════════════════════════════════════════ */

    /* ── Primary & brand ── */
    --color-primary: var(--tbm-blue);
    --color-primary-dark: var(--tbm-blue-dark);
    --color-brand-accent: var(--tbm-green);

    /* ── Status (mapped from brand) ── */
    --color-status-open: var(--tbm-gold);
    --color-status-approved: var(--color-primary);
    --color-status-inspected: var(--color-primary);
    --color-status-completed: var(--tbm-green);
    --color-status-late: var(--tbm-orange);
    --color-status-declined: var(--tbm-gray);
    --color-status-reopen: var(--color-status-open);
    --color-status-completed-late-text: var(--color-status-late);
    --color-status-scheduled: var(--tbm-teal);
    --color-status-unknown: var(--tbm-purple);

    /* ── Text hierarchy (darkest → lightest) ── */
    --color-text-heading: #1e293b;
    --color-text: #333;
    --color-text-secondary: #555;
    --color-text-muted: #888;
    --color-text-light: #999;

    /* ── Semantic feedback (industry-standard, not brand) ── */
    --color-danger: #dc3545;
    --color-success: #4caf50;
    --color-warning: #f59e0b;
    --color-link: #337ab7;
    --color-info: #3498db;

    /* ── Roles ── */
    --color-role-staff: #28a745;
    --color-role-executive: #fd7e14;
    --color-role-manager: #6f42c1;
    --color-role-supervisor: #17a2b8;
    --color-role-customer: #6c757d;

    /* ── Surfaces & borders ── */
    --color-bg-surface: #f8f9fa;
    --color-bg-success-light: #f0f9f0;
    --color-border: #ddd;
    --color-border-strong: #ccc;
    --color-border-light: #e5e5e5;
    --color-overlay: rgba(0, 0, 0, 0.5);
}

#korpnet-tab-headers.nav-pills>li,
#korpnet-tab-headers.nav-tabs>li {
    float: none;
    display: inline-block;
    zoom: 1
}

#korpnet-tab-headers.nav-pills,
#korpnet-tab-headers.nav-tabs {
    text-align: center
}

#korpnet-tab-content.tab-content {
    margin-top: 0
}

.btn-datatable {
    padding: 2px 7px
}

.btn-datatable>.glyphicon {
    margin-right: 0 !important
}

.glyphicon {
    margin-right: 5px
}

.fa {
    margin-right: 5px
}

body {
    background-image: url(/img/body-background.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover
}

.fc-day-grid-event>.fc-content {
    text-align: center;
    white-space: normal
}

.workorder-completed {
    background-color: var(--color-status-completed)
}

.workorder-completed-late {
    background-color: var(--color-status-completed);
    color: var(--color-status-completed-late-text)
}

.workorder-late {
    background-color: var(--color-status-late)
}

.workorder-declined {
    background-color: var(--color-status-declined)
}

.workorder-inspected {
    background-color: var(--color-status-inspected)
}

.workorder-approved {
    background-color: var(--color-status-approved)
}

.workorder-open,
.workorder-reopen {
    background-color: var(--color-status-open)
}

/* Status badge labels (tables & timeline) — same CSS vars as calendar */
.label-status-open         { background-color: var(--color-status-open); }
.label-status-reopen       { background-color: var(--color-status-reopen); }
.label-status-approved     { background-color: var(--color-status-approved); }
.label-status-inspected    { background-color: var(--color-status-inspected); }
.label-status-completed    { background-color: var(--color-status-completed); }
.label-status-late         { background-color: var(--color-status-late); }
.label-status-declined     { background-color: var(--color-status-declined); }
.label-status-corrected    { background-color: var(--color-status-completed); }
.label-status-closed       { background-color: var(--color-status-completed); }
.label-status-reported     { background-color: var(--color-status-open); }
.label-status-reopened     { background-color: var(--color-status-reopen); }
.label-status-started      { background-color: var(--color-status-approved); }
.label-status-resubmitted  { background-color: var(--color-status-approved); }
.label-status-scheduled    { background-color: var(--color-status-scheduled); }
.label-status-unknown      { background-color: var(--color-status-unknown); }

.tooltip-inner {
    white-space: pre-wrap
}

abbr {
    border-bottom: none !important;
    text-decoration: none !important
}




.ul-cover {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; 
  scrollbar-width: none;
  padding-left: 0;
  margin-left: 0;
}

@media (max-width: 600px) {
  .ul-cover {
    padding-left: 100px;
  }
}

@media (max-width: 500px) {
  .ul-cover {
    padding-left: 180px;
  }
}

@media (max-width: 400px) {
  .ul-cover {
    padding-left: 240px;
  }
}