/* SPS v12.1.88 appearance, measured in the authenticated UI on 2026-10-30.
   Load after application styles and before print.css. Styling only.
   Integration and visual verification against the current TMS build are pending. */
@font-face {
  font-family: Overpass;
  src: url('/vendor/overpass.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@media screen {
  :root {
    --side: 270px;
    --ink: #2c2e38;
    --muted: #7e8393;
    --surface: #fff;
    --canvas: #fafbff;
    --line: #e2e6ed;
    --sps-sidebar: #272d4b;
    --sps-sidebar-text: #a8abb7;
    --sps-control: #eff3fe;
    --sps-action: #00a351;
    --red: #00a351;
    --sps-shadow: 0 0 15px 3px rgba(0, 103, 203, .05);
    font-family: Overpass, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--canvas);
  }
  body { background: var(--canvas); }
  h1,h2,h3,h4 { color: var(--ink); letter-spacing: 0; }
  h1 { font-size: 22px; font-weight: 600; }
  h2 { font-size: 20px; font-weight: 600; }
  h3 { font-size: 16px; font-weight: 600; }
  p,small { color: var(--muted); }
  button,input,select,textarea { font-family: inherit; }
  button {
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
  }
  button:hover:not(:disabled) { background: var(--sps-control); border-color: var(--line); }
  button.primary,.heading #page-actions .primary {
    color: var(--sps-action);
    background: var(--sps-control);
    border-color: transparent;
    box-shadow: none;
  }
  button.primary:hover:not(:disabled) {
    color: #fff;
    background: var(--sps-action);
    border-color: var(--sps-action);
  }
  .danger { color: #b82435; }
  button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
    outline: 2px solid #00a351;
    outline-offset: 3px;
  }
  input:not([type=checkbox]):not([type=radio]),select,textarea {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--ink);
    background: #fff;
    font-size: 14px;
  }
  input:focus,select:focus,textarea:focus {
    border-color: var(--sps-action);
    outline: 2px solid #00a35125;
    outline-offset: 1px;
    box-shadow: none;
  }
  input::placeholder,textarea::placeholder { color: #a8abb7; }
  input:read-only,input:disabled,select:disabled,textarea:disabled { background: #f4f5fa; color: #7e8393; }
  input[type=checkbox],input[type=radio] { accent-color: var(--sps-action); }
  label,.field-label { color: var(--ink); font-size: 12px; font-weight: 500; }
  .sidebar {
    width: var(--side);
    background: var(--sps-sidebar);
    color: var(--sps-sidebar-text);
    border: 0;
    border-radius: 0 16px 16px 0;
    overflow: hidden;
  }
  .brand { min-height: 70px; height: 70px; padding: 0 20px; color: #fff; font-size: 25px; }
  .brand-mark { background: #fff; color: var(--sps-sidebar)!important; border-radius: 6px; box-shadow: none; }
  .brand>span:last-child { color: #fff; }
  .workspace-label { padding: 12px 20px; color: var(--sps-sidebar-text); font-size: 10px; }
  .sidebar nav { padding: 0; }
  .sidebar .nav-section-toggle,.sidebar nav .nav-main {
    min-height: 56px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-bottom: 1px solid #ffffff08;
    border-radius: 0;
    color: var(--sps-sidebar-text);
    background: transparent;
    font-size: 14px;
    font-weight: 500;
  }
  .sidebar .current-section>.nav-section-toggle,
  .sidebar .nav-section[data-section=finance].current-section>.nav-section-toggle,
  .sidebar nav .nav-main.active {
    color: #fff;
    background: #ffffff08;
  }
  .sidebar .nav-section-items { margin: 0; padding: 0; border: 0; }
  .sidebar .nav-section-items>.nav-item {
    min-height: 48px;
    margin: 0;
    padding: 12px 20px 12px 45px;
    border: 0;
    border-bottom: 1px solid #ffffff08;
    border-radius: 0;
    color: var(--sps-sidebar-text);
    font-size: 14px;
    background: transparent;
  }
  .sidebar .nav-section-items>.nav-item.active,
  .sidebar .nav-section[data-section=finance] .nav-item.active,
  .sidebar .order-queues button.active {
    color: #fff;
    background: #20263f;
    box-shadow: none;
  }
  .sidebar nav button:hover:not(:disabled) { background: #ffffff08; color: #fff; }
  .sidebar .order-queues { margin: 0; padding: 0 0 0 20px; border: 0; }
  .sidebar .order-queues button { color: var(--sps-sidebar-text); min-height: 38px; border-radius: 0; }
  .sidebar .queue-count { color: #d5d7e2; background: #ffffff10; border: 0; }
  .sidebar-foot { padding: 14px 20px; color: var(--sps-sidebar-text); background: var(--sps-sidebar); border-top: 1px solid #ffffff12; }
  .sidebar-foot small { color: var(--sps-sidebar-text); }
  .sidebar-foot button { color: #fff; background: transparent; border-color: #ffffff25; }
  .shell>header {
    height: 70px;
    padding: 0 20px;
    background: #fff;
    border: 0;
    box-shadow: var(--sps-shadow);
    backdrop-filter: none;
  }
  .shell>header .sidebar-toggle,.shell>header .global-back {
    min-height: 38px;
    background: var(--sps-control);
    border-color: transparent;
    border-radius: 6px;
    color: #7e8393;
  }
  .shell>header .sidebar-toggle { width: 38px; padding: 0; }
  .header-location { font-size: 16px; }
  .breadcrumb { font-size: 12px; color: #a8abb7; }
  .global-order-search input { font-size: 14px; background: var(--canvas); border-color: var(--line); border-radius: 8px; }
  .entity-switch select { font-size: 12px; border-radius: 6px; }
  .release-badge { background: var(--canvas); border-color: var(--line); }
  main { padding: 20px; }
  .heading { margin-bottom: 20px; }
  .heading p { font-size: 12px; }
  .panel,.filter-block,.form-block,.workspace-card {
    border: 0;
    border-radius: 6px;
    box-shadow: var(--sps-shadow);
    background: #fff;
  }
  .block-heading { padding: 16px 20px; border-radius: 6px 6px 0 0; border-color: var(--line); background: #fff; }
  .block-body,.filter-block { padding: 20px; }
  .filter-row { background: #fff; border-color: var(--line); }
  .list-caption { padding: 16px 20px; border-color: var(--line); }
  table { border-collapse: separate; border-spacing: 0 2px; }
  th { padding: 10px 20px; color: #a8abb7; background: var(--canvas); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; border: 0; }
  td { padding: 10px 20px; background: #fff; color: var(--ink); font-size: 14px; border: 0; }
  tr:hover td { background: #f5f7fe; }
  .table-footer,.order-pagination { border-color: var(--line); font-size: 12px; }
  .order-link { color: var(--sps-action); border-color: transparent; background: var(--sps-control); font-size: 14px; white-space: nowrap; }
  .segmented { background: var(--sps-control); border-radius: 6px; border-color: transparent; }
  .segmented button { border: 0; background: transparent; color: #a8abb7; }
  .segmented button.active,.segmented button[aria-pressed=true] { color: var(--sps-action); background: #fff; box-shadow: none; }
  .dossier-top,.modal-head,.modal-foot,.dossier-foot { background: #fff; border-color: var(--line); }
  .dossier-tabs { background: var(--canvas); border-color: var(--line); }
  .dossier-tabs button { color: #7e8393; }
  .dossier-tabs button.active { color: var(--sps-action); border-color: var(--sps-action); background: #fff; }
  dialog,.order-panel { color: var(--ink); border-color: var(--line); border-radius: 8px; }
  .stop-card,.goods-card,.planning-card,.invoice-block,.cmr-drop-card { border-color: var(--line); border-radius: 6px; box-shadow: none; }
  .stop-card-top,.goods-card-head,.planning-lane-head { background: var(--canvas); border-color: var(--line); }
  .planning-workbar,.planning-lane,.planning-stat,.workspace-metric { border-color: var(--line); border-radius: 6px; }
  .planning-categories button.active { box-shadow: inset 0 -3px var(--sps-action); color: var(--sps-action); }
  .cmr-drop-zone,.invoice-drop-zone { border-color: #a8abb7; border-radius: 6px; background: var(--canvas); }
  .cmr-drop-zone.drag-over,.invoice-drop-zone.drag-over { border-color: var(--sps-action); background: #effaf4; }
  .auth-screen { background: var(--canvas); }
  .login-card { border-top-color: var(--sps-action); box-shadow: var(--sps-shadow); }
  @media (max-width: 1050px) {
    .shell>header { gap: 8px; padding-inline: 14px; }
    .header-location { font-size: 14px; }
    .global-order-search { min-width: 120px; }
    main { padding: 16px; }
  }
  @media (max-width: 750px) {
    :root { --side: 0px; }
    .shell { margin-left: 0; min-width: 0; }
    .sidebar { width: 270px; transform: translateX(-100%); visibility: hidden; }
    .mobile-menu-open .sidebar { width: min(270px,85vw); transform: translateX(0); visibility: visible; }
    .mobile-menu-open .sidebar .nav-section-items { margin: 0; border: 0; }
    .mobile-menu-open .sidebar nav { padding: 0; }
    .shell>header { min-height: 70px; height: auto; padding-block: 10px; }
    .shell>header .header-right { min-width: 0; }
    .shell>header .global-order-search { min-width: 0; flex: 1; }
    .shell>header .global-order-search input { width: 100%; }
    .heading,.list-caption { flex-wrap: wrap; gap: 12px; }
    .heading>div { min-width: 0; }
    .heading p { overflow-wrap: anywhere; }
    main { padding: 14px; }
    td,th { padding: 10px 14px; }
    .block-body,.filter-block { padding: 16px; }
    button { min-height: 38px; }
  }
  @media (prefers-reduced-motion: reduce) {
    button,a,input,select,textarea { transition: none; }
  }
  input[type=checkbox],input[type=radio] { padding: 0; min-height: 16px; width: 16px; height: 16px; }
  .interface-switch select { min-height: 30px; padding: 5px; }
}