/*
 * FieldOps light / dark theme.
 *
 * The inline-styled panels (company, super admin, customer portal) write their colours as
 * var(--fo-token, <original light colour>), so light mode renders exactly as before and dark mode
 * only has to redefine the tokens below. html[data-theme] is set before first paint by the inline
 * script in resources/views/partials/brand-head.blade.php.
 */
/*
 * Design tokens. Light values are defined too (not only dark), so every inline
 * var(--fo-token, <fallback>) on the pages picks up one consistent palette. The accent follows the
 * workspace brand: partials/brand-theme sets --fo-brand / --fo-brand-dark when a brand colour is
 * customised, and the link/info tokens are derived from it (the stock blue is the fallback).
 *
 * Neutrals: cool slate-tinted greys, 1px hairline borders, soft two-layer shadows, 8px spacing grid.
 */
:root {
    color-scheme: light;
    --fo-accent: var(--fo-brand, #2563eb);
    --fo-accent-strong: var(--fo-brand-dark, #1d4ed8);
    --fo-bg: #f6f7f9;
    --fo-bg-a: #f6f7f9ee;
    --fo-surface: #ffffff;
    --fo-surface-2: #fbfbfc;
    --fo-muted-bg: #f1f3f6;
    --fo-strong-bg: #0f172a;
    --fo-input-bg: #ffffff;
    --fo-text: #0f172a;
    --fo-text-2: #334155;
    --fo-text-3: #475569;
    --fo-muted: #64748b;
    --fo-subtle: #94a3b8;
    --fo-link: var(--fo-accent);
    --fo-link-2: var(--fo-accent-strong);
    --fo-border: #e6e9ee;
    --fo-border-strong: #d5dbe3;
    --fo-info-bg: color-mix(in srgb, var(--fo-accent) 7%, #fff);
    --fo-info-bg-2: color-mix(in srgb, var(--fo-accent) 14%, #fff);
    --fo-info-bd: color-mix(in srgb, var(--fo-accent) 30%, #fff);
    --fo-ok-bg: #ecfdf3;
    --fo-ok-bg-2: #d1fadf;
    --fo-ok-fg: #067647;
    --fo-ok-bd: #abefc6;
    --fo-bad-bg: #fef3f2;
    --fo-bad-bg-2: #fee4e2;
    --fo-bad-fg: #b42318;
    --fo-bad-bd: #fecdca;
    --fo-warn-bg: #fffaeb;
    --fo-warn-bg-2: #fef0c7;
    --fo-warn-fg: #b54708;
    --fo-warn-bd: #fedf89;
    --fo-violet-bg: #f4f3ff;
    --fo-violet-fg: #5925dc;
    /* Elevation, radius, focus, motion. */
    --fo-shadow-xs: 0 1px 2px #0f172a0d;
    --fo-shadow-sm: 0 1px 2px #0f172a0a, 0 1px 3px #0f172a0d;
    --fo-shadow-md: 0 4px 8px -2px #0f172a14, 0 2px 4px -2px #0f172a0a;
    --fo-shadow-lg: 0 16px 32px -8px #0f172a29, 0 4px 8px -4px #0f172a0f;
    --fo-radius-sm: 6px;
    --fo-radius: 8px;
    --fo-radius-lg: 12px;
    --fo-ring: 0 0 0 3px color-mix(in srgb, var(--fo-accent) 22%, transparent);
    --fo-ease: cubic-bezier(.2, .8, .2, 1);
    --fo-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", "Hind Siliguri", sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --fo-bg: #0a0c10;
    --fo-bg-a: #0a0c10ee;
    --fo-surface: #12151b;
    --fo-surface-2: #15191f;
    --fo-muted-bg: #1a1e26;
    --fo-strong-bg: #2a303b;
    --fo-input-bg: #0e1116;
    --fo-text: #eceef2;
    --fo-text-2: #cfd4dc;
    --fo-text-3: #a9b0bc;
    --fo-muted: #8b93a1;
    --fo-subtle: #646c7a;
    --fo-link: color-mix(in srgb, var(--fo-accent) 62%, #fff);
    --fo-link-2: color-mix(in srgb, var(--fo-accent) 40%, #fff);
    --fo-border: #22262f;
    --fo-border-strong: #2f3440;
    --fo-info-bg: color-mix(in srgb, var(--fo-accent) 13%, #12151b);
    --fo-info-bg-2: color-mix(in srgb, var(--fo-accent) 24%, #12151b);
    --fo-info-bd: color-mix(in srgb, var(--fo-accent) 45%, #12151b);
    --fo-ok-bg: #0c241b;
    --fo-ok-bg-2: #113426;
    --fo-ok-fg: #4ade80;
    --fo-ok-bd: #166534;
    --fo-bad-bg: #2a1417;
    --fo-bad-bg-2: #42191d;
    --fo-bad-fg: #fca5a5;
    --fo-bad-bd: #7f1d1d;
    --fo-warn-bg: #261d0e;
    --fo-warn-bg-2: #3a2c0e;
    --fo-warn-fg: #fbbf24;
    --fo-warn-bd: #78350f;
    --fo-violet-bg: #211a3b;
    --fo-violet-fg: #c4b5fd;
    --fo-shadow-xs: 0 1px 2px #00000040;
    --fo-shadow-sm: 0 1px 2px #00000052, 0 0 0 1px #ffffff05;
    --fo-shadow-md: 0 6px 16px -4px #00000080, 0 0 0 1px #ffffff08;
    --fo-shadow-lg: 0 24px 48px -12px #000000b3, 0 0 0 1px #ffffff0d;
    --fo-ring: 0 0 0 3px color-mix(in srgb, var(--fo-accent) 40%, transparent);
}

/* Zero-specificity dark defaults: any page rule still wins over these. */
:where(html[data-theme="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
    background-color: var(--fo-input-bg);
    color: var(--fo-text);
    border-color: var(--fo-border-strong);
}
:where(html[data-theme="dark"]) :where(input, textarea)::placeholder { color: #646c7a; }
:where(html[data-theme="dark"]) :where(a) { color: var(--fo-link); }
:where(html[data-theme="dark"]) :where(hr) { border-color: var(--fo-border); }
:where(html[data-theme="dark"]) :where(code, kbd, pre) { background-color: var(--fo-muted-bg); color: var(--fo-text-2); }
html[data-theme="dark"] select option { background-color: var(--fo-surface); color: var(--fo-text); }
::selection { background: color-mix(in srgb, var(--fo-accent) 22%, transparent); }
html[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--fo-accent) 45%, transparent); }

/* Shared widgets from resources/js/crud.js and common panel chrome. */
html[data-theme="dark"] .fo-err { color: var(--fo-bad-fg); }
html[data-theme="dark"] .fo-view dt { color: var(--fo-muted); }
html[data-theme="dark"] .modal { background: #000000a6; }
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .card { box-shadow: 0 1px 0 #ffffff08 inset, 0 8px 24px #00000040; }
html[data-theme="dark"] img.fo-invert-dark { filter: invert(1) hue-rotate(180deg); }

/* Map tiles (Leaflet) get a dark treatment; markers and popups stay as they are. */
html[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.72) invert(1) contrast(.9) hue-rotate(200deg) saturate(.35) brightness(.85); }
html[data-theme="dark"] .leaflet-container { background: #0a0c10; }
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip { background: var(--fo-surface); color: var(--fo-text); }
html[data-theme="dark"] .leaflet-bar a { background: var(--fo-surface); color: var(--fo-text); border-color: var(--fo-border); }

/* Logos that exist in a light-surface and a dark-surface version. */
html:not([data-theme="dark"]) .fo-logo-dark { display: none !important; }
html[data-theme="dark"] .fo-logo-light { display: none !important; }

/* Theme toggle (resources/views/partials/theme-toggle.blade.php). */
.fo-tt {
    --fo-tt-bg: #f1f5f9; --fo-tt-bd: #e2e8f0; --fo-tt-fg: #64748b; --fo-tt-on: #0f172a; --fo-tt-on-bg: #fff; --fo-tt-shadow: 0 1px 2px #0f172a1f;
    display: inline-flex; align-items: center; gap: 2px; padding: 3px; margin: 0; border-radius: 999px;
    border: 1px solid var(--fo-tt-bd); background: var(--fo-tt-bg); vertical-align: middle; line-height: 0; flex: none;
}
.fo-tt--dark,
html[data-theme="dark"] .fo-tt {
    --fo-tt-bg: #ffffff0d; --fo-tt-bd: #ffffff1a; --fo-tt-fg: #94a3b8; --fo-tt-on: #fff; --fo-tt-on-bg: #ffffff24; --fo-tt-shadow: none;
}
.fo-tt .fo-tt-b {
    all: unset; box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 24px;
    border-radius: 999px; color: var(--fo-tt-fg); cursor: pointer; transition: color .15s, background-color .15s;
}
.fo-tt .fo-tt-b svg { width: 15px; height: 15px; display: block; }
.fo-tt .fo-tt-b:hover { color: var(--fo-tt-on); }
.fo-tt .fo-tt-b:focus-visible { outline: 2px solid var(--fo-accent, #2563eb); outline-offset: 1px; }
html[data-theme-pref="light"] .fo-tt .fo-tt-b[data-fo-theme-set="light"],
html[data-theme-pref="dark"] .fo-tt .fo-tt-b[data-fo-theme-set="dark"],
html[data-theme-pref="system"] .fo-tt .fo-tt-b[data-fo-theme-set="system"] {
    background: var(--fo-tt-on-bg); color: var(--fo-tt-on); box-shadow: var(--fo-tt-shadow);
}
.fo-tt--float {
    position: fixed; left: 14px; bottom: 14px; z-index: 9990;
    background: #ffffffe6; box-shadow: 0 6px 20px #0f172a1f; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html[data-theme="dark"] .fo-tt--float { background: #12151be6; box-shadow: 0 6px 20px #00000066; }
@media print { .fo-tt { display: none !important; } }
html[data-theme="dark"] .leaflet-control-attribution { background: #0a0c10cc !important; color: var(--fo-muted); }
html[data-theme="dark"] .leaflet-control-attribution a { color: var(--fo-link); }

/*
 * Row action icon buttons (resources/js/action-icons.js). Ghost style: no fill or border at rest, muted
 * icon; a soft tint on hover/focus. Destructive actions only turn red on hover/focus. Rows with more than
 * 3 actions collapse the rest into a "⋯" menu (.fo-menu). The doubled class outranks the per-page
 * `button`, `.secondary`, `.danger` and `.fo-actions button` rules.
 */
:root { --fo-row-hover: #f8fafc; --fo-ghost-hover: #eef2f6; --fo-menu-shadow: 0 10px 30px #0f172a1f, 0 2px 6px #0f172a14; --fo-tip-bg: #0f172a; --fo-tip-fg: #fff; }
html[data-theme="dark"] { --fo-row-hover: #ffffff06; --fo-ghost-hover: #ffffff12; --fo-menu-shadow: 0 12px 32px #00000080, 0 2px 6px #00000060; --fo-tip-bg: #e6ebf2; --fo-tip-fg: #0b1120; }

html body .fo-icon-btn.fo-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; position: relative; flex: none; box-sizing: border-box;
    width: 32px; height: 32px; min-width: 32px; padding: 0; margin: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--fo-muted, #64748b); box-shadow: none;
    line-height: 0; font-size: 0; vertical-align: middle; text-decoration: none;
    cursor: pointer; transition: background-color .12s, color .12s, opacity .12s;
}
html body .fo-icon-btn.fo-icon-btn svg.fo-icon { width: 18px; height: 18px; display: block; flex: none; }
html body .fo-icon-btn.fo-icon-btn:hover,
html body .fo-icon-btn.fo-icon-btn:focus-visible,
html body .fo-icon-btn.fo-icon-btn[aria-expanded="true"] { background: var(--fo-ghost-hover); color: var(--fo-text, #0f172a); }
html body .fo-icon-btn.fo-icon-btn:focus-visible { outline: 2px solid var(--fo-accent, #2563eb); outline-offset: 1px; }
html body .fo-icon-btn.fo-icon-btn.danger:hover,
html body .fo-icon-btn.fo-icon-btn.danger:focus-visible,
html body .fo-icon-btn.fo-icon-btn[data-fo-icon="delete"]:hover,
html body .fo-icon-btn.fo-icon-btn[data-fo-icon="delete"]:focus-visible { background: var(--fo-bad-bg, #fef2f2); color: var(--fo-bad-fg, #dc2626); }
html body .fo-icon-btn.fo-icon-btn[data-fo-icon="approve"]:hover,
html body .fo-icon-btn.fo-icon-btn[data-fo-icon="approve"]:focus-visible { background: var(--fo-ok-bg, #ecfdf5); color: var(--fo-ok-fg, #047857); }
html body .fo-icon-btn.fo-icon-btn:disabled,
html body .fo-icon-btn.fo-icon-btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; background: transparent; color: var(--fo-muted, #64748b); }
html[dir="rtl"] .fo-icon-btn svg.fo-icon-flip { transform: scaleX(-1); }
/* Visually hidden label: keeps the accessible name and .text() of the button. */
.fo-icon-btn .fo-icon-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Action groups and the actions column. */
html body .fo-act-group.fo-actions { gap: 2px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
html body td.fo-act-cell { vertical-align: middle; text-align: end; white-space: nowrap; }
html body th.fo-act-head { text-align: end; }
td.fo-act-group > :is(button, a, .fo-more-wrap) + :is(button, a, .fo-more-wrap) { margin-inline-start: 2px; }
.fo-more-wrap { display: inline-flex; vertical-align: middle; }
table.fo-act-table > tbody > tr > td { transition: background-color .12s; }
table.fo-act-table > tbody > tr:hover > td,
table.fo-act-table > tbody > tr.fo-row-active > td { background-color: var(--fo-row-hover); }
@media (hover: hover) and (pointer: fine) {
    tr .fo-act-cell .fo-icon-btn:not(:disabled) { opacity: .55; }
    tr:hover .fo-act-cell .fo-icon-btn:not(:disabled),
    tr:focus-within .fo-act-cell .fo-icon-btn:not(:disabled),
    tr.fo-row-active .fo-act-cell .fo-icon-btn:not(:disabled),
    .fo-act-cell .fo-icon-btn:focus-visible { opacity: 1; }
}

/* Overflow menu: the original buttons are moved in here and restyled as menu rows. */
html body .fo-menu {
    position: fixed; z-index: 9000; min-width: 180px; max-width: min(280px, calc(100vw - 16px)); padding: 4px;
    background: var(--fo-surface, #fff); border: 1px solid var(--fo-border, #e5e9f0); border-radius: 10px;
    box-shadow: var(--fo-menu-shadow); display: grid; gap: 1px; text-align: start; white-space: nowrap;
}
html body .fo-menu[hidden] { display: none; }
html body .fo-menu .fo-menu-item.fo-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; height: auto; min-width: 0; margin: 0;
    padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--fo-text-2, #334155);
    font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: start; text-decoration: none;
    opacity: 1; box-shadow: none; cursor: pointer; justify-content: flex-start;
}
html body .fo-menu .fo-menu-item.fo-menu-item:hover,
html body .fo-menu .fo-menu-item.fo-menu-item:focus-visible { background: var(--fo-ghost-hover); color: var(--fo-text, #0f172a); outline: none; }
html body .fo-menu .fo-menu-item.fo-menu-item:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
html body .fo-menu .fo-menu-item.fo-menu-danger,
html body .fo-menu .fo-menu-item.fo-menu-danger:hover,
html body .fo-menu .fo-menu-item.fo-menu-danger:focus-visible { color: var(--fo-bad-fg, #dc2626); }
html body .fo-menu .fo-menu-item.fo-menu-danger:hover,
html body .fo-menu .fo-menu-item.fo-menu-danger:focus-visible { background: var(--fo-bad-bg, #fef2f2); }
html body .fo-menu .fo-menu-item.fo-menu-item svg.fo-icon,
html body .fo-menu .fo-menu-item.fo-menu-item .fo-icon-blank { width: 16px; height: 16px; flex: none; display: block; color: inherit; }
html body .fo-menu .fo-menu-item:not(.fo-menu-danger) svg.fo-icon { color: var(--fo-muted, #64748b); }
html body .fo-menu .fo-menu-item.fo-menu-item .fo-icon-label { position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none; color: inherit; background: none; font: inherit; box-shadow: none; border: 0; }
html body .fo-menu .fo-menu-danger + .fo-menu-danger { margin-top: 0; }
html body .fo-menu .fo-menu-item:not(.fo-menu-danger) + .fo-menu-danger { margin-top: 5px; position: relative; }
html body .fo-menu .fo-menu-item:not(.fo-menu-danger) + .fo-menu-danger::before {
    content: ""; position: absolute; inset-inline: -4px; top: -3px; border-top: 1px solid var(--fo-border, #e5e9f0);
}

/* Custom tooltip (dark pill, shown 300ms after hover / keyboard focus). */
.fo-tip {
    position: fixed; z-index: 9500; pointer-events: none; padding: 4px 8px; border-radius: 6px;
    background: var(--fo-tip-bg); color: var(--fo-tip-fg); font: 500 12px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
    white-space: nowrap; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; visibility: hidden;
}
.fo-tip.fo-tip-on { opacity: 1; transform: none; visibility: visible; }
@media print { .fo-icon-btn, .fo-menu, .fo-tip { display: none !important; } }