/* CRM data layouts. Original TICMIRO CSS precedes this file unchanged. */
[hidden] { display: none !important; }
.miro-sprite { background-image: url('/crm/assets/miro-sprite.webp'); }
.crm-panel { padding: var(--space-3); }
.crm-notice { max-width: 1480px; margin: 0 auto 24px; }
#tabs { max-width: 1480px; margin: 0 auto 24px; }
.tab { max-width: 1480px; margin: 0 auto; }
.two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.item { margin: 16px 0; padding: var(--space-3); overflow-wrap: anywhere; }
.item-head,.section-head,.inline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1-5); }
.item h3 { margin: 10px 0; }
.muted,.crm-footer { color: var(--studio-muted); }
.raw { white-space: pre-wrap; }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.fact { padding: var(--space-1); border: 1px solid var(--studio-border); font: .68rem/1.5 var(--font-ticmiro-mono); }
.crm-panel form { display: grid; gap: var(--space-2); }
.crm-panel form.inline { display: flex; }
.crm-panel form.inline input { flex: 1; min-width: 120px; }
.crm-panel h2 { margin-top: 0; }
.crm-panel p,.crm-panel li { line-height: 1.7; }
.crm-panel form > .studio-primary { justify-self: start; }
.item button:not(.studio-primary),#groups button,#export,#add-employee,#approve-team button,#cancel-approve {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center;
  padding: 0 16px; border: 2px solid var(--studio-teal); border-radius: 2px;
  background: var(--night-950); color: var(--studio-teal); box-shadow: 3px 3px 0 var(--pixel-black);
  font: 700 .65rem/1 var(--font-ticmiro-mono); cursor: pointer;
}
#kpi-results { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
td,th { padding: 14px; text-align: left; border-bottom: 1px solid var(--studio-border); }
th { color: var(--studio-teal); font-family: var(--font-ticmiro-mono); }
.crm-footer { margin-top: var(--space-4); font: .6rem/1.6 var(--font-ticmiro-mono); }
.crm-approval { display: block; width: min(680px,calc(100vw - 32px)); max-height: 90svh; padding: 24px; border: 2px solid var(--studio-teal); border-radius: 2px; background: var(--studio-panel); color: var(--studio-text); box-shadow: var(--shadow-lg); }
dialog:not([open]) { display: none !important; }
.crm-approval::backdrop,.crm-commands::backdrop { background: color-mix(in srgb,var(--pixel-black) 82%,transparent); }
.crm-approval form { display: grid; gap: 16px; }
.crm-approval label.check { display: flex; align-items: center; letter-spacing: 0; text-transform: none; }
.crm-commands { width: min(680px,calc(100vw - 32px)); padding: 0; border: 0; background: transparent; color: var(--ink); }
.crm-commands .studio-command-results a[hidden] { display: none; }
.studio-login-miro { cursor: pointer; }
#miro-speech { font-size: .75rem; }
.studio-drawer .studio-nav-group a { position: relative; display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--studio-muted); font-size: .82rem; font-weight: 700; }
.studio-drawer .studio-nav-group a > span { display: grid; min-width: 0; gap: 4px; }
.studio-drawer .studio-nav-group a b { font-size: .77rem; }
.studio-drawer .studio-nav-group a small { color: var(--studio-muted); font: 500 .51rem/1 var(--font-ticmiro-mono); }
.studio-drawer .studio-nav-group a em { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--studio-teal); color: var(--studio-teal); font: 700 .72rem/1 var(--font-ticmiro-mono); font-style: normal; }
.studio-drawer .studio-nav-group a:is(:hover,.is-active) { border-color: var(--studio-teal); color: var(--studio-text); background: var(--night-950); }
.studio-drawer .studio-command-trigger { display: grid; min-height: 44px; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; margin: 12px; padding: 0 10px; border: 1px solid var(--studio-border); border-radius: 2px; background: var(--night-950); color: var(--studio-muted); text-align: left; cursor: pointer; }
.studio-drawer .studio-command-trigger b { font-size: .7rem; }
@media (max-width: 767px) { .two-col { grid-template-columns: 1fr; } .crm-panel,.item { padding: 20px; } .item-head { align-items: start; } }