/* Desktop worksheet polish. Loaded after mobile.css so the phone layout keeps
   its existing rules and these declarations only apply at 741px and above. */
@media (min-width: 741px) {
  :root {
    --desktop-control-height: 44px;
    --desktop-focus: rgba(31, 111, 235, .18);
  }

  .container { max-width: 1320px; }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea, button { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea {
    min-height: var(--desktop-control-height);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: .55rem .75rem;
  }
  input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 3px solid var(--desktop-focus);
    outline-offset: 1px;
    border-color: var(--primary);
  }
  .btn { min-height: var(--desktop-control-height); padding: .55rem 1rem; }
  .btn.small { min-height: 36px; }

  #linjer, #timer, #maskine { scroll-margin-top: 1rem; }
  #linjer > h2, #timer > h2, #maskine h2 { font-size: 1.15rem; }

  #linjer .add-line-panel {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .05);
  }
  #linjer .add-line-panel.editing {
    background: #fffbeb;
    border-color: #fcd34d;
  }
  #linjer .scan-bar {
    gap: .7rem;
    padding: .65rem .75rem;
    background: #eef5ff;
    border-color: #bfdbfe;
  }
  #linjer .scan-bar .scan-input { flex: 1 1 360px; }
  #linjer .scan-bar .scan-input input {
    min-height: 48px;
    font-size: 17px;
    font-weight: 600;
    border-color: #93c5fd;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
  }
  #linjer .scan-bar > .btn { min-height: 48px; }

  #linjer .line-grid { gap: .7rem .9rem; }
  #linjer .line-grid label,
  #timer > .line-form label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #475569;
  }
  #linjer .line-grid input, #linjer .line-grid select,
  #timer > .line-form input, #timer > .line-form select { min-height: 44px; }
  #linjer .line-grid .lf-desc input { font-weight: 500; }
  #linjer .line-grid .lf-actions { align-self: end; }
  #linjer .line-grid .lf-actions .btn { flex: 1 1 auto; }
  #linjer .line-grid .serial-row { max-width: none; }

  #linjer .ws-rows { table-layout: fixed; }
  #linjer .ws-rows th, #linjer .ws-rows td { padding: .7rem .85rem; }
  #linjer .ws-rows th:nth-child(1) { width: 6%; }
  #linjer .ws-rows th:nth-child(2) { width: 18%; }
  #linjer .ws-rows th:nth-child(3) { width: 42%; }
  #linjer .ws-rows th:nth-child(4) { width: 10%; }
  #linjer .ws-rows th:nth-child(5) { width: 10%; }
  #linjer .ws-rows th:nth-child(6) { width: 14%; }
  #linjer .ws-rows td { font-size: .96rem; }
  #linjer .ws-rows td.c-main { font-weight: 600; }
  #linjer .ws-rows td.c-full { overflow-wrap: anywhere; }
  #linjer tr.editing td { background: #fffbeb; box-shadow: inset 0 2px #fcd34d, inset 0 -2px #fcd34d; }
  #linjer .row-actions { gap: .45rem; flex-wrap: wrap; }

  /* Timer uses the same clear entry panel treatment as the item form. */
  #timer > .line-form {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) minmax(145px, .9fr) minmax(90px, .55fr) minmax(110px, .7fr) minmax(220px, 1.7fr) auto;
    gap: .7rem .85rem;
    align-items: end;
    margin: 0 0 1rem;
    padding: .9rem 1rem 1rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .05);
  }
  #timer > .line-form.editing {
    background: #fffbeb;
    border-color: #fcd34d;
  }
  #timer > .line-form .line-form-title {
    grid-column: 1 / -1;
    color: #92400e;
  }
  #timer > .line-form .btn { align-self: end; }
  #timer > .line-form.editing > .btn.primary { grid-column: 6; grid-row: 2; }
  #timer > .line-form.editing > .btn:not(.primary) { grid-column: 6; grid-row: 3; }
  #timer > .line-form label { min-width: 0; }
  #timer > .line-form label.grow { min-width: 0; }
  #timer > .line-form input, #timer > .line-form select { width: 100%; }
  #timer .ws-rows th, #timer .ws-rows td { padding: .7rem .85rem; }
  #timer .ws-rows td { font-size: .96rem; }
  #timer tr.editing td { background: #fffbeb; box-shadow: inset 0 2px #fcd34d, inset 0 -2px #fcd34d; }

  #maskine {
    padding: 1.15rem 1.3rem;
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  }
  #maskine .kv { grid-template-columns: minmax(145px, 190px) 1fr; gap: .55rem 1rem; }
  #maskine .kv dt { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  #maskine .kv dd { font-size: 1rem; }
}

@media (min-width: 741px) and (max-width: 1050px) {
  #linjer .line-grid {
    grid-template-columns: minmax(110px, 1fr) minmax(140px, 2fr) minmax(78px, .8fr) minmax(78px, .8fr);
    grid-template-areas: "itemno desc desc desc" "qty unit actions actions" "serial serial serial serial";
  }
  #linjer .line-grid.no-serial { grid-template-areas: "itemno desc desc desc" "qty unit actions actions"; }
  #linjer .line-grid .lf-actions { justify-content: flex-start; }
  #timer > .line-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #timer > .line-form label.grow { grid-column: 1 / span 3; }
  #timer > .line-form > .btn { grid-column: 4; }
  #timer > .line-form.editing > .btn.primary { grid-column: 4; grid-row: 2; }
  #timer > .line-form.editing > .btn:not(.primary) { grid-column: 4; grid-row: 3; }
}

@media (min-width: 741px) and (max-width: 820px) {
  .topnav {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    padding: .65rem 1rem;
  }
  .topnav .spacer { display: none; }
  .topnav form { margin-left: auto; }

  #timer > .line-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #timer > .line-form label.grow, #timer > .line-form > .btn { grid-column: auto; }
  #timer > .line-form.editing > .btn.primary,
  #timer > .line-form.editing > .btn:not(.primary) { grid-column: auto; grid-row: auto; }
  #timer > .line-form.editing label.grow { grid-column: 1 / -1; }
  #timer > .line-form > .btn { justify-self: start; }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .topnav {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    padding: .65rem 1rem;
  }
  .topnav .spacer { display: none; }
  .topnav form { margin-left: auto; }
}