/* Raptool Device Manager 2.1 - Apps, enrollment, kiosk profiles, remote actions. Design tokens only (tokens.css / theme.css), so dark mode works unchanged. Phone layout at 600px and narrower. */

/* ---------------------------------------------------------------- shared bits */
.ap-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-md); }
.ap-warn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin: 0 0 var(--space-md); border-radius: var(--radius-default); background: color-mix(in srgb, var(--warning) 16%, var(--surface)); color: var(--on-surface); }
.ap-warn .material-symbols-outlined { color: var(--warning); flex: none; }
.ap-warn.bad { background: color-mix(in srgb, var(--error) 14%, var(--surface)); }
.ap-warn.bad .material-symbols-outlined { color: var(--error); }
.ap-warn-t { color: var(--warning); }
.ap-bad-t { color: var(--error); }
.ap-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--on-surface-variant); }
.ap-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-container-low); }
.ap-list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ap-note { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent-emerald) 14%, var(--surface)); font-size: 13px; margin-bottom: 8px; }
.ap-note .material-symbols-outlined { color: var(--accent-emerald); font-size: 20px; }
.ap-note.warn { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.ap-note.warn .material-symbols-outlined { color: var(--warning); }
.ap-prog { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ap-prog .job-bar { height: 10px; }
.ap-form { margin-top: 12px; }
.ap-picker { display: flex; flex-direction: column; gap: 8px; }
.ap-picker [hidden] { display: none; }

/* drop zone */
.ap-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; text-align: center; border: 2px dashed var(--outline-variant); border-radius: var(--radius-default); background: var(--surface-container-low); cursor: pointer; min-height: 44px; }
.ap-drop:hover, .ap-drop:focus-visible, .ap-drop.on { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface)); outline: none; }
.ap-drop .material-symbols-outlined { font-size: 34px; color: var(--accent-primary); }
.ap-drop b { overflow-wrap: anywhere; }

/* client updates */
.ap-client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.ap-card { padding: var(--space-md); }
.ap-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ap-card-title .muted { margin-left: auto; font-size: 12px; }
.ap-donut-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.ap-donut { width: 120px; height: 120px; flex: none; }
.ap-donut-n { font-size: 22px; font-weight: 700; fill: var(--on-surface); font-family: var(--font-heading); }
.ap-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ap-legend li { display: flex; align-items: center; gap: 8px; }
.ap-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ---------------------------------------------------------------- enrollment */
.en-top { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-md); }
.en-qr { width: 240px; max-width: 100%; flex: none; padding: 8px; border-radius: var(--radius-default); background: #fff; }
.en-qr svg { display: block; width: 100%; height: auto; }
.en-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.en-code-big { font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: .06em; overflow-wrap: anywhere; }
.en-btns { display: flex; gap: 8px; margin-top: 6px; }
.en-steps { margin: 0 0 var(--space-md); padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.en-copy { margin-bottom: 10px; }
.en-copy-l { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); margin-bottom: 3px; }
.en-copy-r { display: flex; gap: 6px; align-items: flex-start; }
.en-code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-container-high); font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
#enPrint { display: none; }
@media print {
  body.en-printing > *:not(#enPrint) { display: none !important; }
  body.en-printing { background: #fff !important; }
  body.en-printing #enPrint { display: block; color: #000; background: #fff; font-family: sans-serif; padding: 24px; }
  #enPrint h1 { font-size: 24px; margin: 0 0 4px; } #enPrint h2 { font-size: 16px; margin: 0 0 12px; font-weight: 500; }
  #enPrint .en-p-qr { width: 320px; margin: 12px 0; } #enPrint .en-p-qr svg { width: 100%; height: auto; }
  #enPrint .en-p-code { font-family: monospace; font-size: 22px; letter-spacing: .08em; }
  #enPrint pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; border: 1px solid #999; padding: 8px; }
}

/* ---------------------------------------------------------------- kiosk profiles */
.ki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); }
.ki-card { padding: var(--space-md); display: flex; flex-direction: column; gap: 10px; }
.ki-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ki-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.ki-btns { display: flex; gap: 2px; flex: none; }
.ki-chips, .ki-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.ki-groups .chip .material-symbols-outlined { font-size: 15px; margin-right: 2px; vertical-align: -3px; }
.ki-modal .modal-box { width: min(980px, 100%); }
.ki-edit { display: flex; gap: var(--space-lg); align-items: flex-start; }
.ki-form { flex: 1; min-width: 0; }
.ki-side { flex: none; width: 250px; position: sticky; top: 0; }
.ki-pv-t { font-size: 12px; font-weight: 700; color: var(--on-surface-variant); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.ki-apps { max-height: 190px; overflow-y: auto; margin: 6px 0; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-container-low); display: flex; flex-direction: column; }
.ki-app { align-items: flex-start; padding: 4px 6px; min-height: 36px; }
.ki-addpkg { display: flex; gap: 6px; align-items: center; }
.ki-addpkg .tds-input-well { flex: 1; }
.ki-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; }
.ki-tree { max-height: 200px; overflow-y: auto; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-container-low); display: flex; flex-direction: column; }
.ki-tree .fb-check .material-symbols-outlined { font-size: 18px; color: var(--on-surface-variant); }
.ki-admin { margin: 12px 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-container-low); }
.ki-admin summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; min-height: 36px; }
.ki-fails { margin: 0; padding-left: 16px; }
.ki-phone { width: 200px; margin: 0 auto; padding: 10px 8px; border-radius: 26px; background: #111827; box-shadow: var(--shadow-card); }
.ki-phone-screen { height: 340px; border-radius: 18px; background: #f3f4f6; color: #111827; display: flex; flex-direction: column; overflow: hidden; font-size: 11px; }
.ki-sb { display: flex; justify-content: space-between; align-items: center; padding: 3px 8px; background: #1f2937; color: #fff; font-size: 10px; min-height: 18px; }
.ki-sb .material-symbols-outlined, .ki-nav .material-symbols-outlined { font-size: 13px; }
.ki-home { flex: 1; padding: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; justify-content: center; }
.ki-home.single { align-items: center; align-content: center; }
.ki-tile { width: 52px; text-align: center; } .ki-tile span { display: flex; width: 40px; height: 40px; margin: 0 auto 2px; border-radius: 10px; background: #2563eb; color: #fff; align-items: center; justify-content: center; } .ki-tile i { font-style: normal; font-size: 9px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-single { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ki-single .material-symbols-outlined { font-size: 54px; color: #2563eb; }
.ki-nav { display: flex; justify-content: center; gap: 26px; padding: 6px; background: #1f2937; color: #fff; min-height: 24px; }
.ki-pc { width: 220px; margin: 0 auto; } .ki-pc-screen { position: relative; height: 150px; border: 6px solid #111827; border-radius: 8px 8px 0 0; background: #1e3a8a; display: flex; align-items: center; justify-content: center; color: #fff; }
.ki-pc-base { height: 10px; background: #374151; border-radius: 0 0 8px 8px; margin: 0 -14px; }
.ki-pc-app { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; } .ki-pc-app .material-symbols-outlined { font-size: 38px; }
.ki-pc-badge { position: absolute; top: 4px; right: 6px; } .ki-pc-badge .material-symbols-outlined { font-size: 16px; }
.ki-cursor { position: absolute; bottom: 14px; right: 24px; } .ki-cursor .material-symbols-outlined { font-size: 18px; }

/* ---------------------------------------------------------------- remote actions */
.ac-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ac-em { margin: 10px 0; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--error) 7%, var(--surface)); }
.ac-em summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; min-height: 36px; color: var(--error); }
.ac-em .ac-btns { margin-top: 8px; }

/* ---------------------------------------------------------------- phone (<= 600px) */
@media (max-width: 600px) {
  .en-top { flex-direction: column; align-items: stretch; } .en-qr { width: 100%; }
  .ki-edit { flex-direction: column; } .ki-side { width: 100%; position: static; }
  .ki-grid, .ap-client-grid { grid-template-columns: 1fr; }
  .ki-checks { grid-template-columns: 1fr; }
  .ac-btns .btn { flex: 1 1 44%; justify-content: center; min-height: 44px; }
  .ap-views .tds-chip { flex: 1 1 auto; }
  .ap-donut-row { justify-content: center; }
}

/* drawer buttons in one row (the generic .dm-actions stacks them) */
.ap-drawer .dm-actions { flex-direction: row; flex-wrap: wrap; }
.ap-drawer .dm-actions .btn { width: auto; }
.dw-apps-body .dm-actions, .dw-kiosk-body .dm-actions { flex-direction: row; flex-wrap: wrap; }
.dw-apps-body .dm-actions .btn, .dw-kiosk-body .dm-actions .btn { width: auto; }