/*
 * HTNS v225 — ultra-flat global button treatment.
 * Keeps the approved cream / muted-gold / navy palette while removing
 * heavy bevels, deep gradients, thick inset rings, oversized radii,
 * scale animations, and prominent shadows.
 */

:root{
  --flat-btn-bg:#fbf6e9;
  --flat-btn-bg-hover:#f6edda;
  --flat-btn-bg-active:#efe0b5;
  --flat-btn-bg-selected:#ead49a;
  --flat-btn-ink:#173b63;
  --flat-btn-icon:#245b87;
  --flat-btn-border:rgba(23,59,99,.58);
  --flat-btn-border-soft:rgba(177,146,56,.50);
  --flat-btn-focus:rgba(47,105,151,.24);
  --flat-btn-danger-bg:#faeeee;
  --flat-btn-danger-active:#f3dddd;
  --flat-btn-danger-ink:#9b3947;
  --flat-btn-danger-border:rgba(168,75,87,.68);
}

/* Neutral construction shared by actionable controls everywhere. */
#gate button,
#mainApp button,
#modal button,
#mainApp .htns-songbook-screen button,
#gate .panel .htns-songbook-offline-entry,
#gate #htnsSongbookOfflineEntry,
#gate #btnOpenOfflineSongbook,
#gate .login-offline-songbook-btn,
#gate #btnInstallApp{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:var(--flat-btn-bg) !important;
  color:var(--flat-btn-ink) !important;
  border:1px solid var(--flat-btn-border) !important;
  border-radius:11px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  transform:none !important;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease !important;
  -webkit-tap-highlight-color:transparent !important;
}

#gate button svg,
#mainApp button svg,
#modal button svg,
#mainApp .htns-songbook-screen button svg,
#gate .panel .htns-songbook-offline-entry svg,
#gate #htnsSongbookOfflineEntry svg,
#gate #btnOpenOfflineSongbook svg,
#gate .login-offline-songbook-btn svg,
#gate #btnInstallApp svg{
  color:var(--flat-btn-icon) !important;
  stroke:currentColor !important;
}

@media (hover:hover) and (pointer:fine){
  #gate button:not(:disabled):hover,
  #mainApp button:not(:disabled):hover,
  #modal button:not(:disabled):hover,
  #mainApp .htns-songbook-screen button:not(:disabled):hover,
  #gate .panel .htns-songbook-offline-entry:hover,
  #gate #htnsSongbookOfflineEntry:hover,
  #gate #btnOpenOfflineSongbook:hover,
  #gate .login-offline-songbook-btn:hover,
  #gate #btnInstallApp:hover{
    background:var(--flat-btn-bg-hover) !important;
    border-color:rgba(23,59,99,.72) !important;
    box-shadow:none !important;
    transform:none !important;
  }
}

#gate button:not(:disabled):active,
#mainApp button:not(:disabled):active,
#modal button:not(:disabled):active,
#mainApp .htns-songbook-screen button:not(:disabled):active,
#gate .panel .htns-songbook-offline-entry:active,
#gate #htnsSongbookOfflineEntry:active,
#gate #btnOpenOfflineSongbook:active,
#gate .login-offline-songbook-btn:active,
#gate #btnInstallApp:active{
  background:var(--flat-btn-bg-active) !important;
  border-color:rgba(23,59,99,.78) !important;
  box-shadow:none !important;
  transform:none !important;
}

#gate button:focus-visible,
#mainApp button:focus-visible,
#modal button:focus-visible,
#mainApp .htns-songbook-screen button:focus-visible,
#gate .panel .htns-songbook-offline-entry:focus-visible,
#gate #htnsSongbookOfflineEntry:focus-visible,
#gate #btnOpenOfflineSongbook:focus-visible,
#gate .login-offline-songbook-btn:focus-visible,
#gate #btnInstallApp:focus-visible{
  outline:2px solid var(--flat-btn-focus) !important;
  outline-offset:2px !important;
  box-shadow:none !important;
}

#gate button:disabled,
#mainApp button:disabled,
#modal button:disabled,
#mainApp .htns-songbook-screen button:disabled,
#gate button[aria-disabled="true"],
#mainApp button[aria-disabled="true"],
#modal button[aria-disabled="true"]{
  opacity:.46 !important;
  filter:none !important;
  box-shadow:none !important;
}

/* Smaller, calmer common action buttons. */
#mainApp .btn,
#modal .btn,
#gate .btn,
#mainApp .btn-navy,
#mainApp .btn-gold,
#mainApp .btn-soft,
#mainApp .btn-ok,
#mainApp .btn-no,
#mainApp .btn-save-all,
#mainApp .btn-navy-gold,
#mainApp .schedule-edit-hero-btn,
#mainApp .pwr-btn,
#mainApp .pwr-list-btn,
#mainApp .power-check-actions .btn,
#modal .btn-navy,
#modal .btn-gold,
#modal .btn-soft,
#modal .btn-ok,
#modal .btn-no,
#modal .btn-save-all,
#modal .btn-navy-gold{
  min-height:38px !important;
  padding:8px 12px !important;
  border-radius:11px !important;
  box-shadow:none !important;
}

/* Affirmative/selected controls use one solid muted-gold surface. */
#gate .install-cta,
#gate #btnInstallApp,
#mainApp .btn-gold,
#mainApp .btn-ok,
#mainApp .btn-save-all,
#mainApp button.primary,
#mainApp button[class*="-save"],
#mainApp button[class*="-add"],
#mainApp button[class*="-confirm"],
#mainApp .schedule-edit-hero-btn,
#mainApp .power-check-power,
#mainApp .pwr-btn.off,
#mainApp #view-albums .htns-songbook-primary-btn,
#mainApp #view-albums .htns-songbook-mini-btn.primary,
#mainApp #view-albums .htns-songbook-live-btn.on,
#mainApp #view-albums .resource-preach-save,
#modal .btn-gold,
#modal .btn-ok,
#modal .btn-save-all,
#modal button.primary,
#modal button[class*="-save"],
#modal button[class*="-add"],
#modal button[class*="-confirm"]{
  background:var(--flat-btn-bg-selected) !important;
  color:var(--flat-btn-ink) !important;
  border-color:rgba(143,106,17,.64) !important;
  box-shadow:none !important;
}

/* Destructive controls keep clear red semantics, still flat. */
#mainApp .btn-no,
#mainApp button.danger,
#mainApp button.delete,
#mainApp button.del,
#mainApp button[class*="delete"],
#mainApp button[class*="remove"],
#mainApp #confirmDelBtn,
#mainApp #view-albums .resource-preach-remove,
#mainApp #view-albums .htns-songbook-mini-btn.danger,
#mainApp #view-albums .htns-songbook-live-btn.danger,
#modal .btn-no,
#modal button.danger,
#modal button.delete,
#modal button.del,
#modal button[class*="delete"],
#modal button[class*="remove"],
#modal #confirmDelBtn{
  background:var(--flat-btn-danger-bg) !important;
  color:var(--flat-btn-danger-ink) !important;
  border-color:var(--flat-btn-danger-border) !important;
  box-shadow:none !important;
}
#mainApp :is(.btn-no,button.danger,button.delete,button.del,button[class*="delete"],button[class*="remove"]):not(:disabled):active,
#modal :is(.btn-no,button.danger,button.delete,button.del,button[class*="delete"],button[class*="remove"]):not(:disabled):active{
  background:var(--flat-btn-danger-active) !important;
  box-shadow:none !important;
}

/* Login actions: compact, matching flat pills with no bevel. */
#gate .guest-language-row{
  gap:8px !important;
  min-height:44px !important;
  margin-top:8px !important;
  box-shadow:none !important;
}
#gate .guest-language-row #btnGuest,
#gate .guest-language-row #langBar,
#gate .guest-language-row #langBar .lang-btn{
  height:44px !important;
  min-height:44px !important;
  border-radius:11px !important;
  box-shadow:none !important;
}
#gate .guest-language-row #btnGuest,
#gate .guest-language-row #langBar .lang-btn{
  padding:0 12px !important;
  background:var(--flat-btn-bg) !important;
  border:1px solid var(--flat-btn-border) !important;
  box-shadow:none !important;
}
#gate .panel .htns-songbook-offline-entry,
#gate #htnsSongbookOfflineEntry,
#gate #btnOpenOfflineSongbook,
#gate .login-offline-songbook-btn{
  min-height:44px !important;
  padding:9px 12px !important;
  border-radius:11px !important;
  background:var(--flat-btn-bg) !important;
  border:1px solid var(--flat-btn-border) !important;
  box-shadow:none !important;
}

/* Header icon controls: simple squares with nearly no depth. */
#mainApp .top .icon-btn,
#mainApp .top #btnLang,
#mainApp .top #btnFeedback,
#mainApp .top #btnBell,
#mainApp .top #btnGuestLogout,
#mainApp .my-schedule-close,
#view-schedule .schedule-team-chevron,
#mainApp .schedule-role-grid .slot-actions button,
#mainApp .mini-tile .acts button,
#view-albums .resource-preach-edit,
#view-albums .resource-preach-remove{
  border-radius:9px !important;
  box-shadow:none !important;
}

/* Segmented controls and chips should read as flat controls, not capsules. */
#mainApp .seg,
#modal .seg,
#mainApp .htns-songbook-filterbar,
#mainApp .htns-songbook-view-tabs{
  box-shadow:none !important;
}
#mainApp .seg button,
#modal .seg button,
#mainApp .htns-songbook-chip,
#mainApp .htns-songbook-view-tab,
#mainApp .week button,
#mainApp .cal button,
#mainApp .app-date-picker-day,
#mainApp .app-date-picker-action,
#modal .app-date-picker-day,
#modal .app-date-picker-action{
  box-shadow:none !important;
  border-radius:9px !important;
}
#mainApp .seg button.on,
#modal .seg button.on,
#mainApp .htns-songbook-chip.on,
#mainApp .htns-songbook-view-tab.on,
#mainApp .cal button.on,
#mainApp .app-date-picker-day.selected,
#modal .app-date-picker-day.selected{
  background:var(--flat-btn-bg-selected) !important;
  color:var(--flat-btn-ink) !important;
  border-color:rgba(143,106,17,.56) !important;
  box-shadow:none !important;
}

/* Bottom navigation: mostly transparent; only active tab gets a quiet fill. */
#mainApp .tabs button,
body.guest-mode #mainApp .tabs button,
body.view-only-mode #mainApp .tabs button{
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:9px !important;
  box-shadow:none !important;
  color:#687b8f !important;
  transform:none !important;
}
#mainApp .tabs button:hover,
body.guest-mode #mainApp .tabs button:hover,
body.view-only-mode #mainApp .tabs button:hover{
  background:rgba(234,212,154,.32) !important;
  border-color:rgba(177,146,56,.24) !important;
  box-shadow:none !important;
}
#mainApp .tabs button.on,
body.guest-mode #mainApp .tabs button.on,
body.view-only-mode #mainApp .tabs button.on{
  background:rgba(234,212,154,.58) !important;
  color:var(--flat-btn-ink) !important;
  border-color:rgba(177,146,56,.40) !important;
  box-shadow:none !important;
}

/* Keep full-row/card buttons visually structural rather than boxed twice. */
#mainApp .home-next-event-main,
#mainApp .home-team-card-head,
#view-schedule .schedule-team-toggle,
#mainApp .home-team-toggle,
#mainApp .event-item > button,
#view-events .event-page-item,
#view-events .events-item > button{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Coordinated flat dark-mode controls. */
[data-theme="dark"] #gate button,
[data-theme="dark"] #mainApp button,
[data-theme="dark"] #modal button,
[data-theme="dark"] #mainApp .htns-songbook-screen button,
[data-theme="dark"] #gate .panel .htns-songbook-offline-entry,
[data-theme="dark"] #gate #htnsSongbookOfflineEntry,
[data-theme="dark"] #gate #btnOpenOfflineSongbook,
[data-theme="dark"] #gate .login-offline-songbook-btn,
[data-theme="dark"] #gate #btnInstallApp{
  background:#203a55 !important;
  color:#f4ead0 !important;
  border-color:rgba(220,190,105,.52) !important;
  box-shadow:none !important;
}
[data-theme="dark"] #mainApp button.primary,
[data-theme="dark"] #mainApp .btn-gold,
[data-theme="dark"] #mainApp .btn-ok,
[data-theme="dark"] #mainApp .btn-save-all,
[data-theme="dark"] #mainApp .pwr-btn.off,
[data-theme="dark"] #modal button.primary,
[data-theme="dark"] #modal .btn-gold,
[data-theme="dark"] #modal .btn-ok,
[data-theme="dark"] #modal .btn-save-all{
  background:#6d5d2f !important;
  color:#fff5d7 !important;
  border-color:rgba(230,202,119,.58) !important;
}
[data-theme="dark"] #mainApp .tabs button,
[data-theme="dark"] body.guest-mode #mainApp .tabs button,
[data-theme="dark"] body.view-only-mode #mainApp .tabs button{
  background:transparent !important;
  border-color:transparent !important;
  color:#aebdca !important;
}
[data-theme="dark"] #mainApp .tabs button.on,
[data-theme="dark"] body.guest-mode #mainApp .tabs button.on,
[data-theme="dark"] body.view-only-mode #mainApp .tabs button.on{
  background:rgba(214,176,74,.20) !important;
  color:#f6e7b9 !important;
  border-color:rgba(214,176,74,.28) !important;
}

@media(max-width:420px){
  #gate .guest-language-row #btnGuest,
  #gate .guest-language-row #langBar,
  #gate .guest-language-row #langBar .lang-btn,
  #gate .panel .htns-songbook-offline-entry,
  #gate #htnsSongbookOfflineEntry,
  #gate #btnOpenOfflineSongbook,
  #gate .login-offline-songbook-btn{
    height:42px !important;
    min-height:42px !important;
    border-radius:10px !important;
  }
  #mainApp .btn,
  #modal .btn,
  #gate .btn,
  #mainApp .btn-navy,
  #mainApp .btn-gold,
  #mainApp .btn-soft,
  #mainApp .btn-ok,
  #mainApp .btn-no,
  #mainApp .btn-save-all,
  #mainApp .btn-navy-gold,
  #mainApp .schedule-edit-hero-btn,
  #mainApp .pwr-btn,
  #mainApp .pwr-list-btn,
  #mainApp .power-check-actions .btn{
    min-height:36px !important;
    padding:7px 10px !important;
    border-radius:10px !important;
  }
}