/* Palette and assets supplied in the CCEPMP2 colour scheme. */
:root {
  --fui-header: #F5F5F5;
  --fui-header-border: #ddd;
  --fui-red: #F40009;
  --fui-paper: #F5F5F5;
  --fui-ink: #240000;
  --fui-selection: #C3FFFF;
}

/* Loaded after the page styles so every card uses the same header treatment. */
.card-header,
.table-card > .header,
.cancelled-header,
.system-info-heading,
.system-info-tile > h3,
.system-info-tile-heading,
.flwindow-header,
.modal-header,
.kpi-dialog-header,
.kpi-step-heading,
.kpi-data-panel > summary,
.login-card-heading,
.table-card > h4,
.trailer-overwrite-dialog > h3,
#editDeliveryForm > h3,
#skipGoalForm > h3 {
  background: var(--fui-header);
  color: var(--fui-ink);
  border-color: var(--fui-header-border);
  border-bottom: 1px solid var(--fui-header-border);
}

.card-header :is(h2, h3, h4),
.table-card > .header h3,
.system-info-heading :is(h2, .system-info-updated),
.system-info-tile-heading h3,
.kpi-dialog-header h2 {
  color: inherit;
}

.system-info-heading {
  margin: -8px -12px 8px;
  padding: 10px 12px;
  border-radius: 13px 13px 0 0;
}
.system-info-tile > h3,
.system-info-tile-heading {
  margin: -7px -9px 7px;
  padding: 7px 9px;
  border-radius: 8px 8px 0 0;
}
.footer-right img { width: 113px; height: auto; }
.logo img { width: 200px; height: auto; }
.table-card > .header > img { width: 32px; height: 28px; object-fit: contain; }
.table-icon { object-fit: contain; }

.cancelled-header { margin: -10px -12px 0; padding: 10px 12px; border-radius: 7px 7px 0 0; }
.orders-window-heading { padding: 0; background: transparent; color: inherit; }
.orders-window-close,
.kpi-dialog-close { color: #000; border-color: #000; }
.kpi-step-heading { margin: -18px -18px 0; padding: 12px 18px; border-radius: 13px 13px 0 0; }
.table-card > h4 { margin: -10px -10px 10px; padding: 12px 16px; }
.trailer-overwrite-dialog > h3,
#editDeliveryForm > h3,
#skipGoalForm > h3 { padding: 10px 12px; }
.panel > .table-card > h4 {
  margin: 0 -20px 16px;
  padding: 12px 20px;
  background: var(--fui-header);
  color: var(--fui-ink);
  border-radius: 11px 11px 0 0;
}
:is(#scenario-access, #working-hours) > .table-card > h4 { margin-top: -20px; }

.kpi-card > .card-header { background: var(--fui-header); color: var(--fui-ink); border-color: var(--fui-header-border); }
.kpi-card > .card-header > .table-icon { filter: none; }
.ag-theme-alpine .ag-cell.status-action-cell,
.ag-theme-alpine .ag-header-cell.status-action-header {
  border-left: 1px solid #b5b5b5;
}
#trailersGrid .trailer-command-cell { flex-wrap: wrap; align-content: center; }
#trCard.expanded { min-height: 0; }
#trCardContent { flex: 0 0 auto; }
#trCard #trailersGrid { height: auto; }
#trailersGrid .ag-layout-auto-height .ag-center-cols-viewport,
#trailersGrid .ag-layout-auto-height .ag-center-cols-container { min-height: 56px; }
#trailersGrid .ag-overlay-no-rows-wrapper.ag-layout-auto-height { padding-top: 0; }
#fireAlarmsGrid .ag-cell.status-action-cell { display: flex; align-items: center; }
#fireAlarmsGrid .status-action-cell .custom-button { font-size: 12px; }

/* Login follows the supplied centered CCEP / Aitonomi sketch. */
.login-page { margin: 0; min-height: 100vh; background: #f7f8f9; color: var(--fui-ink); font: 24px Arial, sans-serif; }
.login-powered-by { position: absolute; top: 20px; right: 24px; display: flex; align-items: baseline; gap: 30px; color: #000; font-size: 24px; }
.login-powered-by img { width: 320px; height: auto; }
.login-main { box-sizing: border-box; min-height: 100vh; padding: 180px 24px 60px; display: flex; flex-direction: column; align-items: center; }
.login-ccep { width: 450px; max-width: 80vw; height: auto; }
.login-main h1 { margin: 96px 0; text-align: center; font-size: 48px; line-height: 1.2; }
.login-card { box-sizing: border-box; width: 550px; max-width: 100%; background: #fff; border: 1px solid #d3d3d3; border-radius: 7px; box-shadow: 0 2px 6px #00000014; overflow: hidden; }
.login-card-heading { margin: 0; padding: 32px 22px 40px; text-align: center; font-size: 32px; line-height: 38px; font-weight: 400; }
.login-card form { padding: 8px 22px 18px; }
.login-field { margin-bottom: 28px; }
.login-field:last-of-type { margin-bottom: 14px; }
.login-field label { display: block; margin-bottom: 5px; color: #000; font-size: 24px; line-height: 29px; }
.login-field input { box-sizing: border-box; width: 100%; height: 52px; padding: 8px 12px; border: 1px solid #d5dce2; border-radius: 8px; box-shadow: inset 0 0 0 1px #edf0f3; font: inherit; }
.login-field input:focus-visible { outline: 2px solid #10ACE1; outline-offset: 2px; }
.login-submit { width: 100%; height: 64px; padding: 10px; font: inherit; font-size: 32px; cursor: pointer; }

.login-submit:focus-visible { outline: 2px solid var(--fui-ink); outline-offset: 3px; }
.login-error { margin: 16px 16px 0; padding: 10px; border: 1px solid var(--fui-red); background: #fff1f1; color: var(--fui-ink); }
@media (max-width: 700px) {
  .login-page { font-size: 16px; }
  .login-main { padding-top: 120px; }
  .login-ccep { width: 290px; }
  .login-main h1 { font-size: 28px; margin: 48px 0; }
  .login-powered-by { top: 20px; right: 20px; gap: 10px; font-size: 12px; }
  .login-powered-by img { width: 160px; }
  .login-card-heading { padding: 24px 16px; font-size: 24px; line-height: 30px; }
  .login-card form { padding: 8px 16px 18px; }
  .login-field { margin-bottom: 20px; }
  .login-field label { font-size: 16px; line-height: 20px; }
  .login-field input { height: 42px; }
  .login-submit { height: 48px; font-size: 20px; }
}

/* Device commands and delivery-edit actions use red. Chart bars keep their data colours.
   Important overrides the legacy inline button colours in page templates. */
body button:not(.kpi-bar):not([class*="ag-"]) {
  background: #fff !important;
  color: #4b1118 !important;
  border: 1px solid #4b1118 !important;
  border-radius: 3px;
}
body button:not(.kpi-bar):not([class*="ag-"]):hover:not(:disabled) {
  background: #fff0f0 !important;
}
body button.device-action:not(.kpi-bar),
body button.delivery-edit-action:not(.kpi-bar) {
  background: var(--fui-red) !important;
  color: #fff !important;
  border-color: var(--fui-red) !important;
}
body button.device-action:not(.kpi-bar):hover:not(:disabled),
body button.delivery-edit-action:not(.kpi-bar):hover:not(:disabled) {
  background: #c90008 !important;
}
body button:disabled { opacity: .5; cursor: default; }
body button:focus-visible { outline: 2px solid #240000; outline-offset: 2px; }

body button.orders-window-close:not(.kpi-bar),
body button.orders-window-close:not(.kpi-bar):hover:not(:disabled) {
  background: transparent !important;
  color: #fff !important;
  border-color: transparent !important;
}
body button.orders-window-close:focus-visible { outline-color: #fff; }

/* The login reference uses a red submit button. */
body.login-page button.login-submit {
  background: #ff0000 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0;
}
body.login-page button.login-submit:hover:not(:disabled) { background: #d90000 !important; }

/* Status card layout and controls follow the supplied Status screenshot. */
.status-overview {
  display: grid;
  gap: 16px;
  padding: 14px;
}
.status-overview .status-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 70px;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 8px #00000012;
}
.status-overview .status-card:not(.expanded) { padding-bottom: 12px; }
.status-overview .status-card > .header {
  box-sizing: border-box;
  min-height: 50px;
  padding: 1px 12px;
  gap: 16px;
  background: var(--fui-header);
  color: var(--fui-ink);
  border-bottom: 1px solid var(--fui-header-border);
}
.status-overview .status-card > .header h3 {
  font-size: 24px;
  line-height: 29px;
}
.status-overview .status-card > .header > .status-card-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0;
  object-fit: contain;
}
.status-device-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
  margin: 12px 6px 0;
}
body .status-overview button.status-toggle {
  box-sizing: border-box;
  width: 46px;
  height: 36px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  background: #ff0000 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px;
}
body .status-overview button.status-toggle:hover:not(:disabled) {
  background: #d90000 !important;
}
.status-overview #tlLockAllButton { padding: 6px 10px; font-size: 16px; }
@media (max-width: 1000px) {
  .status-device-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .status-overview { padding: 10px; }
  .status-device-row { margin-inline: 0; gap: 16px; }
  .status-overview .status-card > .header { gap: 10px; }
  .status-overview .status-card > .header h3 { font-size: 20px; }
  .status-overview .status-card > .header.header-with-action {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    padding-left: 70px;
  }
  .status-overview #tlLockAllButton {
    position: static;
    grid-column: 1 / -1;
    justify-self: center;
    margin-bottom: 6px;
    transform: none;
  }
}