:root {
    --ink: #172033;
    --muted: #6b7589;
    --line: #e5e9f0;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --navy: #101b36;
    --primary: #3568e8;
    --primary-dark: #2652c4;
    --blue-soft: #eaf0ff;
    --green: #168363;
    --amber: #b76a08;
    --purple: #7758d6;
    --shadow: 0 10px 30px rgba(28, 40, 70, .07);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; min-height: 100%; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); background: var(--canvas); }
body { letter-spacing: -.01em; }
img, svg, video, canvas, iframe { max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .35rem; font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.08; font-weight: 760; letter-spacing: -.045em; }
h2 { margin-bottom: 0; font-size: 1.12rem; font-weight: 730; letter-spacing: -.025em; }
button, input, select, textarea { max-width: 100%; font: inherit; }

.content { width: 100%; min-width: 0; max-width: 1540px; margin: 0 auto; padding-top: 2rem; padding-bottom: 3.5rem; }
.eyebrow { display: block; margin-bottom: .35rem; color: #738097; font-size: .67rem; font-weight: 800; letter-spacing: .13em; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.7rem; }
.page-heading p { margin: 0; color: var(--muted); font-size: .96rem; }
.back-link { display: block; margin-bottom: 1.3rem; color: #707a8d; font-size: .85rem; font-weight: 650; }
.btn { border-radius: 9px; padding: .66rem 1rem; font-weight: 700; font-size: .88rem; }
.btn-lg { padding: .78rem 1.12rem; font-size: .91rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 5px 13px rgba(53, 104, 232, .2); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-dark { background: var(--navy); border-color: var(--navy); }
.btn-light { color: #596377; background: #fff; border: 1px solid var(--line); }

.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--line); }
.panel-header > *, .page-heading > *, .dashboard-grid > *, .detail-grid > *, .filter-grid > *, .form-grid > *, .email-reader-grid > *, .mailbox-grid > *, .my-work-grid > *, .signature-grid > * { min-width: 0; }
.panel-header .eyebrow { margin-bottom: .25rem; }
.panel-header > a { font-size: .82rem; font-weight: 750; }
.loading-panel { padding: 4rem 2rem; color: var(--muted); text-align: center; }
.empty-state { display: flex; min-height: 240px; padding: 2.5rem; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.empty-state > span { display: grid; width: 48px; height: 48px; margin-bottom: .9rem; place-items: center; border-radius: 50%; color: var(--primary); background: var(--blue-soft); font-size: 1.3rem; }
.empty-state strong { margin-bottom: .25rem; color: var(--ink); }
.empty-state p { margin-bottom: 1rem; font-size: .86rem; }
.empty-state.small { min-height: 200px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-card { position: relative; min-height: 155px; padding: 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--primary); }
.metric-card > span { display: block; color: var(--muted); font-size: .79rem; font-weight: 700; }
.metric-card > strong { display: block; margin: .3rem 0 .15rem; font-size: 2.25rem; line-height: 1; letter-spacing: -.06em; }
.metric-card > small { color: #939bad; font-size: .73rem; }
.metric-icon { position: absolute; top: 1rem; right: 1rem; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--blue-soft); font-weight: 800; }
.accent-amber::before { background: #e29a32; } .accent-amber .metric-icon { color: var(--amber); background: #fff3dd; }
.accent-green::before { background: #32aa80; } .accent-green .metric-icon { color: var(--green); background: #e4f6ef; }
.accent-purple::before { background: #8766df; } .accent-purple .metric-icon { color: var(--purple); background: #f0ebff; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(350px, .8fr); gap: 1rem; }

.ticket-row { display: flex; min-height: 104px; padding: 1.05rem 1.25rem; align-items: center; gap: 1rem; color: inherit; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row:hover { color: inherit; background: #f9faff; }
.ticket-main { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .3rem; }
.ticket-main > div { display: flex; align-items: center; gap: .55rem; }
.ticket-main strong { overflow: hidden; font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.ticket-main small, .ticket-meta small { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.ticket-main .ticket-assignee { width: fit-content; padding: .2rem .42rem; border-radius: 999px; color: #486084; background: #edf2fb; font-size: .63rem; font-weight: 750; }
.ticket-main .ticket-row-tags { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.ticket-company-tag { width: fit-content; max-width: 320px; padding: .2rem .42rem; overflow: hidden; border-radius: 999px; color: #25664e; background: #e6f5ef; font-size: .63rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.ticket-department-tag { width: fit-content; padding: .2rem .42rem; border-radius: 999px; color: #765414; background: #fff4d8; font-size: .63rem; font-weight: 750; }
.ticket-row.deadline-attention { background: #fffdf4; box-shadow: inset 4px 0 #e7b94b; }
.ticket-row.deadline-near { background: #fff8ed; box-shadow: inset 4px 0 #e58b35; }
.ticket-row.deadline-critical { background: #fff2ed; box-shadow: inset 4px 0 #df654e; }
.ticket-row.deadline-overdue { background: #ffebeb; box-shadow: inset 4px 0 #c83e3e; }
.ticket-row.deadline-attention:hover { background: #fff9e4; }
.ticket-row.deadline-near:hover { background: #fff1df; }
.ticket-row.deadline-critical:hover { background: #ffe8df; }
.ticket-row.deadline-overdue:hover { background: #ffe0e0; }
.deadline-badge { display: inline-flex; width: fit-content; padding: .34rem .5rem; align-items: center; border-radius: 999px; color: #697386; background: #eef1f5; font-size: .65rem; font-weight: 800; white-space: nowrap; }
.deadline-badge.deadline-attention { color: #806018; background: #fff0be; }
.deadline-badge.deadline-near { color: #8d5016; background: #ffe0b4; }
.deadline-badge.deadline-critical { color: #a64031; background: #ffd5ca; }
.deadline-badge.deadline-overdue { color: #9f2929; background: #ffcaca; }
.ticket-meta .deadline-date { color: #6f7889; font-weight: 650; }
.ticket-meta { display: flex; min-width: 145px; align-items: flex-end; flex-direction: column; gap: .55rem; }
.row-arrow { color: #a5adbc; font-size: 1.5rem; }
.protocol { display: inline-block; color: #53627c; font-family: Consolas, monospace; font-size: .72rem; font-weight: 750; letter-spacing: .025em; }
.status, .priority, .direction-label { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.status { padding: .42rem .58rem; }
.status-open { color: #245fc5; background: #e7efff; }
.status-inprogress { color: #6b4fc0; background: #eee9ff; }
.status-waiting { color: #9b5a08; background: #fff0d4; }
.status-resolved { color: #147457; background: #e2f5ed; }
.status-closed { color: #5e6879; background: #eaedf2; }
.priority { padding: .32rem .45rem; color: #596377; background: #f0f2f6; }
.priority-high, .priority-urgent { color: #a74838; background: #ffebe7; }
.priority-low { color: #147457; background: #e5f5ee; }

.mail-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: 1rem 1.25rem; align-items: center; gap: .85rem; color: inherit; border-bottom: 1px solid var(--line); }
.mail-row:last-child { border-bottom: 0; }
.mail-row:hover { color: inherit; background: #fafbfe; }
.mail-row > div { display: flex; min-width: 0; flex-direction: column; }
.mail-row strong, .mail-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row strong { font-size: .85rem; } .mail-row small, .mail-row time { color: var(--muted); font-size: .72rem; }
.direction-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; font-weight: 800; }
.direction-icon.incoming, .direction-label.incoming { color: #176e55; background: #e3f5ed; }
.direction-icon.outgoing, .direction-label.outgoing { color: #355fc1; background: #e7edff; }

.filter-panel { margin-bottom: 1rem; padding: 1.15rem 1.25rem; box-shadow: none; }
.filter-grid { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(auto-fit, minmax(180px, 220px)); align-items: end; gap: .85rem; }
label { display: block; margin-bottom: .38rem; color: #535f74; font-size: .76rem; font-weight: 750; }
.form-control, .form-select { min-height: 43px; border-color: #dce1ea; border-radius: 8px; color: var(--ink); font-size: .86rem; }
.form-control:focus, .form-select:focus { border-color: #88a7ef; box-shadow: 0 0 0 3px rgba(53, 104, 232, .1); }
.filter-button { height: 43px; }
.list-panel { overflow: hidden; }

.form-shell { max-width: 980px; }
.form-section { margin-bottom: 1rem; padding: 1.5rem; }
.section-heading { display: flex; margin-bottom: 1.4rem; align-items: flex-start; gap: .8rem; }
.section-heading > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--primary); background: var(--blue-soft); font-size: .7rem; font-weight: 850; }
.section-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 1rem; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-full { grid-column: 1 / -1; }
.message-input { min-height: 150px; resize: vertical; }
.field-help { display: block; margin-top: .4rem; color: #8992a3; font-size: .72rem; }
.validation-message, .validation-summary { margin-top: .3rem; color: #bd3f34; font-size: .74rem; }
.validation-summary { margin-bottom: 1rem; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; }
.form-actions .field-help { margin-right: auto; }

.attachment-picker { padding: .85rem; border: 1px dashed #cbd4e4; border-radius: 10px; background: #fafbfe; }
.attachment-picker-row { display: flex; align-items: center; gap: .75rem; }
.attachment-picker-row > small { color: var(--muted); font-size: .7rem; }
.attachment-button { display: inline-flex; margin: 0; align-items: center; gap: .38rem; cursor: pointer; white-space: nowrap; }
.attachment-button.disabled { opacity: .65; pointer-events: none; }
.attachment-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.attachment-error { margin-top: .65rem; color: #a84438; font-size: .72rem; font-weight: 650; }
.attachment-list { display: grid; margin-top: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.attachment-item { display: grid; min-width: 0; padding: .58rem .65rem; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; border: 1px solid #e0e5ee; border-radius: 8px; background: #fff; }
.attachment-icon { font-size: .85rem; }
.attachment-name { overflow: hidden; color: #354158; font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.attachment-item > small { color: var(--muted); font-size: .65rem; white-space: nowrap; }
.attachment-remove { display: grid; width: 23px; height: 23px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #7a8496; background: #f0f2f6; font-size: 1rem; line-height: 1; }
.attachment-remove:hover { color: #a33f36; background: #ffebe7; }
.attachment-total { grid-column: 1 / -1; color: var(--muted); font-size: .67rem; text-align: right; }
.message-attachments { display: flex; padding: .2rem 1.15rem 1.1rem; flex-wrap: wrap; gap: .45rem; }
.message-attachments-title { width: 100%; color: #8490a3; font-size: .62rem; font-weight: 850; letter-spacing: .09em; }
.message-attachment { display: grid; max-width: 310px; padding: .58rem .7rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .4rem; border: 1px solid #dfe5ef; border-radius: 8px; color: #40506b; background: #fafbfe; }
.message-attachment:hover { color: var(--primary); border-color: #bdccef; background: #f3f6ff; }
.message-attachment > span { grid-row: 1 / 3; }
.message-attachment strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.message-attachment small { color: var(--muted); font-size: .62rem; }

.detail-heading { align-items: center; }
.heading-tags { display: flex; margin-bottom: .65rem; align-items: center; gap: .55rem; }
.status-actions { display: flex; align-items: center; gap: .55rem; }
.status-actions .form-select { width: 175px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.conversation > .panel-header { padding-left: 0; padding-right: 0; border-bottom: 0; }
.message-count { color: var(--muted); font-size: .75rem; }
.message-card { margin-bottom: .85rem; overflow: hidden; border: 1px solid var(--line); border-left: 3px solid #39a57e; border-radius: 11px; background: #fff; box-shadow: 0 5px 18px rgba(28, 40, 70, .045); }
.message-card.sent { border-left-color: #527ce4; }
.message-top { display: flex; padding: 1rem 1.1rem; align-items: center; gap: .75rem; background: #fafbfc; border-bottom: 1px solid #edf0f4; }
.avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: #269276; font-weight: 800; }
.sent .avatar { background: var(--primary); }
.avatar.large { width: 45px; height: 45px; border-radius: 12px; }
.message-author { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.message-author strong { font-size: .84rem; }
.message-author small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.message-side { display: flex; align-items: flex-end; flex-direction: column; }
.message-side span { color: var(--green); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.sent .message-side span { color: var(--primary); }
.message-side time { color: var(--muted); font-size: .68rem; }
.message-subject { padding: 1rem 1.15rem .1rem; font-weight: 750; font-size: .87rem; }
.message-body { padding: .7rem 1.15rem 1.25rem; color: #455168; font-size: .86rem; line-height: 1.65; white-space: pre-wrap; }
.reply-box { margin-top: 1.2rem; padding: 1.3rem; }
.reply-header { display: flex; margin-bottom: 1.1rem; align-items: center; justify-content: space-between; }
.direction-select { width: 135px; }
.compact-form .message-input { min-height: 120px; }
.internal-notes-panel { margin-top: 1.2rem; overflow: hidden; border-color: #d8def0; box-shadow: 0 8px 24px rgba(38, 48, 77, .06); }
.internal-notes-heading { display: flex; padding: 1.2rem 1.3rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #e4e8f1; background: linear-gradient(135deg, #f8f9fd, #f3f5fb); }
.internal-notes-heading h2 { margin-top: .15rem; font-size: 1rem; }
.internal-notes-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .72rem; }
.internal-note-count { display: grid; min-width: 32px; height: 32px; padding: 0 .45rem; place-items: center; border-radius: 9px; color: #4a5874; background: #e5e9f3; font-size: .72rem; font-weight: 850; }
.internal-note-composer { padding: 1.2rem 1.3rem; border-bottom: 1px solid #e4e8f1; background: #fff; }
.internal-note-options { display: grid; margin-bottom: .85rem; grid-template-columns: minmax(180px, .45fr) minmax(260px, .55fr); align-items: end; gap: 1rem; }
.internal-important-check { display: flex; min-height: 43px; padding: .55rem .7rem; align-items: center; gap: .65rem; border: 1px solid #e0e4ed; border-radius: 8px; background: #fafbfc; cursor: pointer; }
.internal-important-check input { width: 17px; height: 17px; accent-color: #d89022; }
.internal-important-check span { display: flex; flex-direction: column; }
.internal-important-check strong { color: #4b566d; font-size: .7rem; }
.internal-important-check small { color: var(--muted); font-size: .62rem; }
.internal-note-input { min-height: 105px; margin-bottom: .35rem; resize: vertical; }
.internal-note-composer .attachment-picker { margin-top: .85rem; }
.internal-note-actions { padding-bottom: 0; }
.internal-timeline { padding: .35rem 1.3rem 1.2rem; background: #fafbfe; }
.internal-note-card { display: grid; position: relative; padding: 1rem 0; grid-template-columns: 38px minmax(0, 1fr); gap: .8rem; border-bottom: 1px solid #e4e8f0; }
.internal-note-card:last-child { border-bottom: 0; }
.internal-note-card::before { content: ""; position: absolute; top: 48px; bottom: -1rem; left: 18px; width: 1px; background: #d9deea; }
.internal-note-card:last-child::before { display: none; }
.internal-note-card.important { margin: .65rem -.55rem 0; padding: 1rem .55rem; border: 1px solid #f0d7aa; border-radius: 10px; background: #fffaf0; }
.internal-note-card.important::before { display: none; }
.internal-note-marker { display: grid; width: 38px; height: 38px; z-index: 1; place-items: center; border: 3px solid #fafbfe; border-radius: 50%; color: #fff; background: #596987; font-size: .7rem; font-weight: 850; }
.important .internal-note-marker { border-color: #fffaf0; background: #d89022; }
.internal-note-content { min-width: 0; padding-top: .05rem; }
.internal-note-meta { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.internal-note-meta > div { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: .4rem; }
.internal-note-meta strong { color: #354158; font-size: .76rem; }
.internal-note-meta time { color: var(--muted); font-size: .64rem; white-space: nowrap; }
.internal-note-meta-actions { justify-content: flex-end; }
.internal-note-meta-actions button { padding: 0; border: 0; color: var(--primary); background: transparent; font-size: .62rem; font-weight: 800; }
.internal-note-content > p { margin: .55rem 0 0; color: #49556b; font-size: .78rem; line-height: 1.6; white-space: pre-wrap; }
.internal-note-edited { display: block; margin-top: .35rem; color: #8a93a3; font-size: .59rem; font-style: italic; }
.internal-note-edit-form { margin-top: .7rem; padding: .8rem; border: 1px solid #d8deea; border-radius: 8px; background: #fff; }
.internal-note-edit-form textarea { min-height: 95px; resize: vertical; }
.internal-note-edit-options { display: flex; margin-bottom: .55rem; align-items: center; gap: .7rem; }
.internal-note-edit-options .form-select { width: 160px; min-height: 36px; font-size: .72rem; }
.internal-note-edit-options label { display: flex; margin: 0; align-items: center; gap: .35rem; font-size: .66rem; }
.internal-note-edit-form > div:last-child { display: flex; margin-top: .65rem; justify-content: flex-end; gap: .4rem; }
.internal-note-edit-form .btn { padding: .45rem .6rem; font-size: .67rem; }
.internal-category, .internal-important-label { display: inline-flex; padding: .22rem .42rem; border-radius: 999px; font-size: .55rem; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.internal-category.note { color: #53627b; background: #e9ecf2; }
.internal-category.pending { color: #9a6114; background: #fff0d7; }
.internal-category.call { color: #256a86; background: #dff3fa; }
.internal-category.analysis { color: #564ca0; background: #ece9ff; }
.internal-category.completion { color: #227055; background: #e1f5ed; }
.internal-category.custom { color: #315dbf; background: #e7edff; }
.category-create-form { display: grid; margin-bottom: 1rem; padding: 1.15rem; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: end; gap: .75rem; }
.category-create-form .validation-message { grid-column: 1 / -1; }
.category-admin-list { display: flex; flex-direction: column; }
.category-admin-row { display: grid; padding: 1rem 1.25rem; grid-template-columns: 120px minmax(240px, 1fr) auto; align-items: center; gap: 1rem; border-top: 1px solid var(--line); }
.category-admin-info { display: flex; flex-direction: column; }
.category-admin-info strong { font-size: .82rem; }
.category-admin-info small { color: var(--muted); font-size: .68rem; }
.category-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.department-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: #fff; background: #526fd4; font-size: .72rem; font-weight: 850; }
.internal-important-label { color: #a76710; background: #ffe7bb; }
.internal-note-attachments { display: flex; margin-top: .7rem; flex-wrap: wrap; gap: .4rem; }
.internal-note-attachments a { display: grid; max-width: 280px; padding: .48rem .6rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .38rem; border: 1px solid #dce2ed; border-radius: 7px; color: #40506b; background: #fff; }
.internal-note-attachments a:hover { color: var(--primary); border-color: #b9c9ea; }
.internal-note-attachments span { grid-row: 1 / 3; }
.internal-note-attachments strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.internal-note-attachments small { color: var(--muted); font-size: .58rem; }
.internal-note-empty { display: flex; padding: 1.6rem 1rem 1.2rem; align-items: center; justify-content: center; gap: .7rem; color: var(--muted); text-align: left; }
.internal-note-empty > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #687793; background: #e7eaf1; }
.internal-note-empty > div { display: flex; flex-direction: column; }
.internal-note-empty strong { color: #4e5a70; font-size: .75rem; }
.internal-note-empty small { font-size: .65rem; }
.details-aside { display: flex; flex-direction: column; gap: 1rem; }
.info-panel { padding: 1.2rem; box-shadow: none; }
.contact-card { display: flex; margin-top: 1rem; align-items: center; gap: .75rem; }
.contact-card > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.contact-card strong { font-size: .86rem; }
.contact-card a { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; }
.aside-title { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.aside-title .eyebrow { margin-bottom: 0; }
.link-action { padding: 0; border: 0; color: var(--primary); background: transparent; font-size: .68rem; font-weight: 800; }
.link-action:hover { color: var(--primary-dark); }
.assignment-empty { display: flex; margin-top: .9rem; padding: .75rem; align-items: center; gap: .55rem; border-radius: 9px; background: #f3f5f9; }
.assignment-empty > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #fff; background: #7c879b; font-size: .7rem; font-weight: 850; }
.assignment-empty > div, .current-assignee > div:last-child { display: flex; min-width: 0; flex-direction: column; }
.assignment-empty strong, .current-assignee strong { color: #3e4a60; font-size: .76rem; }
.assignment-empty small, .current-assignee small, .current-assignee time { color: var(--muted); font-size: .64rem; }
.current-assignee { display: flex; margin-top: .9rem; padding: .8rem; align-items: center; gap: .65rem; border: 1px solid #d6e1f5; border-radius: 9px; background: #f3f7ff; }
.assignee-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: var(--primary); font-size: .72rem; font-weight: 850; }
.assignment-feedback { margin-top: .7rem; padding: .55rem .65rem; border-radius: 7px; font-size: .65rem; }
.assignment-feedback.success { color: #176e55; background: #eaf8f2; }
.assignment-feedback.error { color: #9c3f34; background: #fff0ed; }
.assignment-editor { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.assignment-editor label { margin-top: .6rem; font-size: .68rem; }
.assignment-editor label:first-child { margin-top: 0; }
.assignment-editor .form-control, .assignment-editor .form-select { min-height: 38px; font-size: .72rem; }
.assignment-editor textarea { min-height: 80px; resize: vertical; }
.assignment-editor > div:last-child { display: flex; margin-top: .7rem; justify-content: flex-end; gap: .4rem; }
.assignment-editor .btn { padding: .45rem .6rem; font-size: .67rem; }
.assignment-history { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.assignment-history > span { color: #8490a3; font-size: .57rem; font-weight: 850; letter-spacing: .07em; }
.assignment-history article { position: relative; margin-top: .65rem; padding-left: .75rem; border-left: 2px solid #d7deec; }
.assignment-history article > div { display: flex; align-items: baseline; gap: .35rem; }
.assignment-history strong { color: #3e4a60; font-size: .68rem; }
.assignment-history small, .assignment-history time { color: var(--muted); font-size: .58rem; }
.assignment-history p { margin: .22rem 0; color: #59657a; font-size: .62rem; line-height: 1.4; }
.assignment-reason-input { min-height: 90px; }
.ticket-source-email { display: grid; margin-top: .85rem; padding: .7rem; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: .55rem; border: 1px solid #d9e2f4; border-radius: 9px; color: #40506b; background: #f5f8ff; }
.ticket-source-email:hover { color: var(--primary); border-color: #b9caeb; }
.ticket-source-email > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); }
.ticket-source-email > div { display: flex; min-width: 0; flex-direction: column; }
.ticket-source-email strong { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .7rem; }
.ticket-source-email small { overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.ticket-source-email i { font-size: 1rem; font-style: normal; }
.ticket-source-standalone { display: flex; margin-top: .85rem; padding: .7rem; flex-direction: column; border-radius: 9px; background: #f3f5f8; }
.ticket-source-standalone span { color: #6d778a; font-size: .6rem; font-weight: 850; letter-spacing: .06em; }
.ticket-source-standalone small { margin-top: .18rem; color: var(--muted); font-size: .64rem; }
.source-email-editor { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.source-email-editor > div { display: flex; margin-top: .7rem; justify-content: flex-end; gap: .4rem; }
.source-email-editor .btn { padding: .45rem .6rem; font-size: .67rem; }
.ticket-company-field { margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ticket-company-field .form-select { min-height: 38px; font-size: .7rem; }
.ticket-company-field .btn { width: 100%; margin-top: .45rem; padding: .5rem .6rem; font-size: .68rem; }
.ticket-company-field > strong { display: block; color: #3e4a60; font-size: .72rem; }
.ticket-deadline-panel { border-left: 4px solid #d7dce5; }
.ticket-deadline-panel.deadline-attention { border-left-color: #e7b94b; background: #fffdf4; }
.ticket-deadline-panel.deadline-near { border-left-color: #e58b35; background: #fff8ed; }
.ticket-deadline-panel.deadline-critical { border-left-color: #df654e; background: #fff2ed; }
.ticket-deadline-panel.deadline-overdue { border-left-color: #c83e3e; background: #ffebeb; }
.ticket-deadline-summary { display: flex; margin-top: .85rem; flex-direction: column; align-items: flex-start; gap: .45rem; }
.ticket-deadline-summary > strong { color: #344057; font-size: .84rem; }
.ticket-deadline-editor { margin-top: .85rem; padding-top: .8rem; border-top: 1px solid rgba(85, 98, 120, .14); }
.ticket-deadline-editor .form-control { min-height: 38px; font-size: .72rem; }
.ticket-deadline-editor .btn { width: 100%; margin-top: .45rem; padding: .5rem .6rem; font-size: .68rem; }
.linked-client { display: flex; margin-top: 1rem; padding: .8rem; flex-direction: column; border: 1px solid #cfe0d8; border-radius: 9px; background: #f2faf6; }
.linked-client span { color: #56806e; font-size: .6rem; font-weight: 850; letter-spacing: .09em; }
.linked-client strong { margin-top: .18rem; color: #245c47; font-size: .8rem; }
.linked-client small { color: #648172; font-size: .67rem; }
.unlinked-client { display: flex; margin-top: 1rem; padding: .75rem; align-items: center; gap: .6rem; border-radius: 9px; background: #fff6e8; }
.unlinked-client > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #d98b25; font-size: .72rem; font-weight: 850; }
.unlinked-client > div { display: flex; flex-direction: column; }
.unlinked-client strong { color: #87570f; font-size: .74rem; }
.unlinked-client small { color: #9d7b48; font-size: .66rem; }
.client-link-editor { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.client-link-editor .form-control, .client-link-editor .form-select { min-height: 39px; font-size: .77rem; }
.link-divider { display: flex; margin: .75rem 0; align-items: center; color: #98a0af; font-size: .62rem; }
.link-divider::before, .link-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.link-divider span { padding: 0 .5rem; }
.link-editor-actions { display: flex; margin-top: .85rem; justify-content: flex-end; gap: .45rem; }
.link-editor-actions .btn { padding: .52rem .65rem; font-size: .72rem; }
.info-panel dl { margin: .65rem 0 0; }
.info-panel dl > div { display: flex; padding: .7rem 0; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #edf0f4; }
.info-panel dl > div:last-child { border: 0; }
.info-panel dt { color: var(--muted); font-size: .72rem; font-weight: 600; }
.info-panel dd { margin: 0; font-size: .74rem; font-weight: 750; text-align: right; }

.mail-filter { display: flex; align-items: flex-end; justify-content: space-between; }
.mail-filter-fields { display: grid; min-width: 0; flex: 1; grid-template-columns: minmax(180px, .8fr) minmax(240px, 1.4fr) repeat(3, minmax(165px, .75fr)); gap: .75rem; }
.mail-filter-side { display: flex; padding-bottom: .65rem; align-items: center; gap: 1rem; }
.mail-legend { display: flex; gap: 1rem; color: var(--muted); font-size: .76rem; }
.mail-filter-clear { white-space: nowrap; }
.legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: .3rem; border-radius: 50%; }
.legend-dot.incoming { background: #39a57e; } .legend-dot.outgoing { background: #527ce4; }
.mail-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.mail-table { width: 100%; min-width: 1380px; border-collapse: collapse; }
.mail-table th { padding: .72rem 1rem; color: #8490a3; background: #fafbfc; font-size: .67rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.mail-table td { padding: 1rem; color: #4f5a70; border-top: 1px solid var(--line); font-size: .78rem; }
.mail-table tbody tr { transition: background .15s; }
.mail-table tbody tr.clickable-row { cursor: pointer; }
.mail-table tbody tr.clickable-row:hover { background: #f9faff; }
.mail-id { color: #52617a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .69rem; font-weight: 800; white-space: nowrap; }
.mailbox-label { color: #34425a; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.mail-contact-list { display: flex; min-width: 175px; max-width: 250px; flex-direction: column; gap: .18rem; overflow-wrap: anywhere; }
.mail-contact-list span { color: #4f5a70; font-size: .72rem; line-height: 1.3; }
.mail-contact-list span:first-child { color: #34425a; font-weight: 750; }
.mail-read-info { display: flex; flex-direction: column; min-width: 120px; }
.mail-read-info strong { color: #34425a; font-size: .72rem; }
.mail-read-info small { color: var(--muted); font-size: .67rem; white-space: nowrap; }
.mail-unread-label { color: #526fd4; font-size: .7rem; font-weight: 750; white-space: nowrap; }
.mail-table td:nth-child(4) { min-width: 300px; }
.mail-table td:nth-child(4) .mail-subject, .mail-table td:nth-child(4) small { display: block; }
.mail-table td:nth-child(4) .mail-subject { margin-bottom: .2rem; color: var(--ink); font-size: .84rem; font-weight: 500; }
.mail-table tbody tr.unread td:nth-child(4) .mail-subject { font-weight: 800; }
.mail-table td:nth-child(4) small, .mail-table time small { color: var(--muted); }
.mail-table th:nth-child(6), .mail-table td:nth-child(6) { width: 155px; max-width: 155px; }
.mail-table th:nth-child(7), .mail-table td:nth-child(7) { width: 92px; min-width: 92px; }
.mail-table td:nth-child(7) time { display: block; white-space: normal; }
.mail-subject-link { color: inherit; }
.mail-subject-link:hover .mail-subject { color: var(--primary); }
.mail-table td.urgent-message-text,
.mail-table td.urgent-message-text .mail-subject,
.mail-table td.urgent-message-text .mail-subject-link,
.mail-table td.urgent-message-text small,
.mail-table td.urgent-message-text .mail-subject-link:hover .mail-subject { color: #c62f2f !important; }
.mail-actions-cell { min-width: 125px; }
.mail-actions-header, .mail-actions-cell { position: sticky; right: 0; z-index: 2; background: #fff; box-shadow: -8px 0 12px -12px rgba(20, 34, 60, .45); }
.mail-actions-header { z-index: 3; background: #fafbfc !important; min-width: 132px; }
.mail-read-header, .mail-read-cell { position: sticky; right: 132px; z-index: 2; min-width: 142px; background: #fff; }
.mail-read-header { z-index: 3; background: #fafbfc !important; }
.mail-table tbody tr.clickable-row:hover .mail-actions-cell { background: #f9faff; }
.mail-table tbody tr.clickable-row:hover .mail-read-cell { background: #f9faff; }
.mail-table tbody tr.spam, .mail-table tbody tr.spam:hover { background: #fff1f1; }
.mail-table tbody tr.spam td, .mail-table tbody tr.spam td *,
.mail-table tbody tr.spam .mail-subject, .mail-table tbody tr.spam .mail-id,
.mail-table tbody tr.spam time, .mail-table tbody tr.spam time small { color: #c62f2f !important; }
.mail-table tbody tr.spam .mail-read-cell, .mail-table tbody tr.spam .mail-actions-cell,
.mail-table tbody tr.spam:hover .mail-read-cell, .mail-table tbody tr.spam:hover .mail-actions-cell { background: #fff1f1; }
.mail-table tbody tr.spam .btn { border-color: #e7a2a2; background: #fff7f7; }
.open-ticket-button { padding: .48rem .62rem; font-size: .7rem; white-space: nowrap; }
.mail-action-done { color: #39715d; font-size: .68rem; font-weight: 750; }
.mail-action-none { color: #a0a7b4; }
.mail-client-linked { display: inline-block; max-width: 150px; color: #28664f; font-size: .72rem; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; white-space: normal; }
.mail-client-unlinked { color: #9a6a26; font-size: .69rem; font-weight: 700; white-space: nowrap; }
.direction-label { padding: .43rem .55rem; }
.direction-label.spam { color: #b82424 !important; background: #ffdede; }
.standalone-label { display: inline-flex; padding: .38rem .5rem; border-radius: 999px; color: #6b4fc0; background: #eee9ff; font-size: .66rem; font-weight: 800; white-space: nowrap; }

.email-sync-panel { margin-bottom: 1rem; overflow: hidden; }
.email-sync-heading { padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid var(--line); }
.email-sync-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; }
.email-sync-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.email-sync-account { display: grid; min-width: 0; padding: 1rem 1.25rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; border-right: 1px solid var(--line); }
.email-sync-account:last-child { border-right: 0; }
.email-sync-account.disabled { opacity: .65; }
.email-sync-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #3d72ed, #244db6); font-size: .78rem; font-weight: 850; }
.email-sync-info { display: flex; min-width: 0; flex-direction: column; gap: .18rem; }
.email-sync-info > strong { overflow: hidden; font-size: .81rem; text-overflow: ellipsis; white-space: nowrap; }
.email-sync-info > small { color: var(--muted); font-size: .68rem; }
.email-sync-info time { color: #465269; font-weight: 750; }
.email-sync-state { display: inline-flex; width: fit-content; align-items: center; gap: .3rem; color: var(--muted); font-size: .65rem; font-weight: 700; }
.email-sync-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e29a32; }
.email-sync-state.connected::before { background: #32a67e; }
.email-sync-state.error::before { background: #cf5547; }
.email-sync-state.inactive::before { background: #929aaa; }
.email-sync-button { min-width: 105px; }
.email-sync-feedback { margin: .9rem 1.25rem 0; }
.email-sync-loading { padding: 1.4rem 1.25rem; color: var(--muted); font-size: .78rem; }

.email-detail-heading { align-items: flex-end; }
.email-detail-actions { flex: 0 0 auto; }
.email-reader-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 1rem; }
.email-reader { overflow: hidden; }
.email-reader-header { display: flex; padding: 1.2rem 1.3rem; align-items: flex-start; gap: .85rem; border-bottom: 1px solid var(--line); background: #fafbfc; }
.email-sent-avatar { background: var(--primary); }
.email-reader-header dl { min-width: 0; margin: 0; }
.email-reader-header dl > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .45rem; margin-bottom: .24rem; }
.email-reader-header dl > div:last-child { margin-bottom: 0; }
.email-reader-header dt { color: var(--muted); font-size: .68rem; font-weight: 650; }
.email-reader-header dd { margin: 0; overflow-wrap: anywhere; color: #3f4a60; font-size: .75rem; font-weight: 700; }
.email-reader-body { min-height: 260px; padding: 1.5rem 1.4rem 2rem; color: #3f4a60; font-size: .88rem; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; }
.email-reader-attachments { padding: 1rem 1.3rem 1.25rem; border-top: 1px solid var(--line); background: #fafbfc; }
.email-reader-attachments > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.email-attachment-entry { display: flex; min-width: 270px; max-width: 430px; padding: .65rem .7rem; align-items: center; gap: .75rem; border: 1px solid #dfe5ef; border-radius: 8px; background: #fff; }
.email-attachment-info { display: grid; min-width: 0; flex: 1; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .4rem; }
.email-attachment-info > span { grid-row: 1 / 3; }
.email-attachment-info strong { overflow: hidden; color: #40506b; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.email-attachment-info small { color: var(--muted); font-size: .62rem; }
.email-attachment-actions { display: flex; gap: .45rem; }
.email-attachment-actions a { font-size: .67rem; font-weight: 800; white-space: nowrap; }
.email-reader-details { box-shadow: var(--shadow); }
.email-reader-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.spam-email-detail .email-detail-heading h1, .spam-email-detail .email-detail-heading p,
.spam-email-detail .email-reader, .spam-email-detail .email-reader *,
.spam-email-detail .email-reader-sidebar, .spam-email-detail .email-reader-sidebar * { color: #c62f2f !important; }
.spam-email-detail .email-reader, .spam-email-detail .email-reader-header,
.spam-email-detail .email-reader-attachments, .spam-email-detail .email-reader-sidebar .panel { background: #fff1f1; }
.spam-email-detail .email-reader, .spam-email-detail .email-reader-sidebar .panel { border-color: #efb5b5; }
.spam-email-detail .btn { border-color: #e7a2a2; }
.email-company-panel { box-shadow: var(--shadow); }
.company-picker-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.company-picker-title label { margin-bottom: .35rem; }
.company-picker-title span { display: grid; min-width: 22px; height: 22px; padding: 0 .35rem; place-items: center; border-radius: 999px; color: #53627c; background: #eef1f6; font-size: .65rem; font-weight: 800; }
.company-picker-list { display: flex; max-height: 250px; margin-top: .55rem; padding-right: .15rem; overflow-y: auto; flex-direction: column; gap: .38rem; }
.company-picker-item { display: grid; width: 100%; padding: .6rem; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: .55rem; border: 1px solid #e0e5ee; border-radius: 8px; color: inherit; background: #fff; text-align: left; }
.company-picker-item:hover { border-color: #bdccef; background: #f7f9ff; }
.company-picker-item.selected { border-color: #8ca9ee; background: #eff4ff; box-shadow: 0 0 0 2px rgba(53, 104, 232, .08); }
.company-picker-item > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); font-size: .62rem; font-weight: 850; }
.company-picker-item > div { display: flex; min-width: 0; flex-direction: column; }
.company-picker-item strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.company-picker-item small { overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.company-picker-item i { color: var(--primary); font-size: .8rem; font-style: normal; font-weight: 900; }
.company-picker-empty { padding: .9rem; border-radius: 8px; color: var(--muted); background: #f6f7fa; font-size: .7rem; text-align: center; }
.company-picker-empty.standalone { display: flex; flex-direction: column; gap: .15rem; }
.company-picker-empty strong { color: #535f74; font-size: .74rem; }

.send-email-form { max-width: 980px; }
.send-body { min-height: 230px; }
.signature-send-note { display: flex; padding: .8rem .9rem; align-items: center; gap: .7rem; border: 1px solid #dce5f8; border-radius: 9px; color: #405274; background: #f5f8ff; }
.signature-send-note > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); font-weight: 800; }
.signature-send-note > div { display: flex; flex-direction: column; gap: .08rem; }
.signature-send-note strong { font-size: .74rem; }
.signature-send-note small { color: var(--muted); font-size: .67rem; }
.signature-send-note a { color: var(--primary); font-weight: 800; }
.send-success { display: flex; max-width: 680px; min-height: 350px; padding: 3rem; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.send-success-mark { display: grid; width: 64px; height: 64px; margin-bottom: 1.2rem; place-items: center; border-radius: 50%; color: #fff; background: #23906d; box-shadow: 0 10px 25px rgba(35,144,109,.22); font-size: 1.6rem; font-weight: 850; }
.send-success h2 { margin-bottom: .5rem; font-size: 1.35rem; }
.send-success p { max-width: 470px; margin-bottom: 1.4rem; color: var(--muted); font-size: .85rem; }
.send-success > div:last-child { display: flex; gap: .6rem; }

.integration-notice { display: flex; margin-bottom: 1rem; padding: 1rem 1.15rem; align-items: flex-start; gap: .8rem; border: 1px solid #cfdbf7; border-radius: 12px; color: #405274; background: #f2f6ff; }
.integration-notice .notice-mark { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-family: Georgia, serif; font-weight: 800; }
.integration-notice strong { display: block; margin-bottom: .15rem; color: #263858; font-size: .85rem; }
.integration-notice p { margin: 0; font-size: .77rem; line-height: 1.5; }
.mailbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mailbox-card { overflow: hidden; transition: opacity .15s ease; }
.mailbox-card.mailbox-disabled { opacity: .68; }
.mailbox-card-top { display: flex; padding: 1.3rem; align-items: center; gap: .85rem; border-bottom: 1px solid var(--line); }
.mailbox-avatar { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #3d72ed, #244db6); font-size: .9rem; font-weight: 850; box-shadow: 0 6px 14px rgba(53, 104, 232, .22); }
.mailbox-name { min-width: 0; flex: 1; }
.mailbox-name .eyebrow { margin-bottom: .2rem; }
.mailbox-name h2 { overflow: hidden; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-enabled { padding: .4rem .55rem; border-radius: 999px; font-size: .65rem; font-weight: 800; white-space: nowrap; }
.mailbox-enabled.active { color: #147457; background: #e2f5ed; }
.mailbox-enabled.inactive { color: #626d80; background: #ebedf2; }
.mailbox-status-row { display: flex; margin: 1.15rem 1.3rem .5rem; padding: .85rem; align-items: center; gap: .7rem; border-radius: 10px; background: #fafbfc; }
.mailbox-status-row > div { display: flex; flex-direction: column; }
.mailbox-status-row strong { font-size: .78rem; }
.mailbox-status-row small { color: var(--muted); font-size: .7rem; }
.sync-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; }
.sync-dot.pending { background: #e29a32; box-shadow: 0 0 0 4px #fff1d8; }
.sync-dot.connected { background: #32a67e; box-shadow: 0 0 0 4px #e2f5ed; }
.sync-dot.error { background: #cf5547; box-shadow: 0 0 0 4px #ffebe7; }
.mailbox-details { margin: .45rem 1.3rem 1rem; }
.mailbox-details > div { display: flex; padding: .6rem 0; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #eef0f4; }
.mailbox-details > div:last-child { border-bottom: 0; }
.mailbox-details dt { color: var(--muted); font-size: .72rem; font-weight: 600; }
.mailbox-details dd { margin: 0; color: #3e4a60; font-size: .72rem; font-weight: 750; text-align: right; }
.mailbox-actions { display: flex; padding: 1rem 1.3rem; align-items: center; justify-content: space-between; gap: .8rem; background: #fafbfc; border-top: 1px solid var(--line); }
.mailbox-actions > span { color: var(--muted); font-size: .7rem; }
.mailbox-button-group { display: flex; gap: .55rem; }
.sync-feedback { display: flex; margin-bottom: 1rem; padding: .9rem 1.1rem; align-items: center; gap: .55rem; border: 1px solid; border-radius: 10px; font-size: .78rem; }
.sync-feedback strong { white-space: nowrap; }
.sync-feedback.success { color: #176e55; border-color: #bde3d5; background: #eaf8f2; }
.sync-feedback.error { color: #9c3f34; border-color: #f0c7c1; background: #fff0ed; }

.client-create-card { margin-bottom: 1rem; padding: 1.25rem; }
.client-create-fields { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 190px; gap: .75rem; }
.client-create-contact { display: grid; margin-top: 1rem; padding-top: 1rem; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1fr) minmax(160px, .6fr); align-items: end; gap: .75rem; border-top: 1px solid var(--line); }
.contact-form-heading { display: flex; grid-column: 1 / -1; flex-direction: column; }
.contact-form-heading strong { font-size: .8rem; }
.contact-form-heading small { color: var(--muted); font-size: .68rem; }
.client-create-actions { display: flex; margin-top: 1rem; align-items: center; gap: .65rem; }
.client-create-actions .validation-message { margin: 0 0 0 .4rem; }
.client-panel-header { align-items: end; gap: 1rem; }
.client-search { width: min(360px, 100%); }
.client-search label { display: block; margin-bottom: .35rem; }
.client-list-error { padding: .75rem 1.25rem; border-top: 1px solid var(--line); background: #fff5f3; }
.client-row { display: grid; grid-template-columns: auto minmax(180px, .7fr) minmax(240px, 1fr) auto; padding: 1rem 1.25rem; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
.client-row.editing { grid-template-columns: auto minmax(360px, 1fr) auto; background: #f8faff; }
.client-row.expanded { background: #fbfcff; }
.client-row:last-child { border-bottom: 0; }
.client-logo { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: #fff; background: #3568e8; font-size: .75rem; font-weight: 850; }
.client-main, .client-contacts { display: flex; min-width: 0; flex-direction: column; }
.client-main strong { font-size: .86rem; }
.client-main small, .client-contacts small { overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.client-contacts > span { margin-bottom: .22rem; color: #53627c; font-size: .68rem; font-weight: 800; }
.client-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.client-edit-fields { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(220px, 1fr) minmax(160px, .55fr); gap: .75rem; }
.delete-question { color: #9c3f34; font-size: .7rem; font-weight: 750; white-space: nowrap; }
.client-delete-button { color: #a13e34; }
.client-contact-manager { grid-column: 1 / -1; margin: .35rem -.25rem -.1rem; padding: 1rem; border: 1px solid #dfe5f0; border-radius: 10px; background: #fff; }
.contact-manager-header { display: flex; margin-bottom: .85rem; align-items: center; justify-content: space-between; gap: 1rem; }
.contact-manager-header > div { display: flex; flex-direction: column; }
.contact-manager-header strong { font-size: .8rem; }
.contact-manager-header small { color: var(--muted); font-size: .68rem; }
.contact-list { display: flex; flex-direction: column; }
.contact-view-row { display: flex; padding: .75rem 0; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #edf0f5; }
.contact-view-row > div:first-child { display: grid; min-width: 0; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr) minmax(130px, .5fr); align-items: center; flex: 1; gap: .75rem; }
.contact-view-row strong, .contact-view-row a, .contact-view-row small { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.contact-view-row a { color: var(--primary); }
.contact-view-row small { color: var(--muted); }
.contact-edit-row { display: grid; padding: .85rem 0; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1fr) minmax(150px, .55fr) auto; align-items: end; gap: .75rem; border-top: 1px solid #edf0f5; }
.new-contact-row { margin-bottom: .7rem; padding: .85rem; border: 1px solid #dce5fa; border-radius: 9px; background: #f7f9ff; }
.contact-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }
.contact-empty { padding: 1rem 0 .25rem; color: var(--muted); font-size: .72rem; text-align: center; }

.my-work-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: start; gap: 1rem; }
.my-work-panel, .notification-panel { overflow: hidden; }
.empty-state.compact { min-height: 190px; }
.notification-unread { padding: .35rem .55rem; border-radius: 999px; color: #315dbf; background: #e8efff; font-size: .62rem; font-weight: 850; }
.notification-list { display: flex; flex-direction: column; }
.notification-item { display: grid; padding: 1rem 1.15rem; grid-template-columns: 8px minmax(0, 1fr); gap: .7rem; border-top: 1px solid var(--line); background: #fff; }
.notification-item.unread { background: #f6f9ff; }
.notification-dot { width: 7px; height: 7px; margin-top: .38rem; border-radius: 50%; background: #c4cad5; }
.notification-item.unread .notification-dot { background: var(--primary); box-shadow: 0 0 0 4px #e2eaff; }
.notification-item p { margin: 0 0 .35rem; color: #465269; font-size: .72rem; line-height: 1.5; }
.notification-item time { display: block; color: var(--muted); font-size: .6rem; }
.notification-item > div > div { display: flex; margin-top: .5rem; gap: .8rem; }
.notification-item a, .notification-item button { padding: 0; border: 0; color: var(--primary); background: transparent; font-size: .62rem; font-weight: 800; }

.auth-layout { min-height: 100vh; background: #eef2f8; }
.login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(380px, .9fr) minmax(460px, 1.1fr); }
.login-brand-panel { display: flex; padding: clamp(3rem, 7vw, 7rem); justify-content: center; flex-direction: column; color: #fff; background: linear-gradient(145deg, #0e1b38, #182b56); }
.login-brand-panel .eyebrow { color: #9bb7ff; }
.login-brand-mark { display: grid; width: 58px; height: 58px; margin-bottom: 2rem; place-items: center; border-radius: 16px; background: #3568e8; box-shadow: 0 14px 30px rgba(0,0,0,.2); font-size: 1.35rem; font-weight: 900; }
.login-brand-panel h1 { max-width: 500px; margin: .8rem 0 1rem; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.05; letter-spacing: -.045em; }
.login-brand-panel p { max-width: 440px; margin: 0; color: #b8c4dc; font-size: .95rem; line-height: 1.65; }
.login-card { width: min(440px, calc(100% - 3rem)); margin: auto; padding: 2.2rem; }
.login-card h2 { margin: .45rem 0 .4rem; font-size: 1.45rem; }
.login-card > p { margin: 0 0 1.5rem; color: var(--muted); font-size: .82rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; }
.login-form label { display: block; margin-bottom: .35rem; }
.login-form .btn { margin-top: .35rem; }
.login-error { margin-bottom: 1rem; padding: .75rem .85rem; border: 1px solid #f0c7c1; border-radius: 8px; color: #9c3f34; background: #fff0ed; font-size: .75rem; font-weight: 700; }
.signature-grid { display: grid; max-width: 1240px; grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.1fr); align-items: start; gap: 1rem; }
.signature-form { padding: 1.3rem; }
.signature-address-input { min-height: 92px; resize: vertical; }
.signature-actions { padding-bottom: 0; }
.signature-preview-panel { padding: 1.3rem; }
.signature-preview-message { min-height: 370px; margin-top: .8rem; padding: 1.4rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; color: #465269; background: #fff; font-size: .78rem; line-height: 1.65; }
.signature-closing { margin: 1.1rem 0 .8rem; color: #253858; font-size: .75rem; }
.n3-signature-card { display: grid; width: 520px; max-width: 100%; min-height: 205px; grid-template-columns: minmax(0, 1fr) 145px; overflow: hidden; color: #1f5fe0; background: #fff; font-family: Arial, Helvetica, sans-serif; }
.n3-signature-data { padding: 1.15rem 1.2rem 1rem; }
.n3-signature-data > strong { display: block; margin-bottom: .18rem; color: #1f5fe0; font-size: 1.08rem; font-weight: 900; text-transform: uppercase; }
.n3-signature-data > b { display: block; min-height: 2.35rem; margin-bottom: .65rem; color: #1f5fe0; font-size: .78rem; line-height: 1.25; text-transform: uppercase; }
.n3-signature-data dl { margin: 0; }
.n3-signature-data dl > div { display: grid; grid-template-columns: 21px minmax(0, 1fr); align-items: start; margin-top: .25rem; }
.n3-signature-data dt { color: #1f5fe0; font-size: .8rem; font-weight: 900; }
.n3-signature-data dd { margin: 0; color: #1f5fe0; font-size: .69rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.preview-address { white-space: pre-line; }
.n3-signature-brand { display: grid; min-height: 205px; place-items: center; background: #1f5fe0; }
.n3-logo-circle { display: flex; width: 112px; height: 112px; align-items: center; justify-content: center; border-radius: 50%; color: #1f5fe0; background: #fff; flex-direction: column; }
.n3-logo-circle > span { margin-left: -.2rem; font-size: 2.15rem; line-height: 1; font-weight: 950; letter-spacing: -.18rem; }
.n3-logo-circle sup { margin-left: .08rem; font-size: .7rem; letter-spacing: 0; vertical-align: top; }
.n3-logo-circle small { margin-top: .25rem; font-size: .46rem; line-height: 1.05; font-weight: 800; text-align: center; }

#blazor-error-ui { position: fixed; z-index: 1000; right: 1rem; bottom: 1rem; display: none; padding: .8rem 3rem .8rem 1rem; border-radius: 9px; color: #fff; background: #a73d35; box-shadow: var(--shadow); }
#blazor-error-ui .dismiss { position: absolute; top: .65rem; right: .75rem; cursor: pointer; }

/* O menu lateral ocupa 238px. Estes breakpoints consideram a largura real do
   conteudo, evitando que as grades aguardem a viewport ficar estreita demais. */
@media (max-width: 1400px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .detail-grid { grid-template-columns: 1fr; }
    .details-aside { display: grid; grid-template-columns: repeat(2, 1fr); }
    .mailbox-grid { grid-template-columns: 1fr; }
    .email-sync-grid { grid-template-columns: 1fr; }
    .email-sync-account { border-right: 0; border-bottom: 1px solid var(--line); }
    .email-sync-account:last-child { border-bottom: 0; }
    .email-reader-grid { grid-template-columns: 1fr; }
    .mail-filter { align-items: stretch; flex-direction: column; gap: .8rem; }
    .mail-filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mail-filter-side { padding: 0; justify-content: flex-end; }
    .client-create-fields, .client-create-contact { grid-template-columns: 1fr 1fr; }
    .client-create-fields > div:last-child, .client-create-contact > div:last-child { grid-column: 1 / -1; }
    .client-row { grid-template-columns: auto minmax(180px, 1fr) auto; }
    .client-contacts { grid-column: 2; }
    .client-actions { grid-row: 1 / span 2; grid-column: 3; }
    .signature-grid { grid-template-columns: 1fr; }
    .my-work-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1022px) {
    .content { padding-top: 1.25rem; }
    .page-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
    .email-sync-account { grid-template-columns: auto minmax(0, 1fr); }
    .email-sync-button { grid-column: 1 / -1; width: 100%; }
    .attachment-picker-row { align-items: stretch; flex-direction: column; }
    .attachment-list { grid-template-columns: 1fr; }
    .page-heading > .btn { align-self: flex-start; }
    .metric-grid, .form-grid, .two-columns, .details-aside { grid-template-columns: 1fr; }
    .field-full { grid-column: auto; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .filter-grid { grid-template-columns: 1fr; }
    .ticket-row { align-items: flex-start; flex-wrap: wrap; }
    .ticket-meta { min-width: 100%; align-items: flex-start; }
    .row-arrow { display: none; }
    .status-actions { align-items: stretch; flex-wrap: wrap; }
    .status-actions .form-select { width: auto; flex: 1; }
    .message-top { align-items: flex-start; flex-wrap: wrap; }
    .message-side { width: 100%; align-items: flex-start; margin-left: 48px; }
    .internal-note-options { grid-template-columns: 1fr; }
    .internal-note-actions { align-items: stretch; flex-direction: column; }
    .internal-note-meta { align-items: flex-start; flex-direction: column; gap: .3rem; }
    .mail-filter { align-items: stretch; flex-direction: column; gap: .8rem; }
    .mail-filter-fields { grid-template-columns: 1fr; }
    .mail-filter-side { padding: 0; justify-content: space-between; }
    .mail-table-wrap { border-top: 1px solid var(--line); }
    .mail-actions-header, .mail-actions-cell, .mail-read-header, .mail-read-cell { position: static; box-shadow: none; }
    .mailbox-card-top { align-items: flex-start; flex-wrap: wrap; }
    .mailbox-enabled { margin-left: 56px; }
    .mailbox-actions { align-items: stretch; flex-direction: column; }
    .mailbox-button-group { flex-direction: column; }
    .client-create-fields, .client-create-contact, .client-row, .client-row.editing, .client-edit-fields, .contact-edit-row { grid-template-columns: 1fr; }
    .client-create-fields > div:last-child, .client-create-contact > div:last-child { grid-column: auto; }
    .client-create-actions, .contact-manager-header, .contact-view-row { align-items: stretch; flex-direction: column; }
    .client-create-actions .validation-message { margin: .3rem 0 0; }
    .client-panel-header { align-items: stretch; flex-direction: column; }
    .client-search { width: 100%; }
    .client-contacts, .client-actions { grid-row: auto; grid-column: auto; }
    .client-actions { justify-content: flex-start; flex-wrap: wrap; }
    .client-main small, .client-contacts small, .contact-view-row strong, .contact-view-row a, .contact-view-row small { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
    .contact-view-row > div:first-child { grid-template-columns: 1fr; gap: .25rem; }
    .contact-row-actions { justify-content: flex-start; }
    .category-create-form, .category-admin-row { grid-template-columns: 1fr; }
    .category-admin-actions { justify-content: flex-start; flex-wrap: wrap; }
    .client-logo { display: none; }
    .login-shell { grid-template-columns: 1fr; }
    .login-brand-panel { display: none; }
    .signature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .content { padding-top: 1rem; padding-bottom: 2rem; }
    .panel-header, .form-section, .reply-box, .signature-form, .signature-preview-panel { padding-left: 1rem; padding-right: 1rem; }
    .empty-state { min-height: 190px; padding: 1.5rem 1rem; }
    .form-actions, .reply-header, .email-detail-actions, .send-success > div:last-child { align-items: stretch; flex-direction: column; }
    .form-actions .btn, .email-detail-actions .btn, .send-success > div:last-child .btn { width: 100%; }
    .mail-filter-side, .mail-legend { align-items: flex-start; flex-direction: column; gap: .5rem; }
    .email-reader-header { padding-left: 1rem; padding-right: 1rem; }
    .email-attachment-entry { width: 100%; min-width: 0; max-width: none; align-items: flex-start; flex-direction: column; }
    .email-attachment-actions { width: 100%; flex-wrap: wrap; }
    .n3-signature-card { grid-template-columns: minmax(0, 1fr) 105px; }
    .n3-logo-circle { width: 82px; height: 82px; }
}