/* screens-assetops.css · ปฏิบัติการทรัพย์สิน (M5 lane S3 · 4-design/app-redesign · DESIGN-TOKENS.md)
   License · วัสดุสิ้นเปลือง · IPAM · ใบยืม/ใบจำหน่าย · พอร์ทัลขอยืม
   สีจากตัวแปรของชุดสีเท่านั้น · ตัวอักษร ≥ 12px · สถานะมีไอคอน/ข้อความเสมอ (ไม่ใช้สีอย่างเดียว) · ไม่มี style ในหน้า (CSP) */

.ao-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ao-head .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ao-h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.ao-h1 .ico { width: 22px; height: 22px; color: var(--fg); }

.ao-table td, .ao-table th { vertical-align: top; }
.ao-table .num { font-family: var(--font-mono); }

/* ── ป้ายสถานะ: ขอบซ้าย (รูปทรง) + ข้อความ ── */
.ao-st, .ao-mv, .ao-ip, .ao-rk { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  white-space: nowrap; background: var(--surf2); color: var(--ink2); border-left: 3px solid currentColor; }
.ao-lic-active, .ao-mv-receive, .ao-ip-assigned, .ao-rk-static_pool { background: var(--teal-bg); color: var(--teal-fg); }
.ao-lic-expiring, .ao-mv-transfer, .ao-ip-reserved, .ao-ip-dhcp_reservation, .ao-rk-dhcp_pool, .ao-rk-reserved { background: var(--vendor-bg); color: var(--vendor-fg); }
.ao-lic-expired, .ao-mv-issue, .ao-rk-excluded { background: var(--p1-bg); color: var(--p1-fg); }
.ao-lic-retired, .ao-ip-retired, .ao-ip-deprecated { border-left-style: dotted; }
.ao-mv-adjust, .ao-mv-return, .ao-ip-discovered { background: var(--p3-bg); color: var(--p3-fg); }

.ao-pos { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ao-pos .ico { width: 13px; height: 13px; }
.ao-pos-ok { background: var(--teal-bg); color: var(--teal-fg); }
.ao-pos-over { background: var(--p1-bg); color: var(--p1-fg); }
.ao-pos-spare { background: var(--p3-bg); color: var(--p3-fg); }
.ao-pos-unknown { background: var(--surf2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--input); }
.ao-chip-wait { background: var(--vendor-bg); color: var(--vendor-fg); }

/* ── ตัวเลขหลัก ── */
.ao-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.ao-kpis-sm { grid-template-columns: repeat(2, minmax(88px, auto)); margin: 0; }
.ao-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-md); background: var(--surf2); border-top: 3px solid var(--line); }
.ao-kpi-v { font-family: var(--font-mono); font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.ao-kpi-l { font-size: 12px; color: var(--muted); line-height: 1.5; }
.ao-kpi-over { border-top-color: var(--p1); }
.ao-kpi-over .ao-kpi-v { color: var(--p1-fg); }
.ao-kpi-ok { border-top-color: var(--teal-fg); }
.ao-kpi-spare { border-top-color: var(--p3); }

.ao-secret { margin: 4px 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--surf2); box-shadow: inset 0 0 0 1px var(--input); overflow-wrap: anywhere; }
.ao-secret code { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }

.ao-upsell { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--soft); color: var(--fg); font-size: 13px; line-height: 1.6; }
.ao-upsell .ico { width: 16px; height: 16px; flex: none; margin-top: 3px; }

.ao-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--p2-bg); color: var(--p2-fg); font-weight: 600; }
.ao-low td:first-child { box-shadow: inset 3px 0 0 var(--p2); }
.ao-qty.ao-neg { color: var(--p1-fg); }

/* ── ฟอร์ม ── */
.ao-form { margin-top: 8px; }
.ao-form h3 { margin: 4px 0 8px; font-size: 14px; }
.ao-form label, .ao-form .grid2 label:not(.check) { display: block; } /* ป้าย + ดอกจันบรรทัดเดียว · ช่องกรอกขึ้นบรรทัดใหม่ (ชนะ .cx-form .grid2 label) */
.ao-form label > input:not([type="checkbox"]):not([type="radio"]), .ao-form label > select, .ao-form label > textarea { display: block; margin-block-start: 4px; }
.ao-form label.check { display: flex; align-items: center; gap: 8px; }
.ao-form label.check input[type="radio"], .ao-form label.check input[type="checkbox"] { inline-size: 24px; block-size: 24px; margin: 0; accent-color: var(--brand); flex: none; } /* เป้ากด ≥ 24px (axe target-size) */
.ao-table label.check { display: inline-flex; margin-inline-end: 12px; }
.ao-nowrap th, .ao-nowrap td { white-space: nowrap; } /* เลขล็อต/วันที่ไม่ตัดกลางคำ · ตารางเลื่อนในกรอบ tbl-wrap แทน */
.ao-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .ao-form select, .ao-form textarea {
  width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--input); border-radius: var(--r-md); background: var(--surf); color: var(--ink); font: inherit; }
.ao-fs { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin: 8px 0; }
.ao-fs legend { padding: 0 4px; font-weight: 600; }
.ao-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.ao-committee { display: grid; gap: 8px; }
.ao-crow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
/* M5.1: การ์ดผลตรวจสอบ/คำขอจำหน่ายเต็มความกว้าง (เดิมอยู่คอลัมน์ข้าง · ช่องตำแหน่งกรรมการตัดคำที่ 1366) */
.ao-insp { margin-bottom: 16px; }
.ao-mode { margin: 4px 0 12px; }
.ao-modes { display: grid; gap: 10px; margin: 8px 0; }
.ao-modes .check { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surf); }
.ao-modes .check small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.ao-missing { list-style: none; margin: 8px 0; padding: 0; color: var(--p2-fg); font-size: 13px; }
.ao-missing li { display: flex; align-items: center; gap: 6px; }

/* ── ลำดับขั้นของใบยืม/ใบจำหน่าย (ใช้ .cs-steps ของหน้าเคส) ── */
.ao-steps { flex-basis: 100%; }
.cx-head .ao-steps li.step-stop .m { background: var(--p1-bg); color: var(--p1-fg); box-shadow: none; }

/* ── พอร์ทัลขอยืม ── */
.ao-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; }
.ao-pick-item { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border: 1px solid var(--input); border-radius: var(--r-lg); background: var(--surf); cursor: pointer; min-height: 48px; }
.ao-pick-item:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--soft); }
.ao-pick-item span { display: grid; gap: 2px; }
.ao-pl { display: grid; gap: 4px; padding: 12px 0; }
.ao-pl .btn-sm { justify-self: start; }

/* ── IPAM: แถบการใช้ (ขั้น 5%) ── */
.ao-util { display: inline-flex; align-items: center; gap: 8px; min-width: 200px; }
.ao-bar { display: flex; flex: 1 1 120px; height: 8px; border-radius: 4px; background: var(--surf2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ao-seg { height: 100%; }
.ao-used, .ao-key.ao-used { background: var(--brand); }
.ao-dhcp, .ao-key.ao-dhcp { background: var(--vendor-fg); }
.ao-res, .ao-key.ao-res { background: var(--input); }
.ao-util-t { font-family: var(--font-mono); font-size: 12px; color: var(--ink2); white-space: nowrap; }
.ao-util-warn .ao-util-t { color: var(--p2-fg); font-weight: 600; }
.ao-util-full .ao-util-t { color: var(--p1-fg); font-weight: 600; }
.ao-util .ico { width: 13px; height: 13px; }
.ao-w-0 { width: 0; } .ao-w-5 { width: 5%; } .ao-w-10 { width: 10%; } .ao-w-15 { width: 15%; } .ao-w-20 { width: 20%; } .ao-w-25 { width: 25%; }
.ao-w-30 { width: 30%; } .ao-w-35 { width: 35%; } .ao-w-40 { width: 40%; } .ao-w-45 { width: 45%; } .ao-w-50 { width: 50%; } .ao-w-55 { width: 55%; }
.ao-w-60 { width: 60%; } .ao-w-65 { width: 65%; } .ao-w-70 { width: 70%; } .ao-w-75 { width: 75%; } .ao-w-80 { width: 80%; } .ao-w-85 { width: 85%; }
.ao-w-90 { width: 90%; } .ao-w-95 { width: 95%; } .ao-w-100 { width: 100%; }
.ao-key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; vertical-align: middle; margin-left: 8px; }
.ao-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ao-subutil { min-width: 240px; }
.ao-subutil p { margin: 4px 0 0; }

/* ต้นไม้ subnet: เยื้องตามความลึก + เส้นนำ */
.ao-indent { display: inline-block; height: 1px; vertical-align: middle; }
.ao-d1 .ao-indent { width: 20px; border-bottom: 1px solid var(--line); margin-right: 4px; }
.ao-d2 .ao-indent { width: 40px; border-bottom: 1px solid var(--line); margin-right: 4px; }
.ao-d3 .ao-indent { width: 60px; border-bottom: 1px solid var(--line); margin-right: 4px; }
.ao-d4 .ao-indent, .ao-d5 .ao-indent, .ao-d6 .ao-indent { width: 80px; border-bottom: 1px solid var(--line); margin-right: 4px; }
.ao-tree .ico { width: 14px; height: 14px; color: var(--muted); vertical-align: -2px; }
.ao-vrfbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ao-vrfbar .cx-search { margin-bottom: 8px; }
.ao-rowedit > summary { list-style: none; cursor: pointer; color: var(--fg); }
.ao-rowedit > summary::-webkit-details-marker { display: none; }
.ao-rowedit[open] { min-width: 320px; }
.ao-sel td { background: var(--sel); }

/* ── เทียบ config ── */
.ao-diffsum { font-family: var(--font-mono); font-size: 13px; font-weight: 500; margin-left: 8px; }
.ao-add { color: var(--teal-fg); }
.ao-del { color: var(--p1-fg); }
.ao-diff, .ao-pre { max-height: 520px; overflow: auto; margin: 8px 0 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surf2);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; }
.ao-pre { padding: 8px 12px; white-space: pre; color: var(--ink); }
.ao-dl { display: grid; grid-template-columns: 44px 44px 16px 1fr; gap: 0; }
.ao-ln { padding: 0 6px; text-align: right; color: var(--muted); user-select: none; border-right: 1px solid var(--line); }
.ao-op { text-align: center; color: var(--muted); }
.ao-tx { padding: 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.ao-dl-add { background: var(--teal-bg); }
.ao-dl-add .ao-op, .ao-dl-add .ao-tx { color: var(--teal-fg); }
.ao-dl-del { background: var(--p1-bg); }
.ao-dl-del .ao-op, .ao-dl-del .ao-tx { color: var(--p1-fg); }
.ao-diff:focus-visible, .ao-pre:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (max-width: 900px) {
  .ao-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ao-crow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ao-kpis { grid-template-columns: 1fr 1fr; }
  .ao-grid3, .ao-crow { grid-template-columns: 1fr; }
  .ao-util { min-width: 0; }
  .ao-dl { grid-template-columns: 32px 32px 14px 1fr; }
  .ao-head .actions .btn { min-height: 44px; }
}
/* ลิงก์สองบรรทัดในช่องตาราง (เลขที่ใบยืม/ใบจำหน่าย + ครุภัณฑ์): เป้ากด ≥ 24px (axe target-size) */
.ao-cell-link { display: inline-block; min-block-size: 24px; line-height: 24px; }
.ao-form label.block { margin-block-start: 12px; }
.ao-form label.block + fieldset, .ao-form fieldset + label.check { margin-block-start: 16px; }