:root {
  --orari-bg: #F4F6F8;
  --orari-surface: #FFFFFF;
  --orari-ink: #101827;
  --orari-muted: #667085;
  --orari-soft: #F8FAFC;
  --orari-line: rgba(16, 24, 39, .10);
  --orari-dark: #0B111A;
  --orari-lime: #B8FF2C;
  --orari-red: #E5484D;
  --orari-orange: #F97316;
  --orari-blue: #2563EB;
  --orari-teal: #0F766E;
  --orari-purple: #7C3AED;
  --orari-radius: 24px;
  --orari-radius-lg: 30px;
  --orari-shadow: 0 18px 45px rgba(16, 24, 39, .08);
  --orari-shadow-strong: 0 24px 70px rgba(16, 24, 39, .12);
}

.productFrame {
  width: min(1560px, calc(100vw - 40px));
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.operationsBoard {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: stretch;
}

.operationsInbox,
.operationsCase,
.operationsDecision,
.ticketFileShell,
.reportIssueShell,
.materialWorkbench,
.reportDocumentShell,
.documentsExplorer {
  color: var(--orari-ink);
}

.operationsInbox,
.operationsDecision {
  background: var(--orari-surface);
  border: 1px solid var(--orari-line);
  border-radius: var(--orari-radius);
  box-shadow: var(--orari-shadow);
  padding: 18px;
}

.operationsInboxHeader,
.operationsCaseMeta,
.reportIssueHeader,
.materialWorkbenchHeader,
.reportDocumentHeader,
.documentsFileList header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.operationsInboxHeader span,
.operationsDecision > span,
.reportIssueHeader span,
.materialWorkbenchHeader span,
.reportDocumentHeader span,
.documentsFolders > span,
.documentsFileList header span,
.ticketFileAction span,
.ticketFileLead .ticketEyebrow {
  display: block;
  color: var(--orari-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.operationsInboxHeader h2,
.materialWorkbenchHeader h2,
.reportDocumentHeader h2,
.documentsFolders h2,
.ticketFileHeader h2 {
  margin: 5px 0 0;
  line-height: 1.05;
}

.operationsIntakeButton,
.ticketButtonPrimary {
  border: 0;
  border-radius: 999px;
  background: var(--orari-lime);
  color: var(--orari-dark);
  font-weight: 900;
  min-height: 42px;
  padding: 0 16px;
  box-shadow: 0 14px 34px rgba(184, 255, 44, .22);
}

.operationsInboxFilters,
.materialQuickStrip,
.ticketFileTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.operationsInboxFilters button,
.materialQuickStrip button,
.ticketFileTabs button {
  border: 1px solid var(--orari-line);
  border-radius: 999px;
  background: var(--orari-soft);
  color: var(--orari-ink);
  font-weight: 850;
  min-height: 36px;
  padding: 0 13px;
}

.operationsInboxFilters .active,
.ticketFileTabs .isActive {
  background: var(--orari-dark);
  color: var(--orari-surface);
}

.operationsInboxRows {
  display: grid;
  gap: 8px;
}

.operationsInboxRow {
  position: relative;
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid var(--orari-line);
  border-radius: 18px;
  background: var(--orari-surface);
  color: var(--orari-ink);
  text-align: left;
  padding: 13px 13px 13px 17px;
  box-shadow: none;
}

.operationsInboxRow::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 7px;
  width: 4px;
  border-radius: 99px;
  background: var(--orari-blue);
}

.operationsInboxRow.isCritical::before { background: var(--orari-orange); }
.operationsInboxRow.isHigh::before { background: var(--orari-lime); }
.operationsInboxRow.isActive {
  border-color: rgba(184, 255, 44, .72);
  box-shadow: 0 12px 28px rgba(16, 24, 39, .08);
}

.operationsInboxRow strong {
  color: var(--orari-ink);
  font-size: 15px;
  line-height: 1.15;
}

.operationsInboxRow span,
.operationsInboxRow small,
.operationsInboxRow em {
  color: var(--orari-muted);
  font-size: 12px;
  font-style: normal;
}

.operationsCase {
  border-radius: var(--orari-radius-lg);
  border: 1px solid rgba(53, 214, 255, .22);
  background: linear-gradient(140deg, var(--orari-surface), #F6FCFF);
  box-shadow: var(--orari-shadow-strong);
  padding: 24px;
  display: grid;
  gap: 18px;
}

.operationsCaseHeader {
  border-left: 7px solid var(--orari-blue);
  padding-left: 18px;
}

.operationsCaseHeader.isCritical { border-left-color: var(--orari-orange); }
.operationsCaseHeader h2 {
  margin: 12px 0 8px;
  font-size: clamp(28px, 3vw, 52px);
  line-height: .98;
  letter-spacing: -.04em;
}

.operationsCaseMeta span,
.ticketDetailMeta span {
  border-radius: 999px;
  background: var(--orari-soft);
  border: 1px solid var(--orari-line);
  color: var(--orari-muted);
  font-size: 12px;
  font-weight: 850;
  padding: 7px 10px;
}

.operationsProblem,
.operationsNextStep,
.operationsRecommendation,
.operationsRisk,
.ticketFileSummary,
.ticketLinkedList,
.reportIssueMain,
.reportIssuePreview,
.materialSplitView aside,
.materialSplitView main,
.documentsFileList,
.documentsFolders,
.reportDocumentPaper {
  background: var(--orari-surface);
  border: 1px solid var(--orari-line);
  border-radius: var(--orari-radius);
  padding: 18px;
}

.operationsProblem span,
.operationsNextStep span,
.operationsRecommendation span,
.operationsRisk span,
.ticketFileSummary span,
.materialSplitView span {
  color: var(--orari-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.operationsCaseActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.operationsCaseActions button,
.reportDocumentActions button,
.documentsFileList header button,
.materialSearchBar button {
  border: 1px solid var(--orari-line);
  border-radius: 999px;
  background: var(--orari-soft);
  color: var(--orari-ink);
  font-weight: 850;
  min-height: 40px;
  padding: 0 14px;
}

.operationsDecision {
  display: grid;
  gap: 14px;
}

.operationsRecommendation h3 {
  font-size: 28px;
  margin: 8px 0;
}

.operationsRecommendationScore {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--orari-lime);
  color: var(--orari-dark);
  margin: 6px 0 12px;
}

.ticketFileShell {
  display: grid;
  gap: 16px;
}

.ticketFileHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  border-radius: var(--orari-radius-lg);
  background: var(--orari-surface);
  border: 1px solid var(--orari-line);
  box-shadow: var(--orari-shadow);
  padding: 22px;
}

.ticketFileAction {
  border-radius: 22px;
  background: var(--orari-dark);
  color: var(--orari-surface);
  padding: 18px;
}

.ticketFileAction p { color: rgba(255, 255, 255, .7); }

.ticketFileContent {
  display: grid;
  gap: 14px;
}

.ticketFileSummary {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 12px;
}

.ticketLinkedList {
  display: grid;
  gap: 8px;
}

.ticketLinkedRow {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border: 1px solid var(--orari-line);
  border-radius: 16px;
  background: var(--orari-soft);
  color: var(--orari-ink);
  text-align: left;
  padding: 10px 12px;
}

.reportIssueShell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
}

.reportIssueMain,
.reportIssuePreview {
  box-shadow: var(--orari-shadow);
}

.reportIssueQuestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.reportIssueQuestions label,
.reportIssueMore label {
  display: grid;
  gap: 8px;
  color: var(--orari-muted);
  font-weight: 850;
}

.reportIssueQuestions .wide {
  grid-column: 1 / -1;
}

.reportIssueQuestions input,
.reportIssueQuestions select,
.reportIssueQuestions textarea,
.materialSearchBar input {
  width: 100%;
  border: 1px solid var(--orari-line);
  border-radius: 16px;
  background: var(--orari-soft);
  color: var(--orari-ink);
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
}

.reportIssueMore {
  border: 1px solid var(--orari-line);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 16px;
}

.materialWorkbench,
.reportDocumentShell {
  display: grid;
  gap: 16px;
}

.materialSearchBar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  background: var(--orari-surface);
  border: 1px solid var(--orari-line);
  border-radius: var(--orari-radius);
  padding: 12px;
}

.materialSplitView,
.documentsExplorer {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
}

.materialSplitView aside,
.materialSplitView main {
  display: grid;
  gap: 10px;
}

.materialSplitView button,
.materialSplitView article,
.documentFileRow,
.documentsFolders button {
  border: 1px solid var(--orari-line);
  border-radius: 18px;
  background: var(--orari-surface);
  color: var(--orari-ink);
  text-align: left;
  padding: 14px;
}

.documentsFolders {
  display: grid;
  align-content: start;
  gap: 10px;
}

.documentsFolders button.isActive {
  background: var(--orari-dark);
  color: var(--orari-surface);
}

.documentsFileList {
  display: grid;
  gap: 10px;
}

.documentFileRow {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 12px;
}

.documentFileRow span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 32px;
  border-radius: 10px;
  background: var(--orari-soft);
  color: var(--orari-muted);
  font-size: 11px;
  font-weight: 900;
}

.reportDocumentPaper {
  max-width: 920px;
  margin: 0 auto;
  box-shadow: var(--orari-shadow-strong);
}

.reportPaperTop {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--orari-line);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.reportDocumentSections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.reportDocumentSections > div {
  border: 1px solid var(--orari-line);
  border-radius: 16px;
  background: var(--orari-soft);
  padding: 14px;
}

.reportDocumentSections .wide {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .operationsBoard,
  .reportIssueShell,
  .ticketFileHeader,
  .materialSplitView,
  .documentsExplorer {
    grid-template-columns: 1fr;
  }

  .operationsCase { order: 1; }
  .operationsDecision { order: 2; }
  .operationsInbox { order: 3; }
}

@media (max-width: 720px) {
  .productFrame {
    width: 100%;
    padding: 0 14px 120px;
    gap: 14px;
  }

  .operationsBoard,
  .ticketFileShell,
  .reportIssueShell,
  .materialWorkbench,
  .reportDocumentShell,
  .documentsExplorer {
    gap: 14px;
  }

  .operationsCase,
  .operationsInbox,
  .operationsDecision,
  .ticketFileHeader,
  .reportIssueMain,
  .reportIssuePreview,
  .materialSplitView aside,
  .materialSplitView main,
  .documentsFolders,
  .documentsFileList,
  .reportDocumentPaper {
    border-radius: 20px;
    padding: 16px;
  }

  .operationsCaseHeader h2,
  .ticketFileHeader h2 {
    font-size: 30px;
  }

  .operationsCaseActions,
  .ticketFileSummary,
  .reportIssueQuestions,
  .reportDocumentSections {
    grid-template-columns: 1fr;
  }

  .ticketLinkedRow,
  .documentFileRow {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .materialSearchBar {
    grid-template-columns: 1fr;
  }
}