/* Softlanding Billing — clickable prototype.
   Design tokens taken from SoftLanding.TeacherPortal/tailwind.config.js + SoftLanding.Office/Styles/app.css
   (brand #FF6B00, ink = slate, shadow-card, focus ring, Material Symbols). Plain CSS on purpose: the Tailwind
   Play CDN only builds utilities, so the few component rules live here with literal token values. */

html, body { overflow-x: clip; }
body { font-feature-settings: "cv11", "ss01"; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; border: 2px solid #f4f3f8; }

/* Material Symbols (Office: .ms / .ms-fill) */
.ms { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1;
      display: inline-block; width: 1em; overflow: hidden; flex-shrink: 0; white-space: nowrap; direction: ltr;
      -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; vertical-align: middle; }
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.num { font-variant-numeric: tabular-nums; }

/* Focus ring — visible, never removed (Office + TeacherPortal) */
:focus-visible { outline: 2px solid #FF6B00; outline-offset: 2px; }
.focus-ring:focus-visible { outline: 2px solid #FF6B00; outline-offset: 2px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1rem;
       border-radius: .75rem; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer;
       transition: background-color .15s, border-color .15s, color .15s; border: 1px solid transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { height: 2.25rem; padding: 0 .75rem; border-radius: .625rem; }
.btn-primary { background: #FF6B00; color: #fff; box-shadow: 0 1px 2px 0 rgb(15 23 42 / .04), 0 1px 3px 0 rgb(15 23 42 / .06); }
.btn-primary:hover:not(:disabled) { background: #E55D00; } .btn-primary:active:not(:disabled) { background: #B84A00; }
.btn-outline { background: #fff; border-color: #CBD5E1; color: #334155; }
.btn-outline:hover:not(:disabled) { background: #F8FAFC; } .btn-outline:active:not(:disabled) { background: #F1F5F9; }
.btn-brand { background: #fff; border-color: #FF6B00; color: #B84A00; }
.btn-brand:hover:not(:disabled) { background: #FFF4EC; }
.btn-text { color: #475569; padding: 0 .75rem; }
.btn-text:hover:not(:disabled) { background: #F1F5F9; color: #0F172A; }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #B91C1C; }
.icon-btn { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .75rem; color: #64748B;
            cursor: pointer; flex-shrink: 0; transition: background-color .15s, color .15s; }
.icon-btn:hover { background: #F1F5F9; color: #0F172A; }
.icon-btn.is-brand:hover { background: #FFF4EC; color: #B84A00; }
.icon-btn.is-danger:hover { background: #FEF2F2; color: #B91C1C; }

/* ---- form fields ---- */
.fld { width: 100%; height: 2.5rem; padding: 0 .875rem; border-radius: .75rem; background: #fff; border: 1px solid #CBD5E1;
       font-size: .9375rem; color: #0F172A; outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.fld { height: auto; padding: .625rem .875rem; min-height: 5.5rem; resize: vertical; }
select.fld { padding-right: 2.25rem; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .625rem center; background-size: 1.1rem; }
.fld::placeholder { color: #94A3B8; }
.fld:focus { border-color: #FF6B00; box-shadow: 0 0 0 3px rgb(255 107 0 / .2); }
.fld:disabled { background: #F1F5F9; color: #64748B; border-color: #E2E8F0; cursor: not-allowed; }
.fld.is-invalid { border-color: #DC2626; box-shadow: 0 0 0 3px rgb(220 38 38 / .15); }
.lbl { display: block; font-size: .875rem; font-weight: 500; color: #334155; margin-bottom: .375rem; }
.hint { display: block; font-size: .75rem; color: #64748B; margin-top: .375rem; }

/* switch */
.sl-switch { position: relative; width: 2.5rem; height: 1.5rem; border-radius: 9999px; background: #CBD5E1; flex-shrink: 0; transition: background-color .15s; }
.sl-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9999px; background: #fff;
                    box-shadow: 0 1px 2px rgb(15 23 42 / .2); transition: transform .15s; }
input:checked + .sl-switch { background: #FF6B00; }
input:checked + .sl-switch::after { transform: translateX(16px); }
input:focus-visible + .sl-switch { outline: 2px solid #FF6B00; outline-offset: 2px; }

/* checkbox */
.cbx { width: 1rem; height: 1rem; accent-color: #FF6B00; cursor: pointer; }

/* ---- chips ---- */
.chip { display: inline-flex; align-items: center; gap: .25rem; font-size: 12px; font-weight: 600; line-height: 1.25rem;
        padding: 0 .5rem; border-radius: 9999px; white-space: nowrap; }
.chip .ms { font-size: 14px; }

/* ---- surfaces ---- */
.card { background: #fff; border: 1px solid #E2E8F0; border-radius: .75rem;
        box-shadow: 0 1px 2px 0 rgb(15 23 42 / .04), 0 1px 3px 0 rgb(15 23 42 / .06); }

/* ---- page tabs (MudTabs look: orange underline on the active tab) ---- */
.sl-tab { display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1rem; font-size: .9375rem; font-weight: 500;
          color: #475569; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: .5rem .5rem 0 0;
          transition: color .15s, background-color .15s; }
.sl-tab:hover { color: #0F172A; background: rgb(0 0 0 / .03); }
.sl-tab.is-active { color: #B84A00; border-bottom-color: #FF6B00; font-weight: 600; }
.sl-tab.is-active .ms { color: #FF6B00; }
.sl-tab .count { font-size: 12px; font-weight: 600; padding: 0 .4rem; border-radius: 9999px; background: #F1F5F9; color: #475569; }
.sl-tab.is-active .count { background: #FFE6D5; color: #B84A00; }

/* segmented control (Office: status segment) */
.seg { display: inline-flex; flex-wrap: wrap; padding: 2px; border-radius: .75rem; border: 1px solid #E2E8F0; background: #F8FAFC; }
.seg button { height: 2.25rem; padding: 0 .75rem; border-radius: .625rem; font-size: .875rem; font-weight: 500; color: #475569;
              display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.seg button:hover { color: #0F172A; }
.seg button.is-active { background: #fff; color: #0F172A; font-weight: 600;
                        box-shadow: 0 1px 2px 0 rgb(15 23 42 / .06), 0 1px 3px 0 rgb(15 23 42 / .08); }
.seg button .n { font-size: 11px; color: #94A3B8; }

/* ---- tables (Office: .row hover tint on the cells) ---- */
.th { padding: .625rem .75rem; font-weight: 500; font-size: .8125rem; color: #475569; text-align: left; white-space: nowrap; }
.th button { display: inline-flex; align-items: center; gap: .125rem; font-weight: 500; }
.th button:hover { color: #0F172A; }
.td { padding: .75rem; vertical-align: middle; border-top: 1px solid #F1F5F9; }
.row { cursor: pointer; }
.row:hover > td { background: #FFF8F2; }
.row.is-open > td, .row.is-selected > td { background: #FFF4EB; }

/* progress */
.bar { height: 6px; border-radius: 9999px; background: #E2E8F0; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 9999px; }

/* ---- overlays ---- */
.scrim { background: rgb(15 23 42 / .45); backdrop-filter: blur(1px); }
.fade-in { animation: slFade .18s ease-out; }
.pop-in { animation: slPop .22s cubic-bezier(.2,.8,.2,1); }
.slide-in { animation: slSlide .25s cubic-bezier(.2,.8,.2,1); }
.toast { animation: slToast .22s cubic-bezier(.2,.8,.2,1); }
@keyframes slFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes slPop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes slSlide { from { transform: translateX(100%) } to { transform: none } }
@keyframes slToast { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body.is-locked { overflow: hidden; }

/* amounts never break between "CHF" and the number */
.td.num, .num.whitespace-nowrap, td.num { white-space: nowrap; }