/* Shared UI: one definition for each reusable component.
   Geometry belongs here; page styles may position a component, never resize it. */
:root {
  --cs-color-brand: #900;
  --cs-color-brand-hover: #b30000;
  --cs-color-brand-strong: #a00000;
  --cs-color-action-blue: #245b91;
  --cs-color-white: #fff;
  --cs-color-line: #ddd;
  --cs-control-radius: 4px;
  --cs-alert-size: 11px;
  --cs-alert-border: #fff;
  --cs-alert-green: #16813b;
  --cs-alert-yellow: #f4c542;
  --cs-alert-orange: #d87512;
  --cs-alert-red: #c71926;
  --cs-alert-offline: #777;
}

/* Primary controls and messages share one palette and geometry. */
.cs-button, .cs-button:visited, .cs-button:hover, .cs-button:focus { color: var(--cs-color-white) !important; text-decoration: none !important; }
.cs-button { display: inline-block; padding: 7px 12px; border: 1px solid #4d0000; border-radius: var(--cs-control-radius); background: var(--cs-color-brand); font: 700 13px/1.2 Arial, Helvetica, sans-serif; text-align: center; cursor: pointer; }
.cs-button:hover, .cs-button:focus { background: var(--cs-color-brand-hover); border-color: var(--cs-color-brand); }
.cs-button:disabled { opacity: .6; cursor: default; }
.cs-button-full { display: block; width: 100%; }
.cs-button-secondary { background: #555; border-color: #333; }
.cs-button-secondary:hover, .cs-button-secondary:focus { background: #777; border-color: #555; }
.cs-button-danger { background: var(--cs-color-brand); border-color: #4d0000; }
.cs-button-danger:hover, .cs-button-danger:focus { background: var(--cs-color-brand-hover); }
.cs-button-small { padding: 4px 7px; font-size: 11px; }
.cs-message, .success-message { margin: 10px 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: var(--cs-control-radius); font-size: 14px; line-height: 1.5; }
.cs-message-info { background: #fff8e8; color: #704d00; border-color: #dfc988; }
.cs-message-success, .success-message { background: #edf8ed; color: #165c16; border-color: #a7cfa7; }
.cs-message-error { background: #fff0f0; color: #7b1111; border-color: #e4bcbc; }
.cs-alert-urgent { color: #b00000 !important; font-weight: bold; }

/* Alerts: the same 11px circle, including its 1px white border, everywhere. */
.cs-alert-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 var(--cs-alert-size);
  width: var(--cs-alert-size);
  min-width: var(--cs-alert-size);
  max-width: var(--cs-alert-size);
  height: var(--cs-alert-size);
  min-height: var(--cs-alert-size);
  max-height: var(--cs-alert-size);
  padding: 0;
  margin: 0 5px;
  border: 1px solid var(--cs-alert-border);
  border-radius: 50%;
  box-shadow: none;
  vertical-align: middle;
  font: 700 8px/1 Arial, sans-serif;
  color: var(--cs-color-white);
}
.cs-alert-green { background: var(--cs-alert-green); }
.cs-alert-yellow { background: var(--cs-alert-yellow); color: #332800; }
.cs-alert-orange { background: var(--cs-alert-orange); }
.cs-alert-red { background: var(--cs-alert-red); }
.cs-alert-offline { background: var(--cs-alert-offline); }
.cs-alert-dot[hidden], .cs-alert-count[hidden], .cs-alert-refresh[hidden] { display: none; }
/* Counts stay readable beside the circle; they never turn it into an oval. */
.cs-alert-count { display: inline; flex: 0 0 auto; font: 700 11px/1.2 Arial, sans-serif; margin-left: -2px; white-space: nowrap; color: inherit; }
.cs-alert-refresh { padding: 12px; border: 1px solid #c8a539; border-radius: 6px; background: #fff4cc; }
.cs-workspace-nav .cs-nav-group > summary { display: flex; align-items: center; gap: 7px; }
.cs-workspace-nav .cs-nav-link > .cs-alert-dot { margin-left: auto; }
.cs-workspace-nav .cs-nav-link > .cs-alert-count { margin-left: -5px; }
.cs-workspace-nav .cs-nav-group > summary .cs-alert-dot { margin-right: 5px; }
.cs-nav-group summary:has(.cs-alert-dot:not([hidden])) { font-weight: 700; }
.cs-overview-metric > .cs-alert-dot { margin-top: 5px; }
.offer-row-status .cs-alert-dot { margin: 0 7px 0 0; }

/* Accessible labels and keyboard focus, shared by public and admin pages. */
.sr-only, .cs-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid #245f99; outline-offset: 3px; }
.cs-workspace-sidebar :focus-visible { outline-color: #ffe28a; }

/* The same error component in every public/admin form. */
:is(.cs-content,.cs-admin-main) :is(p,div).form-error { background: #fff0f0; border: 1px solid #e4bcbc; border-left: 4px solid var(--cs-color-brand-strong); border-radius: var(--cs-control-radius); padding: 10px 12px; margin: 12px 0; color: #7b1111; font-size: 14px; line-height: 1.5; }

/* Sortable list headers, independent of the module and the table colour. */
th .cs-sort-control, th .cs-sort-control:visited { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; min-height: 0; min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent !important; color: inherit !important; font: inherit; font-weight: inherit; text-align: inherit; text-decoration: none; cursor: pointer; }
th .cs-sort-control:hover { text-decoration: underline; }
th .cs-sort-control:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.cs-sort-indicator { font-size: .8em; white-space: nowrap; opacity: .85; }
@media print {
  .cs-sort-indicator { display: none; }
  th .cs-sort-control { color: inherit !important; text-decoration: none; }
  th button.cs-sort-control { display: inline !important; }
}

/* Checkbox/radio rows keep their label beside the control at every width. */
:is(.cs-content,.cs-admin-main) :is(label.cs-check-row,label.check-label,label.cs-mfa-check,label:has(>input:is([type=checkbox],[type=radio]))) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
:is(.cs-content,.cs-admin-main) :is(label.cs-check-row,label.check-label,label.cs-mfa-check,label:has(>input:is([type=checkbox],[type=radio]))) > :is(input[type=checkbox],input[type=radio]) {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

/* Text and read markers reused by conversations, orders and document details. */
.cs-preserve-lines { white-space: pre-wrap; }
.cs-wrap-anywhere { overflow-wrap: anywhere; }
.cs-alert-read-marker { height: 1px; overflow: hidden; }

/* Scorciatoia visibile soltanto quando raggiunta dalla tastiera. */
.cs-skip-link { position:fixed; top:8px; left:8px; z-index:10000; transform:translateY(calc(-100% - 16px)); }
.cs-skip-link:focus { transform:translateY(0); }