/* ==========================================================================
   OXU — Button theo Silver Tiger DS (Figma "Design System - Website - SilverTiger", component set "Button" 59:1601)
   Kiểu (Type):  primary · secondary · tonal 1 · tonal 2 · text · link  (+ Destructive)
   Cỡ (Size):    xlarge 48 · large 44 · medium 40 (mặc định) · small 36 · xsmall 32 · xxsmall 28
   Bo góc 8 · chữ Inter Medium (500) · 14px (≥ medium: 14, large/xlarge: 16, small/xsmall: 13, xxsmall: 12) · gap 8 (xxsmall 4)

   Dùng:  <button class="st-button st-button--primary">            nút chính (1 / khu vực)
          <button class="st-button st-button--secondary">          phương án thay thế quan trọng (viền xanh)
          <button class="st-button st-button--tonal">              hành động phụ có màu thương hiệu (+ Thêm…, Tạo…)
          <button class="st-button st-button--neutral">            hành động phụ trung tính (Huỷ, Sửa, Đổi mật khẩu…) = DS "tonal 2"
          <button class="st-button st-button--text">               hành động nhẹ nhất (Đóng, Bỏ qua)
          <button class="st-button st-button--link">               dạng liên kết; thêm st-button--inline khi nằm trong câu chữ
          + st-button--danger                                       bản Destructive của kiểu đó (primary → nền đỏ, text → chữ đỏ…)
          + st-button--xl | --lg | --sm | --xs | --xxs              cỡ (không ghi = medium 40)
          + st-button--icon                                         chỉ có icon (vuông theo cỡ)
   Không dùng style={{ height / minHeight }} cho nút — chọn cỡ ở trên.
   ========================================================================== */

.st-button {
  --b-h: 40px; --b-px: 20px; --b-fs: 14px; --b-gap: 8px;
  min-height: var(--b-h);
  height: var(--b-h);
  padding: 0 var(--b-px);
  gap: var(--b-gap);
  border: 1px solid transparent;
  border-radius: 8px;
  font: 500 var(--b-fs) / 1.4 var(--font-body, Inter, system-ui, sans-serif);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
  vertical-align: middle;
}
.st-button > svg, .st-button > .oxu-icon { flex: none; }

/* ---- cỡ ---- */
.st-button--xl  { --b-h: 48px; --b-px: 24px; --b-fs: 16px; }
.st-button--lg  { --b-h: 44px; --b-px: 20px; --b-fs: 16px; }
.st-button--sm  { --b-h: 36px; --b-px: 16px; --b-fs: 13px; --b-gap: 6px; }
.st-button--xs  { --b-h: 32px; --b-px: 16px; --b-fs: 13px; --b-gap: 6px; }
.st-button--xxs { --b-h: 28px; --b-px: 12px; --b-fs: 12px; --b-gap: 4px; }
.st-button--icon { width: var(--b-h); padding: 0; }

/* ---- kiểu ---- */
.st-button--secondary { background: var(--bg-primary, #fff); color: var(--btn-text-secondary, #026eee); border-color: var(--btn-border-brand, #026eee); }
.st-button--secondary:hover { background: #f6f9fd; }
.st-button--tonal { background: #eff6ff; color: var(--btn-text-brand, #026eee); }
.st-button--tonal:hover { background: #deedff; }
.st-button--neutral { background: #eceff3; color: var(--text-primary, #0b0809); }
.st-button--neutral:hover { background: #e8ebed; }
.st-button--text { background: transparent; color: var(--text-primary, #0b0809); }
.st-button--text:hover { background: #f4f4f4; }
.st-button--link { background: transparent; color: var(--btn-text-brand, #026eee); }
.st-button--link:hover { text-decoration: underline; }
.st-button--inline { --b-h: auto; height: auto; min-height: 0; padding: 0; border: 0; font-size: inherit; vertical-align: baseline; }

/* trạng thái bật (nút bật/tắt trong thanh công cụ) */
.st-button.is-on:not(.st-button--primary), .st-button[aria-pressed="true"]:not(.st-button--primary) { background: #eff6ff; color: var(--btn-text-brand, #026eee); }

/* ---- Destructive ---- */
.st-button--danger, .st-button--destructive { background: #dc2626; color: #fff; border-color: transparent; }
.st-button--danger:hover, .st-button--destructive:hover { background: #b42318; }
.st-button--secondary.st-button--danger { background: var(--bg-primary, #fff); color: #dc2626; border-color: #dc2626; }
.st-button--secondary.st-button--danger:hover { background: #fef3f2; }
.st-button--tonal.st-button--danger, .st-button--neutral.st-button--danger { background: #fef3f2; color: #dc2626; }
.st-button--tonal.st-button--danger:hover, .st-button--neutral.st-button--danger:hover { background: #fee4e2; }
.st-button--text.st-button--danger, .st-button--link.st-button--danger { background: transparent; color: #dc2626; }
.st-button--text.st-button--danger:hover { background: #fef3f2; }

/* ---- Press / disabled: exact light-mode Figma state colours ---- */
.st-button.st-button--primary { background:linear-gradient(180deg,#00a4d5,#0168ed);color:#fff; }
.st-button.st-button--primary:hover { background:linear-gradient(180deg,#099ecb,#005ed8); }
.st-button.st-button--primary:active { background:linear-gradient(180deg,#008fbb,#00449b); }
.st-button--secondary:active { background:#ebf5ff; }
.st-button--neutral:active { background:#d9dcdf; }
.st-button--tonal:active { background:#cfe2fa; }
.st-button--text:active { background:#eceff3; }
.st-button:is(:disabled,[aria-disabled="true"]){cursor:not-allowed;text-decoration:none;opacity:1;box-shadow:none}
.st-button.st-button--primary:is(:disabled,[aria-disabled="true"]){background:linear-gradient(180deg,#23b6e3,#4c94ef);color:#ffffff99;border-color:transparent}
.st-button--secondary:is(:disabled,[aria-disabled="true"]){background:transparent;color:#92c1f8;border-color:#cfe2fa}
.st-button--tonal:is(:disabled,[aria-disabled="true"]){background:#eff6ff;color:#60a4f4;opacity:.7}
.st-button--neutral:is(:disabled,[aria-disabled="true"]){background:#eceff3;color:#9a999a}
.st-button--text:is(:disabled,[aria-disabled="true"]){background:transparent;color:#9a999a}
.st-button--link:is(:disabled,[aria-disabled="true"]){background:transparent;color:#92c1f8}
.st-button.st-button--destructive,.st-button.st-button--primary.st-button--danger{background:#dc2626;color:#fff}
.st-button.st-button--destructive:hover,.st-button.st-button--primary.st-button--danger:hover{background:#bb2020}
.st-button.st-button--destructive:active,.st-button.st-button--primary.st-button--danger:active{background:#9c1b1b}
.st-button.st-button--destructive:is(:disabled,[aria-disabled="true"]),.st-button.st-button--danger:is(:disabled,[aria-disabled="true"]){background:#ffe6e6;color:#f5b0b0;border-color:transparent}
.st-button:focus-visible{outline:2px solid #026eee;outline-offset:3px;box-shadow:none}
.st-button--danger:focus-visible,.st-button--destructive:focus-visible{outline-color:#dc2626}
.st-button[aria-busy="true"]{cursor:wait}
.st-button.st-button--loading{cursor:wait}
.st-button.st-button--loading:disabled{opacity:1}

/* ---- chế độ tối ---- */
[data-theme="dark"] .st-button--secondary { background: transparent; }
[data-theme="dark"] .st-button--tonal, [data-theme="dark"] .st-button.is-on { background: rgba(2, 110, 238, .16); color: #5cb6fe; }
[data-theme="dark"] .st-button--tonal:hover { background: rgba(2, 110, 238, .24); }
[data-theme="dark"] .st-button--neutral { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
[data-theme="dark"] .st-button--neutral:hover, [data-theme="dark"] .st-button--text:hover { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .st-button--link { color: #5cb6fe; }
[data-theme="dark"] .st-button--tonal.st-button--danger, [data-theme="dark"] .st-button--neutral.st-button--danger { background: rgba(217, 45, 32, .16); color: #fda29b; }
[data-theme="dark"] .st-button--text.st-button--danger { color: #fda29b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-button--secondary { background: transparent; }
  :root:not([data-theme="light"]) .st-button--tonal, :root:not([data-theme="light"]) .st-button.is-on { background: rgba(2, 110, 238, .16); color: #5cb6fe; }
  :root:not([data-theme="light"]) .st-button--neutral { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
  :root:not([data-theme="light"]) .st-button--neutral:hover, :root:not([data-theme="light"]) .st-button--text:hover { background: rgba(255, 255, 255, .12); }
  :root:not([data-theme="light"]) .st-button--link { color: #5cb6fe; }
}
@media (prefers-reduced-motion: reduce) { .st-button { transition: none; } }

/* ---- Quy ước theo khu vực (một cỡ cho cả khu vực, không chỉnh từng nút) ---- */
/* Settings: mọi nút cỡ small (36) */
.setgroup .st-button:not(.st-button--inline):not(.st-button--icon) { --b-h: 36px; --b-px: 16px; --b-fs: 13px; --b-gap: 6px; }
/* Thanh đầu Calendar / Tasks: nút cỡ small (36), kể cả "+ Event", "New", "New task" và nút icon (18/10/2026) */
.cal__head .st-button:not(.st-button--inline), .tasks__head .st-button:not(.st-button--inline) { --b-h: 36px; --b-px: 14px; --b-fs: 13px; --b-gap: 6px; --b-icon: 16px; }

/* Layout classes retain placement; button geometry belongs to this recipe. */
.st-button.st-button{display:inline-flex;align-items:center;justify-content:center;height:var(--b-h);min-height:var(--b-h);padding:0 var(--b-px);gap:var(--b-gap);border-radius:8px;font-size:var(--b-fs);font-weight:500;line-height:1.4;box-shadow:none;font-feature-settings:"salt" 1}
.st-button.st-button--icon{width:var(--b-h);padding:0}
.st-button.st-button--inline{height:auto;min-height:0;padding:0;border:0;font-size:inherit}
/* Nút tạo mới / viết mới (Compose, New, New note, New chat, New task, + Event…): cỡ medium 40px, rộng theo nội dung (hug).
   Đè các quy tắc cũ đặt cứng height 48–52px / width 100% trong reader.css, suite.css, workspace-ui.css, app.css. */
.st-button.st-button.rail-compose,.st-button.st-button.drv-new{--b-h:40px;--b-px:16px;--b-fs:14px;--b-icon:20px;height:40px;min-height:40px;width:auto;max-width:100%;
  flex:none;align-self:flex-start;justify-content:center;margin:0 0 10px;padding:0 var(--b-px);gap:8px;border-radius:8px}
.rail--mini .st-button.st-button.rail-compose{width:40px;padding:0;align-self:center}
@media(max-width:720px){.drv-nav .st-button.st-button.drv-new{margin:0}}
[data-theme="dark"] .st-button--secondary:is(:disabled,[aria-disabled="true"]){color:#526a88;border-color:#344054}
[data-theme="dark"] .st-button--neutral:is(:disabled,[aria-disabled="true"]){background:#242933;color:#667085}
[data-theme="dark"] .st-button--tonal:is(:disabled,[aria-disabled="true"]){background:#142c48;color:#526a88}
.st-button:is(:disabled,[aria-disabled="true"]):not(.st-button--secondary){border-color:transparent}
.st-button{--b-icon:20px}
.st-button--xl,.st-button--lg{--b-icon:24px}
.st-button--sm,.st-button--xs{--b-icon:16px}
.st-button--xxs{--b-icon:14px}
.st-button>.oxu-icon{width:var(--b-icon)!important;height:var(--b-icon)!important}
.st-button[aria-busy="true"].st-button--primary:disabled,.st-button--loading.st-button--primary:disabled{background:linear-gradient(180deg,#00a4d5,#0168ed);color:#fff}

.st-button.st-button.drv-new.st-button--icon{width:var(--b-h);--b-px:0;align-self:center}

/* Attached split action: uses the same size and state recipes as ordinary buttons. */
.st-button-group{display:inline-flex;align-items:center;gap:0}
.st-button.st-button--split-start{border-top-right-radius:0;border-bottom-right-radius:0}
.st-button.st-button--split-end{border-top-left-radius:0;border-bottom-left-radius:0;border-left-color:rgba(255,255,255,.3)}