/* Shared tokens for the SKF prototype.
   Two surfaces, two palettes, one set of names:
   - /direct is the distributor's storefront, drawn from the design board —
     white, with SKF's green as the only accent.
   - /cloud is BO Cloud's back office — the navy rail the product already has.
   Both are described here so a component moved between them keeps its shape. */
:root {
  --skf-green: #00B187;
  --skf-green-dark: #009874;
  --skf-green-tint: #EBF9F5;
  --skf-green-tint2: #E1F6F1;

  --rail-bg: #0B3556;
  --rail-icon-hover-bg: #164A73;
  --rail-icon-idle: #8FB2CE;
  --rail-active-bg: #E8F2FD;
  --rail-active-fg: #1877D2;

  --app-bg: #F2F2F2;
  --card-bg: #ffffff;
  --card-border: #E0E0E0;
  --table-header-bg: #FAFAFA;
  --row-divider: #EFEFEF;
  --row-hover: #FAFAFA;
  --divider: #EBEBEB;
  --control-border: #E0E0E0;

  --text-primary: #0A0A0A;
  --text-secondary: #616161;
  --text-tertiary: #9E9E9E;
  --text-faint: #BDBDBD;

  --primary: #1877D2;
  --info-bg: #EBF4FF;
  --danger: #FF3B30;

  --tone-ok-bg: #E1F6F1;   --tone-ok-fg: #00795F;
  --tone-warn-bg: #FFF3DC; --tone-warn-fg: #9A6B12;
  --tone-bad-bg: #FDECEC;  --tone-bad-fg: #C62828;
  --tone-info-bg: #EBF4FF; --tone-info-fg: #1877D2;
  --tone-neutral-bg: #F0F0F0; --tone-neutral-fg: #5B6876;

  --radius-card: 8px;
  --radius-control: 6px;
  --font: 'Noto Sans TC', 'Montserrat', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* The [hidden] attribute is display:none only in the UA stylesheet, so any
   author rule that sets display — .banner is display:flex — silently beats it
   and the element stays on screen with its `hidden` property reading true.
   That is how the quotation-mode banner showed in both modes for a day. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
}

/* Controls that exist so the product reads as the real thing, but are outside
   this prototype. Marked rather than hidden: hiding them would misrepresent
   what BO Cloud is, and pretending they work would misrepresent what we built. */
.mvp-unsupported,
[aria-disabled="true"] { cursor: not-allowed !important; }
.mvp-unsupported * { cursor: not-allowed !important; }
.mvp-unsupported:hover { filter: saturate(0.6); }
button:disabled { cursor: not-allowed; opacity: 0.55; }

.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; font-size: 20px;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr; -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ---- shared atoms ------------------------------------------------------ */

.chip {
  display: inline-block; padding: 2px 10px; border-radius: 11px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--tone-neutral-bg); color: var(--tone-neutral-fg);
}
.chip.ok { background: var(--tone-ok-bg); color: var(--tone-ok-fg); }
.chip.warn { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.chip.bad { background: var(--tone-bad-bg); color: var(--tone-bad-fg); }
.chip.info { background: var(--tone-info-bg); color: var(--tone-info-fg); }

.btn {
  font-family: var(--font); font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--radius-control);
  border: 1px solid var(--control-border); background: #fff;
  color: var(--text-primary); cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--row-hover); }
.btn.primary { background: var(--skf-green); border-color: var(--skf-green); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--skf-green-dark); border-color: var(--skf-green-dark); }
.btn.blue { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.blue:hover:not(:disabled) { background: #0F5CA8; border-color: #0F5CA8; }
.btn.danger { color: var(--danger); border-color: #F3C6C4; }
.btn.sm { padding: 5px 12px; font-size: 13px; }

input[type=text], input[type=number], input[type=date], select, textarea {
  font-family: var(--font); font-size: 14px; color: var(--text-primary);
  padding: 8px 10px; border: 1px solid var(--control-border);
  border-radius: var(--radius-control); background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--skf-green);
}
label.field { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  text-align: left; font-weight: 500; font-size: 12px; color: var(--text-secondary);
  background: var(--table-header-bg); padding: 10px 12px;
  border-bottom: 1px solid var(--divider); white-space: nowrap;
}
table.grid td { padding: 11px 12px; border-bottom: 1px solid var(--row-divider); vertical-align: middle; }
table.grid tr:hover td { background: var(--row-hover); }
table.grid td.num, table.grid th.num { text-align: right; }

.card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
}

.empty { padding: 48px 24px; text-align: center; color: var(--text-tertiary); font-size: 14px; }

.role-switch { display: flex; gap: 6px; align-items: center; }
.role {
  font-family: var(--font); font-size: 12px; padding: 5px 11px; cursor: pointer;
  border-radius: 13px; border: 1px solid var(--control-border);
  background: #fff; color: var(--text-secondary);
}
.role.active { background: var(--skf-green); border-color: var(--skf-green); color: #fff; font-weight: 500; }

.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px);
  background: #0A0A0A; color: #fff; font-size: 14px; padding: 12px 22px;
  border-radius: 6px; opacity: 0; pointer-events: none; transition: all .18s ease;
  z-index: 900; max-width: 80vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--tone-bad-fg); }

/* Scaffolding is suppressed under ?clean=1 so a captured screenshot shows the
   product rather than the tooling we demo it with. */
html[data-clean] #proto-stamp { display: none; }

/* ---- language, in the product's idiom ----------------------------------- */
/* A code and a caret in the topbar, next to the user — the same control BO
   Cloud already has, rather than a pair of pills invented for this. */

.lang-drop { position: relative; }
.lang-drop-btn {
  font-family: var(--font); font-size: 13px; background: none; border: none;
  cursor: pointer; color: var(--text-primary); padding: 4px 2px;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.lang-drop-btn .caret { color: var(--text-tertiary); font-size: 10px; }
.lang-drop-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 80;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: var(--radius-card); box-shadow: 0 8px 28px rgba(0,0,0,.13); padding: 6px;
}
/* Sized by its longest label rather than a guessed width — "繁體中文 -
   Traditional Chinese" wrapping to a second line is what a fixed width buys. */
.lang-drop-item {
  display: block; width: 100%; white-space: nowrap;
  font-family: var(--font); font-size: 13.5px; line-height: 1.5; padding: 10px 14px;
  border: none; border-radius: 6px; background: none; cursor: pointer;
  color: var(--text-primary); text-align: left;
}
.lang-drop-item:hover { background: var(--row-hover); }
.lang-drop-item.active { font-weight: 600; }

/* ---- mobile ------------------------------------------------------------- */
/* A wide table cannot be made narrow without losing the comparison, which is
   the thing worth seeing. So tables scroll sideways inside their own container
   and the page itself never does. */

.table-scroll, .card, .panel, .cov-table-wrap { max-width: 100%; }
.card, .panel { overflow-x: auto; }
table.grid { min-width: 640px; }

@media (max-width: 760px) {
  table.grid th, table.grid td { padding: 9px 10px; font-size: 12.5px; }
  .toast { left: 12px; right: 12px; transform: none; max-width: none; }
  .toast.show { transform: none; }
}

/* ---- account menu ------------------------------------------------------- */
/* The shape people already know: who you are at the top, everyone else as a
   row, the way out at the bottom. */

.acct-head { display: flex; gap: 13px; padding: 18px 16px 16px; align-items: center; }
.acct-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 16px;
  background: var(--skf-green); color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; letter-spacing: -.02em;
}
.acct-avatar.lg { width: 44px; height: 44px; border-radius: 22px; font-size: 14px; }
.acct-avatar.supplier { background: var(--primary); }
.acct-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.acct-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.acct-list { border-top: 1px solid var(--divider); padding: 6px; }
.acct-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 8px; background: none;
  cursor: pointer; font-family: var(--font); text-align: left;
}
.acct-row:hover { background: var(--row-hover); }
.acct-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acct-row-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.acct-row-sub { font-size: 11.5px; color: var(--text-secondary); }

.menu-foot {
  border-top: 1px solid var(--divider); padding: 11px 16px;
  display: flex; align-items: center;
}
.menu-signout { margin-left: auto; font-size: 12.5px; color: var(--text-secondary); text-decoration: none; }
.menu-signout:hover { color: var(--danger); }