/* ============================================================================
   LogisticsOS — the look of docs/ui/logisticsos v5.dc.html.

   Two halves:
   1. tokens (--s1, --t1, --ac …) and content classes (.app-content, .pane,
      .pane-title, .btn-primary …) — the contract page Components are written to;
   2. the shell itself (.lo-shell, .lo-side, .lo-nav …).
   Colours and sizes are the mock's own (its :root and inline styles).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* the mock's palette */
  --color-ink:#121212;--color-text:#141414;--color-divider:#e6e6e3;
  --color-accent:#f5c518;--color-accent-100:#fffbe6;--color-accent-300:#ffe48a;--color-accent-600:#e3b300;--color-accent-700:#806200;--color-accent-800:#634c00;
  --color-neutral-100:#f8f8f7;--color-neutral-200:#f0f0ee;--color-neutral-300:#e2e2df;--color-neutral-400:#bdbdb8;--color-neutral-500:#92928c;--color-neutral-600:#6b6b66;--color-neutral-700:#4c4c48;
  --font-body:"IBM Plex Sans Thai",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* short token names page Components use */
  --bg:#ffffff;--s1:#ffffff;--s2:var(--color-neutral-100);--s3:var(--color-neutral-200);
  --border:var(--color-divider);--border-hi:var(--color-neutral-300);
  --t1:var(--color-text);--t2:var(--color-neutral-700);--t3:var(--color-neutral-500);
  --accent:var(--color-accent);--adim:var(--color-accent-100);
  --ac:var(--color-accent);--ac-dark:var(--color-accent-600);--ac-soft:var(--color-accent-100);
  --ok:#15803d;--run:var(--color-accent-800);--fail:#b91c1c;--pend:var(--color-neutral-500);--dl:#6a1b9a;--info:#3949ab;
  --ctl-h:40px;--ctl-h-sm:32px;--row-py:11px;--fs:14px;--fs-sm:12.5px;--radius:6px;
}

html,body{min-height:100%}
body{background:#fff;color:var(--t1);font-family:var(--font-body);font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--color-accent-700)}
a:hover{color:var(--t1)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
[hidden]{display:none!important}

/* ---- 1. content classes ---- */
.cknui,.cknui>*{display:block;min-width:0}
.app-content{display:flex;flex-direction:column;min-width:0}
.pane{padding:28px 32px 40px;max-width:1440px;width:100%;display:flex;flex-direction:column;gap:16px}
.pane-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pane-eye{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:4px}
.pane-title{font-size:30px;font-weight:600;line-height:1.15;color:var(--t1)}
.pane-desc{font-size:14px;color:var(--t2);margin-top:4px;max-width:720px;line-height:1.55;text-wrap:pretty}
.hdr-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-primary,.btn-ghost,.btn-danger{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-h);padding:0 18px;border-radius:var(--radius);font-family:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--color-accent);color:#141414;border:1px solid var(--color-text);font-weight:600}
.btn-primary:hover{background:var(--color-accent-600)}
.btn-ghost{background:#fff;color:var(--t1);border:1px solid var(--border-hi)}
.btn-ghost:hover{background:var(--s2)}
.btn-danger{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.btn-sm{height:var(--ctl-h-sm);padding:0 12px;font-size:12.5px}
.btn-primary:disabled,.btn-ghost:disabled,.btn-danger:disabled{opacity:.45;cursor:not-allowed}
.ptabs{display:flex;gap:6px;flex-wrap:wrap}
.ptab{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border-hi);background:#fff;color:var(--t1);font-family:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.ptab:hover{border-color:var(--t3)}
.ptab.active{background:var(--color-ink);border-color:var(--color-ink);color:#fff}

/* ---- standard components (@ckn-technology/ui `plain` theme) in this palette ----
   <html data-ckn-theme="light"> keeps ckn-ui.css out of its dark mode. */
:root{
  --ckn-color-primary:var(--color-ink);--ckn-color-primary-contrast:#fff;
  --ckn-color-danger:#b91c1c;--ckn-color-success:#15803d;--ckn-color-warning:var(--color-accent);--ckn-color-info:#3949ab;
  --ckn-color-bg:#fff;--ckn-color-surface:#fff;--ckn-color-surface-2:var(--color-neutral-100);
  --ckn-color-text:var(--color-text);--ckn-color-muted:var(--color-neutral-600);--ckn-color-border:var(--color-divider);
  --ckn-color-focus:rgba(245,197,24,.45);
  --ckn-radius:6px;--ckn-font:var(--font-body);--ckn-font-size:14px;--ckn-font-size-sm:12.5px;
  --ckn-control-height:36px;--ckn-control-padding:6px 12px;
}
.ckn-table-wrap{border:1px solid var(--color-divider);border-radius:8px;background:#fff}
.ckn-datatable{font-size:13.5px}
.ckn-datatable th,.ckn-datatable td{padding:10px 12px;border-bottom:1px solid var(--color-divider);vertical-align:middle}
.ckn-datatable tbody tr:last-child td{border-bottom:0}
.ckn-datatable__head th{background:var(--color-neutral-100);color:var(--color-neutral-600);font-size:12px;font-weight:600;white-space:nowrap}
.ckn-datatable--hover tbody tr:hover td{background:var(--color-accent-100)}
.ckn-datatable__thbtn{font-weight:600}
.ckn-toolbar .ckn-control{min-width:280px}
.ckn-pager__link{color:var(--t1)}
.ckn-pager__item.is-selected .ckn-pager__link{background:var(--color-ink);border-color:var(--color-ink);color:#fff}
.ckn-btn--outline{background:#fff}
.ckn-toast{font-family:var(--font-body);font-size:13px;background:var(--color-ink)}
.ckn-toast--success{background:#14532d}.ckn-toast--error{background:#991b1b}

/* ---- 2. the shell ---- */
.lo-shell{min-height:100vh;display:flex;align-items:stretch}
.lo-side{width:256px;flex:none;position:sticky;top:0;height:100vh;background:var(--color-ink);color:#e8e8e5;display:flex;flex-direction:column;z-index:6}
.lo-main{flex:1;min-width:0;display:flex;flex-direction:column}

.lo-brand{display:flex;align-items:center;gap:12px;padding:18px 20px 16px;border-bottom:1px solid #2a2a28;margin-bottom:12px}
.lo-brand-logo{height:26px;width:auto;flex:none;display:block}
.lo-brand-txt{display:flex;flex-direction:column;min-width:0}
.lo-brand-name{font-size:15.5px;font-weight:600;color:#fff;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-brand-sub{font-size:12px;color:#8f8f8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lo-search{display:flex;align-items:center;gap:10px;margin:0 14px 12px;padding:0 12px;height:40px;border-radius:10px;background:#1f1f1e;border:1px solid transparent;color:#8f8f8a;flex:none}
.lo-search:focus-within{border-color:#3a3a38}
.lo-search svg{width:16px;height:16px;flex:none}
.lo-search-inp{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-family:var(--font-body);font-size:14px}
.lo-search-inp::placeholder{color:#8f8f8a}
.lo-search-inp::-webkit-search-cancel-button{filter:invert(.6)}
.lo-search-kbd{font-family:var(--font-mono);font-size:10.5px;padding:1px 6px;border:1px solid #3a3a38;border-radius:4px;color:#8f8f8a}
.lo-search:focus-within .lo-search-kbd{display:none}
.lo-group{display:flex;flex-direction:column;gap:1px}
.lo-nav-empty{padding:16px 10px;font-size:12.5px;color:#8f8f8a}

.lo-eye{font-size:10.5px;letter-spacing:.12em;font-weight:600;color:#8f8f8a;text-transform:uppercase}
.lo-role{padding:0 14px 8px;display:flex;flex-direction:column;gap:4px}
.lo-role-row{display:flex;gap:6px}
.lo-role select{flex:1;min-width:0;height:34px;padding:0 8px;border-radius:6px;border:1px solid #3a3a38;background:#1f1f1e;color:#fff;font-size:13px;font-family:var(--font-body)}
.lo-role-go{height:34px;padding:0 10px;border-radius:6px;border:1px solid #3a3a38;background:#1f1f1e;color:#e8e8e5;font-family:inherit;cursor:pointer}
.lo-role.js .lo-role-go{display:none}

.lo-nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding:4px 10px 12px;scrollbar-width:thin;scrollbar-color:#333 transparent}
.lo-head{display:flex;align-items:center;gap:8px;padding:14px 10px 6px;flex:none}
.lo-head span{font-size:10.5px;letter-spacing:.12em;font-weight:600;color:#8f8f8a;white-space:nowrap}
.lo-head i{flex:1;height:1px;background:#2a2a28}
.lo-mi{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:#e8e8e5;text-decoration:none;flex:none}
.lo-mi:hover{background:#1f1f1e;color:#fff}
.lo-mi-n{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid #4a4a47;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px}
.lo-mi-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.lo-mi-en{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-mi-th{font-size:11px;color:#8f8f8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-mi.on,.lo-mi.on:hover{background:var(--color-accent);color:#141414}
.lo-mi.on .lo-mi-n{border-color:#141414}
.lo-mi.on .lo-mi-th{color:#4a3a00}
.lo-mi.soon{opacity:.45;cursor:default}
.lo-mi.soon:hover{background:transparent;color:#e8e8e5}
.lo-mi-soon{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#8f8f8a}


.lo-foot{border-top:1px solid #2a2a28;padding:12px 16px;display:flex;align-items:center;gap:10px}
.lo-avatar{width:32px;height:32px;flex:none;border-radius:50%;background:#2a2a28;color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.lo-who{display:flex;flex-direction:column;min-width:0;flex:1}
.lo-who-name{font-size:13px;color:#fff;font-weight:500}
.lo-who-role{font-size:11px;color:#8f8f8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-logout{color:#8f8f8a;display:flex;padding:6px;border-radius:6px}
.lo-logout svg{width:16px;height:16px}
.lo-logout:hover{color:#fff;background:#1f1f1e}

/* Narrow screens: the sidebar becomes a block above the page. */
@media(max-width:860px){
  .lo-shell{flex-direction:column}
  .lo-side{width:auto;height:auto;position:static}
  .lo-nav{max-height:50vh}
  .pane{padding:20px 16px 32px}
  .pane-title{font-size:24px}
}