:root {
    /* ══════════════════════════════════════════════
       LAYER 1: Fnyx brand palette
       Primary colours are Evergreen and Sage. Secondary colours are the
       approved data-visualization palette from the Fnyx identity guide.
       These must ONLY be referenced inside :root.
       ══════════════════════════════════════════════ */
    --fnyx-evergreen: #002600;
    --fnyx-evergreen-dark: #001a00;
    --fnyx-sage: #e3f5e8;
    --fnyx-brown: #934d11;
    --fnyx-orange: #dc582a;
    --fnyx-blue: #005587;
    --fnyx-purple: #615e9b;
    --fnyx-teal: #05868e;
    --fnyx-green: #4a7729;

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

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

    /* ── Status (mapped from brand) ── */
    --color-status-open: var(--fnyx-brown);
    --color-status-approved: var(--fnyx-blue);
    --color-status-inspected: var(--fnyx-blue);
    --color-status-completed: var(--fnyx-green);
    --color-status-late: var(--fnyx-orange);
    --color-status-declined: #707070;
    --color-status-reopen: var(--color-status-open);
    --color-status-completed-late-text: var(--color-status-late);
    --color-status-scheduled: var(--fnyx-teal);
    --color-status-unknown: var(--fnyx-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-color: var(--fnyx-sage);
    background-image: radial-gradient(circle at 80% 90%, #ffffff 0, rgba(255,255,255,.78) 34%, rgba(227,245,232,.92) 72%);
    background-attachment: fixed;
    background-size: cover
}

.brand-logo {
    display: block;
    height: auto;
    object-fit: contain;
}

.brand-logo--nav {
    max-height: 36px;
    max-width: 120px;
    width: auto;
}

.brand-logo--login {
    margin: 0 auto;
    max-width: 430px;
    padding: 30px;
    width: 70%;
}

.brand-product-name {
    color: var(--fnyx-evergreen);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin: -18px 0 24px;
}

.navbar-inverse {
    background-color: var(--fnyx-evergreen);
    border-color: var(--fnyx-evergreen-dark);
}

.navbar-inverse .brand-logo--nav {
    filter: brightness(0) invert(1);
}

.navbar-inverse .navbar-nav > li > a {
    color: var(--fnyx-sage);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-success,
.label-success {
    background-color: var(--fnyx-green);
    border-color: #36591e;
}

.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;
  }
}