/* Shared r25 application shell. Loaded after page styles so role-specific views
   retain their content layout while sharing the adopted visual language. */
.kasho-ui {
  --page: #f7fbff;
  --surface: #ffffff;
  --surface-muted: #edf5ff;
  --text: #172b4d;
  --text-strong: #102347;
  --text-muted: #526887;
  --text-subtle: #647895;
  --border: #dce8f6;
  --input-border: #9db5d2;
  --primary: #0863ef;
  --primary-hover: #004fce;
  --primary-foreground: #fff;
  --link: #075bcf;
  --focus-ring: #0863ef;
  --topbar-bg: rgb(248 252 255 / 94%);
  --info-bg: #e8f3ff;
  --info-text: #075bcf;
  --info-border: #9dc5ff;
  --success-bg: #e5f8ee;
  --success-text: #146c43;
  --success-border: #a8dfbd;
  --warning-bg: #fff4dc;
  --warning-text: #9a5a00;
  --warning-border: #f4ca79;
  --error-bg: #fff0f1;
  --error-text: #b23b50;
  --error-border: #f0afb9;
  --shadow: 0 4px 18px rgb(26 73 132 / 7%);
  background: var(--page);
}
html[data-theme="dark"] .kasho-ui {
  --page: #101827;
  --surface: #172337;
  --surface-muted: #202f46;
  --text: #e9f1ff;
  --text-strong: #f3f7ff;
  --text-muted: #b2c2da;
  --text-subtle: #b2c2da;
  --border: #30445f;
  --input-border: #748ba9;
  --primary: #79b4ff;
  --primary-hover: #a4ceff;
  --primary-foreground: #092348;
  --link: #9cc8ff;
  --focus-ring: #9cc8ff;
  --topbar-bg: rgb(21 34 55 / 94%);
  --info-bg: #203d62;
  --info-text: #b0d4ff;
  --info-border: #507cad;
  --success-bg: #173d2c;
  --success-text: #9be0b4;
  --success-border: #437b5d;
  --warning-bg: #493716;
  --warning-text: #f3ce7e;
  --warning-border: #8a6b34;
  --error-bg: #4b202c;
  --error-text: #ffacb9;
  --error-border: #945263;
  --shadow: 0 5px 20px rgb(0 0 0 / 18%);
}
.kasho-ui .app-shell { background: var(--page); }
.kasho-ui .side-rail, .kasho-ui .planning-sidebar {
  background: linear-gradient(160deg, var(--surface) 48%, var(--page));
  border-color: var(--border); color: var(--text);
}
.kasho-ui .brand { color: var(--text-strong); }
.kasho-ui .brand-mark, .kasho-ui .screen-brand .brand-mark {
  color: #fff; background: linear-gradient(145deg, #2589ff, #065cf0);
  box-shadow: 0 4px 12px rgb(24 112 237 / 16%);
}
.kasho-ui .brand-copy small, .kasho-ui .rail-label { color: var(--text-muted); }
.kasho-ui .primary-nav a, .kasho-ui .context-rail .primary-nav a { color: var(--text); }
.kasho-ui .primary-nav a:hover, .kasho-ui .context-rail .primary-nav a:hover { color: var(--link); background: var(--surface-muted); }
.kasho-ui .primary-nav a[aria-current="page"], .kasho-ui .context-rail .primary-nav a[aria-current] {
  color: var(--link); border-color: transparent; border-left: 3px solid var(--primary);
  background: linear-gradient(90deg, var(--info-bg), var(--surface-muted));
}
.kasho-ui .nav-icon.ui-nav-icon {
  display: block; width: 22px; min-width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 0; background: transparent; color: currentColor;
}
.kasho-ui .context-rail .nav-icon.ui-nav-icon { width: 23px; min-width: 23px; height: 23px; background: transparent; }
.kasho-ui .rail-account { border-color: var(--border); }
.kasho-ui .rail-account small, .kasho-ui .rail-logout { color: var(--text-muted); }
.kasho-ui .rail-logout:hover { color: var(--link); }
.kasho-ui .topbar {
  background: linear-gradient(120deg, var(--surface), var(--topbar-bg));
  border-color: var(--border); box-shadow: 0 1px 0 rgb(8 99 239 / 3%);
}
.kasho-ui .topbar h1 { color: var(--text-strong); font-size: clamp(1.2rem, 2vw, 1.55rem); }
.kasho-ui .topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 18px; max-width: 100%; margin-left: auto; }
.kasho-ui .login-identity { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 25rem; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.kasho-ui .login-identity-avatar { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; color: var(--info-text); background: var(--info-bg); }
.kasho-ui .login-identity-avatar svg { width: 24px; height: 24px; }
.kasho-ui .login-identity-copy { min-width: 0; }
.kasho-ui .login-identity-label { display: block; font-size: 11px; color: var(--text-muted); }
.kasho-ui .login-identity-person { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.kasho-ui .login-identity-name { font-size: 14px; color: var(--text-strong); overflow-wrap: anywhere; white-space: normal; }
.kasho-ui .login-identity-role { font-size: 12px; font-weight: 700; color: var(--link); }
.kasho-ui .login-identity-preview { display: block; margin-top: 3px; font-size: 12px; color: var(--warning-text); overflow-wrap: anywhere; }
.kasho-ui .card, .kasho-ui .section-card, .kasho-ui .form-card, .kasho-ui .table-wrap,
.kasho-ui .responsive-table, .kasho-ui .support-shell, .kasho-ui .am-section {
  border-color: var(--border); border-radius: 16px; box-shadow: var(--shadow);
}
.kasho-ui .section-card { border-left-color: var(--primary); }
.kasho-ui .card-grid > .empty-state, .kasho-ui .card-grid > .section-card { grid-column: 1 / -1; min-width: 0; }
.kasho-ui .card-grid > .empty-state, .kasho-ui .card-grid > .section-card, .kasho-ui .section-card > * { overflow-wrap: anywhere; }
.kasho-ui .button, .kasho-ui button:not(.rail-logout):not(.context-menu-toggle):not(.planning-menu-toggle) { border-radius: 10px; }
.kasho-ui { font-size: 16px; }
.kasho-ui .button, .kasho-ui button:not(.rail-logout):not(.context-menu-toggle):not(.planning-menu-toggle) { min-height: 44px; }
.kasho-ui .button.primary, .kasho-ui button.primary { min-height: 52px; }
.kasho-ui .button.primary { box-shadow: 0 3px 9px rgb(8 99 239 / 20%); }
.kasho-ui .field input:not([type="checkbox"]), .kasho-ui .field select, .kasho-ui .field textarea,
.kasho-ui select, .kasho-ui input:not([type="checkbox"]):not([type="radio"]), .kasho-ui textarea {
  border-color: var(--input-border); background: var(--surface); color: var(--text);
}
.kasho-ui .badge.success { color: var(--success-text); background: var(--success-bg); }
.kasho-ui .badge.warning { color: var(--warning-text); background: var(--warning-bg); }
.kasho-ui .badge.danger { color: var(--error-text); background: var(--error-bg); }
.kasho-ui .message { border-radius: 14px; box-shadow: var(--shadow); }
.kasho-ui .screen-rail { background: linear-gradient(160deg, var(--surface) 48%, var(--page)); color: var(--text); border-color: var(--border); }
.kasho-ui .screen-brand { color: var(--text-strong); }
.kasho-ui .screen-rail-label, .kasho-ui .screen-rail-note { color: var(--text-muted); }
.kasho-ui .screen-nav a { color: var(--text); }
.kasho-ui .screen-nav a small { color: var(--text-muted); }
.kasho-ui .screen-nav a:hover { color: var(--link); background: var(--surface-muted); }
.kasho-ui .screen-nav a[aria-current="page"] { color: var(--link); background: var(--info-bg); }
.kasho-ui .screen-nav a[aria-current="page"] small { color: var(--link); }
.kasho-ui .screen-mode-chip { color: var(--text-muted); border-color: var(--border); background: var(--surface); }
.kasho-ui .unified-shell { grid-template-columns: 260px minmax(0, 1fr); }
.kasho-ui .screen-switcher { margin: 14px 0 0; padding: 14px 6px 0; border-top: 1px solid var(--border); }
.kasho-ui .screen-switcher > summary { min-height: 44px; padding: 12px 4px; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.kasho-ui .screen-switcher .screen-brand { display: none; }
.kasho-ui .screen-switcher .screen-rail-label { margin: 10px 4px 8px; }
.kasho-ui .screen-switcher .screen-nav { gap: 4px; }
.kasho-ui .screen-switcher .screen-nav a { min-height: 44px; padding: 9px 10px; border-radius: 9px; }
.kasho-ui .screen-switcher .screen-role-login-links { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.kasho-ui .screen-switcher .screen-rail-note { margin: 12px 4px 0; padding: 0; }
.kasho-ui .worker-rail-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kasho-ui a:focus-visible, .kasho-ui button:focus-visible, .kasho-ui summary:focus-visible,
.kasho-ui select:focus-visible, .kasho-ui input:focus-visible, .kasho-ui textarea:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 3px;
}
/* Entry pages use this class too, without changing their independent auth layout. */
.kasho-ui .section-card p, .kasho-ui .work-task p { font-size: 1rem; }
.kasho-ui main, .kasho-ui .workspace, .kasho-ui .card > *, .kasho-ui .form-actions > * { min-width: 0; }
.kasho-ui .card h2, .kasho-ui .card h3, .kasho-ui .button { overflow-wrap: anywhere; }
.kasho-ui .admin-secondary-actions { margin-top: 18px; }
.kasho-ui .admin-secondary-actions > summary { min-height: 44px; padding: 12px 0; color: var(--link); cursor: pointer; }
.kasho-entry { background: var(--page); color: var(--text); }
.kasho-entry .login-card, .kasho-entry .form-card { border-color: var(--border); box-shadow: var(--shadow); }
@media (max-width: 760px) {
  .kasho-ui .side-rail[data-menu-open="false"] > .rail-account,
  .kasho-ui .planning-sidebar:has(#planning-menu[hidden]) > .planning-account { display: none; }
  .kasho-ui main { padding: 24px 16px 40px; }
  .kasho-ui .topbar { padding: 16px; }
  .kasho-ui .topbar-actions { width: 100%; }
  .kasho-ui .login-identity { width: 100%; max-width: 100%; }
  .kasho-ui .unified-shell { display: block; }
  .kasho-ui .app-shell:not(.three-panel-shell) .side-rail { display: block; }
  .kasho-ui, .kasho-ui .workspace, .kasho-ui main, .kasho-ui .topbar, .kasho-ui .topbar > div { min-width: 0; max-width: 100%; }
  .kasho-ui .side-rail { position: static; min-height: auto; max-height: none; padding: 12px 14px; overflow: visible; }
  .kasho-ui .context-rail { display: block; }
  .kasho-ui .context-menu-toggle:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }
  .kasho-ui .side-rail[data-menu-open="false"] .context-menu { display: none; }
  .kasho-ui .side-rail .rail-account { display: block; min-width: 0; overflow-wrap: anywhere; }
  .kasho-ui .side-rail .rail-account small, .kasho-ui .side-rail .rail-account strong { position: static; display: block; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
  .kasho-ui .planning-sidebar .planning-account { display: grid; min-width: 0; overflow-wrap: anywhere; }
  .kasho-ui .screen-switcher { margin-bottom: 8px; }
  .kasho-ui .screen-switcher .screen-nav { display: grid; min-width: 0; }
  .kasho-ui .screen-switcher .center-rail-group,
  .kasho-ui .screen-switcher .center-rail-group summary { min-width: 0; overflow-wrap: anywhere; }
  .kasho-ui .screen-rail { overflow-x: auto; }
  .kasho-ui .screen-nav { min-width: max-content; }
  .kasho-ui .screen-nav a { min-width: 112px; }
  .kasho-ui .primary-nav { display: grid; }
  .kasho-ui .primary-nav a { min-height: 44px; }
  .kasho-ui .card, .kasho-ui .section-card, .kasho-ui .form-card { border-radius: 14px; }
}

/* Lookbook r27: shared surfaces give each kind of information a readable
   destination without changing page structure or state behavior. */
.kasho-ui {
  --page: #f4f8ff;
  --surface-muted: #eef6ff;
  --border: #d7e5f4;
  --input-border: #91add0;
  --primary: #1463ff;
  --primary-hover: #0754e8;
  --link: #075bd6;
  --focus-ring: #1463ff;
  --primary-soft: #e8f1ff;
  --violet-bg: #f1e9ff;
  --violet-text: #6f37bb;
  --violet-border: #d8c0fa;
  --shadow: 0 8px 24px rgb(21 77 146 / 8%);
}
html[data-theme="dark"] .kasho-ui {
  --page: #0d1b31;
  --surface: #142844;
  --surface-muted: #1b3557;
  --border: #355473;
  --input-border: #829dba;
  --primary: #79b4ff;
  --primary-hover: #b8d8ff;
  --link: #a8d0ff;
  --focus-ring: #a8d0ff;
  --info-bg: #173f6c;
  --info-text: #c6e4ff;
  --info-border: #4d87c2;
  --success-bg: #124934;
  --success-text: #b6f2cc;
  --success-border: #3f956b;
  --warning-bg: #553d12;
  --warning-text: #ffe0a0;
  --warning-border: #a98032;
  --error-bg: #572536;
  --error-text: #ffc0cd;
  --error-border: #a95c70;
  --primary-soft: #173f6c;
  --violet-bg: #39245c;
  --violet-text: #dfc8ff;
  --violet-border: #8064ae;
  --shadow: 0 10px 28px rgb(0 0 0 / 23%);
}
.kasho-ui .card,
.kasho-ui .section-card,
.kasho-ui .form-card,
.kasho-ui .table-wrap,
.kasho-ui .responsive-table,
.kasho-ui .support-shell,
.kasho-ui .app-manager .am-section,
.kasho-ui .planning-section-panel,
.kasho-ui .planning-edit {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.kasho-ui .section-card,
.kasho-ui .form-card { border-top: 3px solid var(--primary); }
.kasho-ui .section-card { background: linear-gradient(135deg, var(--surface) 75%, var(--primary-soft)); }
.kasho-ui .section-icon,
.kasho-ui .login-identity-avatar,
.kasho-ui .support-empty-mark {
  color: var(--info-text);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
}
.kasho-ui .button.primary,
.kasho-ui button.primary {
  background: linear-gradient(135deg, #1463ff, #0754d6);
  border-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 7px 16px rgb(20 99 255 / 24%);
  font-weight: 750;
}
html[data-theme="dark"] .kasho-ui .button.primary,
html[data-theme="dark"] .kasho-ui button.primary {
  background: linear-gradient(135deg, #79b4ff, #b8d8ff);
  color: #0a2448;
}
.kasho-ui .button.secondary {
  background: var(--surface);
  border-color: var(--input-border);
  color: var(--link);
}
.kasho-ui .button.secondary:hover { background: var(--primary-soft); border-color: var(--primary); }
.kasho-ui :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: 10px;
}
.kasho-ui :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: 0;
}
.kasho-ui .field label,
.kasho-ui .support-field > label,
.kasho-ui .planning-field label { color: var(--text-strong); font-weight: 750; }
.kasho-ui .responsive-table table { background: var(--surface); }
.kasho-ui .responsive-table th {
  color: var(--text-strong);
  background: var(--primary-soft);
  border-color: var(--border);
}
.kasho-ui .responsive-table td { border-color: var(--border); }
.kasho-ui .responsive-table tbody tr:hover { background: var(--primary-soft); }
.kasho-ui .badge.neutral { color: var(--text-muted); background: var(--surface-muted); }
.kasho-ui .badge.success { border: 1px solid var(--success-border); }
.kasho-ui .badge.warning { border: 1px solid var(--warning-border); }
.kasho-ui .badge.danger { border: 1px solid var(--error-border); }
.kasho-ui .empty-state,
.kasho-ui .support-empty,
.kasho-ui .planning-empty,
.kasho-ui .app-manager .am-empty {
  background: linear-gradient(135deg, var(--surface), var(--primary-soft));
  border-color: var(--info-border);
}
.kasho-ui .app-manager .am-section-header {
  border-top-color: var(--primary);
  background: linear-gradient(90deg, var(--primary-soft), var(--surface));
}
.kasho-ui .app-manager .am-order {
  color: var(--info-text);
  border-color: var(--info-border);
  background: var(--info-bg);
  font-weight: 800;
}
.kasho-ui .app-manager .am-details dl,
.kasho-ui .app-manager .am-notes-body { background: var(--surface-muted); }
.kasho-ui .support-filters,
.kasho-ui .support-intake-summary,
.kasho-ui .support-conversation-heading,
.kasho-ui .support-compose,
.kasho-ui .support-dispatch { box-shadow: var(--shadow); }
.kasho-ui .support-ticket { box-shadow: 0 3px 12px rgb(21 77 146 / 5%); }
.kasho-ui .support-ticket--unread { background: linear-gradient(90deg, var(--primary-soft), var(--surface) 42%); }
.kasho-ui .support-message--own .support-bubble { background: var(--info-bg); }
.kasho-ui .admin-shortcuts .button {
  justify-content: flex-start;
  gap: 10px;
  border-color: var(--info-border);
  background: linear-gradient(135deg, var(--surface), var(--primary-soft));
}
.kasho-ui .admin-shortcuts .button::after { margin-left: auto; }
.kasho-ui .admin-shortcuts .button .ui-nav-icon {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid var(--info-border);
  border-radius: 10px;
  color: var(--info-text);
  background: var(--info-bg);
}
.kasho-ui .planning-total,
.kasho-ui .planning-sections a { box-shadow: 0 6px 16px rgb(21 77 146 / 7%); }
.kasho-ui .planning-section-icon { border: 1px solid var(--info-border); }
.kasho-ui .planning-section-panel { border-top: 3px solid var(--primary); }
.kasho-ui .planning-item[data-progress="complete"] { background: linear-gradient(90deg, var(--success-bg), var(--surface) 44%); }
.kasho-ui .planning-item[data-progress="final_check"] { background: linear-gradient(90deg, var(--warning-bg), var(--surface) 44%); }
.kasho-ui .planning-item[data-progress="live"] { background: linear-gradient(90deg, var(--violet-bg), var(--surface) 44%); }
.kasho-ui .planning-item[data-progress="in_progress"] { background: linear-gradient(90deg, var(--primary-soft), var(--surface) 44%); }
.kasho-entry .login-card {
  border-top: 3px solid var(--primary);
  box-shadow: 0 12px 32px rgb(21 77 146 / 13%);
}
html[data-theme="dark"] .kasho-entry .login-card { box-shadow: 0 14px 36px rgb(0 0 0 / 28%); }
@media (max-width: 760px) {
  .kasho-ui .button,
  .kasho-ui button:not(.rail-logout):not(.context-menu-toggle):not(.planning-menu-toggle) { min-height: 48px; }
  .kasho-ui .button.primary,
  .kasho-ui button.primary { min-height: 52px; }
  .kasho-ui .support-compose-actions > .button,
  .kasho-ui .form-actions > .button { flex: 1 1 140px; }
  .kasho-ui .responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kasho-ui .app-manager .am-app-line { align-items: flex-start; }
  .kasho-ui .app-manager .am-app-actions { flex-wrap: wrap; }
  .kasho-ui .support-ticket,
  .kasho-ui .planning-section-panel { box-shadow: 0 5px 16px rgb(21 77 146 / 8%); }
}