/* SITS SIM's own styles on top of Filament's. Copied to public/css/app by `php artisan filament:assets`. */

/* The ticks under a new password box (resources/views/filament/password-checks.blade.php). */
.sim-password-checks { font-size: 0.875rem; line-height: 1.5rem; margin-top: 0.25rem; }
/* Keep a new password box's label level with the box, not halfway down its ticks. */
.fi-fo-field-has-inline-label:has(.sim-password-checks) > .fi-fo-field-label-col { align-items: start; padding-top: 0.5rem; }
.sim-password-checks ul { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.sim-password-heading { font-weight: 600; margin: 0.25rem 0 0; }
.sim-password-bar { height: 6px; border-radius: 3px; background: rgb(156 163 175 / 0.3); overflow: hidden; margin: 0.5rem 0 0.25rem; }
.sim-password-bar > div { height: 100%; transition: width 0.2s; }
.sim-danger { background: rgb(220 38 38); }
.sim-warning { background: rgb(217 119 6); }
.sim-success { background: rgb(22 163 74); }
.sim-text-danger, .sim-needed .sim-tick { color: rgb(220 38 38); }
.sim-text-warning { color: rgb(217 119 6); }
.sim-text-success, .sim-ok .sim-tick { color: rgb(22 163 74); }
.sim-tick { display: inline-block; width: 1rem; }
.sim-muted { opacity: 0.65; }

/*
 * The orange bar at the very top of every page on the staging site. It stays in view: the
 * topbar and sidebar sit below it (--sim-bar is its height, set by the bar's own script, as it
 * can wrap to two lines on a phone).
 */
.sim-staging-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #f59e0b;
    color: #111827;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    text-align: center;
}

/* The demo data progress bar on Diagnostics. */
.sim-progress { height: 0.75rem; margin: 0.5rem 0 0.25rem; border-radius: 9999px; background: var(--gray-200); overflow: hidden; }
.sim-progress > span { display: block; height: 100%; border-radius: 9999px; background: var(--primary-600); transition: width 0.5s; }
.dark .sim-progress { background: var(--gray-700); }
.sim-grow { flex: 1; min-width: 0; }
/* The same bar on the demo site is red, so it's never mistaken for staging. */
.sim-demo-bar {
    background: #dc2626;
    color: #fff;
}

.sim-ebay-bar {
    background: #dc2626;
    color: #fff;
    margin: 0.5rem -1rem -0.5rem;
    padding: 0.5rem 1rem;
}

.fi-topbar-ctn {
    top: var(--sim-bar, 0px);
}

.fi-sidebar {
    top: var(--sim-bar, 0px);
    height: calc(100dvh - var(--sim-bar, 0px));
}

/* The version, in the bottom right of every page when signed in. */
.sim-version {
    position: relative;
    color: #6b7280;
    font-size: 0.75rem;
    padding: 1rem;
    text-align: right;
}

/*
 * The status dot (resources/views/filament/hooks/status-dot.blade.php): a badge on the bottom right
 * of the account button, green when everything's working, amber for delays and red when something
 * needs attention (Pardeep, 3 November 2026). Its line is at the top of the account menu, and
 * Details there opens the list under the account button.
 */
.sim-status-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sim-status-dot { width: 0.625rem; height: 0.625rem; border-radius: 9999px; display: inline-block; flex: none; }
.sim-status-ok { background: rgb(22 163 74); box-shadow: 0 0 0 3px rgb(22 163 74 / 0.2); }
.sim-status-bad { background: rgb(220 38 38); box-shadow: 0 0 0 3px rgb(220 38 38 / 0.2); }
.sim-status-warn { background: rgb(217 119 6); box-shadow: 0 0 0 3px rgb(217 119 6 / 0.2); }
/* No width of its own: the account button follows straight after, and the badge sits on it. */
.fi-topbar-end > .sim-status-wrap { position: relative; display: inline-flex; width: 0; height: 2rem; margin-inline-end: -1rem; z-index: 1; pointer-events: none; }
.sim-status-pip { display: block; position: absolute; left: 1.4rem; top: 1.4rem; width: 0.8rem; height: 0.8rem; border: 2px solid #fff; box-shadow: none; }
.dark .sim-status-pip { border-color: var(--gray-900); }
.sim-status-menu-line { display: flex; gap: 0.625rem; }
.sim-status-menu-more { margin-left: auto; font-size: 0.8125rem; color: var(--primary-600); }
@media (max-width: 39.99rem) {
    .fi-topbar-end > .sim-status-wrap { margin-inline-end: -0.5rem; }
}

/* The status list: a small panel under the account button, placed by status-dot.blade.php (fixed, at the end of the page, so an iPhone draws it). */
.sim-status-panel { position: fixed; z-index: 41; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; width: min(20rem, calc(100vw - 2rem)); text-align: left; padding: 1rem; border-radius: 0.75rem; background: white; color: rgb(17 24 39); font-size: 0.8125rem; box-shadow: 0 10px 25px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(0 0 0 / 0.06); }
@media (max-width: 39.99rem) { .sim-status-panel { left: 1rem; right: 1rem !important; width: auto; } }
.dark .sim-status-panel { background: rgb(24 24 27); color: rgb(244 244 245); box-shadow: 0 10px 25px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.1); }
.sim-status-heading { display: block; font-size: 0.875rem; margin-bottom: 0.5rem; }
.sim-status-lines { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.sim-status-lines > li { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.375rem 0; }
.sim-status-lines .sim-status-dot { margin-top: 0.3rem; flex-shrink: 0; }
.sim-status-detail { display: block; color: rgb(107 114 128); }
/* The Master's lines link to where each is checked: the whole line is the link, with an arrow on hover. */
.sim-status-lines > li:has(.sim-status-line-link) { margin: 0 -0.5rem; padding: 0; }
.sim-status-lines > li:has(.sim-status-line-link) > .sim-status-dot { margin-left: 0.5rem; margin-top: 0.675rem; }
.sim-status-line-link { display: block; flex: 1; padding: 0.375rem 0.5rem 0.375rem 0; border-radius: 0.5rem; color: inherit; text-decoration: none; }
.sim-status-lines > li:has(.sim-status-line-link):hover { background: rgb(156 163 175 / 0.12); border-radius: 0.5rem; }
.sim-status-line-link strong::after { content: ' \203A'; color: var(--primary-600); }
.sim-status-line-link:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.dark .sim-status-detail { color: rgb(161 161 170); }
.sim-status-report { display: block; text-align: center; text-decoration: none; color: inherit; width: 100%; padding: 0.4rem 0.75rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; background: white; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12); }
.sim-status-report:hover { background: rgb(249 250 251); }
.dark .sim-status-report { background: rgb(255 255 255 / 0.05); color: inherit; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); }

/*
 * The Staging | Live switch for platform admins (resources/views/filament/hooks/other-site.blade.php):
 * at the top of the account menu. Orange is staging and green is live.
 */
.sim-site-switch { display: inline-flex; padding: 3px; border: 1px solid var(--gray-200); border-radius: 0.6rem; background: var(--gray-100); font-size: 0.8rem; font-weight: 500; line-height: 1.25rem; }
.sim-site-switch > * { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 0.45rem; color: var(--gray-500); }
.sim-site-switch a:hover { color: var(--gray-800); background: rgb(255 255 255 / 0.6); }
.sim-site-switch a:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.sim-site-dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: var(--gray-300); }
.sim-site-switch .sim-site-on { background: #fff; color: var(--gray-950); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.sim-site-switch .sim-site-staging.sim-site-on { color: #9a3412; }
.sim-site-staging.sim-site-on .sim-site-dot { background: #ea580c; }
.sim-site-live.sim-site-on .sim-site-dot { background: #16a34a; }
.dark .sim-site-switch { border-color: rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.05); }
.dark .sim-site-switch > * { color: var(--gray-400); }
.dark .sim-site-switch .sim-site-on { background: var(--gray-800); color: #fff; }
.dark .sim-site-switch .sim-site-staging.sim-site-on { color: #fdba74; }
/* At the top of the account menu, full width (Pardeep, 3 November 2026). */
.sim-site-in-menu { display: flex; margin: 0.5rem 0.75rem 0.25rem; }
.sim-site-in-menu > * { flex: 1; justify-content: center; padding-block: 0.4rem; }

/*
 * A grid of levels, such as what each role can do on the Team page. It scrolls sideways on a
 * phone rather than squashing, with the first column kept in view.
 */
.sim-grid-wrap { overflow-x: auto; margin: -0.5rem; }
.sim-grid { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sim-grid th, .sim-grid td { padding: 0.5rem 0.75rem; text-align: center; vertical-align: top; border-bottom: 1px solid rgb(156 163 175 / 0.2); white-space: nowrap; }
.sim-grid th[scope="row"], .sim-grid thead th:first-child { text-align: left; font-weight: 500; position: sticky; left: 0; background: var(--sim-grid-bg, #fff); }
.dark .sim-grid th[scope="row"], .dark .sim-grid thead th:first-child { background: rgb(24 24 27); }
.sim-grid td .fi-badge { margin: 0 auto; }
.sim-grid-muted { font-weight: 400; opacity: 0.65; }
.sim-grid-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 0.25rem; font-weight: 400; }

/* The bar while viewing a seller's account (View as seller): blue when read only, red when changes are allowed. */
.sim-viewing-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; background: rgb(219 234 254); color: rgb(30 58 138); }
.sim-viewing-bar.sim-viewing-changes { background: rgb(254 226 226); color: rgb(127 29 29); }
.dark .sim-viewing-bar { background: rgb(30 58 138 / 0.4); color: rgb(219 234 254); }
.dark .sim-viewing-bar.sim-viewing-changes { background: rgb(127 29 29 / 0.5); color: rgb(254 226 226); }
.sim-viewing-actions { display: flex; gap: 0.5rem; }

/* A list of labels and values, such as an audit log entry's details. */
.sim-details { display: grid; grid-template-columns: minmax(6rem, max-content) 1fr; gap: 0.5rem 1rem; font-size: 0.875rem; }
.sim-details dt { font-weight: 600; }
.sim-details dd { margin: 0; overflow-wrap: anywhere; }
.sim-list th, .sim-list td { text-align: left; }
.sim-list .sim-grid-actions { justify-content: flex-end; margin-top: 0; }

/* Help: the guide, search and printing. */
.sim-link { color: var(--primary-600); font-weight: 500; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.sim-link:hover { text-decoration: underline; }
.dark .sim-link { color: var(--primary-400); }
.sim-help-actions { display: inline-flex; gap: 1.5rem; }
.sim-help-tools { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-size: 0.875rem; }
.sim-help-search { display: flex; gap: 0.5rem; max-width: 32rem; }
.sim-help-search > :first-child { flex: 1; }
.sim-help-list { margin: 0; padding-left: 1.25rem; font-size: 0.875rem; }
.sim-help-list li { margin-bottom: 0.75rem; }
ol.sim-help-list { list-style: decimal; }
ul.sim-help-list { list-style: disc; }
.sim-help-item { font-size: 0.875rem; margin-bottom: 0.75rem; }

/* Markdown text: guide pages and the account's own pages. */
.sim-prose { font-size: 0.9375rem; line-height: 1.65; overflow-wrap: anywhere; }
.sim-prose > * + * { margin-top: 0.85em; }
.sim-prose h1 { font-size: 1.5rem; font-weight: 700; }
.sim-prose [id] { scroll-margin-top: 5.5rem; }
.sim-prose h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5em; }
.sim-prose h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.25em; }
.sim-prose ul { list-style: disc; padding-left: 1.5rem; }
.sim-prose ol { list-style: decimal; padding-left: 1.5rem; }
.sim-prose li + li { margin-top: 0.3em; }
.sim-prose a { color: var(--primary-600); text-decoration: underline; }
.sim-guide-contents { border: 1px solid var(--gray-200); border-radius: 0.75rem; padding: 0.75rem 1rem; background: var(--gray-50); }
.dark .sim-guide-contents { border-color: rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.03); }
.sim-guide-contents-title { font-weight: 600; }
.sim-prose .sim-guide-contents ol { margin-top: 0.4em; columns: 2 16rem; column-gap: 2rem; }
.sim-prose .sim-guide-contents li { break-inside: avoid; margin: 0 0 0.3em; }
.sim-prose .sim-guide-contents a { text-decoration: none; }
.sim-prose .sim-guide-contents a:hover { text-decoration: underline; }
.sim-prose .sim-guide-back { font-size: 0.8125rem; text-align: right; margin-top: 0.5em; }
.sim-prose .sim-guide-back a { color: var(--gray-500); }
@media print { .sim-guide-back { display: none; } }
.sim-guide-preview { max-height: 70vh; overflow-y: auto; }
.sim-guide-copy { display: grid; gap: 0.75rem; }
.sim-guide-copy-text { width: 100%; font-family: ui-monospace, monospace; font-size: 0.8125rem; border: 1px solid var(--gray-300); border-radius: 0.5rem; padding: 0.5rem; background: transparent; }
.dark .sim-prose a { color: var(--primary-400); }
.sim-prose code { font-size: 0.85em; padding: 0.1em 0.35em; border-radius: 0.25rem; background: rgb(156 163 175 / 0.2); }
.sim-prose pre { overflow-x: auto; padding: 0.75rem; border-radius: 0.5rem; background: rgb(156 163 175 / 0.15); }
.sim-prose blockquote { border-left: 3px solid rgb(156 163 175 / 0.5); padding-left: 1rem; opacity: 0.85; }
.sim-prose table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.875rem; }
.sim-prose th, .sim-prose td { border: 1px solid rgb(156 163 175 / 0.35); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; overflow-wrap: normal; }
.sim-prose img { max-width: 100%; height: auto; border-radius: 0.5rem; }

/* The ? button next to the user menu. */
.sim-help-button { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; color: rgb(107 114 128); }
.sim-help-button:hover { background: rgb(156 163 175 / 0.15); color: var(--primary-600); }

/* The search box at the top of seller pages. */
.sim-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sim-search input { width: 9rem; padding: 0.375rem 0.625rem; border-radius: 0.5rem; border: 1px solid rgb(156 163 175 / 0.5); background: transparent; font-size: 0.875rem; }
.sim-search input:focus { outline: 2px solid var(--primary-500); outline-offset: 0; }
@media (min-width: 640px) { .sim-search input { width: 14rem; } }
.sim-search-results { list-style: none; padding: 0; margin: 0; }
.sim-search-results li { padding: 0.35rem 0; border-bottom: 1px solid rgb(156 163 175 / 0.2); }

/* Printing a guide page or one of the account's own pages: just the text. */
@media print {
    .fi-sidebar, .fi-topbar-ctn, .fi-topbar, .sim-staging-bar, .sim-viewing-bar, .sim-help-tools, .fi-footer, .fi-page-header-actions-ctn, .fi-header-actions-ctn { display: none !important; }
    .fi-main-ctn, .fi-main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .fi-section { box-shadow: none !important; border: 0 !important; }
}

/* Stock: the totals at the top of a product's stock, numbers on the right, columns that only show on wider screens. */
.sim-stock { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; }
.sim-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.75rem; margin: 0; text-align: center; }
.sim-stats dd { margin: 0; font-size: 1.25rem; font-weight: 600; }
.sim-stats dt { opacity: 0.65; }
.sim-stock-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: flex-end; }
.sim-stock-heading { font-weight: 600; margin-bottom: -0.5rem; }
.sim-grid .sim-num { text-align: right; }
.sim-grid .sim-wrap { white-space: normal; overflow-wrap: anywhere; min-width: 10rem; }
.sim-grid .sim-from-sm, .sim-grid .sim-from-md { display: none; }
@media (min-width: 640px) { .sim-grid .sim-from-sm { display: table-cell; } }
@media (min-width: 768px) { .sim-grid .sim-from-md { display: table-cell; } }

/* Imports */
.sim-progress { height: 1.25rem; border-radius: 0.5rem; background: rgb(156 163 175 / 0.25); overflow: hidden; }
.sim-progress > div { height: 100%; background: var(--primary-500); transition: width 0.5s; }
.sim-inline-badge { display: inline-flex; vertical-align: middle; margin-right: 0.25rem; }
.sim-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem 1.5rem; font-size: 0.875rem; }
.sim-column { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.sim-column-name { font-weight: 500; overflow-wrap: anywhere; }
.sim-column .sim-muted { overflow-wrap: anywhere; }

/* Scan page */
.sim-scan { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .sim-scan { grid-template-columns: 1fr 1fr; align-items: start; } }
.sim-scan-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.sim-scan-input { flex: 1; min-width: 10rem; }
.sim-scan-video { width: 100%; border-radius: 0.5rem; background: #000; }
.sim-scan-last th, .sim-scan-last td { background: rgb(14 165 233 / 0.1); }

/* Email templates: the placeholder suggestions shown when typing "{" (resources/js/placeholders.js). */
.sim-ph-menu { position: absolute; z-index: 60; max-height: 16rem; width: 15rem; overflow-y: auto; padding: 0.25rem; border-radius: 0.5rem; background: #fff; box-shadow: 0 10px 25px rgb(0 0 0 / 0.15); border: 1px solid rgb(0 0 0 / 0.08); font-size: 0.85rem; }
.dark .sim-ph-menu { background: var(--gray-900); border-color: rgb(255 255 255 / 0.1); }
.sim-ph-item { display: block; width: 100%; text-align: left; padding: 0.35rem 0.5rem; border-radius: 0.375rem; }
.sim-ph-item span { display: block; font-size: 0.75rem; color: var(--gray-500); }
.sim-ph-item.sim-ph-active { background: var(--primary-600); color: #fff; }
.sim-ph-item.sim-ph-active span { color: rgb(255 255 255 / 0.75); }
.sim-email-preview { border-radius: 0.5rem; padding: 0.75rem; background: #f4f6fa; }
.sim-email-preview > div { border-radius: 0.375rem; padding: 1rem; background: #fff; color: #1f2937; overflow-wrap: anywhere; }
.sim-email-preview pre { white-space: pre-wrap; }
.sim-bullets { list-style: disc; padding-left: 1.25rem; }
.sim-email-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The Master's notices at the top of every page and on the sign-in page (NOT-01). */
.sim-notice { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; border: 1px solid transparent; }
.sim-notice .sim-prose { margin-top: 0.25rem; }
.sim-notice-info { background: rgb(224 242 254); color: rgb(12 74 110); border-color: rgb(186 230 253); }
.sim-notice-warning { background: rgb(254 243 199); color: rgb(120 53 15); border-color: rgb(253 230 138); }
.sim-notice-danger { background: rgb(254 226 226); color: rgb(127 29 29); border-color: rgb(254 202 202); }
.dark .sim-notice-info { background: rgb(12 74 110 / 0.4); color: rgb(224 242 254); border-color: rgb(12 74 110); }
.dark .sim-notice-warning { background: rgb(120 53 15 / 0.4); color: rgb(254 243 199); border-color: rgb(120 53 15); }
.sim-checks > li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.625rem 0; border-bottom: 1px solid rgb(0 0 0 / 0.06); font-size: 0.875rem; }
.dark .sim-checks > li { border-color: rgb(255 255 255 / 0.08); }
.sim-checks > li:last-child { border-bottom: 0; }
.sim-check-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.0625rem; }
.sim-check-icon.sim-inline { display: inline-block; vertical-align: -0.25rem; }
.sim-check-icon.sim-ok { color: rgb(22 163 74); }
.sim-check-icon.sim-bad { color: rgb(220 38 38); }
.sim-check-icon.sim-warn { color: rgb(217 119 6); }
.sim-check-detail { overflow-wrap: anywhere; }
.sim-check-detail .sim-bullets { margin: 0.25rem 0; }
.sim-mt { margin-top: 1rem; }
.sim-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Diagnostics: a summary at the top, then the sections as boxes one under another that fold away. */
.sim-diag-summary { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: 0.75rem; font-size: 0.875rem; }
.sim-diag-summary strong { font-size: 1rem; }
.sim-diag-summary-icon { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.sim-diag-summary-detail { margin-top: 0.125rem; }
.sim-diag-ok { background: rgb(22 163 74 / 0.08); box-shadow: inset 0 0 0 1px rgb(22 163 74 / 0.3); }
.sim-diag-ok .sim-diag-summary-icon { color: rgb(22 163 74); }
.sim-diag-bad { background: rgb(220 38 38 / 0.07); box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.3); }
.sim-diag-bad .sim-diag-summary-icon { color: rgb(220 38 38); }
.sim-diag-stack { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) {
    .sim-diag-section .sim-checks { column-count: 2; column-gap: 2.5rem; }
    .sim-diag-section .sim-checks > li { break-inside: avoid; }
}
.sim-diag-section .sim-check-detail { color: rgb(75 85 99); }
.dark .sim-diag-section .sim-check-detail { color: rgb(156 163 175); }
.sim-diag-section .sim-checks > li { scroll-margin-top: 6rem; }
.sim-diag-section .sim-checks > li:target { background: rgb(250 204 21 / 0.12); }
.sim-backup-upload { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; font-size: 0.875rem; }
.sim-file-button { display: inline-flex; gap: 0.375rem; align-items: center; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; background: white; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1); }
.dark .sim-file-button { background: rgb(255 255 255 / 0.05); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); }
.sim-file-button:focus-within { outline: 2px solid var(--primary-600); }
.sim-file-button-icon { width: 1.25rem; height: 1.25rem; color: rgb(156 163 175); }
.sim-backup-progress { flex-basis: 100%; }
.sim-backup-progress-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.sim-bar { height: 0.75rem; border-radius: 9999px; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.dark .sim-bar { background: rgb(255 255 255 / 0.1); }
.sim-bar > div { height: 100%; width: 0; background: var(--primary-600); transition: width 0.2s; }
.sim-bar > div[data-tone="success"] { background: rgb(22 163 74); }
.sim-bar > div[data-tone="danger"] { background: rgb(220 38 38); }
.sim-backup-note { margin-top: 0.375rem; opacity: 0.75; }
.sim-backup-note[data-tone="success"] { color: rgb(22 163 74); opacity: 1; }
.sim-backup-note[data-tone="danger"] { color: rgb(220 38 38); opacity: 1; }
.sim-notice-buttons { display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; }
@media (max-width: 639px) { .sim-notice:has(.sim-notice-buttons) { flex-direction: column; } }
.sim-changes > li { margin-bottom: 1rem; }
.sim-changes > li:last-child { margin-bottom: 0; }
.sim-change-waiting { border-left: 4px solid rgb(245 158 11); padding: 0.5rem 0 0.5rem 0.75rem; background: rgb(245 158 11 / 0.06); border-radius: 0 0.5rem 0.5rem 0; }
.sim-change-meta { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-top: 0.375rem; font-size: 0.8125rem; }
.dark .sim-notice-danger { background: rgb(127 29 29 / 0.45); color: rgb(254 226 226); border-color: rgb(127 29 29); }

/* The API reference page. */
.sim-api-contents { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.875rem; }
.sim-api-text { font-size: 0.875rem; line-height: 1.5rem; }
.sim-api-text p, .sim-api-text ul, .sim-api-text pre, .sim-api-text .sim-grid-wrap { margin: 0 0 0.75rem; }
.sim-api-text ul { padding-left: 1.25rem; list-style: disc; }
.sim-api-text h4 { font-weight: 600; margin: 1rem 0 0.25rem; }
.sim-api-text code { font-size: 0.8125rem; overflow-wrap: anywhere; }
.sim-api-text pre { background: rgb(15 23 42); color: rgb(226 232 240); padding: 0.75rem; border-radius: 0.5rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.25rem; }
.sim-api-text pre code { overflow-wrap: normal; white-space: pre; }
.sim-api-call { border-top: 1px solid rgb(156 163 175 / 0.25); padding: 0.5rem 0; }
.sim-api-call > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; }
.sim-api-call[open] > summary { margin-bottom: 0.5rem; }
.sim-api-method { display: inline-block; min-width: 3.5rem; text-align: center; font-size: 0.75rem; font-weight: 700; border-radius: 0.25rem; padding: 0 0.375rem; color: white; }
.sim-api-get { background: rgb(37 99 235); }
.sim-api-post { background: rgb(22 163 74); }
.sim-api-patch { background: rgb(217 119 6); }
.sim-api-codes { list-style: none !important; padding-left: 0 !important; }
.sim-api-text .sim-grid th, .sim-api-text .sim-grid td { text-align: left; vertical-align: top; padding: 0.375rem 0.5rem; }
.sim-api-text .sim-grid td p { margin: 0; }
.sim-api-text .sim-grid td:first-child { white-space: nowrap; }
@media (max-width: 640px) {
    .sim-api-text .sim-grid thead { display: none; }
    .sim-api-text .sim-grid tr { display: block; padding: 0.375rem 0; border-top: 1px solid rgb(156 163 175 / 0.25); }
    .sim-api-text .sim-grid td { display: block; padding: 0 0.25rem; border: 0; }
}

/* The import step bar (filament.seller.import-steps): five steps that fit without scrolling. */
.sim-import-steps .fi-sc-wizard-header { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
.sim-import-steps .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn { gap: 0.75rem; padding: 0.75rem 1.5rem 0.75rem 1rem; width: 100%; }
.sim-import-steps .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn { width: 2.25rem; height: 2.25rem; }
.sim-import-steps .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text { width: auto; min-width: 0; }
.sim-import-steps .fi-sc-wizard-header-step-description { font-size: 0.8125rem; line-height: 1.25rem; }
@media (max-width: 1100px) { .sim-import-steps .fi-sc-wizard-header-step-description { display: none; } }
.sim-import-step-count { display: none; }
@media (max-width: 767px) { .sim-import-step-count { display: inline; } }
.sim-import-preview td, .sim-import-preview thead th { text-align: left; }
.sim-import-preview td.sim-wrap { min-width: 14rem; }
.sim-import-preview-wrap { display: grid; gap: 1rem; }
.sim-import-check { display: grid; gap: 0.75rem; }
.sim-import-check-heading { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.sim-import-check-counts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sim-import-check-counts .fi-badge { font-size: 0.875rem; padding: 0.25rem 0.625rem; }
.sim-import-more { margin-top: 0.75rem; }

/* Where the file is from, as cards (filament.seller.import-source-cards). */
.sim-source-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.sim-source-card { display: grid; justify-items: center; gap: 0.5rem; padding: 1.75rem 1.25rem; text-align: center; border-radius: 0.75rem; border: 1px solid rgb(156 163 175 / 0.35); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.dark .sim-source-card { background: rgb(255 255 255 / 0.03); }
.sim-source-card:hover { border-color: var(--primary-400); }
.sim-source-card-on { border-color: var(--primary-600); box-shadow: 0 0 0 2px var(--primary-600); }
.sim-source-card-icon { width: 2.25rem; height: 2.25rem; color: var(--primary-600); }
.sim-source-card-title { font-weight: 600; }
.sim-source-card-text { font-size: 0.8125rem; color: rgb(107 114 128); }
.sim-import-intro { display: grid; gap: 0.25rem; text-align: center; font-size: 0.875rem; color: rgb(107 114 128); }
.sim-import-intro-title { font-size: 1.125rem; font-weight: 600; color: inherit; }
.sim-import-intro .sim-import-intro-title { color: rgb(17 24 39); }
.dark .sim-import-intro .sim-import-intro-title { color: #fff; }

/* The slim step bar (filament.seller.import-steps): numbered pills joined by a line. */
.sim-stepper ol { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; }
.sim-stepper-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem 0.375rem 0.375rem; border-radius: 999px; background: rgb(243 244 246); font-size: 0.8125rem; color: rgb(75 85 99); white-space: nowrap; }
.dark .sim-stepper-step { background: rgb(255 255 255 / 0.06); color: rgb(209 213 219); }
.sim-stepper-step + .sim-stepper-step { margin-left: 2rem; position: relative; }
.sim-stepper-step + .sim-stepper-step::before { content: ''; position: absolute; left: -2rem; width: 2rem; top: 50%; border-top: 1px solid rgb(209 213 219); }
.sim-stepper-number { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: rgb(209 213 219); color: rgb(55 65 81); font-weight: 600; font-size: 0.75rem; }
.sim-stepper-check { width: 0.875rem; height: 0.875rem; }
.sim-stepper-done .sim-stepper-number { background: var(--primary-600); color: #fff; }
.sim-stepper-on { background: var(--primary-600); color: #fff; font-weight: 600; }
.sim-stepper-on .sim-stepper-number { background: #fff; color: var(--primary-700); }
.sim-stepper-count { display: none; }
@media (max-width: 767px) {
    .sim-stepper-step:not(.sim-stepper-on) { display: none; }
    .sim-stepper-step + .sim-stepper-step { margin-left: 0; }
    .sim-stepper-step::before { display: none; }
    .sim-stepper-count { display: inline; }
}

/*
 * The menu. Each group's icon has its own colour; the pages' icons are grey, and the current
 * page has a pale row in the account's main colour. Groups are split by thin lines. A folded
 * group shows what's in it under its name (resources/views/vendor/filament-panels/components/sidebar/group.blade.php).
 */
.fi-sidebar-group[data-group-label="Catalogue"] { --sim-group: #0284c7; }
.fi-sidebar-group[data-group-label="Sales and fulfilment"] { --sim-group: #2563eb; }
.fi-sidebar-group[data-group-label="Inventory"] { --sim-group: #059669; }
.fi-sidebar-group[data-group-label="Purchasing"] { --sim-group: #ea580c; }
.fi-sidebar-group[data-group-label="Reports"] { --sim-group: #7c3aed; }
.fi-sidebar-group[data-group-label="Imports and exports"] { --sim-group: #475569; }
.fi-sidebar-group[data-group-label="Settings"] { --sim-group: #334155; }
.fi-sidebar-group[data-group-label="Messages"] { --sim-group: #db2777; }
.fi-sidebar-group[data-group-label="Admin"] { --sim-group: #4f46e5; }
.fi-sidebar-group[data-group-label="System"] { --sim-group: #52525b; }
.fi-sidebar-group[data-group-label="Support"] { --sim-group: #0d9488; }
.fi-sidebar-nav { row-gap: 0; }
.fi-sidebar-nav-groups { row-gap: 0 !important; }
.fi-sidebar-group { padding: 0.375rem 0; border-top: 1px solid var(--gray-200); }
.fi-sidebar-group:first-child { border-top: 0; }
.dark .fi-sidebar-group { border-color: rgb(255 255 255 / 0.08); }
.fi-sidebar-group-btn { align-items: flex-start; }
.fi-sidebar-group-btn > .fi-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.3rem;
    border-radius: 0.5rem;
    color: #fff;
    background: var(--sim-group, #64748b);
}
.fi-sidebar-group-btn > .fi-sidebar-group-collapse-btn { margin-top: 0.125rem; }
.sim-group-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 1.75rem; }
.sim-group-text .fi-sidebar-group-label { font-weight: 600; color: var(--gray-900); }
.dark .sim-group-text .fi-sidebar-group-label { color: var(--gray-100); }
.dark .sim-group-hint { color: var(--gray-400); }
.sim-group-hint { display: none; font-size: 0.75rem; line-height: 1.1rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The line can run into the space beside the fold arrow, stopping short of the arrow itself. */
.fi-sidebar-group-btn .sim-group-hint { margin-right: -1rem; }
.fi-sidebar-group.fi-collapsed .sim-group-hint { display: block; }
.fi-sidebar-group-dropdown-trigger-btn > .fi-icon { color: var(--sim-group, var(--gray-400)); }
/*
 * Dark mode, the icon strip: the darker group colours are lighter shades of the same colour, so
 * every icon has at least 3:1 contrast with the dark page and its hover (WCAG 1.4.11, UI review
 * 3 November 2026). Only the strip's icons change: the open menu's white icons stay on the full colour.
 */
.dark .fi-sidebar-group[data-group-label="Imports and exports"] { --sim-group-dark: #64748b; }
.dark .fi-sidebar-group[data-group-label="Settings"] { --sim-group-dark: #94a3b8; }
.dark .fi-sidebar-group[data-group-label="Admin"] { --sim-group-dark: #6366f1; }
.dark .fi-sidebar-group[data-group-label="System"] { --sim-group-dark: #71717a; }
.dark .fi-sidebar-group-dropdown-trigger-btn > .fi-icon { color: var(--sim-group-dark, var(--sim-group, var(--gray-400))); }
.fi-sidebar-item-btn { min-height: 2.5rem; }
/* Pages in a group start where the group's name does (Pardeep, 4 November 2026). Not on the folded icon rail, or Dashboard, which has no group. */
.fi-sidebar.fi-sidebar-open .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-item-btn { padding-inline-start: 3rem; }
.fi-sidebar-item-btn > .fi-icon { color: var(--gray-500); width: 1.25rem; height: 1.25rem; }
.dark .fi-sidebar-item-btn > .fi-icon { color: var(--gray-500); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--primary-100); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { font-weight: 600; }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: color-mix(in oklab, var(--primary-400) 15%, transparent); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: var(--primary-300); }

/* The menu search (resources/views/filament/hooks/menu-search.blade.php): stays at the top while the menu scrolls. */
.sim-menu-search { --sim-menu-bg: var(--gray-50); position: sticky; top: 0; z-index: 2; margin: -0.5rem 0 0.5rem; padding: 0.5rem 0; background: var(--sim-menu-bg); box-shadow: 0 -1rem 0 1rem var(--sim-menu-bg); }
.dark .sim-menu-search { --sim-menu-bg: var(--gray-950); }
@media (max-width: 63.99rem) {
    .sim-menu-search { --sim-menu-bg: #fff; }
    .dark .sim-menu-search { --sim-menu-bg: var(--gray-900); }
}
.sim-menu-search input {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: 0.6rem;
    background: #fff;
    padding: 0.5rem 3.25rem 0.5rem 2.1rem;
    font-size: 0.875rem;
}
.sim-menu-search input::-webkit-search-cancel-button { display: none; }
.dark .sim-menu-search input { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: var(--gray-100); }
.sim-menu-search > svg { position: absolute; left: 0.65rem; bottom: 1.15rem; width: 1rem; height: 1rem; color: var(--gray-400); pointer-events: none; }
.sim-menu-search kbd {
    position: absolute;
    right: 0.5rem;
    bottom: 1.05rem;
    font: inherit;
    font-size: 0.7rem;
    color: var(--gray-500);
    border: 1px solid var(--gray-200);
    border-radius: 0.35rem;
    padding: 0.05rem 0.35rem;
    background: var(--gray-50);
}
.dark .sim-menu-search kbd { background: transparent; border-color: rgb(255 255 255 / 0.15); }
.sim-menu-search-clear { position: absolute; right: 0.4rem; bottom: 0.95rem; padding: 0.2rem; border-radius: 0.35rem; color: var(--gray-500); }
.sim-menu-search-clear:hover { background: var(--gray-100); color: var(--gray-700); }
.sim-menu-search-clear svg { width: 1rem; height: 1rem; }
.sim-menu-search kbd[hidden], .sim-menu-search-clear[hidden], .sim-menu-none[hidden], .fi-sidebar-group[hidden], .fi-sidebar-item[hidden] { display: none !important; }
.sim-menu-searching .sim-group-hint, .sim-menu-searching .fi-sidebar-group-collapse-btn { display: none !important; }
.sim-menu-none { padding: 0.5rem; font-size: 0.875rem; color: var(--gray-500); }
@media (min-width: 64rem) {
    .fi-sidebar:not(.fi-sidebar-open) .sim-menu-search { display: none; }
}
.sim-menu-search input:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 0; border-color: transparent; }
.sim-menu-search-clear:focus-visible, .fi-sidebar-group-dropdown-trigger-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.fi-sidebar-item-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
@media (max-width: 63.99rem) {
    .sim-menu-search kbd { display: none; }
    .sim-menu-search input { padding-right: 2rem; }
}

/*
 * Favourites (App\Services\MenuFavourites): a star on each page in the menu shows on hover (always,
 * once it's a favourite). The star next to a page's title is an outline in a grey box, and fills
 * once the page is a favourite; the Favourites star in the header (below) is always filled amber.
 */
.fi-sidebar-item.sim-fav-page { position: relative; }
.fi-sidebar-item.sim-fav-page > .fi-sidebar-item-btn { padding-right: 2.25rem; }
/* The icon strip has no stars, so no room for one: every icon then shares the strip's centre (MenuRailTest). */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.sim-fav-page > .fi-sidebar-item-btn { padding-right: 0.5rem; }
.sim-fav-star {
    position: absolute;
    right: 0.5rem;
    top: 0.625rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: var(--gray-400);
    opacity: 0;
}
.sim-fav-star svg, .sim-fav-title-star svg { width: 1.05rem; height: 1.05rem; fill: none; }
.sim-fav-star[aria-pressed="true"] svg, .sim-fav-title-star.sim-fav-on svg { fill: currentColor; }
.fi-sidebar-item:hover > .sim-fav-star, .fi-sidebar-item:focus-within > .sim-fav-star, .sim-fav-star[aria-pressed="true"] { opacity: 1; }
.sim-fav-star[aria-pressed="true"] { color: #d97706; }
.dark .sim-fav-star[aria-pressed="true"], .dark .sim-fav-title-star.sim-fav-on { color: #fbbf24; }
.sim-fav-star:hover { background: var(--gray-100); color: var(--gray-700); }
.sim-fav-star[aria-pressed="true"]:hover { color: #b45309; }
.dark .sim-fav-star:hover { background: rgb(255 255 255 / 0.08); color: var(--gray-200); }
.sim-fav-star:focus-visible, .sim-fav-title-star:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; opacity: 1; }
/* Touch screens can't point, so a menu star is only a marker there: filled for a favourite, and a tap anywhere on the row opens the page. The star next to the page's title adds or removes it (Pardeep, 3 November 2026). */
@media (hover: none) {
    .fi-sidebar-item:hover > .sim-fav-star:not([aria-pressed="true"]) { opacity: 0; }
    .sim-fav-star { pointer-events: none; }
}

/* The star before a page's title, on the same line, like the menu's stars on the left (Pardeep, 5 November 2026) (resources/views/filament/hooks/favourite-star.blade.php). */
.sim-fav-title-star + .fi-header-heading { display: inline; }
.sim-fav-title-star { margin-right: 0.625rem; }
.sim-fav-title-star {
    display: inline-grid;
    place-items: center;
    vertical-align: 0.35rem;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--gray-400);
}
.sim-fav-title-star:hover { color: var(--gray-700); }
.sim-fav-title-star.sim-fav-on { color: #d97706; }
.dark .sim-fav-title-star { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); }

/*
 * The menu on a phone (below 1024px): a wider drawer, a close cross, tighter spacing, and
 * a one-line preview under folded groups (as on a computer). The computer layout is unchanged.
 */
.sim-menu-close { display: none; }
@media (max-width: 63.99rem) {
    .fi-main-sidebar { --sidebar-width: min(20rem, 88vw); }
    .fi-main-sidebar .fi-sidebar-header { height: 3.5rem; justify-content: space-between; padding-inline: 1rem 0.5rem; }
    .sim-menu-close { display: inline-flex; padding: 0.5rem; border-radius: 0.5rem; color: var(--gray-500); }
    .sim-menu-close:hover { background: var(--gray-100); color: var(--gray-700); }
    .dark .sim-menu-close:hover { background: rgb(255 255 255 / 0.05); color: var(--gray-200); }
    .sim-menu-close:focus-visible { outline: 2px solid var(--primary-500); }
    .sim-menu-close svg { width: 1.5rem; height: 1.5rem; }
    .fi-main-sidebar .fi-tenant-menu-trigger { padding-block: 0.375rem; justify-content: flex-start; }
    .fi-main-sidebar .fi-sidebar-header-controls { padding: 0.5rem 0.75rem 0; }
    .fi-main-sidebar .fi-sidebar-header-controls::after { margin-top: 0.5rem; }
    .fi-main-sidebar .fi-sidebar-nav { padding-block: 0.75rem 1.5rem; padding-inline: 0.75rem; }
    .fi-main-sidebar .sim-menu-search { margin-bottom: 0.5rem; padding-bottom: 0.125rem; }
    .fi-main-sidebar .fi-sidebar-group { padding: 0.125rem 0; }
    .fi-main-sidebar .fi-sidebar-group-btn { padding-block: 0.375rem; }
    /* Every tap target is at least 44px. Rows stay 40px to look at; an invisible edge fills the gap between them. */
    .fi-main-sidebar .sim-menu-close { padding: 0.625rem; }
    .fi-main-sidebar .sim-menu-search input { min-height: 2.75rem; }
    .fi-main-sidebar .fi-sidebar-item-btn::before,
    .fi-main-sidebar .fi-sidebar-group-btn::before { content: ''; position: absolute; inset: -2px 0; }
    .fi-main-sidebar .fi-sidebar-group-btn { position: relative; }
    .fi-topbar-open-sidebar-btn::before { content: ''; position: absolute; inset: -4px; }
    /* The page behind the open menu doesn't scroll, and scrolling past the end of the menu stops there. */
    html:has(.fi-main-sidebar.fi-sidebar-open) { overflow: hidden; }
    .fi-main-sidebar .fi-sidebar-nav { overscroll-behavior: contain; }
}

/* The star next to a page's title is at least 44px to tap on a phone. */
@media (max-width: 63.99rem) {
    .sim-fav-title-star { width: 2.75rem; height: 2.75rem; vertical-align: 0.1rem; }
}

/*
 * The Favourites star in the page header and the grid it opens (App\Livewire\FavouritesLauncher).
 * On a computer a panel under the star, three tiles across, every row the same height; on a phone
 * (below 640px) a sheet from the bottom that scrolls on its own, and Edit is a list.
 */
.sim-favs { position: relative; display: flex; align-items: center; }
/* The star and its arrow: grey while there are no favourites, amber and filled once there are (Pardeep, 3 November 2026). Its word is for screen readers. */
.sim-favs-btn { display: inline-flex; align-items: center; gap: 0.125rem; height: 2.25rem; padding: 0 0.375rem 0 0.5rem; border-radius: 0.5rem; color: var(--gray-500); }
.sim-favs-btn > svg:first-child { width: 1.25rem; height: 1.25rem; fill: none; }
.sim-favs-has .sim-favs-btn { background: #fffbeb; color: #d97706; }
.sim-favs-has .sim-favs-btn > svg:first-child { fill: currentColor; }
.sim-favs-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sim-favs-caret { width: 1rem; height: 1rem; color: var(--gray-400); transition: transform 0.15s; }
.sim-favs-open .sim-favs-caret { transform: rotate(180deg); }
.sim-favs-btn:hover, .sim-favs-open .sim-favs-btn { background: rgb(156 163 175 / 0.15); }
.sim-favs-has .sim-favs-btn:hover, .sim-favs-has.sim-favs-open .sim-favs-btn { background: #fef3c7; }
.sim-favs-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.dark .sim-favs-btn { color: var(--gray-400); }
.dark .sim-favs-has .sim-favs-btn { background: rgb(251 191 36 / 0.1); color: #fbbf24; }
.dark .sim-favs-has .sim-favs-btn:hover, .dark .sim-favs-has.sim-favs-open .sim-favs-btn { background: rgb(251 191 36 / 0.18); }

.sim-favs-veil { position: fixed; inset: 0; z-index: 40; background: rgb(3 7 18 / 0.5); }
.sim-favs-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: min(23.75rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 5rem);
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.dark .sim-favs-panel { border-color: rgb(255 255 255 / 0.1); background: var(--gray-900); }
.sim-favs-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.75rem 0.5rem 1rem; }
.sim-favs-head h2 { font-size: 0.9rem; font-weight: 600; color: var(--gray-950); }
.dark .sim-favs-head h2 { color: #fff; }
.sim-favs-count { margin-right: auto; font-size: 0.75rem; color: var(--gray-500); }
.sim-favs-edit { padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.8rem; font-weight: 500; color: var(--primary-600); }
.sim-favs-edit:hover { background: var(--gray-100); }
.dark .sim-favs-edit { color: var(--primary-400); }
.dark .sim-favs-edit:hover { background: rgb(255 255 255 / 0.05); }
.sim-favs-close { display: none; }
.sim-favs-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 0.75rem 0.75rem; }
.sim-favs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.sim-favs-grid > li { display: flex; flex-direction: column; min-width: 0; border-radius: 0.625rem; }
.sim-favs-tile { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.4rem; min-height: 5.25rem; padding: 0.75rem 0.375rem 0.625rem; border-radius: 0.625rem; color: var(--gray-700); text-align: center; }
.sim-favs-tile .fi-icon { flex: none; color: var(--gray-500); }
.sim-favs-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 0.8rem; line-height: 1.1rem; overflow-wrap: break-word; hyphens: auto; }
.sim-favs-tile:hover { background: var(--gray-50); color: var(--gray-950); }
.sim-favs-tile:focus-visible, .sim-favs-panel button:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 0; }
.sim-favs-tile.sim-favs-active { background: var(--primary-50); color: var(--primary-700); font-weight: 500; }
.sim-favs-tile.sim-favs-active .fi-icon { color: var(--primary-600); }
.dark .sim-favs-tile { color: var(--gray-200); }
.dark .sim-favs-tile .fi-icon { color: var(--gray-400); }
.dark .sim-favs-tile:hover { background: rgb(255 255 255 / 0.05); color: #fff; }
.dark .sim-favs-tile.sim-favs-active { background: color-mix(in srgb, var(--primary-400) 14%, transparent); color: var(--primary-300); }
.dark .sim-favs-tile.sim-favs-active .fi-icon { color: var(--primary-400); }
.sim-favs-hint, .sim-favs-empty { margin-top: 0.625rem; font-size: 0.75rem; line-height: 1.1rem; color: var(--gray-500); }
.sim-favs-empty { margin: 0.25rem 0 0.25rem; font-size: 0.85rem; line-height: 1.3rem; }
.sim-favs-narrow { display: none; }
.sim-favs-tools .sim-favs-pick, .sim-favs-placing-hint { display: none; }

/* Edit: each tile gets its arrows and a cross underneath, and can be dragged. */
.sim-favs-editing .sim-favs-grid > li { border: 1px dashed var(--gray-300); cursor: grab; }
.dark .sim-favs-editing .sim-favs-grid > li { border-color: rgb(255 255 255 / 0.2); }
.sim-favs-editing .sim-favs-tile { min-height: 4.5rem; padding-bottom: 0.25rem; }
.sim-favs-editing .sim-favs-tile:hover { background: none; }
.sim-favs-tools { display: flex; justify-content: center; gap: 0.125rem; padding: 0 0.25rem 0.375rem; }
.sim-favs-tools button { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; color: var(--gray-500); }
.sim-favs-tools button:hover { background: var(--gray-100); color: var(--gray-800); }
.sim-favs-tools .sim-favs-remove:hover { background: #fef2f2; color: #b91c1c; }
.dark .sim-favs-tools button:hover { background: rgb(255 255 255 / 0.08); color: var(--gray-100); }
.sim-favs-tools svg { width: 1rem; height: 1rem; }
.sim-favs-grid > li:first-child .sim-favs-move:first-child, .sim-favs-grid > li:last-child .sim-favs-move:nth-child(2) { visibility: hidden; }
.sim-favs-dragging { opacity: 0.45; border-style: dashed; border-color: var(--primary-500) !important; }

/* A phone: the header star is 44px, the header's gaps are smaller and the search box narrows to make room (down to 320px wide), and the grid is a sheet from the bottom. */
@media (max-width: 39.99rem) {
    .sim-favs-btn { width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; }
    .sim-favs-caret { display: none; }
    /* flex-end: Safari sizes this group from the search box's full width before shrinking it, which left a gap on the right when the search is there. */
    .fi-topbar-end { gap: 0.5rem; min-width: 0; justify-content: flex-end; }
    .fi-topbar-end > * { flex: none; }
    .fi-topbar-end > .sim-search { flex: 0 1 8rem; min-width: 4.5rem; }
    .fi-topbar .sim-search input { width: 100%; }
    .sim-favs-panel { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 85dvh; border-radius: 1rem 1rem 0 0; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .sim-favs-panel::before { content: ''; align-self: center; width: 2.5rem; height: 0.25rem; margin-top: 0.5rem; border-radius: 9999px; background: var(--gray-300); }
    .sim-favs-head { padding: 0.25rem 0.25rem 0.25rem 1rem; }
    .sim-favs-head h2 { font-size: 1rem; }
    .sim-favs-edit { min-height: 2.75rem; padding-inline: 0.75rem; font-size: 0.875rem; }
    .sim-favs-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; color: var(--gray-500); }
    .sim-favs-close svg { width: 1.25rem; height: 1.25rem; }
    .sim-favs-body { padding: 0 1rem 1rem; }
    .sim-favs-tile { min-height: 5.5rem; }
    .sim-favs-name { font-size: 0.85rem; line-height: 1.2rem; }
    .sim-favs-wide { display: none; }
    .sim-favs-narrow { display: inline; }
    svg.sim-favs-narrow { display: block; }
    /* Edit on a phone keeps the grid. Each tile has a move button (top left) and a cross (top right),
       each a 44px tap area inside the tile with a small round badge. Press and hold drags a tile. */
    .sim-favs-editing .sim-favs-grid > li { position: relative; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    .sim-favs-editing .sim-favs-tile { min-height: 5.5rem; padding-top: 1.75rem; padding-bottom: 0.5rem; }
    .sim-favs-editing .sim-favs-tools { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; padding: 0; gap: 0; pointer-events: none; }
    .sim-favs-tools .sim-favs-move { display: none; }
    .sim-favs-tools .sim-favs-pick { display: grid; order: -1; }
    .sim-favs-placing-hint { display: block; margin-top: 0; }
    .sim-favs-placing .sim-favs-placing-hint { margin-top: 0.625rem; }
    .sim-favs-tools .sim-favs-pick, .sim-favs-tools .sim-favs-remove { width: 2.75rem; height: 2.75rem; pointer-events: auto; background: none !important; }
    .sim-favs-tools .sim-favs-pick svg, .sim-favs-tools .sim-favs-remove svg { width: 1.375rem; height: 1.375rem; padding: 0.25rem; border-radius: 9999px; background: var(--gray-100); color: var(--gray-600); }
    .dark .sim-favs-tools .sim-favs-pick svg, .dark .sim-favs-tools .sim-favs-remove svg { background: rgb(255 255 255 / 0.1); color: var(--gray-200); }
    .sim-favs-tools .sim-favs-pick[aria-pressed="true"] svg { background: var(--primary-600); color: #fff; }
    .sim-favs-moving, .sim-favs-lifted { border: 2px solid var(--primary-500) !important; background: var(--primary-50); }
    .dark .sim-favs-moving, .dark .sim-favs-lifted { background: color-mix(in srgb, var(--primary-400) 14%, transparent); }
    .sim-favs-lifted { opacity: 1; transform: scale(1.06); box-shadow: 0 10px 24px rgb(0 0 0 / 0.35); z-index: 1; }
    .sim-favs-placing .sim-favs-grid > li:not(.sim-favs-moving) { border-color: var(--primary-400); }
}

/* Diagnostics: the check or box a link went to, marked for a moment. */
.sim-diag-stack .fi-section { scroll-margin-top: 5rem; }
.sim-diag-target { border-radius: 0.5rem; box-shadow: 0 0 0 3px var(--primary-300); transition: box-shadow 0.4s; }

/* The SIM icon after the menu button on phones (resources/views/filament/hooks/phone-icon.blade.php). */
.sim-phone-icon { display: none; }
@media (max-width: 63.99rem) {
    /* The icon comes first, then the menu button (Pardeep, 4 November 2026), and the menu's logo is
       the same size in the same place, so the icon doesn't move when the menu opens. */
    .fi-topbar .fi-topbar-open-sidebar-btn { order: -2; flex-shrink: 0; }
    .sim-phone-icon { order: -3; display: flex; flex-shrink: 0; align-items: center; justify-content: center; }
    .fi-sidebar-header .fi-logo { height: 1.75rem !important; position: relative; left: -0.75rem; top: 0.25rem; }
    .sim-phone-icon img { height: 1.75rem; width: auto; }
    .sim-phone-icon .sim-phone-icon-dark, .dark .sim-phone-icon .sim-phone-icon-light { display: none; }
    .dark .sim-phone-icon .sim-phone-icon-dark { display: block; }
}
/* Below 352px (the oldest small iPhones) there's no room: the icon goes, and the menu still has the logo. */
@media (max-width: 21.99rem) { .sim-phone-icon { display: none !important; } }

/* Phones: every button in the top bar has a 48px tap area (Google's size; Apple asks for 44), side by side
   with no gaps, and the search box is a search button that opens the box across the top bar (Pardeep,
   4 November 2026). The icons stay their usual size in the middle of each area. */
.sim-search-toggle, .sim-search-close { display: none; }
@media (max-width: 39.99rem) {
    .fi-topbar { position: relative; }
    .fi-topbar-end { gap: 0; }
    /* The bell loads a moment after the page (Livewire lazy loading); its stand-in has no class, so it gets the same 48px or the icons shift when it arrives. */
    .fi-topbar-end > .fi-no-database, .fi-topbar-end > div:has(> .fi-topbar-database-notifications-btn) { display: flex; width: 3rem; justify-content: center; }
    .fi-topbar .fi-user-menu-trigger { display: flex; align-items: center; }
    .fi-topbar-end > .sim-search { flex: none; min-width: 0; display: flex; }
    .sim-search:not(.sim-search-open) .sim-search-close { display: none; }
    .fi-topbar-end > .sim-status-wrap { margin-inline-end: 0; }
    .sim-status-pip { left: 1.9rem; }
    /* Into the top bar's margin, so seven 48px buttons fit a 375px phone (Filament keeps a 1rem gap after the menu button). */
    .sim-phone-icon { width: 3rem; height: 3rem; margin-inline-start: -0.5625rem; }
    .fi-sidebar-header .fi-logo { left: -0.875rem; }
    .fi-topbar .fi-topbar-open-sidebar-btn, .sim-search-toggle, .sim-search-close, .sim-favs-btn, .sim-help-button,
    .fi-topbar .fi-topbar-database-notifications-btn, .fi-topbar .fi-user-menu-trigger { width: 3rem; height: 3rem; flex-shrink: 0; justify-content: center; }
    .sim-search-toggle, .sim-search-close { display: grid; place-items: center; border-radius: 9999px; color: rgb(107 114 128); }
    .sim-search-toggle svg, .sim-search-close svg { width: 1.5rem; height: 1.5rem; }
    .sim-search input { display: none; }
    .sim-search.sim-search-open { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; gap: 0.25rem; padding-inline: 1rem 0.5rem; background: white; }
    .dark .sim-search.sim-search-open { background: var(--gray-900); }
    .sim-search-open .sim-search-toggle { display: none; }
    .sim-search-open input { display: block; flex: 1; min-width: 0; width: auto !important; height: 2.75rem; font-size: 1rem; padding-inline: 0.75rem; }
}

/* Signed in, the logo holds the full version (computers) and the short one (the phone menu); App\Support\Brand. */
.fi-logo > img { display: block; height: 100%; width: auto; }
.fi-logo > .sim-logo-short { display: none; }
@media (max-width: 63.99rem) {
    .fi-logo > .sim-logo-full { display: none; }
    .fi-logo > .sim-logo-short { display: block; }
}

/* In headed groups the pages are indented, so the star sits in the gap on the left, under the group's icon, and the name keeps the full width. */
.fi-sidebar.fi-sidebar-open .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-item.sim-fav-page > .fi-sidebar-item-btn { padding-right: 0.75rem; }
.fi-sidebar.fi-sidebar-open .fi-sidebar-group:has(.fi-sidebar-group-btn) .sim-fav-star { right: auto; left: 0.625rem; }
/* Dashboard isn't in a group, so it's a top-level row like the group names: a coloured icon and a bold name. Top-level rows have no menu star (its page title's star adds it). */
.fi-sidebar.fi-sidebar-open .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-btn > .fi-icon { width: 1.75rem; height: 1.75rem; padding: 0.3rem; border-radius: 0.5rem; color: #fff !important; background: #64748b; }
.fi-sidebar.fi-sidebar-open .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item-label { font-weight: 600; }
.fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .sim-fav-star { display: none; }
.fi-sidebar.fi-sidebar-open .fi-sidebar-group:not(:has(.fi-sidebar-group-btn)) .fi-sidebar-item.sim-fav-page > .fi-sidebar-item-btn { padding-right: 0.75rem; }

/*
 * The menu's fold arrow on computers (Pardeep, 5 November 2026): a round button on the menu's right
 * edge, where the line under the account row meets it, with an even gap between it and the lines.
 * It looks 28px but takes clicks and taps across 48px (an iPad held sideways gets this layout).
 * The logo then starts at the left, and with the menu folded only its icon shows, centred over the
 * menu's icons, at 48px so it isn't cramped. Phones keep the menu button in the top bar.
 */
@media (min-width: 64rem) {
    .fi-topbar-collapse-sidebar-btn-ctn { width: 0 !important; min-width: 0 !important; margin: 0 !important; overflow: visible; }
    .fi-topbar .fi-topbar-close-collapse-sidebar-btn, .fi-topbar .fi-topbar-open-collapse-sidebar-btn {
        position: fixed;
        top: calc(8.5rem - 0.875rem);
        z-index: 40;
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        margin: 0 !important;
        padding: 0;
        border: 1px solid var(--gray-200);
        border-radius: 9999px;
        background: #fff;
        color: var(--gray-500);
        box-shadow: 0 0 0 6px var(--gray-50);
    }
    .dark .fi-topbar .fi-topbar-close-collapse-sidebar-btn, .dark .fi-topbar .fi-topbar-open-collapse-sidebar-btn { border-color: rgb(255 255 255 / 0.15); background: var(--gray-900); color: var(--gray-300); box-shadow: 0 0 0 6px var(--gray-950); }
    .fi-topbar .fi-topbar-close-collapse-sidebar-btn:hover, .fi-topbar .fi-topbar-open-collapse-sidebar-btn:hover { color: var(--gray-800); border-color: var(--gray-300); }
    .dark .fi-topbar .fi-topbar-close-collapse-sidebar-btn:hover, .dark .fi-topbar .fi-topbar-open-collapse-sidebar-btn:hover { color: #fff; border-color: rgb(255 255 255 / 0.3); }
    .fi-topbar .fi-topbar-close-collapse-sidebar-btn::before, .fi-topbar .fi-topbar-open-collapse-sidebar-btn::before { content: ''; position: absolute; inset: -0.625rem; border-radius: 9999px; }
    .fi-topbar .fi-topbar-close-collapse-sidebar-btn { left: calc(var(--sidebar-width, 17.5rem) - 0.875rem); }
    .fi-topbar .fi-topbar-open-collapse-sidebar-btn { left: calc(var(--collapsed-sidebar-width, 4.5rem) - 0.875rem); }
    .fi-topbar .fi-topbar-close-collapse-sidebar-btn .fi-icon, .fi-topbar .fi-topbar-open-collapse-sidebar-btn .fi-icon { width: 1rem; height: 1rem; }
    /* The menu's right edge starts a little below the header, the same gap the logo's divider leaves above and below it. */
    .fi-main-sidebar { --sim-edge: var(--gray-200); background-image: linear-gradient(var(--sim-edge), var(--sim-edge)); background-size: 1px calc(100% - (4rem - 2.875rem) / 2); background-position: right bottom; background-repeat: no-repeat; }
    .dark .fi-main-sidebar { --sim-edge: rgb(255 255 255 / 0.08); }
    /* The logo is the icon at one size, in the same place over the strip whether the menu is open or shrunk; the open menu adds
       the words beside it, smaller (Pardeep, 5 November 2026). Icon 2.875rem tall (sim-icon.svg is 230 by 192), centred in the strip. */
    .fi-topbar .fi-logo { height: 2.875rem !important; margin-left: calc((var(--collapsed-sidebar-width, 4.5rem) - 2.875rem * 230 / 192) / 2 - 1rem); }
    .fi-logo > .sim-logo-full { display: flex; align-items: center; gap: 0.875rem; height: 100%; }
    /* The divider after the icon stays put, in line with the shrunk menu's right edge (Pardeep, 5 November 2026). */
    .fi-logo .sim-logo-icon { height: 100%; width: auto; box-sizing: content-box; padding-right: calc((var(--collapsed-sidebar-width, 4.5rem) - 2.875rem * 230 / 192) / 2 - 1px); border-right: 1px solid var(--gray-200); }
    .dark .fi-logo .sim-logo-icon { border-right-color: rgb(255 255 255 / 0.08); }
    .fi-logo .sim-logo-words { height: 2.25rem; width: auto; }
    /* Folded: once Alpine has started, the menu isn't open; before that (the menu still has x-cloak), the mark the head script set (hooks/menu-folded). */
    body:has(.fi-main-sidebar:not([x-cloak]):not(.fi-sidebar-open)) .fi-topbar .sim-logo-words, html.sim-menu-folded body:has(.fi-main-sidebar[x-cloak]) .fi-topbar .sim-logo-words { display: none; }
}