/* HELPREX Portal - identidade do workspace com leitura calma e operacional. */
:root,
html[data-theme="light"] {
    color-scheme: light;
    --bg: #F6F7F9;
    --surface: #FFFFFF;
    --surface-muted: #F0F3F6;
    --surface-hover: #E8EDF2;
    --text: #17202A;
    --text-soft: #34495E;
    --text-muted: #5C6B78;
    --border: #D9E0E7;
    --border-strong: #B8C4CE;
    --accent: #FF4D2E;
    --accent-soft: rgba(255, 77, 46, .12);
    --action: #FF4D2E;
    --action-hover: #E84629;
    --action-text: #17202A;
    --focus: #A92A17;
    --success: #147A45;
    --warning: #7A530A;
    --danger: #B42318;
    --theme-mark-filter: brightness(0);

    --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 56px;
    --r-sm: 7px;
    --r-md: 14px;
    --r-lg: 22px;
    --shadow-sm: 0 4px 14px rgba(28, 42, 56, .08);
    --shadow-md: 0 14px 38px rgba(28, 42, 56, .12);

    /* Aliases usados por views existentes. */
    --ink: var(--text);
    --muted: var(--text-muted);
    --muted-2: var(--text-soft);
    --paper: var(--bg);
    --paper-2: var(--surface-muted);
    --paper-3: var(--border);
    --coral: var(--accent);
    --coral-dim: var(--accent-soft);
    --coral-dark: var(--action-hover);
}

html[data-theme="blue"] {
    color-scheme: light;
    --bg: #EFF6FF;
    --surface-muted: #E4F0FB;
    --surface-hover: #D8E9F8;
    --text: #102A43;
    --text-soft: #334E68;
    --text-muted: #526D82;
    --border: #C7DDF2;
    --border-strong: #9FC2E2;
    --accent: #2563EB;
    --accent-soft: rgba(37, 99, 235, .12);
    --action: #2563EB;
    --action-hover: #1D4ED8;
    --action-text: #FFFFFF;
    --focus: #1748B5;
    --theme-mark-filter: brightness(0) invert(1);
}

html[data-theme="green"] {
    color-scheme: light;
    --bg: #EFF8F3;
    --surface-muted: #E4F2E9;
    --surface-hover: #D7EBDD;
    --text: #163528;
    --text-soft: #355D4B;
    --text-muted: #557565;
    --border: #C8E4D4;
    --border-strong: #9FCBB1;
    --accent: #168A4A;
    --accent-soft: rgba(22, 138, 74, .12);
    --action: #0F743D;
    --action-hover: #0B6032;
    --action-text: #FFFFFF;
    --focus: #0B6032;
    --theme-mark-filter: brightness(0) invert(1);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #101316;
    --surface: #181C20;
    --surface-muted: #20252A;
    --surface-hover: #292F35;
    --text: #F4F6F8;
    --text-soft: #D4DAE0;
    --text-muted: #AAB4BE;
    --border: #363D44;
    --border-strong: #59636C;
    --accent: #FF6B4A;
    --accent-soft: rgba(255, 107, 74, .16);
    --action: #FF6B4A;
    --action-hover: #FF8368;
    --action-text: #17191C;
    --focus: #FF9A84;
    --success: #45C77A;
    --warning: #F2BE5C;
    --danger: #FF765F;
    --theme-mark-filter: brightness(0);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .28);
    --shadow-md: 0 14px 38px rgba(0, 0, 0, .42);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(90deg, var(--workspace-accent, var(--accent)) 0 4px, transparent 4px),
        var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--action-text); }
:where(a, button, input, textarea, select):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.skip-link {
    position: fixed;
    left: var(--s-4);
    top: -80px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: var(--r-sm);
    background: var(--action);
    color: var(--action-text);
    font-weight: 700;
}
.skip-link:focus { top: var(--s-4); }

h1, h2, h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.12;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); }
h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--s-3); color: var(--text-soft); }
a { color: var(--focus); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code {
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--text-soft);
    font-family: var(--mono);
    font-size: .85em;
}

/* Cabecalho: a faixa fina de marca substitui o antigo bloco escuro fixo. */
.portal-head {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: var(--s-3) var(--s-6);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
}
.portal-head nav {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    max-width: 1040px;
    margin: 0 auto;
}
.portal-head form { margin: 0; }
.portal-head .brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    color: var(--text);
}
.portal-head .brand:hover { text-decoration: none; }
.rex-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    overflow: hidden;
    border-radius: 9px;
    background: var(--accent);
}
.rex-icon img { width: 80%; height: 80%; object-fit: contain; }
.rex-icon:not(.has-workspace-logo) img { filter: var(--theme-mark-filter); }
.rex-icon.has-workspace-logo {
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.rex-icon.has-workspace-logo img { width: 100%; height: 100%; }
.brand-copy { min-width: 0; display: grid; gap: 1px; }
.brand-product {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: .59rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.brand-workspace {
    overflow: hidden;
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-head .spacer { flex: 1; }
.portal-head .nav-link {
    padding: 8px 11px;
    border-radius: var(--r-sm);
    color: var(--text-soft);
    font-size: .82rem;
    font-weight: 600;
}
.portal-head .nav-link:hover { background: var(--surface-muted); text-decoration: none; }
.portal-head .nav-link.primary { background: var(--action); color: var(--action-text); }
.portal-head .nav-link.primary:hover { background: var(--action-hover); }
.btn-link {
    padding: 8px;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font);
    font-size: .82rem;
}
.btn-link:hover { color: var(--text); }

main {
    width: min(100%, 1040px);
    margin: var(--s-8) auto;
    padding: 0 var(--s-6) var(--s-9);
}

.card {
    margin-bottom: var(--s-4);
    padding: var(--s-6);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: 0 1px 1px rgba(28, 42, 56, .04);
}

label {
    display: block;
    margin: var(--s-4) 0 6px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
input, textarea, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 160px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .8; }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-hint {
    display: block;
    margin-top: var(--s-2);
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.4;
}

button.primary, .btn.accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 10px 18px;
    border: 1px solid var(--action);
    border-radius: var(--r-sm);
    background: var(--action);
    color: var(--action-text);
    cursor: pointer;
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .12s, background .12s, box-shadow .12s;
}
button.primary:hover, .btn.accent:hover {
    transform: translateY(-1px);
    background: var(--action-hover);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.b-New { background: #FFF1DC; color: #714307; }
.badge.b-Open { background: #DFF4E8; color: #17633B; }
.badge.b-Pending { background: #FFF0CC; color: #765006; }
.badge.b-Resolved { background: #DDF3E7; color: #17633B; }
.badge.b-Closed { background: #E9EDF1; color: #4B5D6D; }

.err, .field-validation-error { margin: var(--s-2) 0; color: var(--danger); font-size: .82rem; }
.err:empty { display: none; }
.muted { color: var(--text-muted); }
.ticket-num { color: var(--text-muted); font-family: var(--mono); font-size: .82rem; }

.ticket-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--border);
}
.ticket-row:last-child { border-bottom: 0; }
.ticket-row a { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row a:hover { color: var(--focus); }

.bubble {
    margin-bottom: var(--s-4);
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}
.bubble.you { border-left: 3px solid var(--workspace-accent, var(--accent)); }
.bubble.support { border-left: 3px solid var(--success); }
.bubble small {
    display: block;
    margin-bottom: var(--s-2);
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: .65rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.bubble small strong { color: var(--text); }
.bubble .message-body { overflow-wrap: anywhere; white-space: pre-wrap; }

.page-head {
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
}
.page-head h2 { margin-bottom: 4px; }
.page-head .lead { margin: 0; color: var(--text-muted); font-size: .9rem; }
.empty { padding: var(--s-9) var(--s-6); color: var(--text-muted); text-align: center; }
.empty h3 { margin-bottom: var(--s-2); color: var(--text); }

@media (max-width: 700px) {
    .portal-head { padding: var(--s-2) var(--s-3); }
    .portal-head nav { gap: var(--s-2); }
    .portal-head .nav-link:not(.primary) { display: none; }
    .brand-product { display: none; }
    .brand-workspace { max-width: 34vw; }
    main { margin-top: var(--s-6); padding: 0 var(--s-4) var(--s-7); }
    .card { padding: var(--s-5); }
    .ticket-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--s-2);
    }
    .ticket-row > :last-child { grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}