.admin-body { background: #f6f8f7; }
.admin-body * { letter-spacing: 0; }
.admin-main { max-width: 1440px; padding-top: 36px; }
.admin-title { align-items: center; margin-bottom: 24px; }
.admin-title h1 { font-size: 28px; }
.admin-title .button, .table-head .button { min-height: 40px; }
.admin-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 0; }
.admin-summary strong { font-size: 28px; }
.admin-tabs { display: flex; gap: 24px; border-bottom: 1px solid #dbe4df; margin-top: 26px; overflow-x: auto; }
.admin-tabs button { flex-shrink: 0; padding: 15px 2px; background: none; border: 0; border-bottom: 3px solid transparent; font-size: 13px; font-weight: 700; color: #66796f; }
.admin-tabs button[aria-selected="true"] { color: #b84437; border-bottom-color: #ef5a42; }
.admin-tabs button:focus-visible, button:focus-visible { outline: 2px solid #388e83; outline-offset: 3px; }
.dashboard-message { color: #a6372d; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.dashboard-message:empty { display: none; }
.table-head { gap: 16px; margin-top: 26px; }
.table-head h2 { font-size: 17px; line-height: 1.5; }
.table-head h2 span { display: inline-block; margin-left: 10px; font-weight: 400; }
.software-table { min-width: 760px; }
.software-table th:first-child { width: 25%; }
.software-table th:nth-child(2) { width: 120px; }
.software-table th:nth-child(3) { width: 72px; }
.software-table th:last-child { width: 76px; }
.software-table td { vertical-align: top; }
.software-name, .key-customer { display: block; max-width: 260px; overflow-wrap: anywhere; line-height: 1.5; }
.software-code { display: block; color: #687b72; font-size: 11px; font-weight: 400; margin-top: 5px; overflow-wrap: anywhere; }
.software-description { margin: 7px 0 0; max-width: 260px; color: #687b72; line-height: 1.5; font-weight: 400; overflow-wrap: anywhere; white-space: pre-wrap; }
.api-endpoint { display: flex; gap: 8px; align-items: center; max-width: 500px; min-width: 270px; }
.api-endpoint code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 11px; line-height: 1.7; font-weight: 400; color: #426259; }
.api-endpoint .table-action { flex: 0 0 76px; color: #426259; padding: 8px 2px; }
.api-methods { display: block; margin-top: 5px; font-size: 10px; font-weight: 700; color: #74867c; }
.key-filters { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.key-filters label { font-size: 12px; font-weight: 700; }
.admin-body select, .admin-body textarea { font: inherit; font-size: 13px; border: 1px solid #cdd9d3; border-radius: 4px; background: #fff; color: #203530; padding: 11px 12px; min-width: 0; }
.admin-body select { height: 44px; }
.key-filters select { max-width: min(360px, 100%); width: 280px; }
.admin-body select:focus, .admin-body textarea:focus { outline: none; border-color: #388e83; box-shadow: 0 0 0 3px #388e8322; }
.keys-table { min-width: 1130px; }
.keys-table td { vertical-align: middle; }
.key-software-name { display: block; max-width: 190px; overflow-wrap: anywhere; }
.key-actions { display: flex; flex-wrap: wrap; gap: 10px; min-width: 85px; }
.key-actions button { padding: 6px 0; text-align: left; }
.key-actions .assign-action { color: #217468; }
.key-prefix { font-family: ui-monospace, monospace; white-space: nowrap; }
.status-pending { color: #946720; font-weight: 750; }
.interests-table { min-width: 440px; }
.interests-table td { overflow-wrap: anywhere; }
.key-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.key-dialog input, .key-dialog select, .key-dialog textarea { width: 100%; }
.key-dialog textarea { resize: vertical; min-height: 80px; max-height: 220px; }
.key-dialog input:read-only { background: #f3f5f4; color: #657b6f; }
.key-dialog .dialog-top { gap: 12px; }
.dialog-top h2 { font-size: 22px; overflow-wrap: anywhere; }
.checkbox-field { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.checkbox-field input { width: 18px; height: 18px; margin: 0; accent-color: #277c6b; }
.checkbox-field label { line-height: 1.5; }
.key-dialog .reveal-note { margin: 3px 0 10px; overflow-wrap: anywhere; }
.key-dialog [role="status"] { font-size: 12px; min-height: 18px; color: #a6372d; line-height: 1.5; }
.key-dialog [role="alert"] { line-height: 1.5; margin: 0; }
.key-dialog #revealed-key { user-select: all; }
.icon-close { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; line-height: 1; }
.button:disabled, .table-action:disabled, .text-button:disabled, .icon-close:disabled { cursor: not-allowed; opacity: .5; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 650px) {
  .admin-header { gap: 12px; }
  .admin-label { padding-left: 12px; }
  .admin-main { padding-top: 25px; }
  .admin-title { align-items: flex-start; flex-direction: row; gap: 12px; }
  .admin-title h1 { font-size: 23px; }
  .admin-title .button { padding: 0 12px; }
  .admin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .admin-summary > div { padding-left: 15px; gap: 7px; }
  .admin-summary > div:nth-child(odd) { padding-left: 0; }
  .admin-summary > div:nth-child(even) { border-right: 0; }
  .admin-summary small { font-size: 11px; }
  .admin-summary strong { font-size: 25px; }
  .admin-tabs { gap: 20px; margin-top: 18px; }
  .admin-tabs button { font-size: 12px; }
  .table-head { align-items: flex-start; margin-top: 22px; }
  .table-head h2 { font-size: 15px; }
  .table-head h2 span { display: block; margin: 4px 0 0; }
  .table-head .button { padding: 0 12px; font-size: 12px; }
  .key-filters { align-items: flex-start; flex-direction: column; gap: 7px; }
  .key-filters select { width: 100%; max-width: none; }
  .key-dialog { padding: 22px; }
  .empty-keys { padding: 30px 20px; }
}
@media (max-width: 360px) {
  .admin-header .brand { font-size: 16px; gap: 7px; }
  .admin-label { display: none; }
  .admin-title h1 { font-size: 21px; }
  .admin-title .section-kicker { font-size: 10px; }
  .dialog-actions { flex-wrap: wrap; }
}

.orders-table { min-width: 700px; }
.admin-body .table-wrap { position: relative; }
.orders-table td { max-width: 340px; overflow-wrap: anywhere; }
.order-row { cursor: pointer; }
.order-row:hover { background: #eef4f1; }
.software-choices { border: 1px solid #cdd9d3; border-radius: 4px; padding: 12px; margin: 0; min-width: 0; }
.software-choices legend { font-size: 13px; font-weight: 700; padding: 0 5px; }
.software-choices p { font-size: 12px; color: #687b72; margin: 0 0 10px; line-height: 1.5; }
#key-software { max-height: 220px; overflow-y: auto; }
.key-dialog .software-choice { display: flex; align-items: center; gap: 10px; padding: 8px 0; margin: 0; cursor: pointer; }
.key-dialog .software-choice input { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: #277c6b; }
.software-choice span { overflow-wrap: anywhere; min-width: 0; }
.key-dialog #revealed-key { white-space: pre-wrap; user-select: text; }
#order-detail > .reveal-note { font-size: 12px; color: #687b72; line-height: 1.6; }
.key-filters[hidden] { display: none; }

#handover-dialog { width: min(680px, calc(100vw - 30px)); }
#handover-message { min-height: 300px; max-height: 55dvh; font-size: 13px; line-height: 1.7; margin-top: 10px; }
#order-detail > .table-head { flex-wrap: wrap; }
#order-detail > .table-head h2 { flex: 1 1 260px; }

.customers-table { min-width: 850px; }
.customers-table td { max-width: 280px; overflow-wrap: anywhere; line-height: 1.7; }
#customer-search { display: block; width: min(480px, 100%); margin: 10px 0 18px; padding: 12px; border: 1px solid #cdd9d3; border-radius: 4px; }

.activity-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.activity-filters label { display: grid; gap: 8px; font-size: 13px; flex: 1 1 240px; max-width: 420px; min-width: 0; }
.activity-filters select { width: 100%; }
.activities-table { min-width: 1300px; }
.activities-table td { max-width: 300px; overflow-wrap: anywhere; line-height: 1.6; }
.activity-video-title { display: block; min-width: 230px; }
#activity-message { font-size: 13px; color: #687b72; }
#activity-dialog { width: min(850px, calc(100vw - 30px)); }
#activity-details { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 20px; font-size: 13px; line-height: 1.7; }
#activity-details dt { font-weight: 700; }
#activity-details dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#activity-details a { color: #217468; text-decoration: underline; }
@media (max-width: 650px) { #activity-details { grid-template-columns: minmax(0, 1fr); gap: 4px; } #activity-details dd { margin-bottom: 12px; } }

#order-rows td:last-child { min-width: 160px; }
#order-rows td:last-child button { display: block; margin: 5px 0; }
#revenue-total { color: #217468; font-size: 20px; }
#trash-rows td { white-space: pre-wrap; }

/* Revenue overview and wide order form. */
.admin-summary { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(240px, 1.6fr); }
.admin-summary > div { min-width: 0; }
#summary-revenue { color: #c62828; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; overflow-wrap: anywhere; }
#key-dialog { width: min(1040px, calc(100vw - 40px)); }
#key-form { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
#key-form > .dialog-top, #key-form > .order-help, #key-form > #key-form-message, #key-form > .dialog-actions, #key-form > .order-total { grid-column: 1 / -1; }
#key-form > .software-choices { grid-column: 1; grid-row: 2 / span 3; }
#key-form .order-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#key-form .order-field-label { grid-column: 2 / -1; grid-row: 2; }
#key-form .order-field-combo { grid-column: 2; grid-row: 3; }
#key-form .order-field-payment { grid-column: 3; grid-row: 3; }
#key-form .order-field-term { grid-column: 2 / -1; grid-row: 4; }
#key-form #key-software { max-height: 250px; }
#key-form .order-help { margin: 0; }
#key-form #key-price { color: #c62828; font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.3; margin: 0; padding: 16px 20px; background: #fff1f0; border: 1px solid #f3cdca; border-radius: 6px; overflow-wrap: anywhere; }
#key-form .dialog-actions { margin-top: 0; }
@media (max-width: 1000px) {
  .admin-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-summary > .summary-revenue { grid-column: 1 / -1; padding: 16px 0 0; border-top: 1px solid #dfe6e1; }
  .admin-summary > div:nth-child(4) { border-right: 0; }
}
@media (max-width: 700px) {
  #key-dialog { width: calc(100vw - 24px); padding: 20px; }
  #key-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #key-form > .software-choices, #key-form > .order-field { grid-column: 1; grid-row: auto; }
  #key-form #key-software { max-height: 180px; }
  #key-form #key-price { padding: 14px; }
}
@media (max-width: 650px) {
  .admin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.software-table { min-width: 1020px; }
.software-table td:nth-child(5) { min-width: 200px; max-width: 280px; }
.software-download-link { color: #217468; font-weight: 700; text-decoration: underline; }

#key-form .order-field-label { grid-column: 2; }
#key-form .order-field-phone { grid-column: 3; grid-row: 2; }
.order-filters { flex-wrap: wrap; }
#order-name-search, #order-phone-search { min-width: 0; width: 260px; max-width: 100%; padding: 11px 12px; border: 1px solid #cdd9d3; border-radius: 4px; font: inherit; font-size: 13px; }
.order-filters #order-expiry-filter { width: 340px; }
@media (max-width: 700px) {
  #key-form .order-field-label, #key-form .order-field-phone { grid-column: 1; grid-row: auto; }
}
@media (max-width: 650px) { #order-name-search, #order-phone-search, .order-filters #order-expiry-filter { width: 100%; } }

/* Sidebar navigation and package management. */
#dashboard:not([hidden]) { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.admin-content { min-width: 0; }
.admin-tabs { display: flex; flex-direction: column; position: sticky; top: 24px; gap: 3px; padding: 12px 10px; margin: 0; background: #fff; border: 1px solid #e4e4e4; border-radius: 14px; }
.admin-tabs [role=tab] { width: 100%; text-align: left; padding: 12px; border: 0; border-left: 3px solid transparent; border-radius: 8px; color: #666; background: transparent; }
.admin-tabs [role=tab][aria-selected=true] { color: #df5b48; background: #fff0ed; border-left-color: #ee6854; }
.admin-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-summary > .summary-revenue { grid-column: 1 / -1; border-top: 1px solid #e4e4e4; border-right: 0; margin-top: 18px; padding: 20px 0 0; }
.admin-summary > div:nth-child(4) { border-right: 0; }
.packages-table { min-width: 780px; width: 100%; }
.packages-table td { vertical-align: top; padding-top: 22px; padding-bottom: 22px; }
.packages-table td:first-child { font-weight: 700; min-width: 100px; }
.package-chips { width: 32%; }
.package-chip { display: inline-block; margin: 0 5px 5px 0; border-radius: 5px; padding: 3px 7px; background: #fff0ed; color: #b24b3d; font-size: 12px; }
.package-price { white-space: nowrap; margin-bottom: 6px; font-size: 12px; }
.package-price strong { color: #cc4a3c; }
.package-extra { display: block; max-width: 130px; margin-top: 8px; color: #777; }
.package-state.active { color: #168348; font-weight: 700; }
#package-dialog { width: min(780px, calc(100vw - 24px)); }
.package-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.package-fields label { display: grid; gap: 8px; }
#package-software { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 240px; overflow: auto; }
#package-software label { display: flex; gap: 8px; align-items: center; }
#package-software input { width: auto; }
#key-package { width: 100%; margin: 10px 0; }
#key-package-extra { font-size: 12px; }
@media (max-width: 800px) {
  #dashboard:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .admin-tabs { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .admin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-fields, #package-software { grid-template-columns: minmax(0, 1fr); }
}
.admin-summary { padding: 0; border: 0; gap: 0; }
.admin-summary > div { background: #fff; padding: 20px; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; }
.admin-summary > div:first-child { border-left: 1px solid #e4e4e4; border-radius: 12px 0 0 12px; }
.admin-summary > div:nth-child(4) { border-right: 1px solid #e4e4e4; border-radius: 0 12px 12px 0; }
.admin-summary > .summary-revenue { padding: 20px; border: 1px solid #e4e4e4; border-radius: 12px; margin-top: 14px; }
.admin-content > [role=tabpanel] { background: #fff; border: 1px solid #e4e4e4; border-radius: 14px; padding: 20px; }
@media (max-width: 500px) { .admin-content > [role=tabpanel] { padding: 14px; } .admin-summary > div { padding: 15px; } }

/* Order creation uses package configuration only. */
#key-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#key-form > .order-field { grid-column: auto; grid-row: auto; }
#key-form > .order-field-package { grid-column: 1 / -1; }
#key-form #key-package { margin: 0; }
#key-package-info { color: #687b72; font-size: 13px; }
@media (max-width: 700px) { #key-form { grid-template-columns: minmax(0, 1fr); } }
.renewal-reference { display: block; margin: 6px 0; color: #8a6557; font-size: 12px; }

#order-list .orders-table { min-width: 1150px; width: 100%; border: 0; font-size: 12px; }
#order-list th { font-size: 10px; text-transform: uppercase; font-weight: 500; white-space: nowrap; background: #fff; }
#order-rows td { padding: 19px 10px; vertical-align: middle; }
#order-rows td:first-child { width: 35px; }
#order-rows td:nth-child(2) { min-width: 125px; }
#order-rows td:nth-child(4) { min-width: 190px; }
#order-rows td:nth-child(5), #order-rows td:nth-child(6), #order-rows td:nth-child(7), #order-rows td:nth-child(8) { white-space: nowrap; }
.order-customer-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #162c24; text-align: left; cursor: pointer; }
.order-meta { display: block; margin-top: 4px; font-size: 11px; color: #78817c; }
.order-badge, .order-tool { background: #effaf2; color: #25865c; border: 0; border-radius: 4px; padding: 3px 6px; font: inherit; font-size: 11px; white-space: nowrap; }
.order-tools { display: flex; gap: 5px; flex-wrap: wrap; }
.order-tool { cursor: pointer; }
.order-payment { font-weight: 700; font-size: 11px; }
.order-payment.paid { color: #009b56; }
.order-payment.unpaid { color: #b57b12; }
.order-payment.partner, .order-payment.free { color: #338379; }
.order-money { color: #c33e31; font-weight: 800; }
#order-rows td:last-child { min-width: 230px; }
.order-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
#order-rows .order-actions button { display: inline-block; margin: 0; font-size: 12px; }
.order-edit { padding: 4px 14px; border: 1px solid #78948b; border-radius: 6px; color: #345c50; background: #fff; cursor: pointer; }
.order-actions button:disabled { opacity: .4; cursor: not-allowed; }
.admin-main { width: calc(100% - 40px); max-width: 1800px; }
#order-rows tr { background: #fff; }
#order-rows tr:hover { background: #fafdfb; }
@media (max-width: 650px) { .admin-main { width: calc(100% - 24px); } }

.order-filters { display: grid; grid-template-columns: auto minmax(130px,190px) auto minmax(110px,150px) auto minmax(170px,230px); gap: 8px 10px; justify-content: start; align-items: center; }
.order-filters #order-name-search, .order-filters #order-phone-search, .order-filters #order-expiry-filter { width: 100%; min-width: 0; height: 34px; padding: 6px 9px; font-size: 12px; }
.order-filters label { font-size: 12px; margin: 0; white-space: nowrap; }
.order-leader { display: block; font-size: 11px; color: #588172; margin-top: 4px; }
@media (max-width: 1100px) { .order-filters { grid-template-columns: 100px minmax(140px,260px); } }
@media (max-width: 500px) { .order-filters { grid-template-columns: 90px minmax(0,1fr); } }
.order-device-fields { border: 1px solid #dce5e0; border-radius: 8px; padding: 14px; margin-top: 16px; }
.order-device-row { display: grid; gap: 7px; margin-bottom: 12px; }
.order-device-row small { color: #687b72; overflow-wrap: anywhere; font-weight: 400; }
#order-device-inputs { max-height: 300px; overflow: auto; }