/* styles.css — ระบบรับซ่อม พี.ซี. เซอร์วิส (hi-tech blue) */

/* ───────── tokens ───────── */
:root{
  --accent:#2563eb;
  --radius:15px; --radius-sm:9px;
  --font-th:'IBM Plex Sans Thai','IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --font-disp:'Space Grotesk','IBM Plex Sans Thai',sans-serif;
}
[data-theme="light"]{
  --bg:#eef1f7; --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#eff3f9;
  --text:#0d1526; --text-2:#33415c; --muted:#697489; --faint:#9aa6ba;
  --border:#e2e8f1; --border-2:#d3dbe8;
  --shadow:0 1px 2px rgba(13,21,38,.04),0 8px 24px -12px rgba(13,21,38,.12);
  --shadow-lg:0 24px 60px -20px rgba(13,21,38,.28);
}
[data-theme="dark"]{
  --bg:#070b16; --surface:#0f1626; --surface-2:#0b1120; --surface-3:#141d30;
  --text:#e9eef8; --text-2:#c2cbdd; --muted:#8492a9; --faint:#5b687e;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -22px rgba(0,0,0,.7);
}
/* accent derivations */
[data-theme]{
  --accent-fg:#fff;
  --accent-weak:color-mix(in srgb,var(--accent) 12%,var(--surface));
  --accent-soft:color-mix(in srgb,var(--accent) 8%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 38%,transparent);
  --accent-deep:color-mix(in srgb,var(--accent) 78%,#000 22%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-th); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
button{font-family:inherit}
::selection{background:var(--accent-line)}
.pc-mono{font-family:var(--font-mono);font-feature-settings:"tnum"}

/* scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ───────── app shell ───────── */
.pc-app{min-height:100vh;display:grid;grid-template-columns:264px 1fr;background:var(--bg)}
.pc-main{min-width:0;min-height:100vh}

/* sidebar */
.pc-sidebar{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--border);padding:22px 16px;gap:8px;
}
.pc-sidebar__brand{padding:6px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:8px}
.pc-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.pc-nav__item{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border:none;background:transparent;
  border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);text-align:left;width:100%;transition:.15s;
}
.pc-nav__item:hover{background:var(--surface-3);color:var(--text)}
.pc-nav__item.is-active{background:var(--accent-weak);color:var(--accent)}
.pc-nav__item.is-active svg{color:var(--accent)}
.pc-nav__txt{display:flex;flex-direction:column;gap:1px}
.pc-nav__txt b{font-size:14.5px;font-weight:600;line-height:1.3}
.pc-nav__txt em{font-style:normal;font-size:10.5px;font-family:var(--font-disp);letter-spacing:.04em;opacity:.65;line-height:1.1}
.pc-sidebar__foot{border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.pc-sidebar__shop{display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:12px;line-height:1.45}
.pc-sidebar__shop svg{flex:none;margin-top:2px;color:var(--accent)}
.pc-sidebar__ver{font-size:10.5px;color:var(--faint);font-family:var(--font-disp);letter-spacing:.04em}

/* logo */
.pc-logo{display:flex;align-items:center;gap:11px}
.pc-logo__mark{
  width:var(--logo-size,42px);height:var(--logo-size,42px);border-radius:calc(var(--radius-sm) - 1px);
  background:#fff;flex:none;overflow:hidden;display:grid;place-items:center;
  box-shadow:0 4px 12px -5px rgba(13,21,38,.25);border:1px solid var(--border)
}
.pc-logo__mark img{width:100%;height:100%;object-fit:cover}
.pc-logo__text{display:flex;flex-direction:column;gap:2px}
.pc-logo__name{font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--text);line-height:1.25}
.pc-logo__en{font-family:var(--font-disp);font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:500;line-height:1}

/* ───────── page ───────── */
.pc-page{padding:32px 36px 80px;max-width:1180px;margin:0 auto}
.pc-page--form,.pc-page--detail{max-width:1080px}
.pc-page__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.pc-h1{font-size:27px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.pc-sub{margin:0;color:var(--muted);font-size:14px}
.pc-sub .pc-dot{margin:0 8px;color:var(--faint)}
.pc-back{
  display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--muted);
  cursor:pointer;font-size:13.5px;padding:4px 0;margin-bottom:16px;font-weight:500;
}
.pc-back:hover{color:var(--accent)}

/* ───────── buttons ───────── */
.pc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border-radius:var(--radius-sm);font-weight:600;font-size:14px;border:1px solid transparent;
  transition:.15s;white-space:nowrap;line-height:1;
}
.pc-btn--md{padding:10px 16px}
.pc-btn--lg{padding:13px 22px;font-size:15px}
.pc-btn--sm{padding:7px 12px;font-size:13px}
.pc-btn--full{width:100%}
.pc-btn--primary{background:var(--accent);color:var(--accent-fg);box-shadow:0 8px 18px -8px var(--accent-line)}
.pc-btn--primary:hover{background:var(--accent-deep)}
.pc-btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border-2)}
.pc-btn--secondary:hover{border-color:var(--accent);color:var(--accent)}
.pc-btn--ghost{background:transparent;color:var(--muted)}
.pc-btn--ghost:hover{background:var(--surface-3);color:var(--text)}
.pc-btn:disabled{opacity:.5;cursor:not-allowed}

/* ───────── badge ───────── */
.pc-badge{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;font-weight:600;white-space:nowrap;
  background:color-mix(in srgb,var(--tone) 13%,var(--surface));
  color:var(--tone);border:1px solid color-mix(in srgb,var(--tone) 26%,transparent);
}
.pc-badge--md{padding:4px 10px;font-size:12.5px}
.pc-badge--lg{padding:6px 13px;font-size:14px}
[data-tone="slate"]{--tone:#5d6b82}
[data-tone="blue"]{--tone:#2563eb}
[data-tone="amber"]{--tone:#d97706}
[data-tone="violet"]{--tone:#7c3aed}
[data-tone="green"]{--tone:#059669}
[data-tone="done"]{--tone:#0d9488}
[data-theme="dark"] [data-tone="slate"]{--tone:#9aa7bd}
[data-theme="dark"] [data-tone="blue"]{--tone:#6ea0ff}
[data-theme="dark"] [data-tone="amber"]{--tone:#f1b24a}
[data-theme="dark"] [data-tone="violet"]{--tone:#ad8cff}
[data-theme="dark"] [data-tone="green"]{--tone:#34d399}
[data-theme="dark"] [data-tone="done"]{--tone:#2dd4bf}

/* ───────── stats ───────── */
.pc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.pc-stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:17px 18px;
  display:flex;align-items:center;gap:14px;position:relative;box-shadow:var(--shadow);overflow:hidden;
}
.pc-stat__icon{
  width:42px;height:42px;border-radius:var(--radius-sm);flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:var(--tone);
}
.pc-stat__value{font-size:26px;font-weight:700;font-family:var(--font-disp);line-height:1;letter-spacing:-.02em}
.pc-stat__label{font-size:12.5px;color:var(--muted);margin-top:3px}
.pc-stat__sub{position:absolute;top:12px;right:14px;font-size:10px;font-family:var(--font-disp);letter-spacing:.05em;color:var(--faint);text-transform:uppercase}

/* ───────── toolbar ───────── */
.pc-toolbar{display:flex;flex-direction:column;gap:13px;margin-bottom:18px}
.pc-searchbox{
  display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--radius-sm);padding:0 14px;max-width:460px;color:var(--muted);transition:.15s;
}
.pc-searchbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pc-searchbox input{flex:1;border:none;background:none;outline:none;padding:11px 0;font-size:14px;color:var(--text)}
.pc-searchbox__clear{border:none;background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center;padding:2px}
.pc-filters{display:flex;flex-wrap:wrap;gap:7px}
.pc-filter{
  border:1px solid var(--border-2);background:var(--surface);color:var(--muted);cursor:pointer;
  padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:500;transition:.15s;
}
.pc-filter:hover{color:var(--text);border-color:var(--accent-line)}
.pc-filter.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ───────── table ───────── */
.pc-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.pc-table{width:100%;border-collapse:collapse;font-size:14px}
.pc-table thead th{
  text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:13px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);font-family:var(--font-disp)
}
.pc-table td{padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top}
.pc-row{cursor:pointer;transition:background .12s}
.pc-row:last-child td{border-bottom:none}
.pc-row:hover{background:var(--accent-weak)}
.pc-jobid{font-size:13px;color:var(--accent);font-weight:600}
.pc-cust{font-weight:600}
.pc-cust__phone{font-size:12.5px;color:var(--muted);margin-top:2px}
.pc-dev{font-weight:500}
.pc-dev__sym{font-size:12.5px;color:var(--muted);margin-top:2px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-when{font-size:13px}
.pc-when__ago{font-size:11.5px;color:var(--faint);margin-top:2px}
.pc-row__actions{display:flex;justify-content:flex-end;color:var(--faint)}
.pc-row:hover .pc-row__actions{color:var(--accent)}

/* ───────── cards / forms ───────── */
.pc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.pc-card--accent{border-color:var(--accent-line)}
.pc-card__title{
  display:flex;align-items:center;gap:9px;padding:15px 18px;border-bottom:1px solid var(--border);
  font-weight:600;font-size:14.5px;background:var(--surface-2)
}
.pc-card__title svg{color:var(--accent)}
.pc-card__opt,.pc-card__title .pc-card__opt{font-weight:400;color:var(--faint);font-size:12px}
.pc-card__edit{margin-left:auto;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border-2);background:var(--surface);color:var(--muted);border-radius:7px;padding:5px 10px;font-size:12.5px;cursor:pointer}
.pc-card__edit:hover{color:var(--accent);border-color:var(--accent-line)}
.pc-card__edit.is-save{background:var(--accent);color:#fff;border-color:var(--accent)}
.pc-card__edit-group{margin-left:auto;display:flex;gap:7px}
.pc-card__body{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}

.pc-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pc-field--full{grid-column:1/-1}
.pc-field__label{font-size:12.5px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:6px}
.pc-field__label em{color:#e11d48;font-style:normal}
.pc-field__tag{font-size:10px;font-weight:600;background:var(--accent-weak);color:var(--accent);padding:2px 7px;border-radius:999px;font-family:var(--font-disp);letter-spacing:.03em}
.pc-field__hint{font-size:11.5px;color:var(--faint)}
.pc-field__err{font-size:11.5px;color:#e11d48;font-weight:500}
.pc-input{
  width:100%;border:1px solid var(--border-2);background:var(--surface);color:var(--text);
  border-radius:var(--radius-sm);padding:10px 13px;font-size:14px;font-family:inherit;outline:none;transition:.15s;
}
.pc-input::placeholder{color:var(--faint)}
.pc-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pc-textarea{resize:vertical;line-height:1.5}
.pc-field.has-err .pc-input{border-color:#e11d48}

.pc-chips{display:flex;flex-wrap:wrap;gap:7px}
.pc-chip{border:1px solid var(--border-2);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 13px;font-size:12.5px;cursor:pointer;transition:.15s}
.pc-chip:hover{border-color:var(--accent-line);color:var(--text)}
.pc-chip.is-on{background:var(--accent-weak);color:var(--accent);border-color:var(--accent-line);font-weight:600}

.pc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pc-form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}

/* photos */
.pc-photos__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.pc-photo{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}
.pc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pc-photo__del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.pc-photo__add{
  aspect-ratio:1;border:1.5px dashed var(--border-2);background:var(--surface-2);border-radius:var(--radius-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);
  cursor:pointer;font-size:11.5px;text-align:center;padding:6px;transition:.15s;
}
.pc-photo__add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-weak)}

/* empty */
.pc-empty{text-align:center;padding:64px 20px;color:var(--muted)}
.pc-empty__icon{width:60px;height:60px;border-radius:50%;background:var(--surface-3);color:var(--faint);display:grid;place-items:center;margin:0 auto 16px}
.pc-empty__title{font-weight:600;font-size:16px;color:var(--text)}
.pc-empty__sub{font-size:13.5px;margin-top:4px}

/* ───────── detail ───────── */
.pc-detail-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}
.pc-detail-head__id{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pc-detail-head__id .pc-mono{font-size:15px;color:var(--accent);font-weight:600}
.pc-detail-head__actions{display:flex;gap:10px;flex:none}
.pc-detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:start;margin-top:24px}
.pc-detail-col{display:flex;flex-direction:column;gap:18px;min-width:0}

/* stepper */
.pc-stepper{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 14px 16px;box-shadow:var(--shadow);overflow-x:auto}
.pc-step{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:88px;text-align:center}
.pc-step__node{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;z-index:1;
  background:var(--surface-3);color:var(--faint);border:2px solid var(--border-2);transition:.2s;
}
.pc-step__label{font-size:12px;color:var(--muted);font-weight:500;line-height:1.25}
.pc-step__bar{position:absolute;top:19px;left:50%;width:100%;height:2.5px;background:var(--border-2);z-index:0}
.pc-step.is-done .pc-step__node{background:var(--tone);border-color:var(--tone);color:#fff}
.pc-step.is-done .pc-step__bar{background:var(--tone)}
.pc-step.is-done .pc-step__label{color:var(--text-2)}
.pc-step.is-active .pc-step__node{background:var(--tone);border-color:var(--tone);color:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--tone) 22%,transparent)}
.pc-step.is-active .pc-step__label{color:var(--text);font-weight:700}

/* status pick */
.pc-status-pick{display:flex;flex-wrap:wrap;gap:8px;grid-column:1/-1}
.pc-status-opt{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);background:var(--surface);
  color:var(--muted);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;
}
.pc-status-opt:hover{border-color:var(--tone);color:var(--tone)}
.pc-status-opt.is-on{background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:var(--tone);border-color:var(--tone);font-weight:600}

/* info rows */
.pc-info{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:7px 0;font-size:14px;grid-column:1/-1}
.pc-info__label{color:var(--muted);font-size:13px}
.pc-info__value{color:var(--text)}
.pc-info-sep{grid-column:1/-1;height:1px;background:var(--border);margin:6px 0}
.pc-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;grid-column:1/-1}

/* timeline */
.pc-timeline{list-style:none;margin:0;padding:0}
.pc-tl{position:relative;padding:0 0 22px 40px}
.pc-tl:last-child{padding-bottom:2px}
.pc-tl::before{content:"";position:absolute;left:15px;top:30px;bottom:0;width:2px;background:var(--border)}
.pc-tl:last-child::before{display:none}
.pc-tl__node{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:var(--tone);border:2px solid color-mix(in srgb,var(--tone) 30%,var(--surface))}
.pc-tl.is-latest .pc-tl__node{background:var(--tone);color:#fff;border-color:var(--tone);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 18%,transparent)}
.pc-tl__head{display:flex;align-items:center;gap:8px}
.pc-tl__status{font-weight:600;font-size:14.5px}
.pc-tl__now{font-size:10.5px;font-weight:600;color:var(--tone);background:color-mix(in srgb,var(--tone) 14%,var(--surface));padding:2px 8px;border-radius:999px;font-family:var(--font-disp);letter-spacing:.03em}
.pc-tl__time{font-size:12.5px;color:var(--muted);margin-top:2px;font-family:var(--font-mono)}
.pc-tl__note{font-size:13.5px;color:var(--text-2);margin-top:6px;line-height:1.5}
.pc-tl__photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pc-tl__photo{width:72px;height:72px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);padding:0;cursor:pointer;background:none}
.pc-tl__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* lightbox */
.pc-lightbox{position:fixed;inset:0;background:rgba(5,8,15,.88);z-index:200;display:grid;place-items:center;padding:30px;backdrop-filter:blur(4px)}
.pc-lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:var(--shadow-lg)}
.pc-lightbox__close{position:absolute;top:22px;right:24px;width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}

/* modal */
.pc-modal{position:fixed;inset:0;background:rgba(5,8,15,.55);z-index:160;display:grid;place-items:center;padding:24px;backdrop-filter:blur(5px)}
.pc-modal__card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;width:340px;max-width:100%;position:relative;text-align:center;box-shadow:var(--shadow-lg)}
.pc-modal__close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;border:none;background:var(--surface-3);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.pc-modal__title{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;margin-bottom:18px}
.pc-modal__title svg{color:var(--accent)}
.pc-qr-big{width:200px;height:200px;margin:0 auto;background:#fff;border-radius:var(--radius-sm);padding:10px;border:1px solid var(--border)}
.pc-qr-big img{width:100%;height:100%;display:block;image-rendering:pixelated}
.pc-qr-cust{margin-top:16px}
.pc-qr-cust__name{font-weight:600;font-size:15px}
.pc-qr-cust__phone{font-size:13px;color:var(--muted);margin-top:2px}
.pc-qr-hint{font-size:12.5px;color:var(--muted);margin:12px 0;line-height:1.5}
.pc-qr-url{font-size:11px;color:var(--accent);background:var(--accent-weak);padding:9px;border-radius:8px;word-break:break-all}

/* ───────── responsive (staff) ───────── */
@media(max-width:1080px){
  .pc-detail-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .pc-app{grid-template-columns:1fr}
  .pc-sidebar{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;padding:6px 4px;padding-bottom:max(6px,env(safe-area-inset-bottom));border-right:none;border-top:1px solid var(--border);z-index:50;box-shadow:0 -4px 20px -10px rgba(13,21,38,.25)}
  .pc-sidebar__brand,.pc-sidebar__foot{display:none}
  .pc-nav{flex-direction:row;gap:0}
  .pc-nav__item{flex:1;flex-direction:column;gap:3px;padding:7px 4px;text-align:center;border-radius:10px;min-width:0}
  .pc-nav--desk{display:none!important}
  .pc-nav__txt em{display:none}
  .pc-nav__txt b{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-main{padding-bottom:74px}
  .pc-stats{grid-template-columns:1fr 1fr}
  .pc-form-grid{grid-template-columns:1fr}
  .pc-page{padding:20px 14px 84px}
  .pc-page__head{flex-direction:column;align-items:stretch;gap:14px}
  .pc-page__head-actions{justify-content:space-between}
  .pc-h1{font-size:23px}
  .pc-detail-head__actions{flex-wrap:wrap}
  .pc-detail-head__actions .pc-btn{flex:1}
  /* stepper แนวนอน: เลื่อนได้ */
  .pc-stepper{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:16px 10px 14px}
  .pc-step{min-width:70px}
  .pc-step__label{font-size:10.5px}
  /* status pick: เลื่อนได้ */
  .pc-status-pick{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .pc-status-opt{flex:none}
  /* filters: เลื่อนได้ */
  .pc-filters{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .pc-filter{flex:none}
}
/* table → cards: React (useIsMobile) ควบคุมว่าจะ render อันไหน
   CSS แค่ style — ไม่ใช้ display:none toggle อีกต่อไป */
.pc-jobcards{display:flex;flex-direction:column;gap:11px}
@media(max-width:560px){
  .pc-card__body{grid-template-columns:1fr}
  .pc-edit-grid{grid-template-columns:1fr}
  .pc-detail-head{flex-direction:column}
  .pc-dev__sym{white-space:normal}
  .pc-stats{grid-template-columns:1fr 1fr;gap:10px}
  .pc-stat__value{font-size:22px}
  .pc-form-actions{flex-direction:column-reverse}
  .pc-form-actions .pc-btn{width:100%}
  .pc-pwa-qr{width:100%}
}

/* ───────── database / settings ───────── */
.pc-page__head-actions{display:flex;gap:10px;align-items:center}
.pc-mode{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;border:1px solid var(--border-2);background:var(--surface);cursor:pointer;color:var(--text-2)}
.pc-mode i{width:8px;height:8px;border-radius:50%;flex:none}
.pc-mode--on{color:#059669;border-color:color-mix(in srgb,#059669 30%,transparent);background:color-mix(in srgb,#059669 10%,var(--surface))}
.pc-mode--on i{background:#10b981;box-shadow:0 0 0 3px color-mix(in srgb,#10b981 25%,transparent)}
.pc-mode--off{color:#d97706;border-color:color-mix(in srgb,#d97706 30%,transparent);background:color-mix(in srgb,#d97706 10%,var(--surface))}
.pc-mode--off i{background:#f59e0b}
[data-theme="dark"] .pc-mode--on{color:#34d399}
[data-theme="dark"] .pc-mode--off{color:#f1b24a}

.pc-banner{display:flex;gap:11px;align-items:flex-start;border-radius:var(--radius);padding:14px 16px;font-size:13.5px;line-height:1.55;
  background:color-mix(in srgb,var(--tone) 11%,var(--surface));color:var(--text-2);border:1px solid color-mix(in srgb,var(--tone) 26%,transparent);margin-bottom:18px}
.pc-banner svg{color:var(--tone);flex:none;margin-top:2px}
.pc-banner b{color:var(--text)}

.pc-result{display:flex;align-items:flex-start;gap:7px;grid-column:1/-1;font-size:13px;border-radius:var(--radius-sm);padding:10px 12px;line-height:1.5}
.pc-result.is-ok{background:color-mix(in srgb,#059669 12%,var(--surface));color:#047857;border:1px solid color-mix(in srgb,#059669 28%,transparent)}
.pc-result.is-err{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.pc-result svg{flex:none;margin-top:2px}
[data-theme="dark"] .pc-result.is-ok{color:#34d399}
[data-theme="dark"] .pc-result.is-err{background:color-mix(in srgb,#dc2626 14%,var(--surface));color:#f87171;border-color:color-mix(in srgb,#dc2626 35%,transparent)}

.pc-prose{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:0 0 12px}
.pc-prose b{color:var(--text)}
.pc-hosts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.pc-hosts li{display:flex;flex-direction:column;gap:2px;padding:11px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm)}
.pc-hosts b{font-size:14px;font-family:var(--font-disp)}
.pc-hosts span{font-size:12.5px;color:var(--muted)}

.pc-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.6;color:var(--text-2)}
.pc-steps li{padding-left:4px}
.pc-steps b{color:var(--text)}
.pc-steps code{font-family:var(--font-mono);background:var(--surface-3);padding:1px 6px;border-radius:5px;font-size:12.5px;color:var(--accent)}
.pc-steps i{font-style:normal;font-weight:600;color:var(--text)}

.pc-code{position:relative;margin:10px 0 2px;background:#0d1424;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.pc-code pre{margin:0;padding:14px 16px;overflow-x:auto;font-family:var(--font-mono);font-size:12px;line-height:1.6;color:#c8d4ea;white-space:pre}
.pc-code code{font-family:var(--font-mono)}
.pc-copy{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);color:#dbe6f7;border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:5px 10px;font-size:11.5px;cursor:pointer;font-family:var(--font-th);z-index:1}
.pc-copy:hover{background:rgba(255,255,255,.18)}

/* quick links (mobile — ตั้งค่า/ติดตั้งแอป ที่ซ่อนจากเมนูล่าง) */
.pc-quick-links{display:none;gap:10px;margin-bottom:16px}
.pc-quick{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border-2);border-radius:999px;padding:8px 14px;font-size:12.5px;color:var(--muted);cursor:pointer;font-family:inherit;font-weight:500}
.pc-quick:active{background:var(--accent-weak);color:var(--accent);border-color:var(--accent-line)}
.pc-quick svg{color:var(--accent)}
@media(max-width:860px){ .pc-quick-links{display:flex} }

.pc-btn--danger{background:#dc2626;color:#fff;border-color:#dc2626;box-shadow:0 8px 18px -8px rgba(220,38,38,.4)}
.pc-btn--danger:hover{background:#b91c1c;border-color:#b91c1c}
[data-theme="dark"] .pc-btn--danger{background:#ef4444}
[data-theme="dark"] .pc-btn--danger:hover{background:#dc2626}

/* ───────── confirm delete dialog ───────── */
.pc-confirm{text-align:center;padding:32px 28px}
.pc-confirm__icon{width:60px;height:60px;border-radius:50%;background:#fef2f2;color:#dc2626;display:grid;place-items:center;margin:0 auto 16px;border:2px solid #fecaca}
.pc-confirm__title{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text)}
.pc-confirm__msg{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:22px}
.pc-confirm__actions{display:flex;gap:10px;justify-content:center}
[data-theme="dark"] .pc-confirm__icon{background:color-mix(in srgb,#ef4444 16%,var(--surface));border-color:color-mix(in srgb,#ef4444 35%,transparent)}
.pc-acct-form .pc-input{flex:1;min-width:160px}

.pc-loading,.cx-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:90px 20px;color:var(--muted);font-size:14px}
.cx-loading{padding:70px 20px;color:#64748b}
.pc-spin,.cx-spin{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--accent-weak);color:var(--accent);animation:pc-rot 1s linear infinite}
.cx-spin{background:var(--accent-weak)}
@keyframes pc-rot{to{transform:rotate(360deg)}}

/* ───────── job cards (mobile) ───────── */
.pc-jobcards{display:none;flex-direction:column;gap:11px}
.pc-jobcard{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 15px;cursor:pointer;display:flex;flex-direction:column;gap:3px;width:100%}
.pc-jobcard:active{transform:scale(.99)}
.pc-jobcard__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.pc-jobcard__cust{font-weight:600;font-size:15px}
.pc-jobcard__phone{font-size:13px;color:var(--muted)}
.pc-jobcard__dev{font-size:13.5px;margin-top:5px;font-weight:500}
.pc-jobcard__sym{font-size:13px;color:var(--muted);line-height:1.5}
.pc-jobcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid var(--border);font-size:12.5px;color:var(--faint)}
.pc-jobcard__foot span{display:inline-flex;align-items:center;gap:4px}
.pc-jobcard__go{color:var(--accent);font-weight:600}

/* ───────── install banner ───────── */
.pc-install-banner{display:none;align-items:center;gap:11px;position:fixed;left:10px;right:10px;bottom:78px;z-index:48;
  background:var(--surface);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px 12px}
.pc-install-banner img{width:40px;height:40px;border-radius:9px;flex:none}
.pc-install-banner__txt{display:flex;flex-direction:column;flex:1;min-width:0}
.pc-install-banner__txt b{font-size:13.5px}
.pc-install-banner__txt span{font-size:11.5px;color:var(--muted)}
.pc-install-banner__go{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;flex:none}
.pc-install-banner__x{background:none;border:none;color:var(--faint);cursor:pointer;display:grid;place-items:center;padding:4px;flex:none}

/* ───────── install page ───────── */
.pc-pwa-qr{display:grid;place-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;width:220px;margin:4px auto 0}
.pc-pwa-qr img{width:180px;height:180px;display:block;image-rendering:pixelated}
.pc-pwa-url{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 13px}
.pc-pwa-url .pc-mono{font-size:12.5px;color:var(--accent);word-break:break-all;flex:1;min-width:140px}
.pc-pwa-os{border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 15px;margin-top:12px;background:var(--surface-2)}
.pc-pwa-os.is-active{border-color:var(--accent-line);background:var(--accent-weak)}
.pc-pwa-os__head{font-weight:700;font-size:14px;margin-bottom:8px}
.pc-pwa-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.pc-pwa-steps b{color:var(--text)}

/* ───────── login ───────── */
.pc-app--login{display:block;min-height:100vh}
.pc-login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px 20px;
  background:radial-gradient(900px 520px at 50% -10%,var(--accent-weak),transparent 70%),var(--bg)}
.pc-login__card{background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow-lg);
  width:380px;max-width:100%;padding:34px 30px;display:flex;flex-direction:column;align-items:center;text-align:center}
.pc-login__logo{width:96px;height:96px;object-fit:cover;border-radius:18px;border:1px solid var(--border);background:#fff;margin-bottom:6px}
.pc-login__title{font-size:18px;font-weight:700;margin-top:10px}
.pc-login__sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.pc-login__mode{margin:16px 0 4px}
.pc-login__form{width:100%;display:flex;flex-direction:column;gap:13px;margin-top:14px;text-align:left}
.pc-login__hint{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12.5px;color:var(--muted);background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;margin-top:16px;width:100%}
.pc-login__hint b{color:var(--accent);font-family:var(--font-mono)}
.pc-login__foot{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.7}
.pc-link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:12.5px;font-weight:600;font-family:inherit;padding:0;text-decoration:underline}
.pc-login__copyright{font-size:11.5px;color:var(--faint);font-family:var(--font-disp);letter-spacing:.04em}

/* ───────── user chip (sidebar) ───────── */
.pc-user{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 10px}
.pc-user__avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-weak);color:var(--accent);display:grid;place-items:center;flex:none}
.pc-user__info{display:flex;flex-direction:column;min-width:0;flex:1}
.pc-user__info b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-user__info em{font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-user__out{width:28px;height:28px;border-radius:7px;border:1px solid var(--border-2);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.pc-user__out:hover{color:#dc2626;border-color:color-mix(in srgb,#dc2626 30%,transparent)}