/* Shared presentation layer. Keep workflow markup and JavaScript hooks intact. */
/* Quiet, visible scroll handles for tables, navigation and popup content. */
#foxe-portal * {
    scrollbar-width: thin;
    scrollbar-color: #c5c5cd transparent;
}
#foxe-portal ::-webkit-scrollbar { width: 8px; height: 8px; }
#foxe-portal ::-webkit-scrollbar-track { background: transparent; border-radius: 8px; }
#foxe-portal ::-webkit-scrollbar-thumb { background: #c5c5cd; border: 2px solid #fff; border-radius: 8px; }
#foxe-portal ::-webkit-scrollbar-thumb:hover { background: #85858f; }
#foxe-portal ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
#foxe-portal ::-webkit-scrollbar-corner { background: transparent; }
#foxe-portal .portal-empty-state { padding: 42px 20px; text-align: center; }
#foxe-portal .portal-empty-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border: 1px solid #e8e8ed; border-radius: 14px; background: #fafafa; color: #9696a0; }
#foxe-portal .portal-empty-icon svg { width: 23px; height: 23px; }
#foxe-portal .portal-empty-state h3 { margin: 0 0 6px; color: #3f3f46; font-size: 13px; font-weight: 600; }
#foxe-portal .portal-empty-state p { max-width: 380px; margin: 0 auto; color: #71717a; line-height: 1.6; }
@media (forced-colors: active) {
    #foxe-portal * { scrollbar-color: auto; }
}
:root {
    --ink: #27272a;
    --muted: #71717a;
    --line: #e4e4e7;
    --soft: #fafafa;
    --surface: #fff;
    --accent: #e9b900;
    --accent-deep: #735b00;
    --shadow: none;
}
#foxe-portal #portal-form-popup { width: min(880px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); padding: 0; margin: auto; border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; color: #27272a; box-shadow: 0 24px 80px #18181b26; overflow: hidden; }
#foxe-portal #portal-form-popup[open] { display: flex; flex-direction: column; }
#foxe-portal #portal-form-popup::backdrop, #foxe-portal #portal-form-discard::backdrop { background: #18181b66; backdrop-filter: blur(2px); }
#foxe-portal #portal-form-popup > header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid #e4e4e7; background: #fafafa; }
#foxe-portal .portal-popup-eyebrow { color: #8a8a94; font-size: 9px; letter-spacing: .1em; }
#foxe-portal #portal-form-popup-title { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
#foxe-portal #portal-form-popup-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; }
#foxe-portal #portal-form-popup-loading { padding: 22px; color: #71717a; }
#foxe-portal #portal-form-popup .btn-secondary, #foxe-portal #portal-form-discard .btn-secondary { background: #fff !important; color: #52525b !important; border: 1px solid #dedee3 !important; box-shadow: none !important; border-radius: 7px !important; }
#foxe-portal #portal-form-discard { width: min(400px, calc(100vw - 32px)); margin: auto; padding: 24px; border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; color: #27272a; }
#foxe-portal #portal-form-discard h2 { margin: 0 0 10px; font-size: 17px; }
#foxe-portal #portal-form-discard p { color: #71717a; }
#foxe-portal #portal-form-discard > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media(max-width:600px) {
    #foxe-portal #portal-form-popup { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
    #foxe-portal #portal-form-popup > header { padding: 14px; }
}
#foxe-portal .shell .profile-user { display: flex; align-items: center; gap: 10px; }
#foxe-portal .shell .profile-user::before { display: none; }
#foxe-portal .shell .user .profile-avatar-button { position: relative; display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; min-height: 38px; padding: 0 !important; border: 1px solid #ead479 !important; border-radius: 50% !important; background: #fff0b2 !important; color: #715800 !important; box-shadow: none !important; font-size: 14px !important; cursor: pointer; }
#foxe-portal .profile-avatar-button img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#foxe-portal .profile-camera { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; padding: 3px; border: 1px solid #dedee3; border-radius: 50%; background: #fff; fill: none; stroke: #52525b; stroke-width: 1.7; }
#foxe-portal #profile-photo-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 24px; border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; color: #27272a; box-shadow: 0 24px 80px #18181b26; }
#foxe-portal #profile-photo-dialog::backdrop { background: #18181b66; backdrop-filter: blur(2px); }
#foxe-portal #profile-photo-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#foxe-portal #profile-photo-dialog h2 { margin: 0; font-size: 17px; }
#foxe-portal #profile-photo-dialog p { color: #71717a; line-height: 1.6; }
#foxe-portal #profile-photo-dialog label { display: block; margin-bottom: 8px; }
#foxe-portal #profile-photo-input { width: 100%; padding: 10px; border: 1px solid #e4e4e7; border-radius: 8px; }
#foxe-portal #profile-photo-preview { display: block; width: min(240px, 100%); height: auto; aspect-ratio: 1; margin: 18px auto 10px; border-radius: 50%; background: #f4f4f5; cursor: grab; touch-action: none; }
#foxe-portal #profile-photo-preview:active { cursor: grabbing; }
#foxe-portal #profile-photo-dialog .profile-crop-help { text-align: center; font-size: 11px; }
#foxe-portal #profile-photo-zoom { width: 100%; accent-color: #c49d00; margin: 0 0 12px; }
#foxe-portal #profile-crop-error { color: #a63a32; }
#foxe-portal .profile-photo-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 20px 0 12px; }
#foxe-portal #profile-photo-dialog .btn-secondary { background: #fff !important; border: 1px solid #dedee3 !important; color: #52525b !important; box-shadow: none !important; }
body { background: #fff !important; color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
#foxe-portal .shell { width: 100%; max-width: none; margin: 0; min-height: 100dvh; grid-template-columns: 224px minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; background: #fff; }
#foxe-portal .shell > aside { top: 0; height: 100dvh; padding: 20px 12px 14px; background: #f7f7f8; border-right: 1px solid var(--line); }
#foxe-portal .shell .brand { margin: 0 0 20px; padding: 8px; border: 0; background: transparent; box-shadow: none; gap: 10px; }
#foxe-portal .shell .brand::after { content: none; }
#foxe-portal .shell .brand-copy { color: var(--ink); font-size: 14px; font-weight: 650; letter-spacing: -.3px; }
#foxe-portal .shell .brand-copy small { color: var(--muted); font-size: 10px; font-weight: 400; }
#foxe-portal .shell > aside .nav-group { margin: 18px 10px 7px; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: #71717a; }
#foxe-portal .shell > aside nav a { position: relative; min-height: 32px; margin: 2px 0; padding: 7px 10px; border: 0; border-radius: 7px; font-size: 11px; font-weight: 400; color: #52525b !important; gap: 10px; background: transparent; box-shadow: none; }
#foxe-portal .shell > aside nav a:hover { color: #18181b !important; background: #eeeef0 !important; }
#foxe-portal .shell > aside nav a.active { color: #18181b !important; background: #e9e9ec !important; font-weight: 600; box-shadow: none; }
#foxe-portal .shell > aside nav a.active::after { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 4px; background: #d5a900; }
#foxe-portal .shell .nav-icon { width: 16px; height: 16px; color: #626269 !important; stroke-width: 1.65; }
#foxe-portal .shell .user { border-color: var(--line); color: var(--ink); }
#foxe-portal .shell .user strong { color: var(--ink); }
#foxe-portal .shell .user small { color: var(--muted); }
#foxe-portal .shell > main { min-width: 0; padding: 0 28px 22px; background: #fff; }
#foxe-portal .shell > main > .topbar { margin: 0 -28px 22px; padding: 16px 28px; min-height: 64px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: none; }
#foxe-portal .shell > main > .topbar h1 { color: #27272a; font-size: 17px !important; font-weight: 600; letter-spacing: -.35px; }
#foxe-portal .shell > main > .topbar .page-icon { color: #71717a; width: 18px; height: 18px; }
#foxe-portal .shell .card, #foxe-portal .shell form.card { border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: none; }
#foxe-portal .shell .card:hover { border-color: var(--line); box-shadow: none; }
#foxe-portal .shell main h2 { color: #27272a; font-weight: 600; letter-spacing: -.2px; }
#foxe-portal .shell main p, #foxe-portal .shell main .muted { color: var(--muted); }
#foxe-portal .shell main .library-eyebrow, #foxe-portal .shell main .library-heading p, #foxe-portal .shell main .template-toolbar p { color: var(--muted); }
#foxe-portal .shell main .library-heading h2, #foxe-portal .shell main .template-toolbar h2 { font-size: 19px !important; }
#foxe-portal .shell main table { color: #3f3f46; }
#foxe-portal .shell main .card table th { background: #fafafa !important; color: #71717a !important; border-bottom: 1px solid #ededf0; height: 34px !important; padding: 9px 14px !important; font-size: 10px !important; font-weight: 500; letter-spacing: .035em; }
#foxe-portal .shell main .card table td { padding: 10px 14px !important; font-size: 11px !important; line-height: 1.45; border-bottom-color: #ededf0; color: #3f3f46; }
#foxe-portal .shell main .card table tbody tr { background: #fff !important; }
#foxe-portal .shell main .card table tbody tr:nth-child(even) { background: #fcfcfd !important; }
#foxe-portal .shell main .card table tbody tr:hover { background: #f7f7f9 !important; }
#foxe-portal .shell main .card table td strong { color: #27272a; font-size: 11px !important; font-weight: 550; }
#foxe-portal .shell main .card table td small { color: #71717a; }
#foxe-portal .shell main .catalog-directory table tbody tr td { height: 44px !important; }
#foxe-portal .shell main .catalog-item-mark, #foxe-portal .shell main .company-avatar, #foxe-portal .shell main .country-avatar, #foxe-portal .shell main .portal-user-avatar { background: #f4f4f5; color: #71717a; border-color: #e4e4e7; }
#foxe-portal .shell main .catalog-tabs { padding: 4px; border: 1px solid #e4e4e7; border-radius: 9px; background: #f4f4f5; }
#foxe-portal .shell main .catalog-tabs a { color: #71717a !important; }
#foxe-portal .shell main .catalog-tabs a.is-selected {
    color: #594600 !important;
    background: #fff1b8 !important;
    font-weight: 650;
    box-shadow: inset 0 0 0 1px #e8c642, 0 1px 2px #18181b08 !important;
}
#foxe-portal .shell main .catalog-tabs a:hover { background: #eaeaec !important; }
#foxe-portal .shell main .catalog-tabs a.is-selected:hover { background: #ffeba0 !important; }
#foxe-portal .shell main .catalog-tabs a:focus-visible { outline: 2px solid #b88c00; outline-offset: 2px; }
#foxe-portal .shell main form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
#foxe-portal .shell main form select, #foxe-portal .shell main form textarea, #foxe-portal .shell .search-select-trigger {
    border-color: #dcdce1 !important; border-radius: 7px !important; background-color: #fff; color: #3f3f46 !important; box-shadow: none; font-size: 11px !important;
}
#foxe-portal .shell main form input:focus-visible, #foxe-portal .shell main form select:focus-visible, #foxe-portal .shell main form textarea:focus-visible { border-color: #a1a1aa !important; outline: 2px solid #e4e4e7; outline-offset: 2px; box-shadow: none !important; }
#foxe-portal .shell main form label { color: #52525b; font-weight: 500; }
#foxe-portal .shell main form input::placeholder, #foxe-portal .shell main form textarea::placeholder { color: #8a8a94; }
#foxe-portal .shell button:not(.status-toggle), #foxe-portal .shell .btn, body .confirm-dialog .confirm-accept {
    border-radius: 7px !important; box-shadow: none !important; font-weight: 550; transition: background-color .15s, border-color .15s;
}
#foxe-portal .shell main button:not(.secondary):not(.btn-secondary):not(.logout):not(.status-toggle):not(.status-pill):not(.template-status-button):not(.view-design-button):not([class*="close"]):not([class*="search-select"]),
#foxe-portal .shell main .btn:not(.secondary):not(.btn-secondary) { background: #ffd21c !important; color: #302900 !important; border-color: #ebc014 !important; }
#foxe-portal .shell main button.secondary, #foxe-portal .shell main button.btn-secondary, #foxe-portal .shell main a.btn-secondary,
#foxe-portal .shell main .view-design-button, #foxe-portal .shell main .table-action, #foxe-portal .shell main a[href*="/edit"], #foxe-portal .shell .topbar button.logout { background: #fff !important; color: #52525b !important; border: 1px solid #dedee3 !important; box-shadow: none !important; border-radius: 7px !important; }
#foxe-portal .shell main button.secondary:hover, #foxe-portal .shell main button.btn-secondary:hover, #foxe-portal .shell main .table-action:hover { background: #f4f4f5 !important; border-color: #bcbcc4 !important; }
#foxe-portal .shell main nav.portal-pagination { border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: none; }
#foxe-portal .shell main .portal-pagination-summary, #foxe-portal .shell main .portal-row-count label { color: #71717a !important; }
#foxe-portal .shell main .portal-page { border-color: #e4e4e7 !important; background: #fff; color: #52525b; }
#foxe-portal .shell main .portal-page[aria-current="page"] { color: #27272a !important; background: #f0f0f2 !important; border-color: #d4d4d8 !important; }
#foxe-portal .shell .dashboard-stat { padding: 20px !important; }
#foxe-portal .shell .dashboard-stat p { color: #71717a; font-size: 11px !important; text-transform: none; letter-spacing: 0; font-weight: 500; }
#foxe-portal .shell .dashboard-stat strong { color: #27272a; font-size: 28px !important; font-weight: 600; letter-spacing: -1px; }
#foxe-portal .shell .dashboard-stat small { color: #71717a; }
#foxe-portal .shell .dashboard-chart-card { padding: 20px; }
#foxe-portal .shell .chart-heading { border-color: #ededf0; }
#foxe-portal .shell .chart-legend, #foxe-portal .shell .chart-heading p { color: #71717a; }
body .confirm-dialog, body .status-modal-dialog, body .template-status-dialog, body .quick-catalog-dialog, body .new-version-dialog, body .preview-dialog { border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; color: #27272a; box-shadow: 0 24px 80px #18181b26; }
body .confirm-dialog p, body .preview-meta-item { color: #71717a; }
body .design-preview-header, body .design-preview-footer { border-color: #e4e4e7; background: #fafafa; }
body .design-preview-eyebrow { color: #71717a; }
body .design-preview-canvas { border-color: #e4e4e7; background-color: #fafafa; }
body .page-loader-card { border: 1px solid #e4e4e7; border-radius: 12px; box-shadow: 0 12px 50px #18181b14; color: #52525b; }
body a:focus-visible, body button:focus-visible { outline: 2px solid #a1a1aa; outline-offset: 3px; }
body [hidden] { display: none !important; }
#foxe-portal #catalog-edit-dialog .card { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
/* Login uses the same quiet surfaces without changing its submit flow. */
body.login-page { background: #f7f7f8 !important; }
body.login-page .page { background: #fff; border: 1px solid #e4e4e7 !important; border-radius: 16px; box-shadow: 0 8px 40px #18181b08 !important; overflow: hidden; }
body.login-page .intro { background: #f4f4f5 !important; color: #27272a; border-right: 1px solid #e4e4e7 !important; }
body.login-page .intro h1, body.login-page .intro h2, body.login-page .brand { color: #27272a !important; }
body.login-page .intro p, body.login-page .point, body.login-page .sub { color: #71717a !important; }
body.login-page .box { border: 0; border-radius: 0; box-shadow: none; background: #fff; }
body.login-page .box h1 { color: #27272a; letter-spacing: -.6px; }
body.login-page .box input { border-color: #d4d4d8 !important; border-radius: 7px !important; box-shadow: none; }
body.login-page .box button { background: #ffd21c !important; border: 1px solid #ebc014; color: #302900 !important; border-radius: 7px; box-shadow: none; }
body.login-page .box input:focus { border-color: #a1a1aa !important; box-shadow: 0 0 0 3px #e4e4e7 !important; }
/* State controls keep their meaning instead of inheriting primary action colors. */
#foxe-portal .shell main button.status-pill.is-active,
#foxe-portal .shell main button.template-status-button.is-active,
#foxe-portal .shell main button.status-toggle.is-active { background: #ecf7ef !important; color: #227044 !important; border-color: transparent !important; border-radius: 20px !important; }
#foxe-portal .shell main button.status-pill.is-inactive,
#foxe-portal .shell main button.template-status-button.is-inactive,
#foxe-portal .shell main button.status-toggle.is-inactive { background: #fcf0ef !important; color: #a63a32 !important; border-color: transparent !important; border-radius: 20px !important; }
#foxe-portal .shell main .permission-chips span, #foxe-portal .shell main .role-scope, #foxe-portal .shell main .company-code,
#foxe-portal .shell main .country-iso, #foxe-portal .shell main .user-role-badge { background: #f4f4f5; border-color: #e4e4e7; color: #52525b; }
body #portal-notification-prompt { top: auto; height: auto; min-height: 0; color: #27272a; border-color: #e4e4e7 !important; box-shadow: 0 12px 40px #18181b14 !important; }
body #portal-notification-prompt button { border-radius: 7px !important; box-shadow: none !important; }
body #portal-notification-later { background: #fff !important; border: 1px solid #dedee3 !important; color: #52525b !important; }
body #portal-notification-enable { background: #ffd21c !important; border: 1px solid #ebc014 !important; color: #302900 !important; }
@media (max-width: 1100px) and (min-width: 701px) {
    #foxe-portal .shell { grid-template-columns: 200px minmax(0, 1fr); }
    #foxe-portal .shell > main { padding-left: 18px; padding-right: 18px; }
    #foxe-portal .shell > main > .topbar { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 700px) {
    #foxe-portal .shell { display: block; }
    #foxe-portal .shell > aside { position: relative; width: 100%; height: auto; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
    #foxe-portal .shell .brand { margin-bottom: 8px; }
    #foxe-portal .shell > aside > nav { max-height: 180px; }
    #foxe-portal .shell > main { padding: 0 12px 16px; }
    #foxe-portal .shell > main > .topbar { margin: 0 -12px 16px; padding: 12px; min-height: 56px; }
    #foxe-portal .shell > main > .topbar h1 { font-size: 15px !important; }
    #foxe-portal .shell main .catalog-tabs { display: flex; max-width: 100%; overflow-x: auto; }
    #foxe-portal .shell main .card table td { padding: 9px 10px !important; }
    #foxe-portal .shell main .dashboard-stat { padding: 14px !important; }
    body.login-page .intro { border-right: 0; border-bottom: 1px solid #e4e4e7; }
}
@media (prefers-reduced-motion: reduce) {
    #foxe-portal .shell button { transition: none; }
}