/*
 * Utilities used by the newer screens (home, quick search, document stepper, statements) that the
 * shipped Vite build predates. `npm run build` compiles all of them natively; the rules
 * below are equivalent, so keeping both is harmless. Safe to delete after a rebuild.
 */
.bg-transparent { background-color: transparent; }
.bg-brand-50 { background-color: #eef2ff; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-600 { background-color: #059669; }
.text-emerald-800 { color: #065f46; }
.opacity-70 { opacity: 0.7; }
.grow { flex-grow: 1; }
.w-4 { width: 1rem; }
.py-6 { padding-block: 1.5rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.min-w-48 { min-width: 12rem; }
.bg-brand-400 { background-color: #818cf8; }
.bg-shell-200 { background-color: #e2e8f0; }
.bg-sky-50 { background-color: #f0f9ff; }
.bg-sky-100 { background-color: #e0f2fe; }
.bg-violet-100 { background-color: #ede9fe; }
.text-sky-700 { color: #0369a1; }
.text-amber-700 { color: #b45309; }
.text-violet-600 { color: #7c3aed; }
.content-start { align-content: flex-start; }
.font-normal { font-weight: 400; }
.leading-none { line-height: 1; }
.h-0\.5 { height: 0.125rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.px-1\.5 { padding-inline: 0.375rem; }
.px-2\.5 { padding-inline: 0.625rem; }
.py-0\.5 { padding-block: 0.125rem; }
.size-2\.5 { width: 0.625rem; height: 0.625rem; }
.size-3\.5 { width: 0.875rem; height: 0.875rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[13px\] { font-size: 13px; }
.pt-\[12vh\] { padding-top: 12vh; }
.z-\[60\] { z-index: 60; }
.ring-4 { box-shadow: 0 0 0 4px var(--tw-ring-color, currentcolor); }
.ring-brand-100 { --tw-ring-color: #e0e7ff; }
.hover\:text-shell-600:hover { color: #475569; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.placeholder\:text-shell-400::placeholder { color: #94a3b8; }

@media (min-width: 40rem) {
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
    .md\:flex { display: flex; }
}
@media (min-width: 80rem) {
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xl\:col-span-2 { grid-column: span 2 / span 2; }
}

/* ---- Iraqna Group identity: watermark behind the working area + logo tile ---- */
.brand-watermark {
    position: fixed; z-index: 10; pointer-events: none; inset: 4rem 0 0 0;
    background: url('../img/iraqna-logo.png') center / min(52vmin, 440px) no-repeat; opacity: .065;
}
@media (min-width: 1024px) { .brand-watermark { right: 18rem; } }
@media print { .brand-watermark { inset: 0; right: 0; opacity: .06; } }
.brand-tile { background: #fff; border-radius: 1rem; display: grid; place-items: center; overflow: hidden; }
.brand-tile img { width: 86%; height: 86%; object-fit: contain; }
.login-watermark { position: absolute; inset: 0; pointer-events: none; background: url('../img/iraqna-logo.png') center / min(70vmin, 520px) no-repeat; opacity: .05; }
.brand-logo-h { height: 2.25rem; width: auto; flex-shrink: 0; display: block; }
.brand-logo-xl { width: min(100%, 22rem); height: auto; display: block; }
.brand-name-block { border-inline-start: 1px solid rgb(255 255 255 / .12); padding-inline-start: .75rem; min-width: 0; }
.break-all { word-break: break-all; }
.inline-block { display: inline-block; }
.max-w-48 { max-width: 12rem; }
.select-all { user-select: all; }
.mt-5 { margin-top: 1.25rem; }
.qr-box svg { width: 12rem; height: 12rem; display: block; }

/* ---- Help notes (x-help): light, floating, never in the way ---- */
.help-btn{display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;margin-inline:.25rem;border-radius:9999px;background:#e2e8f0;color:#475569;font-size:.68rem;font-weight:800;line-height:1;cursor:help;vertical-align:middle;transition:background .15s,color .15s}
.help-btn:hover,.help-btn:focus{background:#059669;color:#fff;outline:none}
.help-pop{position:absolute;z-index:60;top:calc(100% + .35rem);inset-inline-start:-.5rem;width:max-content;max-width:min(18rem,80vw);padding:.55rem .75rem;border-radius:.75rem;background:#0f172a;color:#f1f5f9;font-size:.78rem;font-weight:500;line-height:1.65;text-align:right;box-shadow:0 10px 30px -8px rgba(2,6,23,.5);pointer-events:none;white-space:normal}
.help-off .help-tip{display:none}

.badge-info{display:inline-flex;align-items:center;gap:.375rem;border-radius:9999px;padding:.25rem .75rem;font-size:.75rem;font-weight:700;background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;box-shadow:0 1px 2px #0000001a}

/* Central mail: pending-letters bell in the top bar */
.mail-bell-count { position: absolute; top: -2px; inset-inline-start: -2px; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 9999px; background: #e11d48; color: #fff; font-size: 10px; font-weight: 800; line-height: 1.1rem; text-align: center; }

/* ---- Utilities used by the newer screens (central mail, expense advances) — until `npm run build` regenerates app.css ---- */
.file-input { display: block; width: 100%; font-size: .875rem; color: #475569; }
.file-input::file-selector-button { margin-inline-end: .75rem; border: 0; border-radius: .5rem; background: var(--color-brand-50, #eef2ff); color: var(--color-brand-700, #4338ca); font-weight: 700; padding: .5rem 1rem; cursor: pointer; font-family: inherit; }
.file-input:hover::file-selector-button { background: var(--color-brand-100, #e0e7ff); }
.mail-field { width: 14rem; }
.mail-field.w-64 { width: 16rem; }
.mail-field-auto { width: auto; }
.btn-xs { padding: .375rem .75rem; font-size: .75rem; }
.align-middle { vertical-align: middle; }
.bg-brand-50\/40 { background-color: color-mix(in srgb, var(--color-brand-50, #eef2ff) 40%, transparent); }
.bg-brand-50\/60 { background-color: color-mix(in srgb, var(--color-brand-50, #eef2ff) 60%, transparent); }
.border-amber-200 { border-color: #fde68a; }
.border-brand-200 { border-color: #c7d2fe; }
.border-dashed { border-style: dashed; }
.border-s-2 { border-inline-start-width: 2px; }
.-start-\[7px\] { inset-inline-start: -7px; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-3 { row-gap: .75rem; }
.h-fit { height: fit-content; }
.items-baseline { align-items: baseline; }
.leading-8 { line-height: 2rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.me-1\.5 { margin-inline-end: .375rem; }
.ms-4 { margin-inline-start: 1rem; }
.my-4 { margin-block: 1rem; }
.opacity-60 { opacity: .6; }
.ring-white { --tw-ring-color: #fff; }
.text-amber-800 { color: #92400e; }
.whitespace-pre-line { white-space: pre-line; }
@media (min-width: 640px) { .sm\:p-4 { padding: 1rem; } .sm\:p-6 { padding: 1.5rem; } }
@media (min-width: 768px) { .md\:block { display: block; } .md\:hidden { display: none; } }

/* Topbar title never wraps — long titles are cut with an ellipsis (phones). */
.topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) { header.app-topbar { gap: .5rem; padding-inline: .75rem; } }
.print-only { display: none; }
/* Phone layout helpers: items that move into the account menu on narrow screens. */
.phone-only { display: none; }
@media (max-width: 639px) { .not-phone { display: none !important; } .phone-only { display: block; } }

/* Tablets/phones: wide tables scroll sideways — keep the row-actions kebab pinned to the visible edge. */
@media (max-width: 1023px) {
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  td:has(button[aria-label="الإجراءات"]) { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 6px 0 8px -6px rgb(15 23 42 / .18); }
  table:has(button[aria-label="الإجراءات"]) th:last-child { position: sticky; left: 0; z-index: 1; background: #f1f5f9; }
  /* a table with 5+ columns keeps a readable width and scrolls, instead of squeezing every cell */
  .overflow-x-auto > table:has(th:nth-child(5)) { min-width: 680px; }
  td.tabular-nums, td.font-mono, .overflow-x-auto > table td:first-child { white-space: nowrap; }
  /* inputs at 16px stop iOS from zooming the page when a field is focused */
  .form-input, .form-select, .form-textarea { font-size: 16px; }
}

/* "؟" switch in the top bar: dimmed while the notes are hidden */
.help-toggle-mark { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #e2e8f0; color: #334155; font-weight: 800; font-size: .9rem; line-height: 1; }
.help-toggle:hover .help-toggle-mark { background: #059669; color: #fff; }
.help-off .help-toggle-mark { opacity: .45; }

/* Base utilities the shipped build lacked (portal quick cards, modals, device/punch screens). */
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gap-x-4 { column-gap: 1rem; }
.gap-y-1\.5 { row-gap: .375rem; }
.py-14 { padding-block: 3.5rem; }
.pb-2 { padding-bottom: .5rem; }
.pe-9 { padding-inline-end: 2.25rem; }
.ps-5 { padding-inline-start: 1.25rem; }
.mb-0\.5 { margin-bottom: .125rem; }
.w-16 { width: 4rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.max-h-\[92vh\] { max-height: 92vh; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.ring-2 { box-shadow: 0 0 0 2px #a5b4fc; }
.bg-indigo-50 { background-color: #eef2ff; }
.bg-shell-950\/60 { background-color: #02061799; }
.border-amber-300 { border-color: #fcd34d; }
.text-brand-800 { color: #3730a3; }
.text-indigo-800 { color: #3730a3; }
.text-sky-600 { color: #0284c7; }
.text-emerald-300 { color: #6ee7b7; }
.hover\:bg-amber-100:hover { background-color: #fef3c7; }
.hover\:text-rose-800:hover { color: #9f1239; }
@media (min-width: 768px) { .md\:col-span-2 { grid-column: span 2 / span 2; } }

/* Wide modals were drawn underneath the fixed sidebar/topbar: a forwards-filling opacity
   animation keeps a stacking context alive after it ends. Only fill backwards. */
.animate-in { animation-fill-mode: backwards; }

/* Sidebar ownership notice */
.text-\[11px\] { font-size: 11px; }
.leading-5 { line-height: 1.25rem; }

/* ---- Chat on a letter (central mail) ---- */
.chat-shell { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .chat-shell { grid-template-columns: 14rem 1fr; } }
.chat-list { display: flex; flex-direction: column; gap: 0.5rem; }
.chat-item { display: block; width: 100%; text-align: right; border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 0.55rem 0.75rem; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s; }
.chat-item:hover { border-color: #a5b4fc; }
.chat-item.active { border-color: #818cf8; background: #eef2ff; }
.chat-item.locked { opacity: .65; cursor: default; }
.chat-item .t { font-size: 0.8125rem; font-weight: 800; color: #1e293b; }
.chat-item .s { font-size: 11px; color: #64748b; margin-top: 2px; }
.chat-messages { height: 20rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; }
.chat-msg { max-width: 85%; padding: 0.45rem 0.75rem; border-radius: 0.9rem; background: #fff; border: 1px solid #e2e8f0; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; background: #eef2ff; border-color: #c7d2fe; }
.chat-msg .who { font-size: 11px; font-weight: 700; color: #64748b; }
.chat-msg .txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; color: #1e293b; line-height: 1.7; }
.chat-msg .when { font-size: 10px; color: #94a3b8; text-align: left; }
.chat-empty { margin: auto; text-align: center; color: #94a3b8; font-size: 0.8125rem; }
.chat-compose { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.5rem; }
.chat-compose textarea { flex: 1; }
.chat-members { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.chat-lockbox { border: 1px dashed #cbd5e1; border-radius: 0.75rem; padding: 1.5rem; text-align: center; color: #64748b; font-size: 0.875rem; background: #f8fafc; }
.chat-newbox { border: 1px solid #c7d2fe; background: rgb(238 242 255 / .45); border-radius: 0.75rem; padding: 1rem; display: grid; gap: 0.75rem; }
.chat-pick { display: grid; gap: 0.25rem; max-height: 10rem; overflow-y: auto; padding: 0.5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; }
.chat-pick label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; cursor: pointer; }

/* record-view panel (eye icon of the document lists) */
.break-words{overflow-wrap:break-word}