/* =====================================================================
   Al Hadi — PROFESSIONAL DESIGN LAYER (parent & staff app)
   Loaded after the app's own styles. Restyles only; no behaviour changes.
   ===================================================================== */
html { -webkit-tap-highlight-color: transparent; }
button, a, .menu-tile, .staff-tile, .card { touch-action: manipulation; }

/* ---------- tiles: crisp line icons, soft depth, a real "press" ---------- */
.menu-tile, .staff-tile { border-radius: 20px; transition: transform .22s var(--ease), box-shadow .25s var(--ease), border-color .25s; -webkit-user-select: none; user-select: none; }
.menu-tile:active, .staff-tile:active { transform: scale(.972); box-shadow: var(--shadow-press); }
.menu-tile .ico, .staff-tile .ico { width: 46px; height: 46px; border-radius: 15px; color: var(--maroon); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(139, 26, 26, .08); }
.menu-tile.hot .ico { color: var(--hot, var(--maroon)); box-shadow: inset 0 0 0 1px rgba(139, 26, 26, .14); }
.pro-ic-wrap { display: grid; place-items: center; line-height: 0; }
.pro-ic { width: 23px; height: 23px; }
.menu-tile .tt, .staff-tile .tt { letter-spacing: -.005em; }

/* ---------- cards & numbers ---------- */
.card { border-radius: 20px; border-color: rgba(139, 26, 26, .08); box-shadow: 0 10px 28px -14px rgba(94, 15, 15, .22); }
.stat { border-radius: 18px; border: 1px solid rgba(139, 26, 26, .07); box-shadow: 0 8px 22px -14px rgba(94, 15, 15, .26); }
.stat .n, .stat b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.screen-title { letter-spacing: -.01em; }
.fee-item { border-radius: 16px; }
.badge { letter-spacing: .02em; font-weight: 700; }

/* ---------- buttons & inputs ---------- */
.btn-primary { border-radius: 14px; box-shadow: 0 12px 24px -12px rgba(139, 26, 26, .75); }
.btn-primary:active { transform: translateY(1px) scale(.99); }
.mini-btn { border-radius: 999px; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { border-radius: 13px; transition: border-color .2s, box-shadow .2s; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus, select:focus, textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 4px rgba(201, 152, 42, .2) !important; outline: none; }

/* ---------- bottom bar: frosted glass ---------- */
.bottom-nav { -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); background: rgba(255, 255, 255, .86); border-top: 1px solid rgba(139, 26, 26, .08); box-shadow: 0 -10px 30px -18px rgba(94, 15, 15, .4); }
[data-theme="dark"] .bottom-nav { background: rgba(24, 18, 16, .86); border-top-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .menu-tile .ico, [data-theme="dark"] .staff-tile .ico { color: #f1d98c; }
[data-theme="dark"] .card, [data-theme="dark"] .stat { border-color: rgba(255, 255, 255, .08); }

@media (prefers-reduced-motion: reduce) { .menu-tile, .staff-tile { transition: none; } }


/* ===== Design-review fixes ===== */
/* the "new note" banner no longer collides with the numbers under it */
.tn-banner + .stat-row { margin-top: 12px !important; }

/* login: keep the main button ABOVE the bottom bar on shorter phones (a taller phone is unaffected) */
@media (max-height: 860px) {
  #screen-login .login-head { padding: 18px 20px 40px; }
  #screen-login .login-logo { width: 62px; height: 62px; }
  #screen-login .login-head h1 { font-size: 24px; margin-top: 8px; }
  #screen-login .login-head .bismillah-ar { font-size: 19px; line-height: 1.4; margin-top: 2px; }
  #screen-login .login-head .subttl { margin-top: 3px; }
  #screen-login .role-hero { padding: 9px 12px; margin-bottom: 10px; }
  #screen-login .role-hero .rh-ic { width: 40px; height: 40px; font-size: 21px; }
  #screen-login .field { margin-bottom: 10px; }
  #screen-login .field input { padding: 11px 13px; }
}
@media (max-height: 760px) {
  #screen-login .login-head { padding: 14px 18px 36px; }
  #screen-login .login-head .bismillah-ar { display: none; }
  #screen-login .login-logo { width: 52px; height: 52px; }
  #screen-login .login-head h1 { font-size: 22px; margin-top: 6px; }
  #screen-login .login-head .bismillah { margin-top: 6px; }
}