/* HTNS v221 — flatten the premium button system while keeping the approved colors. */
:root{
  --premium-flat-ink:#173b63;
  --premium-flat-icon:#245b87;
  --premium-flat-border:#173b63;
  --premium-flat-gold:#d6b04a;
  --premium-flat-cream-top:#fffef9;
  --premium-flat-cream-bottom:#f6edd2;
  --premium-flat-gold-bottom:#edd899;
  --premium-flat-shadow:0 1px 2px rgba(24,45,72,.05);
  --premium-flat-shadow-soft:0 1px 1.5px rgba(24,45,72,.035);
  --premium-flat-ring:0 0 0 1px rgba(214,176,74,.22);
  --premium-flat-focus:rgba(62,125,173,.25);
}

/* Base flattening: reduce bevel, highlights, and drop shadow app-wide. */
#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,
#gate .guest-language-row #btnGuest,
#gate .guest-language-row #langBar .lang-btn,
#mainApp .top .icon-btn,
#mainApp .top #btnLang,
#mainApp .top #btnFeedback,
#mainApp .top #btnBell,
#mainApp .top #btnGuestLogout{
  border-width:1.2px !important;
  border-color:var(--premium-flat-border) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,var(--premium-flat-cream-top) 0%,var(--premium-flat-cream-bottom) 100%) !important;
  color:var(--premium-flat-ink) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), var(--premium-flat-ring), var(--premium-flat-shadow) !important;
  text-shadow:none !important;
}

/* Lift specific login controls into the same flatter language. */
#gate .guest-language-row #langBar,
#gate .guest-language-row,
#gate .install-banner-actions,
#gate .install-platform-actions{
  box-shadow:none !important;
}

#gate .guest-language-row #btnGuest,
#gate .guest-language-row #langBar .lang-btn,
#gate .panel .htns-songbook-offline-entry,
#gate #htnsSongbookOfflineEntry,
#gate #btnOpenOfflineSongbook,
#gate .login-offline-songbook-btn,
#gate #btnInstallApp{
  min-height:50px !important;
  border-radius:16px !important;
}

/* Primary/affirmative buttons remain gold, but flatter and less bulky. */
#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:linear-gradient(180deg,#fffdf7 0%, #f3e4b2 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62), 0 0 0 1px rgba(197,151,35,.28), 0 1px 2px rgba(99,74,18,.06) !important;
}

/* Keep conventional navy/gold actions consistent with the flatter system. */
#gate .btn-navy,
#gate .btn-guest,
#mainApp .btn-navy,
#mainApp .btn-guest,
#mainApp .btn-navy-gold,
#mainApp .pwr-btn,
#mainApp .assignment-hero .actions .btn,
#modal .btn-navy,
#modal .btn-guest,
#modal .btn-navy-gold{
  background:linear-gradient(180deg,var(--premium-flat-cream-top) 0%, var(--premium-flat-cream-bottom) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), var(--premium-flat-ring), var(--premium-flat-shadow-soft) !important;
}

/* Destructive actions stay clearly red but lose the heavy bevel. */
#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:linear-gradient(180deg,#fffdfb 0%, #f7e7e7 100%) !important;
  color:#9b3947 !important;
  border-color:#a84b57 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(195,91,101,.16), 0 1px 2px rgba(113,38,48,.04) !important;
}

/* Header mini icon buttons should feel crisp, not puffy. */
#mainApp .top .icon-btn,
#mainApp .top #btnLang,
#mainApp .top #btnFeedback,
#mainApp .top #btnBell,
#mainApp .top #btnGuestLogout{
  border-radius:14px !important;
  background:linear-gradient(180deg,#fffef9 0%, #f7edd0 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58), 0 0 0 1px rgba(214,176,74,.18), 0 1px 2px rgba(34,56,80,.04) !important;
}

/* Bottom tabs: much flatter than before. */
#mainApp .tabs button,
body.guest-mode #mainApp .tabs button,
body.view-only-mode #mainApp .tabs button{
  border-width:1px !important;
  border-color:rgba(214,176,74,.26) !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,rgba(255,254,249,.78) 0%, rgba(246,237,210,.68) 100%) !important;
  color:#687b8f !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(34,56,80,.025) !important;
  transform:none !important;
}
#mainApp .tabs button.on,
body.guest-mode #mainApp .tabs button.on,
body.view-only-mode #mainApp .tabs button.on{
  border-color:rgba(23,59,99,.45) !important;
  background:linear-gradient(180deg,#fffdf6 0%, #f1dfaa 100%) !important;
  color:var(--premium-flat-ink) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(214,176,74,.2), 0 1px 2px rgba(34,56,80,.04) !important;
}

/* Hover / active / focus: subtle, flatter motion. */
@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{
    background:linear-gradient(180deg,#fffefb 0%, #f8efd8 100%) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(214,176,74,.24), 0 2px 3px rgba(24,45,72,.05) !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{
  transform:translateY(.5px) !important;
  background:linear-gradient(180deg,#fdf8ea 0%, #f0dfad 100%) !important;
  box-shadow:inset 0 1px 2px rgba(23,59,99,.06), 0 0 0 1px rgba(214,176,74,.22), 0 1px 1px rgba(24,45,72,.04) !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{
  outline:2px solid var(--premium-flat-focus) !important;
  outline-offset:2px !important;
}

/* Keep icon color coherent. */
#gate button svg,
#mainApp button svg,
#modal button svg,
#gate .panel .htns-songbook-offline-entry svg,
#gate #htnsSongbookOfflineEntry svg,
#gate #btnOpenOfflineSongbook svg,
#gate .login-offline-songbook-btn svg,
#mainApp .top .icon-btn svg,
#mainApp .top #btnLang svg,
#mainApp .top #btnFeedback svg,
#mainApp .top #btnBell svg,
#mainApp .top #btnGuestLogout svg{
  color:var(--premium-flat-icon) !important;
}

/* Compact small-screen feel without reintroducing bulky radii. */
@media (max-width:420px){
  #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,
  #gate .guest-language-row #btnGuest,
  #gate .guest-language-row #langBar .lang-btn{
    border-radius:15px !important;
  }
  #mainApp .top .icon-btn,
  #mainApp .top #btnLang,
  #mainApp .top #btnFeedback,
  #mainApp .top #btnBell,
  #mainApp .top #btnGuestLogout,
  #mainApp .tabs button{
    border-radius:13px !important;
  }
}