/* Contrato visual das ações e correções de layout — Fase 17.1. */
:root {
 --bg:#0c0c0d; --sidebar:#111112; --panel:#151516; --panel2:#1c1c1e; --panel3:#242426;
 --line:#343437; --line-soft:#29292c; --border:#343437; --border-strong:#49494e;
 --text:#f2f2f3; --muted:#aaaab1; --text-muted:#aaaab1; --blue:#b1b8c4;
 --gold:#d8b55b; --success:#79b997; --danger:#e58a8a; --warning:#d8b55b;
 --action-edit:#e5c66e; --action-edit-bg:#302a1b; --action-edit-border:#75613a;
 --action-delete:#f09a9a; --action-delete-bg:#342020; --action-delete-border:#824343;
 --action-save:#e5f5ec; --action-save-bg:#276245; --action-save-border:#438561;
 --action-neutral:#d7d7dd; --action-neutral-bg:#242426; --action-neutral-border:#46464b;
}
.app-page,.app-page .workspace {background:#0c0c0d;color:var(--text)}
.app-page :is(.card,.modal-dialog,.standard-toolbar,.table-card) {background-color:var(--panel);border-color:var(--line);box-shadow:none}
.app-page :is(.topbar,.modal-header,.modal-footer,.card-head) {background:#111112;border-color:var(--line-soft)}
.app-page :is(input,select,textarea,.smart-select-control) {background-color:#1b1b1d;color:var(--text);border-color:#3a3a3e}
.app-page :is(input,select,textarea)::placeholder {color:#92929b;opacity:1}
.app-page :is(input,select,textarea,.smart-select-control):focus {border-color:#b0a47c;box-shadow:0 0 0 2px #d8b55b18}
.app-page :is(input[type=date],input[type=datetime-local],input[type=month]) {color-scheme:dark}
.app-page :is(th,.table-wrap thead) {background:#1b1b1d;color:#b8b8c0}
.app-page td {border-color:#2c2c30}
.app-page tbody tr:hover {background:#202023}
.app-page :is(.module-tabs,.modal-tabs,.grid-pagination,.grid-quick-filter) {background-color:#151516;border-color:var(--line)}
.app-page :is(.department-chip,.role-chip,.department-icon,.client-avatar,.user-avatar,.avatar) {background:#27272b;border-color:#3c3c42;color:#dddde2}
.app-page .eyebrow {color:#aaaab3;letter-spacing:.1em}
.app-page .btn {background:#242426;border-color:#424247;color:#e5e5e9;box-shadow:none}
.app-page .btn.primary {background:#323234;border-color:#545459;color:#f2f2f3;box-shadow:none;background-image:none}
.app-page .btn:hover {background:#303033;border-color:#6b6b73;color:#fff}
.app-page .btn.danger {background:var(--action-delete-bg);border-color:var(--action-delete-border);color:var(--action-delete)}

/* The same semantic action has the same size, icon and color in every module. */
.app-page .action-control[data-action] {
 --action-color:var(--action-neutral); --action-bg:var(--action-neutral-bg); --action-border:var(--action-neutral-border);
 display:inline-flex;align-items:center;justify-content:center;gap:7px;vertical-align:middle;
 min-height:36px;padding:8px 12px;border:1px solid var(--action-border);border-radius:6px;
 background:var(--action-bg);background-image:none;color:var(--action-color);
 font-family:inherit;font-size:12px;font-weight:650;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:none;cursor:pointer;
}
.app-page .action-control[data-action=edit] {--action-color:var(--action-edit);--action-bg:var(--action-edit-bg);--action-border:var(--action-edit-border)}
.app-page .action-control:is([data-action=delete],[data-action=deactivate]) {--action-color:var(--action-delete);--action-bg:var(--action-delete-bg);--action-border:var(--action-delete-border)}
.app-page .action-control[data-action=save] {--action-color:var(--action-save);--action-bg:var(--action-save-bg);--action-border:var(--action-save-border)}
.app-page .action-control .ui-icon {display:block;width:17px;height:17px;margin:0;flex:0 0 17px}
.app-page .action-control.action-icon {width:34px;height:34px;min-width:34px;min-height:34px;padding:7px;flex:0 0 34px}
.app-page .action-control[data-action]:hover {background:var(--action-bg);border-color:var(--action-color);color:var(--action-color);filter:brightness(1.16);transform:none;box-shadow:none}
.app-page .action-control[data-action]:focus-visible {outline:2px solid var(--action-color);outline-offset:3px}
.app-page .action-control[data-action]:disabled {opacity:.45;cursor:not-allowed;filter:none}
.app-page :is(.row-actions,.client-row-actions,.task-row-actions) {display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap}
.app-page :is(.row-actions,.client-row-actions)>form {display:inline-flex;margin:0}
.app-page .table-wrap td:last-child {vertical-align:middle}
.app-page .table-wrap th:last-child {text-align:right}
.app-page .table-wrap td:last-child>.action-control {float:right}

/* Explicit opaque sidebar: expand over the workspace without changing the grid track. */
.app-page .app-shell {--sidebar-width:248px;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.app-page .app-shell>.workspace {grid-column:2;min-width:0}
.app-page .app-shell>.sidebar {
 position:fixed;inset:0 auto 0 0;z-index:60;width:248px;height:100dvh;
 display:flex;flex-direction:column;overflow:hidden;padding:12px 10px 10px;
 background:#111112;background-image:none;border-right:1px solid #343437;
 box-shadow:none;isolation:isolate;transition:width .18s ease,box-shadow .18s ease;
}
.app-page .sidebar-top {min-height:62px;flex-shrink:0}
.app-page .sidebar .brand {padding:3px 6px 12px;gap:10px;min-width:0}
.app-page .sidebar .brand b {white-space:nowrap}
.app-page .sidebar nav {display:flex;flex-direction:column;flex:1;min-height:0;padding:0 2px;gap:1px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#55555d #111112}
.app-page .sidebar .nav-label {padding:13px 9px 5px;margin:0;color:#85858e;font-size:9px;line-height:1.2;letter-spacing:.09em;white-space:nowrap}
.app-page .sidebar nav a {display:flex;align-items:center;gap:9px;min-height:35px;padding:5px 7px;margin:0;border-radius:6px;font-size:11.5px;line-height:1.2;font-weight:600;color:#c3c3cb;white-space:nowrap;flex-shrink:0}
.app-page .sidebar nav a>span {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-page .sidebar nav a>i {width:25px;height:25px;flex:0 0 25px;background:#242427;color:#9a9aa5;border-radius:5px}
.app-page .sidebar nav a>i .ui-icon {width:16px;height:16px}
.app-page .sidebar nav a:hover {background:#252528;color:#fff;border-color:transparent}
.app-page .sidebar nav a.active {background:#2b2b2f;border-color:#49494f;color:#fff}
.app-page .sidebar nav a.active>i {background:#3b3b40;color:#e3c677}
.app-page .sidebar nav a.active:before {left:0;width:2px;height:20px;box-shadow:none;background:#d8b55b}
.app-page .sidebar .account {display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:61px;margin-top:8px;padding:10px 3px 0;border-color:#333337;background:#111112}
.app-page .sidebar .account .avatar {width:30px;height:30px;flex:0 0 30px;font-size:12px}
.app-page .sidebar .account b {font-size:11px;max-width:147px}
.app-page .sidebar .account small {font-size:9px;color:#a1a1ab}
.app-page .sidebar .account-logout button {background:#242426;border:1px solid #424247;color:#ccc;box-shadow:none}
.app-page .app-shell.sidebar-collapsed {--sidebar-width:64px}
.app-page .app-shell.sidebar-collapsed>.sidebar {width:64px}
.app-page .app-shell.sidebar-collapsed>.sidebar:is(:hover,:focus-within) {width:248px;box-shadow:16px 0 35px #0009;background-color:#111112}
.app-page .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) :is(.brand b,.nav-label,nav a>span,.account>div,.account-logout) {display:none}
.app-page .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) nav a {justify-content:center;padding-inline:0}
.app-page .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) :is(.brand,.account) {justify-content:center;padding-inline:0}
.app-page .sidebar-collapsed .sidebar:is(:hover,:focus-within) .brand b {display:flex}
.app-page .sidebar-collapsed .sidebar:is(:hover,:focus-within) :is(.nav-label,nav a>span,.account>div,.account-logout) {display:block}
.app-page .sidebar-collapsed .sidebar:is(:hover,:focus-within) :is(.brand,nav a,.account) {justify-content:flex-start}

/* Message rows occupy the full history width; only the bubble uses fit-content. */
.app-page .telegram-shell {background:#121213}
.app-page .telegram-sidebar {background:#171718;border-color:#333337}
.app-page .telegram-contact {border-color:#29292e}
.app-page .telegram-contact.active {background:#303034!important;border-left-color:#bbaa79}
.app-page .telegram-main {background:#101011}
.app-page .telegram-header {background:#19191b;border-color:#333337}
.app-page .telegram-avatar {background:#48484e;color:#f3f3f5;background-image:none}
.app-page .telegram-search {display:flex;align-items:center;gap:10px;padding:10px 16px 15px;background:transparent;border:0;margin:0}
.app-page .telegram-search>span {position:static;color:#9696a1;flex-shrink:0}
.app-page .telegram-search input {width:100%;min-width:0;padding:10px 13px;margin:0;background:#232326;border-color:#3a3a40}
.app-page .telegram-messages {align-items:stretch;gap:12px;background:#101011;background-image:none;padding:24px max(22px,calc((100% - 1100px)/2))}
.app-page .telegram-message,.app-page .telegram-message.mine {
 display:flex;align-items:flex-end;align-self:stretch;justify-content:flex-start;
 width:100%;min-width:0;max-width:none;margin:0;gap:9px;flex:0 0 auto;
}
.app-page .telegram-message.mine {justify-content:flex-end}
.app-page .telegram-bubble {
 flex:0 1 auto;width:fit-content;min-width:68px;max-width:min(680px,80%);
 padding:11px 14px 7px;background:#252528;border:1px solid #3e3e44;color:#efeff2;
 border-radius:13px 13px 13px 4px;box-shadow:none;
}
.app-page .telegram-message.mine .telegram-bubble {background:#30382f;border-color:#485444;border-radius:13px 13px 4px 13px}
.app-page .telegram-bubble p {margin:0;padding:0;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.app-page .telegram-bubble time,.app-page .telegram-message.mine time {display:block;position:static;float:none;clear:both;text-align:right;margin-top:3px;padding:0;color:#b2b2b9;font-size:10px;line-height:1.25;white-space:nowrap}
.app-page .telegram-bubble>b {color:#d8c898;font-size:12px}
.app-page .telegram-message-avatar {width:30px;height:30px;flex:0 0 30px;background:#38383f;color:#e2e2e9;font-size:12px}
.app-page .telegram-day {align-self:center;background:#252528;color:#b1b1ba}
.app-page .telegram-compose {background:#18181a;border-color:#343437}
.app-page .telegram-compose textarea {background:#262629;border-color:#414146;color:#efeff2}
.app-page .telegram-compose>button {background:#858d7a;color:#11140e;border:1px solid #a7af9c}
.app-page .telegram-welcome>span {background:#29292e;color:#c7c7d1}

/* Person forms: size by the available form width, including dialogs. */
.app-page :is(.client-editor-section,#client-modal .modal-body) {container:client-form / inline-size;min-width:0}
.app-page .compact-client-grid {grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;row-gap:14px;min-width:0}
.app-page .compact-client-grid>* {min-width:0}
.app-page .compact-client-grid>.col-12 {grid-column:1/-1}
.app-page .compact-client-grid :is(input:not([type=checkbox]),select,.smart-select-control) {width:100%;min-width:0;height:38px;min-height:38px;box-sizing:border-box}
.app-page .compact-client-grid label>:is(input:not([type=checkbox]),select,.smart-select,textarea,.input-combo,.document-lookup-field) {margin-top:6px}
.app-page .compact-client-grid :is(.input-combo,.document-lookup-field)>:is(input,select,.smart-select) {margin:0;min-width:0}
.app-page .compact-client-grid .smart-select-control {margin:0}
.app-page .compact-client-grid .document-lookup-field>button {height:38px;min-height:38px;align-self:stretch}
.app-page .compact-client-grid .lookup-feedback:empty {display:none}
.app-page .contact-repeater {grid-column:1/-1;min-width:0;container:client-contacts / inline-size}
.app-page .contact-repeater-head {flex-wrap:wrap;gap:10px;padding:12px 0}
.app-page .contact-repeater-head>div {flex:1 1 240px;min-width:0}
.app-page .contact-repeater-head>button {flex:0 0 auto;white-space:nowrap}
.app-page .contact-row {grid-template-columns:minmax(100px,.8fr) minmax(140px,1fr) minmax(110px,1fr) minmax(140px,1.2fr) 90px 36px;min-width:0;border-radius:6px}
.app-page .contact-row .contact-primary {display:flex;gap:6px;height:38px;margin:0;white-space:nowrap}
.app-page .contact-row .contact-primary>input {width:16px;height:16px;min-height:16px;margin:0;flex:0 0 16px}
.app-page .contact-row>[data-contact-remove] {justify-self:end;align-self:end;margin:0}
@container client-form (max-width:900px) {
 .app-page .compact-client-grid>:is(.col-1,.col-2,.col-3,.col-4,.col-5,.col-6) {grid-column:span 6}
}
@container client-form (max-width:600px) {
 .app-page .compact-client-grid>:is(label,.col-12) {grid-column:1/-1}
 .app-page .compact-client-grid .input-combo {grid-template-columns:minmax(0,1fr) minmax(100px,.8fr)}
}
@container client-contacts (max-width:850px) {
 .app-page .contact-row {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container client-contacts (max-width:440px) {
 .app-page .contact-row>label:not(.contact-primary) {grid-column:1/-1}
}

/* Fixed list viewport, unaffected by selecting 10, 25, 50 or 100 rows. */
.viewport-grid .table-wrap {overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain}
.viewport-grid .table-wrap table {min-height:0}
.viewport-grid .grid-pagination {position:relative;flex-shrink:0;background:#18181a;border-top:1px solid #343437;padding:10px 14px}
.viewport-grid .table-wrap :is(thead,thead th) {position:sticky;top:0;z-index:4;background:#1c1c1f}
@media(min-width:901px) and (min-height:600px) {
 .viewport-grid .content {overflow:hidden;height:calc(100dvh - 64px)}
 .viewport-grid :is(.task-stats,.mini-stats) {margin:0 0 10px;gap:8px}
 .viewport-grid :is(.task-stats,.mini-stats) article {padding:9px 12px;min-height:0}
 .viewport-grid :is(.task-stats,.mini-stats) article b {font-size:22px}
 .viewport-grid .serpro-bar {padding:10px 14px;margin-bottom:10px}
 .viewport-grid .serpro-bar small {font-size:10px}
 .viewport-grid .module-tabs {margin-bottom:10px}
}
@media(max-width:760px) {
 .app-page .app-shell,.app-page .app-shell.sidebar-collapsed {display:block}
 .app-page .app-shell>.sidebar,.app-page .app-shell.sidebar-collapsed>.sidebar,.app-page .app-shell.sidebar-collapsed>.sidebar:is(:hover,:focus-within) {width:248px;transform:translateX(-100%);transition:transform .18s ease;box-shadow:none}
 .app-page .app-shell.sidebar-open>.sidebar {transform:translateX(0);box-shadow:12px 0 35px #0009}
 .app-page .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) :is(.brand b,.nav-label,nav a>span,.account>div,.account-logout) {display:block}
 .app-page .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) :is(.brand,nav a,.account) {justify-content:flex-start}
 .app-page .sidebar-collapsed .sidebar:not(:hover):not(:focus-within) nav a {padding-inline:7px}
 .app-page .telegram-messages {padding:16px 12px}
 .app-page .telegram-bubble {max-width:85%;padding:10px 12px 7px}
 .app-page .telegram-bubble p {font-size:15px}
 .app-page .action-control.action-icon {min-width:36px;min-height:36px;width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce) {.app-page .app-shell>.sidebar {transition:none!important}}