[x-cloak] { display: none !important; }

/* Base */
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; }

/* ============================================================
   Zeal — premium theme (navy · orange · white)
   ============================================================ */

/* App background — airy with faint brand glows */
.zbody {
  background:
    radial-gradient(1100px 480px at 100% -8%, rgba(245,135,31,.05), transparent 60%),
    radial-gradient(1000px 620px at -8% 112%, rgba(31,76,133,.07), transparent 55%),
    #f3f6fb;
  background-attachment: fixed;
}

/* Sidebar — deep navy with soft depth (mirrors the logo backdrop) */
.zsidebar {
  background:
    radial-gradient(560px 280px at 22% 0%, rgba(31,76,133,.55), transparent 60%),
    linear-gradient(180deg, #0b2447 0%, #0a1f3d 58%, #071528 100%);
  border-right: 1px solid rgba(255,255,255,.06);
}
[dir="rtl"] .zsidebar { border-right: 0; border-left: 1px solid rgba(255,255,255,.06); }

/* Active nav pill — orange gradient, glow, and a crisp edge marker */
.znav { position: relative; }
.znav-active {
  background: linear-gradient(180deg, #fb9231, #e06e0d);
  box-shadow: 0 8px 20px -8px rgba(245,135,31,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.znav-active::before {
  content: ""; position: absolute; inset-inline-start: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 58%; border-radius: 9px; background: #fff; opacity: .9;
}
.znav:not(.znav-active):hover { transform: translateX(2px); }
[dir="rtl"] .znav:not(.znav-active):hover { transform: translateX(-2px); }

/* Header — frosted glass */
.zheader {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #e7ecf3;
  box-shadow: 0 6px 20px -18px rgba(11,36,71,.55);
}

/* Cards — soft elevation applied app-wide (additive, no layout change) */
main .bg-white.rounded-2xl,
main .bg-white.rounded-xl {
  box-shadow: 0 1px 2px rgba(11,36,71,.05), 0 12px 30px -20px rgba(11,36,71,.20);
  border-color: #e9edf4;
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Primary buttons — subtle depth + hover lift */
button.bg-brand-600, button.bg-brand-500,
button.bg-ink-800, button.bg-ink-900 {
  box-shadow: 0 8px 18px -10px rgba(11,36,71,.45);
  transition: filter .15s ease, transform .05s ease, box-shadow .2s ease;
}
button.bg-brand-600:hover, button.bg-brand-500:hover { filter: brightness(1.04); }
button:active { transform: translateY(1px); }

/* Inputs — consistent premium focus in brand orange */
input:not([type=checkbox]):not([type=radio]), select, textarea { transition: border-color .15s, box-shadow .15s; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  outline: none; border-color: #f5871f !important; box-shadow: 0 0 0 3px rgba(245,135,31,.18) !important;
}
:root { accent-color: #f5871f; }

/* Stage / status pill */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; }

/* Tables */
.zt th { font-weight: 600; color: #475569; }
.zt td, .zt th { white-space: nowrap; }
.ztable-wrap { overflow: auto; max-height: calc(100vh - 215px); }
.ztable-wrap thead th {
  position: sticky; top: 0; z-index: 10;
  background: #f8fafc; box-shadow: inset 0 -1px 0 #e2e8f0;
}

/* Pipeline board horizontal scroll */
.board { scrollbar-width: thin; }

/* RTL: keep latin/numbers readable inside Arabic */
[dir="rtl"] input, [dir="rtl"] textarea { text-align: right; }

/* Scrollbars — navy-tinted */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3cede; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #9fb0c9; }
.zsidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

/* Text selection */
::selection { background: rgba(245,135,31,.22); }