/* CHIC MOBIL — shared visual polish. Scoped to existing application surfaces. */
:root{--chic-blue:#123fc7;--chic-navy:#10265b;--chic-gold:#ffd332;--chic-border:#e3eaf6;--chic-muted:#607395}
:is(.workspace,.performance-workspace,.rem-workspace) :is(button,input,select,textarea,a):focus-visible{outline:3px solid #ffcf33;outline-offset:2px}
:is(.workspace,.performance-workspace,.rem-workspace) :is(.card,.v-panel,.rem-panel){border-radius:16px}
:is(.workspace,.performance-workspace,.rem-workspace) :is(.filter-strip,.v-filters,.rem-filters){gap:12px;align-items:end}
:is(.workspace,.performance-workspace,.rem-workspace) :is(input,select,textarea){font-family:inherit}
:is(.workspace,.performance-workspace,.rem-workspace) :is(.apply-filters,.apply,.apply-filters,.v-btn-primary){transition:background .2s,transform .2s}
:is(.workspace,.performance-workspace,.rem-workspace) :is(.apply-filters,.apply,.v-btn-primary):hover{transform:translateY(-1px)}
/* Modal system: distinctive visual language for each module */
dialog:is(.record-dialog,.v-dialog,.agent-modal),dialog[id*="modal"],dialog[id*="dialog"]{border:1px solid var(--chic-border);border-radius:22px;box-shadow:0 28px 90px #071b4c55;max-height:calc(100dvh - 28px);overscroll-behavior:contain;color:var(--chic-navy)}
dialog:is(.record-dialog,.v-dialog,.agent-modal)::backdrop,dialog[id*="modal"]::backdrop,dialog[id*="dialog"]::backdrop{background:rgba(6,21,58,.66);backdrop-filter:blur(4px)}
dialog:is(.record-dialog,.v-dialog) :is(.dialog-head,.v-dialog-head){background:linear-gradient(105deg,#f1f6ff 0%,#fff 70%);border-bottom:1px solid var(--chic-border);border-top:4px solid var(--chic-gold);border-radius:12px 12px 0 0;padding:18px;margin:-12px -12px 20px}
.record-dialog{width:min(620px,calc(100vw - 28px));padding:22px}
.record-dialog #dialog-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.record-dialog #dialog-content>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:#f5f8ff;border:1px solid var(--chic-border);padding:15px;border-radius:12px;min-width:0}
.record-dialog #dialog-content span{font-size:12px;color:var(--chic-muted)}
.record-dialog #dialog-content b{font-size:16px;color:var(--chic-navy);overflow-wrap:anywhere;text-align:left}
.record-dialog .dialog-done{background:var(--chic-blue);min-height:44px;border-radius:11px}
.v-dialog{border-top:5px solid var(--chic-gold)!important}
.v-dialog :is(input,textarea,select){border-radius:10px;min-height:44px}
.agent-modal{border-top:5px solid var(--chic-gold)!important}
:is(.v-dialog,.agent-modal,.record-dialog) :is(button,input,textarea,select):focus-visible{outline:3px solid #ffcf33;outline-offset:2px}
/* Context-sensitive filters in Performance; invisible fields do not consume space */
.filter-strip .filter-field[hidden]{display:none!important}
.filter-strip{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))!important}
@media(max-width:680px){.record-dialog{padding:15px}.record-dialog #dialog-content{grid-template-columns:1fr}.record-dialog #dialog-content>div{padding:12px}.filter-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}.filter-strip .apply-filters,.filter-strip .reset-filters{min-width:0}.v-dialog,.agent-modal{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}}
@media(max-width:380px){.filter-strip{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){dialog *,button{transition:none!important;animation:none!important}}

/* Readable table typography shared by administration and regional portals. */
:is(.app-shell,dialog) table :is(td,th){font-variant-numeric:tabular-nums;line-height:1.5!important}
:is(.app-shell,dialog) table td{font-size:14px!important}
:is(.app-shell,dialog) table th{font-size:13px!important;font-weight:600!important}
:is(.app-shell,dialog) table td :is(strong,b,.amount,.numeric){font-weight:600!important;font-size:inherit}
:is(.app-shell,dialog) table :is(.status-pill,.status,.badge,.v-status){font-size:12px!important;line-height:1.4!important;font-weight:600!important}
:is(.app-shell,dialog) table td small{font-size:12px!important;line-height:1.5!important}
@media(max-width:680px){:is(.app-shell,dialog) table td{font-size:13px!important}:is(.app-shell,dialog) table th{font-size:12px!important}}