/* Produkter & priser (Patrik 10-14 natt: "kolla prisrad och rutan jag klickar upp"; "dom gråa har lite fel färg").
   Radtyp (Prisrad/Informationsrad, admin-catalog.css:2196) och paketets flikar var en tung grå platta ⇒ pills enligt standarden.
   Låsta fält (nordic-dawn.css:3339/3345, admin-overrides.css:622) fick en kall blågrå platta ⇒ svag ton av temats text. */
@media (min-width: 769px) {
  html body #view-admin #box-prices .office-row-kind-picker.office-row-kind-picker {
    background: transparent !important; border: none !important; padding: 0 !important; gap: 6px !important; box-shadow: none !important;
  }
  html body #view-admin #box-prices .office-row-kind-option.office-row-kind-option,
  html body #view-admin #box-prices .office-package-components-tab.office-package-components-tab {
    padding: 4px 12px !important; border-radius: 999px !important; font-weight: 600 !important; font-size: 12px !important;
    background: var(--pill-state-idle-bg) !important; box-shadow: none !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 22%, transparent) !important;
    color: var(--text-secondary) !important;
  }
  html body #view-admin #box-prices .office-row-kind-option.office-row-kind-option[data-active="true"],
  html body #view-admin #box-prices .office-package-components-tab.office-package-components-tab[data-active="true"] {
    background: var(--pill-state-active-bg) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important;
    color: var(--text-primary) !important;
  }
  html body #view-admin #box-prices .office-row-kind-option.is-disabled:not([data-active="true"]) { opacity: .7; }
  html body #view-admin #admin-detail-content :is(input:disabled, input[readonly], select:disabled, textarea:disabled, textarea[readonly]):not([type="color"]):not([type="checkbox"]):not([type="radio"]) {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
    border-color: color-mix(in srgb, var(--border-color) 35%, transparent) !important;
    color: var(--text-primary) !important;
    opacity: .9 !important;
  }
  /* Utfälld rad (Lokal info i kundchatten): skarp mörkgrön ram ⇒ mjuk accentkant, samma platta som behörighetsrutorna. */
  html body #view-admin #box-prices .office-service-note-editor.office-service-note-editor {
    border-color: color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
    background: color-mix(in srgb, var(--accent-primary) 6%, transparent) !important;
    box-shadow: none !important;
  }
}
/* Paketets tredje flik (office-package-components-tab-slot, admin-package-variation.css) hade en hård 1px avdelare till vänster
   (Patrik: "blev en hård linje när paket fanns med som tredje flik") ⇒ ingen linje, bara samma luft som mellan pillsen. */
@media (min-width: 769px) {
  html body #view-admin #box-prices .office-package-components-tab-slot.office-package-components-tab-slot {
    border-left: none !important; padding-left: 0 !important; margin-left: 0 !important;
  }
}
/* Med tre flikar trycktes pillsen ihop och texten klipptes (option har min-width:0 i admin-catalog.css:2207)
   ⇒ pillsen behåller sin bredd och raden bryts hellre. */
@media (min-width: 769px) {
  html body #view-admin #box-prices .office-row-kind-picker.office-row-kind-picker { flex-wrap: wrap !important; row-gap: 6px !important; }
  html body #view-admin #box-prices .office-row-kind-option.office-row-kind-option,
  html body #view-admin #box-prices .office-package-components-tab.office-package-components-tab { flex: 0 0 auto !important; min-width: max-content !important; padding: 4px 11px !important; }
}
/* Paketinnehållet (office-package-components-view + package-component-row) tonades med mörk marinblå 10–13 % ovanpå
   den gröna rutan ⇒ grumligt grått (Patrik: "lite off i färgen") ⇒ temats accentton i stället. */
@media (min-width: 769px) {
  html body #view-admin #box-prices .office-package-components-view.office-package-components-view {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--accent-primary) 16%, transparent) !important;
  }
  html body #view-admin #box-prices .package-component-row.package-component-row {
    background: color-mix(in srgb, var(--accent-primary) 9%, transparent) !important;
    border-color: transparent !important;
  }
}
/* Öppettidernas + och × (hours-add-btn/hours-remove-btn): grå resp. röd ring runt knappen (Patrik: "dom runda ringarna runt + var fula")
   ⇒ ingen ring, + = ren ikon som Avbryt/Spara bredvid (platta bara vid hovring); × = svag röd platta. */
@media (min-width: 769px) {
  html body .hours-add-btn.hours-add-btn, html body .hours-remove-btn.hours-remove-btn {
    border-color: transparent !important; box-shadow: none !important;
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent) !important;
    color: var(--accent-primary) !important;
  }
  html body .hours-add-btn.hours-add-btn { background: transparent !important; }
  html body .hours-remove-btn.hours-remove-btn { background: color-mix(in srgb, #e5484d 9%, transparent) !important; color: #e5484d !important; }
  html body .hours-add-btn.hours-add-btn:hover { background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important; }
  html body .hours-remove-btn.hours-remove-btn:hover { background: color-mix(in srgb, #e5484d 16%, transparent) !important; }
  html body .hours-add-btn.hours-add-btn svg { width: 17px !important; height: 17px !important; }
  html body .hours-add-btn.hours-add-btn { padding: 3px !important; width: 26px !important; height: 26px !important; }
}
/* Produkter & Priser (kontorsdetalj), upplåst: paketikonerna till vänster, avbryt/spara längst till höger
   (Patrik 10-14 natt), ikonerna utan ram med mjuk hovereffekt ("ta bort rektangeln runt ikonerna"). */
@media (min-width: 769px) {
  html body #view-admin #box-prices .admin-config-section-heading > div:last-child {
    flex: 1 1 auto !important; justify-content: flex-start !important; gap: 6px !important;
  }
  html body #view-admin #box-prices .admin-config-section-heading > div:last-child > :last-child {
    margin-left: auto !important;
  }
  html body #view-admin #office-package-actions button.btn-glass-small {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    border-radius: 50% !important; transition: background-color .15s ease, color .15s ease, transform .15s ease;
  }
  html body #view-admin #office-package-actions button.btn-glass-small:hover {
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
    color: var(--accent-primary) !important; transform: translateY(-1px);
  }
}

/* Prisradens (i) fäller ut lokal info (Patrik 10-15: "svårt att förstå att den (i) går att klicka på för att flika ut raderna,
   går det tydliggöra subtilt"): märket blir en liten pill "i ▾" med mjuk ton; chevronen vänds när raden är utfälld.
   Rader som redan har info behåller sin fyllda accent (admin-catalog.css:2289). */
@media (min-width: 769px) {
  html body #box-prices .office-service-note-btn.office-service-note-btn {
    width: auto !important; min-width: 0 !important; height: 20px !important; min-height: 20px !important;
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
    padding: 0 6px 0 7px !important; border-radius: 999px !important;
    font-style: normal !important; font-weight: 700 !important;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent) !important;
    background: color-mix(in srgb, var(--accent-primary) 9%, transparent) !important;
    color: var(--accent-primary) !important; opacity: 1 !important;
  }
  html body #box-prices .office-service-note-btn::after {
    content: ""; width: 9px; height: 9px; flex: none; background: currentColor; transition: transform .18s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html body #box-prices .price-row:has(.office-service-note-editor) .office-service-note-btn::after { transform: rotate(180deg); }
  html body #box-prices .office-service-note-btn.office-service-note-btn:not(.has-note):hover {
    background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent) !important;
  }
  html body #box-prices .office-service-note-btn.office-service-note-btn.has-note {
    background: var(--accent-primary) !important; color: #fff !important;
  }
}

/* Varierade prisrader (sandbox): lokal lektionslängd + antal lektioner i paket. Patrik 10-15: 'lekt' fint, men SEK står utanför rutan —
   'kan man göra så att dessa två presenteras på samma sätt? Tror jag föredrar isf SEK-raden'. Fältet ser nu ut som prisfältet
   (samma pill, samma text) och enheten står bredvid som SEK; (i) blir enheten och behåller hovertexten. */
@media (min-width: 769px) {
  html body #box-prices .office-duration-control.office-duration-control,
  html body #box-prices .office-package-quantity-control.office-package-quantity-control { gap: 6px !important; }
  html body #view-admin #admin-detail-content #box-prices .office-duration-control > input.office-duration-min,
  html body #view-admin #admin-detail-content #box-prices .office-package-quantity-control > input.office-package-lesson-quantity {
    width: 52px !important; height: 28px !important; padding: 2px 10px !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 700 !important; text-align: right !important; -moz-appearance: textfield;
  }
  html body #box-prices .office-duration-control > input::-webkit-inner-spin-button,
  html body #box-prices .office-package-quantity-control > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  html body #box-prices .office-duration-help.office-duration-help,
  html body #box-prices .office-package-quantity-help.office-package-quantity-help {
    width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 0 !important; padding: 0 !important; cursor: help !important; opacity: 1 !important; font-style: normal !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  }
  html body #box-prices .office-duration-help::before { content: "min"; }
  html body #box-prices .office-package-quantity-help::before { content: "lekt."; }
  html body #box-prices .office-duration-help::before,
  html body #box-prices .office-package-quantity-help::before { font-size: 11px; font-weight: 400; color: var(--text-primary); }
}

/* Utfälld prisrad: Radtyp (Prisrad/Informationsrad = ett VAL) och Paketinnehåll (en VY) låg som tre likadana pills — med paketvyn
   öppen såg två val ut att vara gjorda (Patrik 10-15: 'prisrad och informationsrad, öppnar dem samma del?'). Paketinnehåll avskiljs
   med ett streck och markeras med understrykning; i låst läge dämpas radtypen som inte är vald. Placeringen i panelen är Patriks
   beslut 10-08 (kan413_admin_variable_components_contract.js:66) och ligger kvar. */
@media (min-width: 769px) {
  html body #view-admin #admin-detail-content #box-prices .office-package-components-tab-slot.office-package-components-tab-slot {
    margin-left: 6px !important; padding-left: 12px !important;
    border-left: 1px solid color-mix(in srgb, var(--text-secondary) 30%, transparent) !important;
  }
  html body #view-admin #admin-detail-content #box-prices .office-package-components-tab.office-package-components-tab {
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    border-radius: 8px 8px 0 0 !important; border-bottom: 2px solid transparent !important;
  }
  html body #view-admin #admin-detail-content #box-prices .office-package-components-tab.office-package-components-tab[data-active="true"] {
    color: var(--accent-primary) !important; border-bottom-color: var(--accent-primary) !important;
  }
  html body #view-admin #admin-detail-content #box-prices .office-package-components-tab.office-package-components-tab:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important;
  }
  html body #view-admin #admin-detail-content #box-prices .office-row-kind-option.office-row-kind-option.is-disabled[data-active="false"] { opacity: .45 !important; cursor: not-allowed !important; }
}

/* Enhetens ordning (Patrik 10-15: "enheten presenteras först och priser och allt kommer, sen sist kan agenter och ärenden komma …
   som egna rader … så som personal-ärendekorten"). Bara CSS-ordning (syskon i #office-detail-body, flex-kolumn) — DOM orörd. */
@media (min-width: 769px) {
  html body #view-admin #office-detail-body > .admin-office-detail-grid { order: 1; }
  html body #view-admin #office-detail-body > #office-top-grid {
    order: 2; display: flex !important; flex-direction: column-reverse !important; gap: 20px !important;
  }
  html body #view-admin #office-detail-body > .admin-danger-footer { order: 3; }
}
@media (min-width: 769px) {
  html body #view-admin #admin-detail-content #office-top-grid > #box-agents.admin-zoom-fill-panel {
    flex: 0 0 auto !important; min-height: 0 !important; max-height: none !important;
  }
  html body #view-admin #admin-detail-content #office-top-grid > #box-tickets.admin-zoom-fill-panel {
    flex: 0 0 auto !important; min-height: 0 !important; max-height: min(560px, 70vh) !important;
  }
}