/* Halaga UI/UX hardened polish layer.
 * Ownership: accessibility, component sizing, interaction polish, and non-structural refinement.
 * Do not use this file to redefine shell geometry or dashboard card order.
 */
:root{
  --ui-radius-sm:10px;
  --ui-radius-md:14px;
  --ui-radius-lg:16px;
  --ui-control-h:42px;
  --ui-control-h-touch:44px;
  --ui-focus:rgba(22,182,123,.30);
  --ui-shadow-sm:0 2px 8px rgba(24,45,75,.045);
  --ui-shadow-md:0 10px 28px rgba(24,45,75,.08);
  --ui-shadow-modal:0 24px 70px rgba(12,20,35,.20);
  --ui-motion-fast:.14s;
  --ui-motion-normal:.16s;
}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-synthesis:none;text-rendering:optimizeLegibility}
button,input,select,textarea{font-variant-numeric:tabular-nums}
button{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ui-focus);
  outline-offset:2px;
}
::selection{background:rgba(22,182,123,.20);color:var(--text)}

/* Public/auth surfaces */
.auth-card .btn-primary{min-height:46px;font-size:13px}
.auth-card .tabs button{min-height:42px;font-weight:750}
.auth-card .field input,.auth-card .field select,.auth-card .field textarea{min-height:44px}
.auth-links{gap:4px 10px}
.auth-links .link{min-height:36px}
.auth-public h2{max-width:18ch;text-wrap:balance}
.auth-public-lead{text-wrap:pretty}
.public-feature{transition:box-shadow var(--ui-motion-normal) ease,border-color var(--ui-motion-normal) ease}
.public-feature:hover{box-shadow:var(--ui-shadow-sm);border-color:#cddbd4}

/* Authenticated shell: visual refinement only */
#appView .topbar{backdrop-filter:saturate(1.05)}
#appView .topbar-left strong{font-size:13px;letter-spacing:-.01em}
#appView .content{max-width:1280px}
#appView .hero h2{font-weight:820;text-wrap:balance}
#appView .hero p{max-width:720px}
#appView .toolbar .btn{min-height:40px}
#appView .title{min-height:32px}
#appView .title h3{font-weight:800;text-wrap:balance}
#appView .sub,#appView .muted{line-height:1.5}
#appView .stat-row{min-height:44px;align-items:center}

/* Navigation and controls */
#appView .nav button,#appView .mobile-bottom-nav button,#appView .mobile-more-group button{
  transition:background var(--ui-motion-fast) ease,color var(--ui-motion-fast) ease,transform var(--ui-motion-fast) ease;
}
#appView .nav button:active,#appView .mobile-bottom-nav button:active,#appView .mobile-more-group button:active{transform:scale(.985)}
#appView .nav-group-toggle,#appView .nav button{min-height:42px}
#appView .sidebar-search{min-height:42px}

/* Tables */
#appView .table th{font-weight:850;letter-spacing:.055em;text-transform:uppercase}
#appView .table td{line-height:1.45}
#appView .table-wrap{border-radius:var(--ui-radius-sm)}
#appView .table tbody tr{transition:background var(--ui-motion-fast) ease}
#appView .table tbody tr:hover{background:color-mix(in srgb,var(--green) 5%,transparent)}

/* Forms */
#appView .field{min-width:0}
#appView .field label{line-height:1.35}
#appView .field input,#appView .field select,#appView .field textarea{
  min-height:var(--ui-control-h);
  border-radius:var(--ui-radius-sm);
  transition:border-color var(--ui-motion-fast) ease,box-shadow var(--ui-motion-fast) ease,background var(--ui-motion-fast) ease;
}
#appView .field textarea{min-height:90px;resize:vertical}
#appView .field input:focus,#appView .field select:focus,#appView .field textarea:focus{
  border-color:#79b9a5;
  box-shadow:0 0 0 3px var(--ui-focus);
}
#appView input:disabled,#appView select:disabled,#appView textarea:disabled,#appView button:disabled{
  cursor:not-allowed;
  opacity:.58;
}
#appView .btn{
  min-height:40px;
  transition:transform .12s ease,box-shadow var(--ui-motion-fast) ease,background var(--ui-motion-fast) ease,border-color var(--ui-motion-fast) ease;
}
#appView .btn:not(:disabled):active{transform:translateY(1px)}
#appView .btn-primary:not(:disabled):hover{box-shadow:0 5px 16px rgba(22,182,123,.16)}
#appView .btn-secondary{border:1px solid var(--line)}
#appView .form-actions{margin-top:16px}

/* Cards: do not make every informational card behave like a clickable control. */
#appView .card{box-shadow:var(--ui-shadow-sm)}
#appView .metric{min-height:92px}
#appView .dashboard-v2 .card{border-radius:var(--ui-radius-md)}
#appView .dashboard-v2-chart-empty{min-height:220px}
#appView .dashboard-v2 .title h3{font-size:15px}

/* Dialogs, notifications, transient feedback */
#appView .modal{backdrop-filter:blur(3px)}
#appView .modal-box{border:1px solid var(--line);box-shadow:var(--ui-shadow-modal)}
#appView .modal-head{position:sticky;top:-22px;background:var(--card);padding-bottom:10px;z-index:2}
#appView .close{min-width:36px;min-height:36px}
#appView .toast{max-width:min(420px,calc(100vw - 24px));line-height:1.4;box-shadow:0 12px 30px rgba(12,20,35,.22)}
#appView .notification-item-open{min-height:44px}
#appView .notification-item-delete{min-width:34px;min-height:34px}

/* Feature-specific non-structural refinement */
#appView .calendar-day{min-height:110px}
#business .suite-card{box-shadow:var(--ui-shadow-sm)}
#business .suite-actions .btn{min-height:40px}
#business .suite-table td,#business .suite-table th{line-height:1.4}
#business .business-suite-tabs button{min-height:40px}
#settings .settings-card{box-shadow:var(--ui-shadow-sm)}
#settings .settings-toggle-row{min-height:50px}
#appView .notice{border:1px solid var(--line)}

@media(max-width:700px){
  #appView .content{padding-bottom:32px!important}
  #appView .hero{gap:12px}
  #appView .hero h2{font-size:25px}
  #appView .toolbar{gap:7px}
  #appView .toolbar .btn{min-height:var(--ui-control-h-touch)}
  #appView .card-pad{padding:15px}
  #appView .form-actions .btn{min-height:var(--ui-control-h-touch)}
  #appView .modal{padding:10px}
  #appView .modal-box{max-height:92dvh;border-radius:var(--ui-radius-lg);padding:17px}
  #appView .modal-head{top:-17px;padding-top:2px}
  #business .business-suite-tabs button,#business .suite-actions .btn{min-height:var(--ui-control-h-touch)}
}
@media(max-width:430px){
  #appView .hero h2{font-size:23px}
  #appView .hero p{font-size:12px}
  #appView .card-pad{padding:13px}
  #appView .metric{padding:14px}
  #appView .metric h3{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}
body.dark #appView .table tbody tr:hover{background:rgba(121,185,165,.06)}
body.dark #appView .modal-head{background:var(--card)}
body.dark #appView .btn-secondary{border-color:var(--line)}