* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

body {

    background: var(--background);

    color: var(--text);

    font-family: var(--font-body);

}

button,
input,
select,
textarea {

    font: inherit;

}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.candidate-row:focus-visible {

    outline: 2px solid var(--primary);

    outline-offset: 1px;

}

button {

    min-height: 38px;

    border: none;

    border-radius: var(--radius-sm);

    background: var(--primary);

    color: white;

    font-weight: 600;

    cursor: pointer;

    padding: 0 14px;

    transition: background .15s;

}

button:hover:not(:disabled) {

    background: var(--primary-dark);

}

button:disabled {

    cursor: not-allowed;

    opacity: .45;

}

button.danger {

    background: var(--danger);

}

button.secondary {

    background: var(--surface);

    color: var(--text);

    border: 1px solid var(--border);

}

button.secondary:hover:not(:disabled) {

    background: var(--background);

}

.settings-hint {

    font-size: 13px;

    color: var(--text-light);

    margin: -6px 0 12px;

}









input,
select,
textarea {

    width: 100%;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    background: white;

    color: var(--text);

    padding: 10px 12px;

}

textarea {

    line-height: 1.45;

    resize: vertical;

}

#app {

    display: grid;

    grid-template-columns: 230px minmax(0, 1fr);

    height: 100vh;

}

#sidebar {

    display: flex;

    flex-direction: column;

    gap: 4px;

    background: var(--sidebar-bg);

    padding: 18px 14px;

}

.logo {

    color: var(--sidebar-text-active);

    margin: 6px 4px 26px;

    text-align: left;

}

.logo h2 {

    font-family: var(--font-display);

    font-size: 22px;

    font-weight: 700;

    letter-spacing: -.01em;

}

.logo small {

    display: block;

    margin-top: 2px;

    color: var(--sidebar-accent);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

    opacity: 1;

}

.menu-button {

    display: flex;

    align-items: center;

    gap: 10px;

    justify-content: flex-start;

    background: transparent;

    border-left: 3px solid transparent;

    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    color: var(--sidebar-text);

    font-weight: 500;

    text-align: left;

    padding: 0 11px 0 8px;

}

.menu-button:hover:not(:disabled) {

    background: var(--sidebar-active-bg);

    color: var(--sidebar-text-active);

}

.menu-button.active {

    background: var(--sidebar-active-bg);

    border-left-color: var(--sidebar-accent);

    color: var(--sidebar-text-active);

    font-weight: 600;

}

.menu-icon {

    display: inline-flex;

    align-items: center;

    min-width: 20px;

    color: inherit;

}

.menu-icon svg {

    display: block;

}

#workspace {

    min-width: 0;

    overflow: auto;

    background: white;

    padding: 26px;

}

.dashboard-header,
.page-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.dashboard-header h1,
.page-header h1 {

    font-family: var(--font-display);

    font-size: 23px;

    font-weight: 700;

    color: var(--text);

}

.toolbar {

    display: grid;

    grid-template-columns: repeat(6, minmax(140px, max-content)) minmax(220px, 1fr);

    gap: 10px;

    align-items: center;

    margin: 18px 0;

}

.dashboard-content {

    display: grid;

    grid-template-columns: minmax(420px, 3fr) minmax(320px, 2fr);

    gap: 18px;

    min-height: 440px;

}

.dashboard-content.conversation-layout {

    grid-template-columns: minmax(280px, 1fr) minmax(520px, 2.25fr);

}

.candidate-list,
.candidate-detail,
.panel {

    border: 1px solid var(--border);

    border-radius: var(--radius);

    background: var(--surface);

}

.candidate-list {

    overflow: auto;

}

.candidate-row {

    display: grid;

    grid-template-columns: 42px minmax(170px, 2fr) minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(110px, .8fr);

    gap: 10px;

    align-items: center;

    min-height: 44px;

    border-bottom: 1px solid var(--border);

    padding: 7px 10px;

    cursor: pointer;

}

.candidate-row:last-child {

    border-bottom: none;

}

.candidate-row:hover,
.candidate-row.active {

    background: var(--surface-hover);

}

.candidate-row-header {

    position: sticky;

    top: 0;

    z-index: 1;

    background: var(--background);

    color: var(--text-light);

    font-weight: 600;

    text-transform: uppercase;

    font-size: 11px;

    letter-spacing: .03em;

    cursor: default;

}

.candidate-name {

    font-weight: 600;

}

.candidate-check {

    width: 18px;

    height: 18px;

}

.status {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 24px;

    color: var(--text-light);

    font-size: 12px;

    font-weight: 600;

}

.status::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: currentColor;

    flex: 0 0 auto;

}

.status-pendente {

    color: var(--warning);

}

.status-em-andamento {

    color: var(--info);

}

.status-enviado {

    color: var(--success);

}

.status-pulado {

    color: var(--danger);

}

.candidate-detail {

    padding: 14px;

}

.detail-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 12px;

}

.detail-grid-single {

    grid-template-columns: minmax(0, 1fr);

}

.panel {

    padding: 14px;

}

.panel h2 {

    margin-bottom: 10px;

    font-size: 17px;

}

.detail-name {

    font-weight: 700;

}

.progress {

    width: 100%;

    height: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: #e6e9ee;

    margin: 10px 0 5px;

}

.progress div {

    width: 0;

    height: 100%;

    background: var(--success);

}

.field {

    display: grid;

    gap: 6px;

}

.field.is-hidden {

    display: none;

}

.field span,
.hint {

    color: var(--text-light);

    font-size: 13px;

}

.message-field {

    margin-top: 14px;

}

.action-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 12px;

}

.action-grid .hint {

    grid-column: 1 / -1;
    margin-top: 0;

}

.dashboard-footer {

    margin-top: 16px;

}

#log {

    min-height: 104px;

    background: #101820;

    color: #e8f2ff;

    font-family: Consolas, monospace;

}

.empty-state {

    color: var(--text-light);

    padding: 18px;

}

.page-section {

    max-width: 980px;

}

.form-grid {

    display: grid;

    grid-template-columns: minmax(220px, 360px);

    gap: 16px;

    margin-top: 22px;

}

.form-grid.compact {

    max-width: 420px;

}

.field.full {

    grid-column: 1 / -1;

}

.actions-row {

    display: flex;

    gap: 10px;

    margin-top: 16px;

}

.hint {

    margin-top: 12px;

}

#toast {

    position: fixed;

    bottom: 25px;

    right: 25px;

    min-width: 320px;

    max-width: 420px;

    padding: 14px 18px;

    border-radius: var(--radius-sm);

    color: white;

    font-size: 14px;

    box-shadow: 0 6px 18px rgba(0,0,0,.25);

    opacity: 0;

    transform: translateY(30px);

    transition: .25s;

    z-index: 99999;

}

#toast.show {

    opacity: 1;

    transform: translateY(0);

}

.toast-info {

    background: #1976d2;

}

.toast-success {

    background: #2e7d32;

}

.toast-warning {

    background: #f57c00;

}

.toast-error {

    background: #c62828;

}

.conversation-row {

    padding: 12px 16px;

    border-bottom: 1px solid var(--border);

    cursor: pointer;

    transition: background .2s;

}

.conversation-row:hover {

    background: var(--surface-hover);

}

.conversation-row.active {

    background: var(--primary-light);

}

.conversation-card {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.conversation-name {

    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    min-width: 0;

}

.conversation-name-text {

    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.conversation-unread-indicator {

    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex: 0 0 auto;

}

.conversation-preview {

    font-size: .9rem;

    color: var(--text-secondary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.conversation-window-notice {

    display: block;
    margin: 8px 0;
    color: #8a5a00;
    font-size: .85rem;

}

.conversation {

    display: flex;
    flex-direction: column;
    gap: 8px;

    height: 500px;
    overflow-y: auto;

    padding: 16px;

}

.conversation-item {

    width: 100%;

}

.conversation-header {

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 4px;

}

.conversation-time {

    font-size: 11px;
    color: var(--text-light);

}

.message {

    display: inline-flex;
    flex-direction: column;

    width: fit-content;
    max-width: 70%;

    padding: 10px 12px;

    border-radius: var(--radius);

}

.message.in {

    align-self: flex-start;
    background: var(--background);

}

.message.out {

    align-self: flex-end;
    background: var(--primary-light);

}

.message-content {

    display: inline;
    width: auto;
    text-align: left;

}

.message-time {

    margin-top: 6px;

    font-size: 11px;

    opacity: .6;

    text-align: right;

}