/* ==========================================================================
   Panel look: colour themes (light / dark), top bar, fixed sidebar and the
   shared widgets (tooltips, help modal, date picker, invalid fields, SweetAlert).
   Every colour comes from a variable, so a theme is only a list of variables.
   ========================================================================== */

:root {
    --sidebar-w: 220px;
    --topbar-h: 54px;

    /* top bar + sidebar: the navy of the light theme (the colour of the old header) */
    --nav-bg: #111827;
    --nav-text: #d1d5db;
    --nav-text-active: #ffffff;
    --nav-hover: rgba(255, 255, 255, .08);
    --nav-active-bg: rgba(37, 99, 235, .30);
    --nav-line: rgba(255, 255, 255, .08);

    /* status colours (badges, alerts). s0 draft, s1 queued, s2 processing, s3 registered, s4 failed, s5 deleted */
    --s0-bg: #e5e7eb; --s0-fg: #374151;
    --s1-bg: #fef3c7; --s1-fg: #92400e;
    --s2-bg: #dbeafe; --s2-fg: #1e40af;
    --s3-bg: #dcfce7; --s3-fg: #166534;
    --s4-bg: #fee2e2; --s4-fg: #991b1b;
    --s5-bg: #f3f4f6; --s5-fg: #6b7280;

    /* very light row tints of the foreigners table */
    --row-s0: transparent;
    --row-s1: #fffbeb;
    --row-s2: #eff6ff;
    --row-s3: #f0fdf4;
    --row-s4: #fef2f2;
    --row-s5: #f3f4f6;
    --row-bar-s0: #9ca3af; --row-bar-s1: #f59e0b; --row-bar-s2: #3b82f6; --row-bar-s3: #22c55e; --row-bar-s4: #ef4444; --row-bar-s5: #6b7280;

    --tip-bg: #111827; --tip-fg: #fff;
}

html[data-theme="dark"] {
    --bg: #0b1220;
    --card: #152033;
    --line: #27344b;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --primary: #3b82f6;
    --ok: #22c55e;
    --bad: #f87171;
    --warn: #fbbf24;
    --input-bg: #0f1a2e;

    --nav-bg: #070d1a;
    --nav-text: #9fb0c8;
    --nav-text-active: #ffffff;
    --nav-hover: rgba(255, 255, 255, .06);
    --nav-active-bg: rgba(59, 130, 246, .28);
    --nav-line: rgba(255, 255, 255, .07);

    --s0-bg: #334155; --s0-fg: #e2e8f0;
    --s1-bg: #4a3a12; --s1-fg: #fcd34d;
    --s2-bg: #1e3a5f; --s2-fg: #93c5fd;
    --s3-bg: #14532d; --s3-fg: #86efac;
    --s4-bg: #5b1f24; --s4-fg: #fca5a5;
    --s5-bg: #1f2937; --s5-fg: #9ca3af;

    --row-s1: rgba(245, 158, 11, .08);
    --row-s2: rgba(59, 130, 246, .09);
    --row-s3: rgba(34, 197, 94, .08);
    --row-s4: rgba(239, 68, 68, .10);
    --row-s5: rgba(148, 163, 184, .08);

    --tip-bg: #e5e7eb; --tip-fg: #111827;
}

html[data-theme="dark"] button.gray, html[data-theme="dark"] .btn.gray { background: #475569; }
html[data-theme="dark"] .pagination .active span { background: var(--primary); }
html[data-theme="dark"] ::placeholder { color: #64748b; }

/* ---------- top bar ---------- */
.topbar {
    position: fixed; top: 0; right: 0; left: 0; height: var(--topbar-h); z-index: 60;
    background: var(--nav-bg); color: var(--nav-text);
    display: flex; align-items: center; gap: 10px; padding: 0 14px 0 14px;
    border-bottom: 1px solid var(--nav-line);
}
.topbar form { margin: 0; }
.topbar .spacer { flex: 1; }
.brand {
    display: flex; align-items: center; gap: 8px; width: calc(var(--sidebar-w) - 14px);
    color: var(--nav-text-active); text-decoration: none; font-weight: 700; font-size: 15px;
    overflow: hidden; white-space: nowrap;
}
.brand i { font-size: 17px; color: #60a5fa; }
.brand span { overflow: hidden; text-overflow: ellipsis; }
.topbar-user { font-size: 13px; color: var(--nav-text); white-space: nowrap; }
.topbar-user small { opacity: .7; }
.logout-btn { background: rgba(255, 255, 255, .12); color: var(--nav-text-active); padding: 6px 12px; font-size: 13px; }
.logout-btn:hover { background: rgba(255, 255, 255, .22); }

.icon-btn {
    background: transparent; color: var(--nav-text); border: 0; width: 34px; height: 34px; padding: 0;
    border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
}
.icon-btn:hover { background: var(--nav-hover); color: var(--nav-text-active); }
.guest-theme { position: fixed; top: 12px; left: 12px; color: var(--muted); z-index: 60; }
.guest-theme:hover { background: var(--line); color: var(--text); }

/* ---------- sidebar: always open, never collapses ---------- */
body.has-sidebar { padding-top: var(--topbar-h); }
.sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; right: 0; width: var(--sidebar-w); z-index: 50;
    background: var(--nav-bg); overflow-y: auto; padding: 12px 0;
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar a {
    color: var(--nav-text); text-decoration: none; padding: 11px 18px; display: flex; align-items: center; gap: 10px;
    border-right: 3px solid transparent; font-size: 14px;
}
.sidebar a i { font-size: 17px; width: 20px; text-align: center; }
.sidebar a:hover { background: var(--nav-hover); color: var(--nav-text-active); }
.sidebar a.active { background: var(--nav-active-bg); color: var(--nav-text-active); border-right-color: #60a5fa; font-weight: 600; }

/* ---------- tooltips (hover / keyboard focus) ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); right: 50%; transform: translateX(50%);
    background: var(--tip-bg); color: var(--tip-fg); padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 400;
    white-space: nowrap; max-width: 280px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 200;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
.topbar [data-tip]::after { bottom: auto; top: calc(100% + 8px); }
.tip-long[data-tip]::after { white-space: normal; width: 270px; line-height: 1.7; text-align: right; }
/* the tools column is the last (left-most) column: its tooltips open towards the inside of the page */
/* same for the icon buttons at the far left of the filter bar: a centred tooltip would stick out of the page */
.tools [data-tip]::after, .filter-bar .actions [data-tip]::after, .fgrid [data-tip]::after { right: auto; left: 0; transform: none; }

/* ---------- form widgets ---------- */
.is-invalid { border-color: var(--bad) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
.invalid-feedback { display: block; color: var(--bad); font-size: 12.5px; margin-top: 4px; }
.form-hint { color: var(--muted); font-size: 12px; margin-top: 3px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.btn-row .spacer { flex: 1; }
button.warn { background: var(--warn); color: #fff; }
button i, .btn i { margin-left: 4px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.icon-action {
    width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 8px;
    background: transparent; color: var(--text); border: 1px solid var(--line); cursor: pointer;
}
.icon-action:hover { background: var(--line); }
.icon-action.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.filter-bar { display: grid; grid-template-columns: 1fr 220px auto; gap: 12px; align-items: end; }
.filter-bar .actions { display: flex; gap: 6px; }
.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.collapsible.open { grid-template-rows: 1fr; }
.collapsible > .collapsible-inner { overflow: hidden; min-height: 0; }
.collapsible.open > .collapsible-inner { overflow: visible; }
.advanced-filters { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 4px; }
.date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.date-range label { font-weight: 400; font-size: 12px; color: var(--muted); margin: 0 0 3px; }
.group-title { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 18px 0 8px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head h1 { margin: 0; }
.tools form { display: contents; margin: 0; }

/* advanced filter: two grids that fill the full width by themselves and stack on small screens */
.fgrid { display: grid; gap: 14px 16px; align-items: start; }
.fgrid-a { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.fgrid-b { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fgrid label { display: block; margin-bottom: 4px; }
.fgrid .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fgrid .align-end { align-self: end; }
.check-box { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); cursor: pointer; font-weight: 400; }
.check-box input { width: auto; margin: 0; }
.date-group { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 12px; background: var(--bg); }
.date-group-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.date-group label { font-size: 12px; color: var(--muted); font-weight: 400; }
@media (max-width: 720px) { .filter-bar { grid-template-columns: 1fr; } .fgrid-b { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .fgrid .pair { grid-template-columns: 1fr; } }

/* ---------- foreigners table ---------- */
table.rows tr.row-s0 { background: var(--row-s0); } table.rows tr.row-s1 { background: var(--row-s1); }
table.rows tr.row-s2 { background: var(--row-s2); } table.rows tr.row-s3 { background: var(--row-s3); }
table.rows tr.row-s4 { background: var(--row-s4); }
table.rows tr.row-s5 { background: repeating-linear-gradient(135deg, var(--row-s5), var(--row-s5) 10px, transparent 10px, transparent 20px); }
.row-no { display: inline-block; min-width: 30px; text-align: center; padding: 2px 6px; border-radius: 6px; font-weight: 700; font-size: 13px; border-right: 4px solid var(--row-bar-s0); background: var(--s0-bg); color: var(--s0-fg); }
.row-no.s1 { border-right-color: var(--row-bar-s1); background: var(--s1-bg); color: var(--s1-fg); }
.row-no.s2 { border-right-color: var(--row-bar-s2); background: var(--s2-bg); color: var(--s2-fg); }
.row-no.s3 { border-right-color: var(--row-bar-s3); background: var(--s3-bg); color: var(--s3-fg); }
.row-no.s4 { border-right-color: var(--row-bar-s4); background: var(--s4-bg); color: var(--s4-fg); }
.row-no.s5 { border-right-color: var(--row-bar-s5); background: var(--s5-bg); color: var(--s5-fg); }

/* a deleted foreigner: clearly disabled (everything is faded and the name is struck through), only the tools stay alive */
table.rows tr.is-deleted td:not([data-label="ابزار"]) { opacity: .5; }
table.rows tr.is-deleted .full-name-cell b { text-decoration: line-through; }
.tool.danger { color: #dc2626; }
.tool.restore { color: var(--ok); }
/* the details box of the audit log */
.log-details { margin-top: 6px; font-size: 12.5px; }
.log-details summary { cursor: pointer; color: var(--primary); }
.log-details table { margin-top: 6px; width: auto; min-width: 280px; }
.attempts-cell { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; line-height: 1.4; }
.attempts-cell small { color: var(--muted); opacity: .85; font-size: 11px; }
.jdate-wrap { position: relative; display: block; }
.jdate-wrap input { padding-left: 30px; }
.jdate-clear { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 12px; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; }
.jdate-clear:hover { background: var(--line); color: var(--text); }
.jdate-wrap.has-value .jdate-clear { display: inline-flex; }
/* sidebar numbers */
.sidebar a .label { flex: 1; }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; margin-right: 6px; border-radius: 10px; font-size: 11.5px; font-weight: 700; line-height: 1; background: rgba(255,255,255,.14); color: #fff; }
.nav-badge.new { background: #2563eb; }
.nav-badge.ok { background: #16a34a; } .nav-badge.bad { background: #dc2626; }
.sidebar a .nav-badge::after { right: auto; left: 0; transform: none; }
html[data-theme="dark"] .nav-badge.ok { background: #15803d; } html[data-theme="dark"] .nav-badge.bad { background: #b91c1c; }
.tools { display: flex; gap: 6px; align-items: center; }
.tool {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px;
    background: var(--card); color: var(--text); border: 1px solid var(--line); text-decoration: none; padding: 0; cursor: pointer;
}
.tool:hover { background: var(--line); }
.tool.go { background: var(--primary); color: #fff; border-color: var(--primary); }
.tool.go:hover { filter: brightness(1.1); }
.tool.disabled { opacity: .4; cursor: not-allowed; }
.tool.disabled:hover { background: var(--card); }
a.stat-link { display: block; color: inherit; text-decoration: none; }
a.stat-link:hover .stat, .card.stat:hover { border-color: var(--primary); }
a.stat-link .card.stat { transition: border-color .15s, transform .15s; } a.stat-link:hover .card.stat { transform: translateY(-2px); }

/* ---------- big help modal ---------- */
.help-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(2, 6, 23, .6); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.help-modal[hidden] { display: none; }
.help-dialog { width: min(1180px, 100%); height: 92vh; background: var(--card); color: var(--text); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.help-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--nav-bg); color: var(--nav-text-active); }
.help-head .icon-btn { color: var(--nav-text-active); }
/* The buttons at the left side of the modal header (reload + close). */
.help-head-actions { display: flex; align-items: center; gap: 6px; padding-left: 2px; }
.help-head .icon-btn[disabled] { opacity: .6; cursor: not-allowed; }
.runs-reload.spinning i { display: inline-block; animation: runs-spin .8s linear infinite; }
/* Loading of the runs modal body. */
.runs-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 90px 0; text-align: center; color: var(--text); }
.runs-spinner { width: 54px; height: 54px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--primary); border-left-color: var(--primary); animation: runs-spin .9s linear infinite; }
.runs-loading b { font-size: 14px; animation: runs-pulse 1.4s ease-in-out infinite; }
@keyframes runs-spin { to { transform: rotate(360deg); } }
@keyframes runs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.page-head-actions { margin-top: 0; }
.help-body { padding: 16px 20px 24px; overflow-y: auto; font-size: 12.5px; line-height: 1.95; }
.help-body h3 { font-size: 14px; margin: 4px 0 8px; }
.help-body h4 { font-size: 13px; margin: 14px 0 6px; color: var(--primary); }
.help-body p { margin: 6px 0; } .help-body ul, .help-body ol { margin: 6px 0; padding-right: 20px; }
.help-body li { margin: 3px 0; }
.help-body code { background: var(--line); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.help-body table { font-size: 12px; } .help-body th, .help-body td { padding: 6px 8px; }
.help-loading, .help-error { text-align: center; padding: 60px 0; color: var(--muted); }
.help-tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--line); margin-bottom: 14px; }
.help-tablist button { background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 16px; font-size: 13px; margin-bottom: -2px; }
.help-tablist button:hover { color: var(--text); }
.help-tablist button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.help-pane { display: none; } .help-pane.active { display: block; }
.help-body details { margin-bottom: 7px; padding: 0; overflow: hidden; }
.help-body details summary { padding: 9px 14px; font-size: 12.5px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.help-body details summary::-webkit-details-marker { display: none; }
.help-body details summary::after { content: "\F282"; font-family: bootstrap-icons; font-size: 12px; color: var(--muted); transition: transform .2s; }
.help-body details[open] summary { background: var(--line); }
.help-body details[open] summary::after { transform: rotate(180deg); }
.help-body details > div { padding: 8px 16px 12px; }
.help-note { border-right: 4px solid var(--primary); background: var(--s2-bg); color: var(--s2-fg); padding: 8px 12px; border-radius: 6px; margin: 10px 0; }
.help-note.warn { border-right-color: var(--warn); background: var(--s1-bg); color: var(--s1-fg); }
.help-note.ok { border-right-color: var(--ok); background: var(--s3-bg); color: var(--s3-fg); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.help-grid > div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.help-body .chip { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 11.5px; background: var(--line); }

/* ---------- Jalali date picker ---------- */
.jdp { position: absolute; z-index: 1200; width: 268px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 10px; user-select: none; }
.jdp-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.jdp-head strong { font-size: 13px; }
.jdp-head button { background: transparent; color: var(--text); border: 1px solid var(--line); padding: 2px 8px; font-size: 13px; border-radius: 6px; }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.jdp-grid span.dow { font-size: 11px; color: var(--muted); padding: 3px 0; }
.jdp-grid button { background: transparent; color: var(--text); padding: 6px 0; border-radius: 6px; font-size: 13px; }
.jdp-grid button:hover { background: var(--line); }
.jdp-grid button.today { border: 1px solid var(--primary); }
.jdp-grid button.selected { background: var(--primary); color: #fff; }
.jdp-grid button.friday { color: var(--bad); }
.jdp-foot { display: flex; justify-content: space-between; margin-top: 8px; }
.jdp-foot button { background: transparent; color: var(--primary); padding: 2px 6px; font-size: 12.5px; }
input[data-jdate] { direction: ltr; text-align: right; }

/* ---------- SweetAlert2 follows the theme ---------- */
.swal2-popup { background: var(--card) !important; color: var(--text) !important; font-family: inherit !important; }
.swal2-title, .swal2-html-container { color: var(--text) !important; }
.swal2-html-container { text-align: right; font-size: 14px !important; line-height: 1.9; }
.swal2-html-container ul { padding-right: 20px; margin: 8px 0; }
.swal2-html-container .swal-box { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-top: 10px; font-size: 13px; }
.swal2-html-container .swal-ticket { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; text-align: right; }
.swal-ticket b { color: var(--muted); font-weight: 600; }
.swal2-timer-note { color: var(--muted); font-size: 12px; margin-top: 8px; }
.swal2-actions { gap: 8px; }

/* compact SweetAlert (instant registration dialogs) */
.swal-compact .swal2-icon { transform: scale(.62); margin: -.4em auto -.7em; }
.swal-compact .swal2-title { font-size: 1.05rem; padding: .2em .5em 0; margin: 0; }
.swal-compact .swal2-html-container { font-size: 13px !important; line-height: 1.65; margin: .5em 1em .2em; }
.swal-compact .swal2-html-container p { margin: .3em 0; }
.swal-compact .swal2-html-container ul { margin: .3em 0; padding-right: 18px; }
.swal-compact .swal2-html-container li { margin: .1em 0; }
.swal-compact .swal-box { margin-top: 6px; padding: 5px 10px; font-size: 12.5px; }
.swal-compact .swal2-actions { margin: .8em auto 0; }
.swal-compact .swal2-styled { font-size: 13px; padding: .5em 1.1em; }

/* ---------- foreigners list: name column, new tools, runs modal ---------- */
.full-name-cell b { display: block; font-weight: 600; }
.full-name-cell small { display: block; font-size: 11px; }
.tool.edit { color: var(--primary); }
.tool.pdf { color: #dc2626; }
html[data-theme="dark"] .tool.pdf { color: #f87171; }
.runs-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-box { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; }
.chip-box b { font-size: 17px; }
.chip-box.ok { background: var(--s3-bg); color: var(--s3-fg); border-color: transparent; }
.chip-box.bad { background: var(--s4-bg); color: var(--s4-fg); border-color: transparent; }
.chip-box.run { background: var(--s2-bg); color: var(--s2-fg); border-color: transparent; }
.runs-list { display: flex; flex-direction: column; gap: 10px; }
.run-card { border: 1px solid var(--line); border-right: 5px solid var(--row-bar-s0); border-radius: 10px; padding: 10px 14px; background: var(--card); font-size: 13px; line-height: 1.8; }
.run-card.s-success { border-right-color: var(--row-bar-s3); }
.run-card.s-failed { border-right-color: var(--row-bar-s4); background: var(--row-s4); }
.run-card.s-running { border-right-color: var(--row-bar-s2); }
.run-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.run-card-head .spacer { flex: 1; }
.run-steps { display: flex; gap: 3px; margin: 8px 0 4px; }
.run-steps span { flex: 1; height: 8px; border-radius: 3px; background: var(--line); }
.run-steps span.s-success { background: var(--ok); } .run-steps span.s-failed { background: var(--bad); }
.run-steps span.s-running { background: #3b82f6; } .run-steps span.s-skipped { background: #9ca3af; }
.run-steps [data-tip]::after { white-space: nowrap; }
.run-ticket { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; background: var(--s3-bg); color: var(--s3-fg); border-radius: 8px; padding: 6px 12px; margin-top: 6px; }
.run-message { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-top: 6px; font-size: 12px; }
.run-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.run-actions .btn { padding: 5px 12px; font-size: 12.5px; }

/* ---------- foreigner form: field head, date converter, stored files, toolbar, draft ---------- */
.field-head { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; }
.field-head label { margin: 0; }
.date-convert-btn { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: transparent; color: var(--primary); border: 1px solid var(--line); font-size: 14px; }
.date-convert-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.date-convert-btn i { margin: 0; }
.field-head [data-tip]::after { right: auto; left: 0; transform: none; }
.stored-files { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.stored-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; border: 1px dashed var(--line); border-radius: 6px; background: var(--bg); font-size: 13px; }
.stored-file a { color: var(--primary); text-decoration: none; }
.remove-file { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; font-weight: 400 !important; font-size: 12px; color: var(--bad); cursor: pointer; }
.remove-file input { width: auto; margin: 0; }
.form-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
/* black & white on purpose: it is a tool, not an action of the form */
.snap-btn { background: #111827; color: #fff; border: 1px solid #111827; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; }
.snap-btn:hover { background: #fff; color: #111827; }
html[data-theme="dark"] .snap-btn { background: #f9fafb; color: #111827; border-color: #f9fafb; }
html[data-theme="dark"] .snap-btn:hover { background: transparent; color: #f9fafb; }
.snap-btn i { margin: 0; }
.snap-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: #111827; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.snap-count[hidden] { display: none; }
.snap-btn:hover .snap-count { background: #111827; color: #fff; }
html[data-theme="dark"] .snap-count { background: #111827; color: #fff; }
.form-toolbar [data-tip]::after { right: auto; left: 0; transform: none; }
button.draft-btn { background: transparent; color: var(--warn); border: 1px solid var(--warn); }
button.draft-btn:hover { background: var(--warn); color: #fff; }

/* small dialogs of the form (date converter, previous versions) */
.dc-modal, .snap-modal { position: fixed; inset: 0; z-index: 1100; background: rgba(2, 6, 23, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dc-modal[hidden], .snap-modal[hidden] { display: none; }
.dc-dialog, .snap-dialog { width: min(640px, 100%); max-height: 92vh; background: var(--card); color: var(--text); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.snap-dialog { width: min(760px, 100%); }
.dc-head, .snap-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--nav-bg); color: var(--nav-text-active); }
.dc-head .icon-btn, .snap-head .icon-btn { color: var(--nav-text-active); }
.dc-body, .snap-body { padding: 14px 18px; overflow-y: auto; }
.dc-for { margin: 0 0 12px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.dc-for b { color: var(--text); }
.dc-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.dc-side label { margin: 0 0 4px; }
.dc-side input { direction: ltr; text-align: center; font-size: 17px; letter-spacing: 1px; padding: 10px; }
.dc-arrow { padding-top: 34px; color: var(--muted); font-size: 20px; }
.dc-readable { margin-top: 6px; min-height: 22px; font-size: 12.5px; color: var(--ok); text-align: center; font-weight: 600; }
.dc-error { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: var(--s4-bg); color: var(--s4-fg); font-size: 13px; }
.dc-error[hidden] { display: none; }
.dc-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .dc-grid { grid-template-columns: 1fr; } .dc-arrow { padding: 0; text-align: center; transform: rotate(90deg); } }

.snap-list { display: flex; flex-direction: column; gap: 10px; }
.snap-card { display: block; width: 100%; text-align: right; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.snap-card:hover, .snap-card:focus-visible { border-color: #111827; box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); }
html[data-theme="dark"] .snap-card:hover { border-color: #f9fafb; }
.snap-card-head { display: flex; align-items: center; gap: 10px; }
.snap-no { width: 30px; height: 30px; border-radius: 50%; background: #111827; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
html[data-theme="dark"] .snap-no { background: #f9fafb; color: #111827; }
.snap-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.snap-title small { color: var(--muted); font-size: 11.5px; }
.snap-filled { font-size: 12px; color: var(--muted); white-space: nowrap; }
.snap-lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px 14px; font-size: 12.5px; }
.snap-lines li { display: flex; gap: 6px; min-width: 0; }
.snap-lines span { color: var(--muted); white-space: nowrap; }
.snap-lines b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-more { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.snap-warn { display: block; margin-top: 6px; font-size: 12px; color: var(--s1-fg); background: var(--s1-bg); border-radius: 6px; padding: 3px 8px; }
.snap-use { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.snap-empty { text-align: center; padding: 30px 0; color: var(--muted); }
.snap-empty i { font-size: 34px; }
/* the last (left-most) button of the form: its tooltip opens towards the inside, otherwise the page gets a horizontal scroll */
.btn-row #btn-reset[data-tip]::after { right: auto; left: 0; transform: none; }


/* ==========================================================================
   Profile page, login log
   ========================================================================== */
.profile-head { display: flex; align-items: center; gap: 16px; }
.avatar { font-size: 56px; line-height: 1; color: var(--primary); flex: none; }
.profile-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-id b { font-size: 18px; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.profile-grid > div > .card:last-child { margin-bottom: 0; }
.info-list { margin: 0; }
.info-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.info-list dt { color: var(--muted); flex: none; }
.info-list dd { margin: 0; font-weight: 600; text-align: left; min-width: 0; overflow-wrap: anywhere; }
.login-item { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.login-item:last-of-type { border-bottom: 0; }
.login-item > i { font-size: 22px; color: var(--muted); flex: none; }
.login-item > div { min-width: 0; }
.login-item .badge { margin-right: auto; flex: none; }
.topbar-user { color: var(--nav-text); text-decoration: none; border-radius: 8px; padding: 6px 8px; }
.topbar-user:hover { background: var(--nav-hover); color: var(--nav-text-active); }

/* ==========================================================================
   Phones and tablets. Plain CSS only (no framework): the sidebar becomes a drawer, tables become
   cards or scroll sideways, touch targets grow and inputs never trigger the zoom of iOS.
   The rules start with "body" where the page itself has an inline rule of the same weight.
   ========================================================================== */
.nav-toggle, .sidebar-overlay { display: none; }
.table-scroll { max-width: 100%; }

@media (max-width: 900px) {
    :root { --topbar-h: 52px; }

    /* top bar: menu button, site name, then only icons */
    .nav-toggle { display: inline-flex; flex: none; }
    .topbar { gap: 4px; padding: 0 8px; }
    .topbar .spacer { display: none; }
    .brand { width: auto; flex: 1; min-width: 0; }
    .topbar-user-name, .topbar-user small, .logout-text { display: none; }
    .topbar-user { padding: 6px; font-size: 20px; }
    .logout-btn { padding: 8px 10px; }
    .logout-btn i { margin: 0; }

    /* sidebar: a drawer that slides in from the right (the side of the old sidebar) */
    .sidebar {
        width: min(290px, 84vw); transform: translateX(100%); visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }
    body.nav-open .sidebar { transform: none; visibility: visible; transition-delay: 0s; box-shadow: -10px 0 30px rgba(0, 0, 0, .4); }
    .sidebar-overlay { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 45; background: rgba(2, 6, 23, .55); }
    .sidebar-overlay[hidden] { display: none; }
    body.nav-open { overflow: hidden; }
    .sidebar a { padding: 14px 18px; font-size: 15px; }

    /* content */
    body h1 { font-size: 18px; }
    body .card { padding: 12px; border-radius: 8px; margin-bottom: 12px; }
    body .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body .stat b { font-size: 22px; }
    .profile-grid { grid-template-columns: 1fr; }
    .page-head .btn { width: 100%; text-align: center; }
    .btn-row > button, .btn-row > .btn { flex: 1 1 auto; text-align: center; }
    .help-modal, .dc-modal, .snap-modal { padding: 0; }
    .help-dialog { width: 100%; height: 100%; border-radius: 0; }
    .dc-dialog, .snap-dialog { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
    .help-body { padding: 12px 14px 24px; }
    .tools { flex-wrap: wrap; }
    .tool { width: 38px; height: 38px; }
    .swal2-popup { width: 92vw !important; max-width: 92vw !important; }

    /* inputs: 16px stops iOS from zooming the page when a field gets the focus; comfortable height for fingers */
    body input[type=text], body input[type=password], body input[type=number], body input[type=time],
    body input[type=email], body input[type=search], body select, body textarea { font-size: 16px; min-height: 42px; }
    body button, body .btn { min-height: 40px; }
    body .icon-btn { width: 40px; height: 40px; }

    /* tooltips need a hover: on a touch screen they would stick to the screen, so they are hidden */
    [data-tip]::after { display: none; }

    /* tables that are not turned into cards scroll sideways inside their own box */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll > table { min-width: 560px; }
    .table-scroll > table.stack { min-width: 0; }
    .pagination { flex-wrap: wrap; }
    nav[role="navigation"] { overflow-x: auto; }
}

/* a table with class "stack" (and data-label on every td) becomes a list of cards on a phone */
@media (max-width: 720px) {
    table.stack, table.stack tbody { display: block; width: 100%; }
    table.stack tr:first-child:has(> th) { display: none; }
    table.stack tr { display: block; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 4px 12px; background: var(--card); }
    table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); text-align: right; min-width: 0; }
    table.stack td:last-child { border-bottom: 0; }
    table.stack td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 12px; font-weight: 600; }
    table.stack td[colspan]::before, table.stack td[data-label=""]::before { content: none; }
    table.stack td[colspan] { display: block; text-align: center; }
    table.stack td.full-name-cell { display: block; }
    table.stack td.full-name-cell::before { display: block; margin-bottom: 2px; }
    table.stack .tools { justify-content: flex-end; }
    table.stack td .ltr { text-align: left; }
    table.rows { border-collapse: separate; }
}

@media (max-width: 420px) {
    body .stats { gap: 8px; }
    .profile-head { gap: 12px; }
    .avatar { font-size: 44px; }
    .date-range, .fgrid .pair { grid-template-columns: 1fr; }
}

/* a notch / rounded corners must never hide the top bar or the drawer */
@supports (padding: max(0px)) {
    .topbar { padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(8px, env(safe-area-inset-left)); }
}

/* ---------- support / contact us ---------- */
.support-phone { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.support-phone > i { font-size: 26px; color: var(--primary); }
.support-phone-number { font-size: 24px; font-weight: 700; letter-spacing: 1px; color: var(--text); text-decoration: none; display: inline-block; }
.support-phone-note { flex: 1; min-width: 220px; }
.support-body { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; line-height: 2; word-break: break-word; }
.support-files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
table tr.unseen-row { background: var(--s1-bg); font-weight: 600; }
textarea { width: 100%; font-family: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); color: var(--text); resize: vertical; }

/* ---------- error pages (403, 404, ...) ---------- */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.error-card { max-width: 520px; width: 100%; text-align: center; padding: 36px 28px; }
.error-code { font-size: 78px; font-weight: 800; line-height: 1; color: var(--primary); letter-spacing: 2px; }
.error-card h1 { margin: 12px 0 8px; font-size: 22px; }
.error-card p { color: var(--muted); line-height: 2; margin: 6px 0; }
.error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.error-icon { font-size: 44px; color: var(--warn); }