/* Shared responsive interface for browser and Windows client. Loaded after legacy styles. */
:root {
  --a11y-bg: #f0f4f8;
  --a11y-surface: #fff;
  --a11y-surface-alt: #eaf0f6;
  --a11y-text: #13263e;
  --a11y-muted: #506177;
  --a11y-border: #a7b7c9;
  --a11y-action: #17567f;
  --a11y-action-hover: #0d3b5c;
  --a11y-selected: #dfedfa;
  --a11y-selected-text: #12324e;
  --a11y-danger: #a21f35;
  --ink: var(--a11y-text);
  --surface: var(--a11y-surface);
  --surface-2: var(--a11y-surface-alt);
  --paper: var(--a11y-bg);
  --muted: var(--a11y-muted);
  --line: var(--a11y-border);
}
html { font-size: 16px; scroll-padding-top: 170px; }
body { min-width: 0; line-height: 1.55; }
#app, #app .view { width: 100%; min-width: 0; }
#app :is(header,section,article,form,nav,div), dialog :is(div,section,form) { min-width: 0; }
#app :is(h1,h2,h3,h4,p,small,strong), dialog :is(h2,p) { overflow-wrap: anywhere; }
button, .button { touch-action: manipulation; }
#app button, .login button, dialog button {
  min-height: 48px;
  max-width: 100%;
  height: auto;
  padding: 12px 18px;
  font: 700 0.9375rem/1.4 Inter, 'Segoe UI', Arial, sans-serif !important;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#app :is(.primary,.outline,.display-window-btn), dialog :is(.primary,.outline) { border-radius: 10px; }
#app .primary, .login .primary, dialog .primary { background: var(--a11y-action) !important; color: white !important; border-color: var(--a11y-action) !important; }
#app .primary:hover, .login .primary:hover, dialog .primary:hover { background: var(--a11y-action-hover) !important; border-color: var(--a11y-action-hover) !important; }
#app .outline, dialog .outline { background: var(--surface) !important; color: var(--ink) !important; border-color: #698199 !important; }
#app .outline:hover, dialog .outline:hover { background: var(--a11y-selected) !important; }
#app .danger, dialog .danger { color: var(--a11y-danger) !important; border-color: var(--a11y-danger) !important; }
#app button:disabled, dialog button:disabled { cursor: not-allowed; opacity: .6; box-shadow: none; transform: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #bd6800 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--surface) !important;
}
#app input:not([type=checkbox]):not([type=radio]):not([type=color]), #app select, #app textarea,
dialog input:not([type=checkbox]):not([type=radio]), dialog select, dialog textarea {
  width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 48px;
  padding: 12px; font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 2px solid var(--line); border-radius: 10px;
}
#app select[multiple] { min-height: 180px; }
#app input::placeholder, #app textarea::placeholder { color: var(--muted); opacity: 1; }

/* The top row contains identity; navigation has its own full-width row. */
#app .app-header {
  display: block; position: sticky; top: 0; width: 100%; height: auto; min-height: 0;
  padding: 12px clamp(16px,3vw,48px); background: #0c1c34;
  color: #fff; border-bottom: 1px solid #354b66; backdrop-filter: none;
}
.header-top { display: flex; align-items: center; gap: 20px; }
#app header .brand { flex: 0 0 auto; display: flex; align-items: center; }
#app header .header-brand-logo { width: 162px; height: 40px; max-width: 100%; }
.header-account { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex: 1; }
.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
#app header #orgSelect { width: auto; min-width: 120px; max-width: 260px; margin: 0; background: #1b304e; color: #fff; border-color: #68809d; }
#app header #account { margin: 0; font-size: .875rem; color: #d5e0ee; overflow-wrap: anywhere; max-width: 320px; }
#app header #logout { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; padding: 10px; border-radius: 10px; background: #1b304e; color: #fff; border: 1px solid #91a8c2; }
#app header #logout:hover { background: #663244; border-color: #ffb4bd; }
#app header .logout-icon { width: 24px; height: 24px; }
#app #navToggle { display: none; background: #203c5e; color: #fff; border: 1px solid #91a8c2; border-radius: 10px; align-items: center; justify-content: center; gap: 8px; }
#app header nav {
  display: flex; flex-wrap: wrap; align-items: stretch; align-self: auto;
  width: 100%; height: auto; gap: 8px; padding: 14px 0 0; margin: 0; overflow: visible;
}
#app header nav button {
  flex: 0 1 auto; min-height: 48px; padding: 10px clamp(12px,1.25vw,20px); font-size: .9375rem;
  border: 1px solid #536c89; border-radius: 10px; color: #eef4fc; background: #172d48;
}
#app header nav button:hover { background: #2b486a; border-color: #9bb5d0; color: white; }
#app header nav button.active {
  color: #102539 !important; background: #d1f06a !important;
  border-color: #d1f06a; box-shadow: inset 0 -3px 0 #678325;
}
#app header nav .home-button { position: static; min-width: 48px; font-size: 1.35rem; }
#app header nav button:focus-visible, #app #navToggle:focus-visible, #app #logout:focus-visible { outline-color: #ffd166 !important; box-shadow: 0 0 0 6px #0c1c34 !important; }

/* Compact welcome and cards with a clear, consistently positioned action. */
#app .home-view { max-width: 1560px; padding: 28px clamp(16px,3vw,48px) 56px; }
#app .home-welcome { gap: 36px; padding: clamp(24px,3vw,44px); border-radius: 20px; }
#app .home-welcome > div { flex: 1; }
#app .home-welcome h1 { max-width: 24ch; margin: 8px 0 16px; font-size: clamp(1.9rem,3vw,3rem); line-height: 1.15; letter-spacing: -.035em; }
#app .home-welcome p { font-size: 1rem; font-weight: 400; }
#app .home-welcome > img { width: 230px; flex: 0 0 230px; }
#app .home-welcome .overline { color: #d1f06a; font-size: .8rem; font-weight: 750; }
#app .mode-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin-top: 24px; }
#app .mode-card {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: 312px;
  padding: 24px; border: 1px solid #a7b7c9; border-radius: 16px;
  color: var(--ink); background: var(--surface); text-align: left;
}
#app .mode-card .mode-icon { flex: 0 0 48px; width: 48px; height: 48px; margin-bottom: 22px; }
#app .mode-card small { color: var(--muted); font: 750 .75rem/1.5 Inter,'Segoe UI',sans-serif; letter-spacing: .07em; }
#app .mode-card h2 { font-size: 1.35rem; line-height: 1.3; margin: 8px 0 12px; }
#app .mode-card p { margin: 0 0 24px; font-size: .9375rem; font-weight: 400; line-height: 1.6; color: var(--muted); }
#app .mode-card > b {
  display: block; margin-top: auto; padding: 12px 14px; min-height: 48px;
  border-radius: 9px; font-size: .875rem; font-weight: 750; color: #12314e; background: #e1edf8;
}
#app .mode-card:hover { border-color: var(--a11y-action); transform: translateY(-2px); }
#app .mode-card:hover > b { background: #cce1f4; }

/* Lists, forms and scoring controls must shrink without clipping their actions. */
#app .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-bottom: 0; padding: 28px clamp(16px,3vw,48px) 22px; }
#app .toolbar h2 { font-size: clamp(1.5rem,2.3vw,2rem); }
#app .management { grid-template-columns: minmax(0,1.4fr) minmax(320px,.9fr); align-items: start; }
#app .catalog-card { display: flex; flex-wrap: wrap; align-items: center; padding: 20px; gap: 12px 16px; }
#app .catalog-card > :is(.team-logo,.duel-logos) { flex: 0 0 64px; }
#app .catalog-card > span { min-width: 0; flex: 1 1 calc(100% - 80px); }
#app .catalog-card > :is(button,select) { width: auto; flex: 1 1 calc(50% - 16px); }
#app .catalog-card > .user-actions { width: 100%; flex: 1 1 100%; }
#app .catalog-card > button { text-align: center; }
#app .catalog-card :is(p,small) { font-size: .875rem; color: var(--muted); }
#app .user-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#app .user-actions > * { flex: 1 1 180px; min-width: 0; }
#app :is(.dark-card,.team-card,.league-rules) { background: var(--surface); color: var(--ink); }
#app :is(.dark-card,.team-card,.league-rules) :is(h3,label), #app #addOrg label { color: var(--ink); font-size: .9375rem; line-height: 1.5; }
#app :is(.dark-card,.team-card) h3 { font-size: 1.35rem; }
#app :is(.dark-card,.team-card) small { color: var(--muted); font-size: .8125rem; }
#app :is(.dark-card,.team-card) :is(input,select,textarea) { color: var(--ink); background: var(--surface-2); }
#app #addTournament { position: static; max-height: none; overflow: visible; }
#app .lineup-field { display: block; }
#app .lineup-selects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 8px; }
#app .lineup-selects label { display: grid; gap: 5px; margin: 0; }
#app .lineup-selects label > span { color: var(--muted); font-size: .8rem; font-weight: 700; }
#app .lineup-selects select { margin: 0; }
#app .league-rules { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
#app .league-rules > label:nth-of-type(2) { grid-column: 1/-1; }
#app .calendar-month article { grid-template-columns: 100px minmax(0,1fr) auto; }
#app .calendar-month :is(small,time span) { font-size: .8125rem; }
#app .fixture { grid-template-columns: 64px minmax(0,1fr) 70px minmax(0,1fr) 136px; }
#app .fixture .legscore { white-space: nowrap; overflow-wrap: normal; }
#app .fixture > button { min-height: 64px; border-radius: 0 12px 12px 0; font-size: .875rem; background: #17567f; color: white; }
#app .fixture > button.correction { background: var(--a11y-selected); color: var(--a11y-selected-text); }
#app .fixture-no { padding: 10px; }
#app .fixture-no span, #app .side small { font-size: .75rem; }
#app .side { gap: 8px; padding: 12px; }
#app .side span { font-size: .9375rem; }
#app .side i { flex: 0 0 32px; width: 32px; height: 32px; }
#app .score-hero { grid-template-columns: minmax(0,1fr) minmax(180px,.8fr) minmax(0,1fr); }
#app .ranking-list article, #app #playerRankingList article { grid-template-columns: 40px minmax(0,1fr) minmax(70px,auto); }
#app .ranking-stats { grid-column: 2/-1; overflow-wrap: anywhere; }
#app .ranking-list button { grid-column: 2/-1; }
dialog { width: min(800px,calc(100% - 24px)); max-height: calc(100dvh - 24px); }
dialog .modal { width: 100%; max-height: calc(100dvh - 28px); padding: 64px 24px 24px; }
dialog .close { min-width: 48px; width: 48px; padding: 6px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
dialog .scoring section { grid-template-columns: 48px minmax(0,1fr) 48px; }
dialog .scoring section button { padding: 8px; background: var(--a11y-action); color: white; border: 1px solid var(--a11y-action); }
dialog .scoring i, #app .side i { background: #203c5e; color: #fff; }

@media (max-width: 1250px) {
  #app .mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .home-welcome > img { width: 180px; flex-basis: 180px; }
  #app header #account { max-width: 220px; }
}
@media (max-width: 1050px) {
  #app .management, #app .settings-grid { grid-template-columns: minmax(0,1fr); }
  #app #addEncounter, #app #addTournament { grid-row: auto; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 16px; }
  #app .app-header { position: static; padding: 12px 16px; }
  .header-top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  #app header .brand { min-width: 0; }
  #app header .header-brand-logo { width: 146px; height: 36px; }
  .header-actions { grid-column: 2; grid-row: 1; gap: 8px; }
  .header-account { grid-column: 1/-1; grid-row: 2; justify-content: flex-start; gap: 12px; }
  #app header #orgSelect { flex: 1; max-width: none; }
  #app header #account { flex: 1; font-size: .8125rem; }
  #app #navToggle { display: flex; }
  #app header #logout { flex-basis: 50px; width: 50px; min-height: 50px; }
  #app header nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding-top: 16px; }
  #app header.navigation-ready:not(.navigation-open) nav { display: none; }
  #app header nav button { width: 100%; min-height: 50px; padding: 12px 8px; }
  #app .home-welcome > img { display: none; }
  #app .home-welcome h1 { max-width: 24ch; }
  #app .toolbar .progress-wrap { width: 100%; max-width: none; margin: 0; }
}
@media (max-width: 600px) {
  #app header #account { display: none; }
  #app header nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .home-view { padding-top: 20px; }
  #app .home-welcome { padding: 26px 22px; }
  #app .mode-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  #app .mode-card { min-height: 0; padding: 22px; }
  #app .mode-card .mode-icon { margin-bottom: 16px; }
  #app .toolbar > button { width: 100%; }
  #app .catalog-card > :is(button,select) { flex-basis: 100%; width: 100%; }
  #app .calendar-month article { grid-template-columns: 70px minmax(0,1fr); gap: 14px; padding: 16px; }
  #app .calendar-month article button { grid-column: 1/-1; width: 100%; }
  #app .calendar-month time { flex-direction: column; align-items: flex-start; gap: 0; }
  #app .player-ranking { padding: 16px; }
  #app .fixture { grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); }
  #app .fixture-no { grid-column: 1/-1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; border: 0; border-bottom: 1px solid var(--line); }
  #app .fixture .side { grid-row: 2; grid-column: 1; }
  #app .fixture .side.right { grid-row: 2; grid-column: 3; }
  #app .fixture .legscore { grid-row: 2; grid-column: 2; font-size: 1.25rem; }
  #app .fixture > :is(button,em) { grid-column: 1/-1; min-height: 48px; border-radius: 0 0 12px 12px; }
  #app .side i { display: none; }
  #app .score-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; padding: 24px 16px; }
  #app .score-hero .versus { grid-row: 2; grid-column: 1/-1; padding-top: 18px; border: 0; border-top: 1px solid #536681; }
  #app .score-hero .club { grid-row: 1; }
  #app .club h1 { font-size: 1.3rem; }
  #app .club span, #app .club small { font-size: .8125rem; }
  #app .league-rules, #app .list, #app .split, .certificate-dialog form { grid-template-columns: minmax(0,1fr); }
  dialog .scoring { grid-template-columns: minmax(0,1fr); }
  dialog .scoring > div { padding: 16px; }
  #app .rule-picker, #app .board-settings, #app #scratcherSettings { grid-template-columns: minmax(0,1fr); padding: 14px; }
  #app .lineup-selects { grid-template-columns: minmax(0,1fr); }
}
html[data-theme=dark] {
  --a11y-bg: #0b1625; --a11y-surface: #15263b; --a11y-surface-alt: #1e334c;
  --a11y-text: #f1f5fb; --a11y-muted: #bdcbdd; --a11y-border: #66809c;
  --a11y-action: #bce858; --a11y-action-hover: #d1f481;
  --a11y-selected: #263f5d; --a11y-selected-text: #eaf3ff; --a11y-danger: #ffafb9;
  --ink: var(--a11y-text); --surface: var(--a11y-surface); --surface-2: var(--a11y-surface-alt); --paper: var(--a11y-bg); --muted: var(--a11y-muted); --line: var(--a11y-border);
}
html[data-theme=dark] :is(#app,.login,dialog) .primary, html[data-theme=dark] dialog .scoring section button { color: #142638 !important; }
html[data-theme=dark] #app .mode-card { border-color: #66809c; }
html[data-theme=dark] #app .mode-card > b { color: #eaf3ff; background: #2c4866; }
html[data-theme=dark] #app .mode-card:hover > b { background: #395c7f; }
html[data-theme=dark] :is(button,a,input,select,textarea):focus-visible { outline-color: #ffd166 !important; }
@media (prefers-reduced-motion: reduce) { #app button { transition: none; transform: none; } }
/* Tenant-specific SMTP configuration */
.smtp-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.smtp-grid label:last-child { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .smtp-grid { grid-template-columns: 1fr; }
  .smtp-grid label:last-child { grid-column: auto; }
}