/* Shared presentation for the preserved application and its company tickets.
   No business rules, permissions or data are changed here. */
:root {
  --crm-control: 40px;
  --crm-icon: 18px;
  --crm-radius: 7px;
  --faint: #61727c;
}
.app-shell { --hm-control-size: var(--crm-control); --hm-small-control-size: var(--crm-control); }
.app-shell .crm-sidebar-product, .app-shell .notification-button,
.app-shell .page-heading > span, .app-shell .settings-hero .section-kicker { display: none; }
.app-shell:not([data-crm-date-filter="true"]) .date-control { display: none; }
.app-shell .sidebar-brand-label { font-size: 15px; line-height: 22px; }
.app-shell .brand-row { align-items: center; }
.app-shell .sidebar-brand { height: 44px; }
.app-shell .sidebar-brand img { width: 32px; height: 32px; }
.app-shell .nav-item { min-height: 44px; gap: 10px; font-size: 13px; line-height: 20px; font-weight: 550; }
.app-shell .nav-item.active { font-weight: 650; }
.app-shell .nav-item svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 1.7; }
.app-shell .nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.app-shell .topbar { min-height: 64px; gap: 16px; }
.app-shell .topbar-left { gap: 14px; align-items: center; }
.app-shell .topbar-actions { align-items: center; gap: 10px; }
.app-shell .page-heading { min-width: 0; max-width: none; }
.app-shell .page-heading h1 { font-size: 22px; line-height: 1.3; letter-spacing: -.025em; font-weight: 650; }
.app-shell .main-content { padding: 24px 24px 40px; }
.app-shell .panel, .app-shell .kpi { border-radius: 8px; box-shadow: 0 1px 2px rgba(0,44,66,.025); }
.app-shell .panel-header, .app-shell .management-panel-heading, .app-shell .settings-card > header {
  min-height: 64px; padding: 14px 16px; gap: 14px; align-items: center;
}
.app-shell .panel-header h2, .app-shell .management-heading-copy h2, .app-shell .settings-card > header h2 {
  font-size: 15px; line-height: 21px; font-weight: 650; letter-spacing: -.015em;
}
.app-shell .panel-header p, .app-shell .management-heading-copy p, .app-shell .settings-card > header p {
  color: var(--faint); font-size: 12px; line-height: 18px;
}
.app-shell .panel-title-icon, .app-shell .kpi-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; }
.app-shell .panel-title-icon svg, .app-shell .kpi-icon svg { width: 18px; height: 18px; display: block; }
.app-shell :is(.primary-button,.secondary-button,.small-primary-button,.danger-button,.compact-button),
.app-shell :is(.primary-button,.secondary-button,.small-primary-button,.danger-button,.compact-button):not(.management-modal *),
.management-modal :is(.primary-button,.secondary-button,.small-primary-button,.danger-button,.compact-button) {
  min-height: var(--crm-control); padding: 9px 13px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border-radius: var(--crm-radius); font-size: 13px; line-height: 20px; font-weight: 600;
}
.app-shell :is(.icon-button,.icon-button.reject), .management-modal :is(.icon-button,.icon-button.reject) {
  width: var(--crm-control); height: var(--crm-control); min-width: var(--crm-control); padding: 0; flex-shrink: 0;
  display: inline-grid; place-items: center; border-radius: var(--crm-radius);
}
.app-shell :is(.icon-button,.primary-button,.secondary-button,.small-primary-button,.danger-button) > svg,
.management-modal :is(.icon-button,.primary-button,.secondary-button,.small-primary-button,.danger-button) > svg {
  display: block; flex: 0 0 var(--crm-icon); width: var(--crm-icon); height: var(--crm-icon); stroke-width: 1.75;
}
.app-shell .sidebar .icon-button { background: transparent; border-color: transparent; color: #dce6eb; }
.app-shell .sidebar .icon-button:hover { background: rgba(255,255,255,.09); }
.app-shell .table-toolbar { min-height: 64px; padding: 12px 16px; align-items: center; flex-wrap: wrap; gap: 12px; }
.app-shell .search-field { height: var(--crm-control); min-width: 160px; border-radius: var(--crm-radius); }
.app-shell .search-field > svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.app-shell .search-field input { line-height: 20px; padding: 0; font-size: 14px; }
.app-shell :is(.table-toolbar select,.session-form select,.session-form input,.inline-select),
.management-modal :is(.inline-select,.invoice-line input,.invoice-line select) {
  min-height: var(--crm-control); height: var(--crm-control); border-radius: var(--crm-radius); padding: 8px 11px; font-size: 14px; line-height: 20px;
}
.app-shell .data-table { line-height: 1.45; }
.app-shell .data-table th { font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: middle; }
.app-shell .data-table td { padding-block: 10px; vertical-align: middle; font-size: 13px; }
.app-shell .data-table td small, .app-shell .person-cell small { font-size: 12px; line-height: 18px; color: var(--faint); }
.app-shell .data-table :is(.text-button,.row-action) { min-height: var(--crm-control); display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.app-shell .status-badge, .management-modal .status-badge { min-height: 24px; padding: 3px 8px; gap: 5px; font-size: 11px; line-height: 18px; font-weight: 650; text-transform: none; }
.app-shell .page-tabs { height: auto; min-height: 56px; padding: 8px 12px; gap: 8px; align-items: center; }
.app-shell .page-tabs button { height: var(--crm-control); min-height: var(--crm-control); padding: 0 12px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; line-height: 20px; font-weight: 600; }
.app-shell .page-tabs button.active { border-color: var(--border); background: var(--blue-soft); color: var(--blue); }
.app-shell .page-tabs button span { display: inline-flex; justify-content: center; align-items: center; min-width: 23px; min-height: 22px; font-size: 11px; line-height: 16px; }
.app-shell .management-heading-copy { min-width: 0; align-items: center; }
.app-shell .management-heading-actions { align-items: center; gap: 10px; }
.management-modal { border-color: var(--border-soft); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,44,66,.18); }
.management-modal-header { min-height: 72px; padding: 16px 20px; align-items: center; gap: 16px; }
.management-modal-header h2 { font-size: 21px; line-height: 28px; letter-spacing: -.025em; font-weight: 650; }
.management-modal-header p { color: var(--faint); font-size: 12px; line-height: 18px; }
.management-modal-body { padding: 20px; background: var(--surface-muted); }
.management-form { gap: 18px 16px; align-items: start; }
.management-field { gap: 7px; }
.management-field > span, .field-caption, .settings-form label > span, .session-form label > span {
  color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 600;
}
.management-field :is(input,select,textarea), .group-form :is(input,textarea), .settings-form input {
  min-height: var(--crm-control); padding: 9px 11px; border-radius: var(--crm-radius); font-size: 14px; line-height: 20px;
}
.management-field :is(input,select), .group-form input, .settings-form input { height: var(--crm-control); }
.management-field textarea, .group-form textarea { min-height: 104px; }
.management-checkbox { min-height: var(--crm-control); font-size: 13px; line-height: 20px; font-weight: 500; }
.management-checkbox input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.management-form-error, .management-notice, .settings-feedback, .settings-help { font-size: 12px; line-height: 19px; }
.form-actions, .settings-form-actions, .record-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.form-actions { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.invoice-line { grid-template-columns: minmax(0,1fr) 100px var(--crm-control); gap: 10px; align-items: center; }
.invoice-lines-header { align-items: center; flex-wrap: wrap; }
.invoice-total { align-items: center; gap: 12px; }
.invoice-total span, .record-summary-grid span, .detail-chips span, .detail-chips em { font-size: 12px; line-height: 18px; }
.settings-hero { min-height: 112px; padding: 20px; gap: 16px; }
.settings-hero h2 { font-size: 22px; line-height: 29px; }
.settings-hero p, .settings-card > header p, .settings-details dt, .settings-details dd { font-size: 12px; line-height: 19px; }
.settings-avatar { width: 56px; height: 56px; font-size: 18px; }
.settings-avatar.large { width: 64px; height: 64px; font-size: 21px; }
.settings-api-state { margin: 0; font-size: 12px; line-height: 18px; }
.settings-help > svg, .settings-feedback > svg { flex: 0 0 18px; width: 18px; height: 18px; }
.settings-details > div { gap: 12px; grid-template-columns: 140px minmax(0,1fr); }
:is(.app-shell,.management-modal) :is(button,input,select,textarea,a,[tabindex]):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.app-shell .sidebar :is(button,a):focus-visible { outline-color: #fff; outline-offset: -3px; }
:is(.management-field,.group-form,.settings-form) :is(input,select,textarea):focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,61,92,.10); }
.login-input input::placeholder, .app-shell input::placeholder, .management-modal :is(input,textarea)::placeholder { color: var(--faint); opacity: 1; }

/* The ticket workspace uses the same scale, fields and understated signature. */
body:has(.company-ticket-header) { background: #f5f7f5; color: #173747; }
.company-ticket-header > .company-ticket-shell { min-height: 64px; }
.company-ticket-brand { gap: 10px; color: #002c42; font-size: 14px; font-weight: 650; }
.company-ticket-brand img:first-child { width: 28px; height: 28px; object-fit: contain; transform: none; }
.company-ticket-main > h1 { color: #002c42; font-size: 26px; line-height: 34px; font-weight: 650; margin-bottom: 24px; }
.company-ticket-back { min-height: var(--crm-control); display: inline-flex; align-items: center; }
.company-ticket-footer { border-top: 1px solid #dde5e8; padding: 22px 0; }
.company-ticket-footer .crm-product-attribution { display: flex; align-items: baseline; justify-content: center; gap: 5px; color: #7c8386; font-size: 11px; line-height: 16px; }
.company-ticket-footer .crm-product-attribution img { display: block; width: 60px; height: 15.25px; object-fit: contain; transform: none; }
.crm-ticket-root { --crm-ticket-navy: #0b3d5c; --crm-ticket-ink: #173747; --crm-ticket-muted: #536977; --crm-ticket-line: #dde5e8; --crm-ticket-paper: #f5f7f5; }
.crm-ticket-root .crm-ticket-eyebrow { display: none; }
.crm-ticket-heading h2 { font-size: 21px; line-height: 28px; font-weight: 650; }
.crm-ticket-root .crm-ticket-button { min-height: var(--crm-control); padding: 9px 13px; font-size: 13px; line-height: 20px; font-weight: 600; border-radius: var(--crm-radius); }
.crm-ticket-root .crm-ticket-field > :is(input,select) { min-height: var(--crm-control); height: var(--crm-control); font-size: 14px; line-height: 20px; padding: 9px 11px; }
.crm-ticket-root .crm-ticket-field > textarea { font-size: 14px; line-height: 21px; }
.crm-ticket-root .crm-ticket-field { font-size: 12px; line-height: 18px; font-weight: 600; }
.crm-ticket-root :is(button,input,select,textarea,a,[tabindex]):focus-visible { outline: 2px solid #0b3d5c; outline-offset: 3px; }
.crm-ticket-root .crm-ticket-table th, .crm-ticket-root .crm-ticket-reference { font-size: 12px; }
.crm-ticket-root .crm-ticket-dialoghead { align-items: center; }
.crm-ticket-root .crm-ticket-dialoghead h2 { font-size: 21px; line-height: 28px; font-weight: 650; }

@media (max-width: 900px) {
  .app-shell .main-content { padding: 20px 16px 32px; }
}
@media (max-width: 680px) {
  :root { --crm-control: 44px; }
  .app-shell .topbar { padding: 10px 12px; gap: 10px; }
  .app-shell .topbar-left { gap: 10px; }
  .app-shell .topbar-actions { gap: 8px; }
  .app-shell .page-heading h1 { font-size: 19px; line-height: 25px; white-space: normal; overflow: visible; }
  .app-shell .main-content { padding: 16px 12px 28px; }
  .app-shell .panel-header, .app-shell .management-panel-heading { padding: 14px; }
  .app-shell .management-heading-actions { align-items: stretch; }
  .app-shell .table-toolbar { padding: 14px; align-items: stretch; }
  .app-shell .table-toolbar > *, .app-shell .search-field { min-width: 0; width: 100%; }
  .management-modal, .management-modal.wide { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 10px; }
  .management-modal-header { padding: 16px; min-height: 72px; }
  .management-modal-header h2 { font-size: 20px; line-height: 27px; }
  .management-modal-body { padding: 16px; }
  .management-field :is(input,select,textarea), .group-form :is(input,textarea), .settings-form input,
  .app-shell :is(.table-toolbar select,.search-field input,.inline-select,.session-form select,.session-form input),
  .management-modal :is(.invoice-line input,.invoice-line select), .crm-ticket-root .crm-ticket-field > :is(input,select,textarea) { font-size: 16px; }
  .invoice-line { grid-template-columns: minmax(0,1fr) 76px var(--crm-control); gap: 8px; }
  .form-actions > button { flex: 1 1 120px; }
  .settings-details > div { grid-template-columns: 110px minmax(0,1fr); }
  .settings-hero { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 12px; }
  .settings-api-state { grid-column: 2; justify-self: start; max-width: 100%; margin: 0; }
  .kpi-grid > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .company-ticket-main > h1 { font-size: 23px; line-height: 30px; }
  .company-ticket-header > .company-ticket-shell { min-height: 64px; gap: 12px; }
}
@media (pointer: coarse) {
  :root { --crm-control: 44px; }
  :is(.management-field,.group-form,.settings-form) :is(input,select,textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell *, .management-modal * { scroll-behavior: auto; transition: none; }
}
/* Explicit visibility wins over the shared icon-button display rule. */
.app-shell .icon-button.notification-button { display: none; }
@media (min-width: 901px) { .app-shell .mobile-menu { display: none !important; } }
@media (max-width: 900px) { .app-shell .desktop-collapse { display: none !important; } }