/* Fleet uses the existing 9:16 master proportions and app palette.
   Dynamic text and frames replace baked-in sample numbers; PNG archives stay intact. */
.screen-fleet { container-type: inline-size; background: #080808; }
.fleet-frame { position: absolute; inset: .55% 6.25% 1.35%; border: .3cqw solid var(--orange); border-radius:var(--frame-radius); padding: 2.3cqw 1.65cqw; display: grid; grid-template-rows: 11.6cqw minmax(0,1fr) 7cqw; gap: 1.7cqw; }
.fleet-header { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 0 1cqw; }
.fleet-titles { min-width: 0; }
.fleet-brand { margin: 0 0 .7cqw; color: #bcbcbc; font: 700 2.6cqw/1.1 Arial,sans-serif; }
.fleet-title { margin: 0; color: var(--orange); font: 800 5.8cqw/1.5 Arial,sans-serif; white-space: nowrap; }
.fleet-page-badge { display: grid; place-items: center; flex: 0 0 11cqw; height: 7.4cqw; border: .3cqw solid var(--orange); border-radius:var(--frame-radius); color: var(--orange); font: 700 3cqw/1 Arial,sans-serif; white-space: nowrap; }
.fleet-list { min-height: 0; display: grid; grid-template-rows: repeat(4,minmax(0,1fr)); gap: 1.15cqw; }
.fleet-item, .fleet-placeholder { min-height: 0; min-width: 0; }
.screen-fleet .fleet-record { position: relative; display: grid; grid-template-columns: 29% minmax(0,1fr) 29%; grid-template-rows: .85fr 1fr 1fr; gap: .8cqw 1.15cqw; width: 100%; height: 100%; padding: 1.35cqw; border: .24cqw solid #bcbcbc; border-radius:var(--frame-radius); color: #fff; background: #080808; text-align: left; font-family: Arial,sans-serif; touch-action: manipulation; }
.screen-fleet .fleet-record:focus-visible { outline: .45cqw solid var(--orange); outline-offset: .2cqw; }
.fleet-name { align-self: center; min-width: 0; overflow: hidden; white-space: nowrap; color: #bcbcbc; font: 700 3.35cqw/1.15 Arial,sans-serif; padding: 0 .1cqw; }
.fleet-field { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; padding: .55cqw .85cqw .4cqw; border: .2cqw solid var(--neutral); border-radius:var(--frame-radius); overflow: hidden; }
.fleet-label { color: #bcbcbc; white-space: nowrap; font: 400 2.4cqw/1.12 Arial,sans-serif; }
.screen-fleet .fleet-value { position: static; display: block; min-width: 0; width: 100%; border: 0; background: transparent; padding: 0; border-radius: 0; white-space: nowrap; overflow: hidden; font: 700 3.45cqw/1.15 Arial,sans-serif; }
.fleet-maintenance .fleet-label, .fleet-plate .fleet-label { font-size: 2.05cqw; }
.fleet-maintenance .fleet-value { font-size: 2.6cqw; }
.fleet-plate .fleet-value { font-size: 3cqw; text-transform: uppercase; }
.fleet-manufacturer, .fleet-model { grid-column: 1 / 3; }
.fleet-mileage .fleet-value, .fleet-safety .fleet-value { text-align: center; font-size: 3.15cqw; }
.fleet-safety .fleet-label { font-size: 1.95cqw; text-align: center; }
.fleet-mileage .fleet-label { text-align: center; }
.fleet-field.status-safe { border-color: var(--neutral); box-shadow: none; }
.fleet-field.status-safe .fleet-value { color: var(--safe); }
.fleet-field.status-dueSoon { border-color: var(--neutral); box-shadow: none; }
.fleet-field.status-dueSoon .fleet-value { color: var(--due-soon); }
.fleet-field.status-overdue { border-color: var(--neutral); box-shadow: none; }
.fleet-field.status-overdue .fleet-value { color: var(--overdue); }
.fleet-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; gap: 3cqw; }
.fleet-nav { min-width: 0; padding: 0 .5cqw; border: .3cqw solid var(--orange); border-radius:var(--frame-radius); background: transparent; color: var(--orange); font: 700 3cqw/1 Arial,sans-serif; cursor: pointer; touch-action: manipulation; }
.fleet-nav:disabled { border-color: #555; color: #777; cursor: default; }
.fleet-nav:focus-visible { outline: .4cqw solid #fff; outline-offset: -.7cqw; }
.fleet-empty { grid-column: 1 / -1; color: #bcbcbc; font-size: 3.5cqw; text-align: center; }

/* Approved layout: field order from fleet aufbau.png. */
.screen-fleet .fleet-record {
  grid-template-columns: 35% minmax(0,1fr) 33%;
  grid-template-rows: repeat(3,minmax(0,1fr));
  grid-template-areas:
    "name plate safety"
    "manufacturer manufacturer maintenance"
    "model model mileage";
}
.fleet-name { grid-area: name; }
.fleet-plate { grid-area: plate; }
.fleet-safety { grid-area: safety; }
.fleet-manufacturer { grid-area: manufacturer; }
.fleet-maintenance { grid-area: maintenance; }
.fleet-model { grid-area: model; }
.fleet-mileage { grid-area: mileage; }

/* Two sibling buttons: the full-card target and the mileage editor never nest. */
.fleet-open { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.fleet-open:focus-visible { outline: .4cqw solid var(--orange); outline-offset: -.5cqw; }
.fleet-record > .fleet-field:not(.fleet-mileage), .fleet-record > .fleet-name { pointer-events: none; }
.fleet-record > .fleet-mileage { position: relative; z-index: 2; width: 100%; margin: 0; background: transparent; color: #fff; cursor: pointer; font-family: Arial,sans-serif; touch-action: manipulation; }
.fleet-mileage:focus-visible { outline: .4cqw solid var(--orange); outline-offset: -.5cqw; }
.fleet-nav-add { font-size: 2.6cqw; }

/* Approved four-record layout: larger text, with quiet empty capacity previews. */
.screen-fleet .fleet-name { font-size: min(3.6cqw, 23px); }
.screen-fleet .fleet-field { justify-content: center; gap: .25cqw; }
.screen-fleet .fleet-label { font-size: min(2.5cqw, 14px); }
.screen-fleet .fleet-value { font-size: min(4cqw, 26px); }
.screen-fleet .fleet-plate .fleet-label, .screen-fleet .fleet-maintenance .fleet-label { font-size: min(2.25cqw, 13px); }
.screen-fleet .fleet-safety .fleet-label { font-size: min(2.15cqw, 12px); }
.screen-fleet .fleet-plate .fleet-value { font-size: min(3.3cqw, 22px); }
.screen-fleet .fleet-maintenance .fleet-value { font-size: min(3.15cqw, 22px); }
.screen-fleet .fleet-placeholder { pointer-events: none; user-select: none; }
.screen-fleet .fleet-placeholder .fleet-record, .screen-fleet .fleet-placeholder .fleet-field { border-color: #303030; box-shadow: none; }
.screen-fleet .fleet-placeholder .fleet-name { color: #505050; }
.screen-fleet .fleet-placeholder .fleet-label { color: #414141; }
.screen-fleet .fleet-placeholder .fleet-value { color: #383838; }

.screen-fleet .fleet-maintenance .fleet-value, .screen-fleet .fleet-plate .fleet-value { text-align: center; }

/* Mileage remains the orange entry point; decorative empty records stay gray. */
.screen-fleet .fleet-item .fleet-mileage { border-color:var(--orange); border-width:.55cqw; border-radius:var(--frame-radius); }

.fleet-record > button.fleet-name { position:relative; z-index:2; pointer-events:auto; text-align:left; background:transparent; border:0; border-radius:0; cursor:text; touch-action:manipulation; }
.fleet-record > button.fleet-name:focus-visible { outline:2px solid var(--orange); }

.fleet-item { -webkit-touch-callout:none; user-select:none; }
.fleet-drag-placeholder { opacity:.15; outline:2px dashed var(--orange); outline-offset:-2px; }
.fleet-drag-layer { background:transparent; position:fixed; top:0; height:100vh; z-index:10000; pointer-events:none; container-type:inline-size; }
.fleet-drag-ghost { position:absolute; margin:0; opacity:.97; box-shadow:0 10px 30px #000b; outline:2px solid var(--orange); border-radius:var(--frame-radius); background:#111; }
.fleet-drag-ghost .fleet-record { height:100%; }
.fleet-order-position { margin:0; color:#bbb; }
.fleet-order-actions { justify-content:space-between; }

.screen-fleet .fleet-maintenance .fleet-label, .screen-fleet .fleet-plate .fleet-label { text-align:center; }

/* Short plates fill the available value area; longer plates still fit automatically. */
.screen-fleet .fleet-plate .fleet-value { font-size:5.4cqw; flex:0 1 auto; }

.screen-fleet .fleet-record { grid-template-columns:minmax(0,1fr) 17.5cqw 24cqw; }
.screen-fleet .fleet-name { font-size:min(4cqw,26px); }

.screen-fleet .fleet-plate .fleet-value { font-size:3.8cqw; }
.screen-fleet .fleet-brand { font-size:3cqw; }