/* ===========================
   Squares Pro Dark Mode - Phase 5 UI/UX Refinement
   Commercial polish pass: spacing, focus, density, touch targets, and remaining dark-mode edge cases.
=========================== */
:root{
  --sp-radius-sm:8px;
  --sp-radius:12px;
  --sp-radius-lg:18px;
  --sp-shadow-soft:0 10px 28px rgba(0,0,0,.24);
  --sp-shadow-lift:0 18px 42px rgba(0,0,0,.36);
  --sp-ring:0 0 0 3px rgba(255,138,31,.18);
}

*{
  -webkit-tap-highlight-color:rgba(255,138,31,.18);
}

body{
  text-rendering:optimizeLegibility;
}

main{
  max-width:1680px;
}

.topbar{
  gap:16px;
  align-items:flex-start!important;
}

.topbar h2{
  letter-spacing:-.03em;
  line-height:1.05;
}

.tag,
.sub,
.hint,
.empty,
.footerNote{
  line-height:1.45;
}

.nav button{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.nav button:hover{
  transform:translateX(2px);
}

.nav button.active{
  box-shadow:inset 3px 0 0 var(--orange), 0 8px 20px rgba(37,99,235,.22)!important;
}

.card,
.panel,
.boardWrap,
.boardCard,
.homeCard,
.actionCard,
.leagueCard,
.revenueCard,
.reportCard,
.snapshotCard,
.timelineCard,
.importCard,
.exportCard{
  border-radius:var(--sp-radius-lg)!important;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.card:hover,
.panel:hover,
.boardCard:hover,
.homeCard:hover,
.actionCard:hover,
.leagueCard:hover,
.revenueCard:hover,
.reportCard:hover,
.snapshotCard:hover,
.timelineCard:hover,
.importCard:hover,
.exportCard:hover{
  border-color:rgba(148,163,184,.34)!important;
}

.clickableCard:hover,
.boardCard:hover,
.homeCard:hover,
.actionCard:hover{
  transform:translateY(-2px);
  box-shadow:var(--sp-shadow-lift)!important;
}

.cards{
  gap:16px!important;
}

.card{
  padding:20px!important;
}

.panel{
  padding:18px!important;
}

.metric{
  letter-spacing:-.04em;
  line-height:1;
}

.btn,
button,
.tinyBtn,
.pageBackBtn{
  min-height:38px;
  border-radius:10px!important;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn:not(:disabled):hover,
button:not(:disabled):hover,
.tinyBtn:not(:disabled):hover,
.pageBackBtn:not(:disabled):hover{
  transform:translateY(-1px);
}

.btn:not(:disabled):active,
button:not(:disabled):active,
.tinyBtn:not(:disabled):active,
.pageBackBtn:not(:disabled):active{
  transform:translateY(0);
}

button:disabled,
.btn:disabled{
  opacity:.55;
  cursor:not-allowed!important;
}

input,
select,
textarea,
.ownerInline,
.statusSelect{
  min-height:40px;
  border-radius:10px!important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

textarea{
  line-height:1.45;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
.btn:focus-visible,
.ownerInline:focus-visible,
.statusSelect:focus-visible{
  outline:none!important;
  box-shadow:var(--sp-ring)!important;
}

.row{
  gap:12px!important;
}

label{
  letter-spacing:.02em;
}

.list{
  border-collapse:separate!important;
  border-spacing:0;
  overflow:hidden;
}

.list th,
.list td{
  padding:12px 11px!important;
  vertical-align:middle;
}

.list th{
  position:sticky;
  top:0;
  z-index:1;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.list tbody tr,
.winnerHistoryRow{
  transition:background .15s ease;
}

.list tbody tr:hover td,
.winnerHistoryRow:hover{
  background:rgba(37,99,235,.10)!important;
}

.pill,
.presetChip,
.statusPaid,
.statusOwe,
.statusOpen,
.statusFilling,
.statusLocked,
.statusFinal,
.statusArchived{
  border-radius:999px!important;
  font-weight:900!important;
  letter-spacing:.01em;
  white-space:nowrap;
}

.presetChip,
.pill{
  display:inline-flex!important;
  align-items:center;
  min-height:28px;
}

.contextMenu,
.notificationPanel,
.smartAlertPanel,
.searchPanel,
.workspaceDock{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:16px!important;
  box-shadow:0 24px 60px rgba(0,0,0,.44)!important;
}

.contextMenu button{
  min-height:40px;
  border-radius:9px!important;
}

.toastContainer{
  z-index:9999;
}

.toast,
.alert,
.notice,
.notificationItem,
.smartAlertItem{
  border-radius:14px!important;
  border-color:rgba(148,163,184,.22)!important;
}

.boardWrap{
  scrollbar-width:thin;
  scrollbar-color:#334155 #0b1120;
}

::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:#0b1120;
}

::-webkit-scrollbar-thumb{
  background:#334155;
  border-radius:999px;
  border:2px solid #0b1120;
}

::-webkit-scrollbar-thumb:hover{
  background:#475569;
}

table.board{
  box-shadow:0 16px 36px rgba(0,0,0,.30);
}

table.board td.owner{
  transition:background .12s ease, box-shadow .12s ease, color .12s ease;
}

table.board td.owner:hover{
  box-shadow:inset 0 0 0 2px rgba(255,138,31,.36)!important;
}

.winBadge{
  box-shadow:0 2px 6px rgba(0,0,0,.24);
}

.modal,
.dialog,
.overlayPanel,
.drawer,
.popover{
  background:linear-gradient(180deg,#111827,#0f172a)!important;
  color:var(--dark-text)!important;
  border-color:var(--dark-border)!important;
  border-radius:18px!important;
  box-shadow:0 28px 70px rgba(0,0,0,.52)!important;
}

hr,
.divider{
  border-color:rgba(148,163,184,.18)!important;
}

.quickActionGrid{
  gap:12px!important;
}

.quickActionGrid .btn,
.quickActionGrid button{
  width:100%;
  justify-content:center;
}

.dashboardProgress,
.progressTrack{
  border-radius:999px!important;
  overflow:hidden;
}

@media(max-width:1100px){
  main{padding:18px!important;}
  .cards{grid-template-columns:repeat(2,minmax(160px,1fr))!important;}
  .card.big{grid-column:span 2!important;}
}

@media(max-width:900px){
  .sidebar{padding:16px 12px!important;}
  .nav button{min-height:48px;}
  main{padding:14px!important;}
  .topbar{flex-direction:column;align-items:stretch!important;}
  .topbar .row{width:100%;}
  .btn,button,input,select,textarea{min-height:44px;}
  .card,.panel{padding:16px!important;}
  .split{grid-template-columns:1fr!important;}
}

@media(max-width:640px){
  .cards{grid-template-columns:1fr!important;}
  .card.big{grid-column:span 1!important;}
  .row > *{flex:1 1 100%;}
  input,select,textarea,.btn,button{width:100%;}
  .metric{font-size:30px!important;}
}