/* TF-06 Contracte: commercial workspace polish and responsive dialogs. */

#contracts {
  --tf06-ink: #102a43;
  --tf06-muted: #64748b;
  --tf06-line: #dbe5f0;
  --tf06-blue: #1769b0;
  --tf06-blue-strong: #0b4f8a;
  --tf06-surface: rgba(255, 255, 255, 0.96);
  --tf06-shadow: 0 18px 45px rgba(15, 53, 87, 0.08);
  padding-bottom: 32px;
}

#contracts .modulePageHeader {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(circle at 91% 20%, rgba(255, 255, 255, 0.16) 0 82px, transparent 83px),
    linear-gradient(115deg, #0b4f8a 0%, #1769b0 54%, #3d91e7 100%);
  box-shadow: 0 18px 42px rgba(15, 78, 138, 0.18);
}

#contracts .modulePageHeader::after {
  content: "";
  position: absolute;
  inset: auto -54px -82px auto;
  width: 230px;
  height: 230px;
  border: 30px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

#contracts .modulePageHeader > * {
  position: relative;
  z-index: 1;
}

#contracts .contractStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#contracts .contractStats > * {
  min-width: 0;
  border: 1px solid var(--tf06-line);
  background:
    radial-gradient(circle at 100% 100%, #eef6ff 0 46px, transparent 47px),
    var(--tf06-surface);
  box-shadow: var(--tf06-shadow);
}

#contracts .contractToolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.35fr) minmax(220px, 0.9fr) auto;
  align-items: end;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--tf06-line);
  background: var(--tf06-surface);
  box-shadow: 0 12px 32px rgba(15, 53, 87, 0.06);
}

#contracts .contractToolbar > * {
  min-width: 0;
}

#contracts #contractSearch,
#contracts #contractStatusFilter,
#contracts #refreshContractsBtn {
  min-height: 44px;
}

#contracts #contractSearch,
#contracts #contractStatusFilter {
  width: 100%;
  border-color: #cbd9e8;
  background-color: #fbfdff;
}

#contracts #contractSearch:focus,
#contracts #contractStatusFilter:focus {
  border-color: var(--tf06-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 176, 0.12);
  outline: none;
}

#contracts #refreshContractsBtn {
  min-width: 128px;
  justify-content: center;
}

#contracts .operationPanel {
  min-height: 360px;
  border: 1px solid var(--tf06-line);
  background: var(--tf06-surface);
  box-shadow: var(--tf06-shadow);
}

#contracts .panelTitle {
  color: var(--tf06-ink);
}

#contracts .panelSummary {
  color: var(--tf06-muted);
}

#contracts .contractCards {
  display: grid;
  gap: 12px;
  min-width: 0;
}

#contracts .contractViewState {
  min-height: 260px;
  border-radius: 18px;
  color: var(--tf06-muted);
  background:
    radial-gradient(circle at 50% 40%, rgba(23, 105, 176, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fbff);
}

#contracts .paginationControls {
  border-top: 1px solid var(--tf06-line);
  padding-top: 14px;
}

#contractDialog,
#contractDetailsDialog {
  width: min(1160px, calc(100vw - 34px));
  max-width: none;
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 28px 80px rgba(15, 43, 70, 0.28);
}

#contractDetailsDialog {
  width: min(1280px, calc(100vw - 34px));
}

#entitlementDialog,
#contractRenewDialog {
  width: min(760px, calc(100vw - 34px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 32px));
  overflow: hidden;
}

#contracts .operationDialog .operationForm,
#contracts .contractDetailsContent {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#contracts .dialogHeader {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(219, 229, 240, 0.7);
}

#contracts .dialogFooter,
#contracts .contractDetailsFooter {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: 0 0 auto;
  border-top: 1px solid var(--tf06-line);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
}

#contracts .toggleField {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--tf06-line);
  border-radius: 12px;
  background: #f8fbff;
}

#contracts .dialogPrimary,
#contracts .dialogSecondary {
  min-height: 44px;
}

#contracts .dialogPrimary {
  background: linear-gradient(135deg, var(--tf06-blue-strong), #2b7fd0);
  box-shadow: 0 10px 22px rgba(23, 105, 176, 0.2);
}

#contracts .dialogClose:focus-visible,
#contracts button:focus-visible,
#contracts a:focus-visible {
  outline: 3px solid rgba(23, 105, 176, 0.34);
  outline-offset: 2px;
}

@media (max-width: 1050px) {
  #contracts .contractStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #contracts .contractToolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #contracts .ticketSearch {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #contracts {
    padding-bottom: 20px;
  }

  #contracts .modulePageHeader,
  #contracts .contractStats,
  #contracts .contractToolbar,
  #contracts .operationPanel {
    margin-left: 0;
    margin-right: 0;
  }

  #contracts .contractStats,
  #contracts .contractToolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  #contracts .ticketSearch {
    grid-column: auto;
  }

  #contracts #refreshContractsBtn,
  #contracts .modulePrimaryAction {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  #contracts .operationPanel {
    min-height: 320px;
  }

  #contractDialog,
  #contractDetailsDialog,
  #entitlementDialog,
  #contractRenewDialog {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  #contracts .dialogFooter,
  #contracts .contractDetailsFooter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  #contracts .dialogPrimary,
  #contracts .dialogSecondary {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #contracts *,
  #contracts *::before,
  #contracts *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}