/* CloudCore unified portal accessibility and resilient layout primitives. */
@font-face {
  font-family: "Vazirmatn CloudCore";
  src: url("./fonts/Vazirmatn-33.0.3.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Managed tenant/workspace configuration and deployment forms. */
.cloudcore-managed-form-field {
  gap: 0.7rem !important;
  min-width: 0;
}

.cloudcore-managed-form-field :is(input, textarea, button[role="combobox"]) {
  min-height: 2.75rem;
}

.cloudcore-vm-wizard-form :is(.rt-Grid, .rt-Flex) {
  row-gap: max(var(--space-3), 0.8rem);
}

.cloudcore-vm-wizard-form .cloudcore-managed-form-field {
  margin-block: 0.15rem;
}

.cloudcore-configuration-panel,
.cloudcore-configuration-card {
  border: 2px solid var(--gray-a5) !important;
}

.cloudcore-configuration-panel {
  padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.cloudcore-configuration-card {
  padding: 1rem !important;
}

.cloudcore-placement-preferences {
  border: 2px solid var(--accent-a5);
  border-radius: var(--radius-4);
  background: var(--accent-a2);
  padding: clamp(1rem, 2vw, 1.4rem);
}

html[dir="rtl"] .cloudcore-managed-form-field,
html[dir="rtl"] .cloudcore-configuration-panel,
html[dir="rtl"] .cloudcore-configuration-card {
  text-align: right;
}

@media (max-width: 640px) {
  .cloudcore-configuration-panel,
  .cloudcore-configuration-card {
    padding: 0.9rem !important;
  }
}

:root {
  --cloudcore-focus: #0969da;
  --cloudcore-skip-bg: #ffffff;
  --cloudcore-skip-fg: #111827;
  --cloudcore-shell-max: 100rem;
  --cloudcore-header-height: 4.75rem;
  --cloudcore-space-1: 0.25rem;
  --cloudcore-space-2: 0.5rem;
  --cloudcore-space-3: 0.75rem;
  --cloudcore-space-4: 1rem;
  --cloudcore-space-5: 1.5rem;
  --cloudcore-space-6: 2rem;
  --cloudcore-touch-target: 2.75rem;
  --cloudcore-field-height: 2.875rem;
  --cloudcore-font-latin: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cloudcore-font-fa: "Vazirmatn CloudCore", Vazirmatn, Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --cloudcore-surface: color-mix(in srgb, var(--color-panel-solid) 96%, transparent);
  --cloudcore-surface-raised: color-mix(in srgb, var(--color-panel-solid) 100%, var(--accent-a2));
  --cloudcore-border: var(--gray-a6);
  --cloudcore-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 30px rgba(15, 23, 42, 0.05);
  --cloudcore-shadow-2: 0 20px 50px rgba(15, 23, 42, 0.14);
}

html.dark {
  --cloudcore-focus: #70b8ff;
  --cloudcore-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.34), 0 10px 30px rgba(0, 0, 0, 0.22);
  --cloudcore-shadow-2: 0 20px 60px rgba(0, 0, 0, 0.48);
}

html.dark,
html.dark body,
html.dark .radix-themes {
  color-scheme: dark;
  background-color: var(--gray-1);
  color: var(--gray-12);
}

html,
body {
  min-inline-size: 20rem;
  background: var(--color-background);
}

/* Framework diagnostics and branding are replaced by CloudCore-owned status
   and error surfaces in production. */
a[href="https://reflex.dev"],
a[href^="https://reflex.dev/"] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--cloudcore-font-latin);
  color: var(--gray-12);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html[lang="fa"] body,
html[lang="fa"] button,
html[lang="fa"] input,
html[lang="fa"] select,
html[lang="fa"] textarea {
  font-family: var(--cloudcore-font-fa);
  font-feature-settings: "ss01" 1, "tnum" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.cloudcore-skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  top: -6rem;
  z-index: 2147483647;
  padding: 0.75rem 1rem;
  border: 2px solid var(--cloudcore-focus);
  border-radius: 0.5rem;
  background: var(--cloudcore-skip-bg);
  color: var(--cloudcore-skip-fg);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.cloudcore-skip-link:focus {
  top: 1rem;
}

.cloudcore-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

*:focus-visible {
  outline: 3px solid var(--cloudcore-focus) !important;
  outline-offset: 3px !important;
}

html[data-cloudcore-high-contrast="true"] {
  --accent-9: #005fcc;
  --gray-1: #ffffff;
  --gray-12: #000000;
  filter: contrast(1.08);
}

html[data-cloudcore-high-contrast="true"] [data-accent-color] {
  border-color: currentColor;
}

html[data-cloudcore-reduced-motion="true"] *,
html[data-cloudcore-reduced-motion="true"] *::before,
html[data-cloudcore-reduced-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

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

@media (forced-colors: active) {
  .cloudcore-skip-link,
  button,
  [role="button"],
  input,
  select,
  textarea {
    forced-color-adjust: auto;
  }
}

#main-content {
  min-inline-size: 0;
}

.cloudcore-shell {
  display: flex;
  flex-direction: column;
  block-size: 100vh;
  block-size: 100dvh;
  min-block-size: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 10% -10%,
      var(--accent-a3),
      transparent 28rem
    ),
    var(--color-background);
  color: var(--gray-12);
}

.cloudcore-shell-chrome {
  position: relative;
  z-index: 50;
  flex: 0 0 auto;
  inline-size: 100%;
  background: color-mix(in srgb, var(--color-background) 94%, transparent);
  box-shadow: 0 2px 10px var(--gray-a4);
  backdrop-filter: blur(18px) saturate(140%);
}

.cloudcore-shell--admin {
  --cloudcore-shell-marker: var(--purple-9);
}

.cloudcore-shell--user {
  --cloudcore-shell-marker: var(--accent-9);
}

.cloudcore-shell--technician {
  --cloudcore-shell-marker: var(--orange-9);
}

.cloudcore-tenant-card {
  min-block-size: 16rem;
}

.cloudcore-shell--technician code,
.cloudcore-shell--admin code {
  overflow-wrap: anywhere;
}

.cloudcore-shell-header {
  inline-size: 100%;
  box-sizing: border-box;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  border-block-start: 3px solid var(--cloudcore-shell-marker);
  border-block-end: 1px solid var(--gray-a5);
  background: transparent;
}

.cloudcore-brand {
  min-inline-size: 0;
}

.cloudcore-brand-mark {
  box-shadow: inset 0 0 0 1px var(--accent-a5);
}

.cloudcore-shell-navigation {
  inline-size: 100%;
  box-sizing: border-box;
  padding: 0.75rem clamp(1rem, 3vw, 2rem) 0.6rem;
  border-block-end: 1px solid var(--gray-a5);
  background: var(--gray-a2);
}

.cloudcore-shell-main {
  flex: 1 1 auto;
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
  min-block-size: 0;
  margin-inline: 0;
  box-sizing: border-box;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.cloudcore-shell-main > div,
.cloudcore-shell-main > div > div {
  min-inline-size: 0;
}

.cloudcore-shell-main > .rt-Flex,
.cloudcore-shell-main > div > .rt-Flex {
  gap: clamp(1.25rem, 2vw, 1.75rem) !important;
}

.cloudcore-page-header {
  padding-block-end: var(--cloudcore-space-4);
}

.cloudcore-page-title {
  max-inline-size: 24ch;
  line-height: 1.08;
  text-wrap: balance;
}

.cloudcore-page-description {
  max-inline-size: 72ch;
  line-height: 1.55;
  text-wrap: pretty;
}

.cloudcore-page-eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[dir="rtl"] .cloudcore-page-eyebrow {
  letter-spacing: normal;
}

.cloudcore-page-actions {
  max-inline-size: 100%;
}

.cloudcore-summary-card,
.cloudcore-section-card,
.cloudcore-feedback-state {
  border: 2px solid var(--cloudcore-border);
  background: var(--cloudcore-surface);
  box-shadow: var(--cloudcore-shadow-1);
}

.cloudcore-summary-card {
  block-size: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

@media (hover: hover) {
  .cloudcore-summary-card:hover {
    border-color: var(--accent-a7);
    box-shadow: var(--cloudcore-shadow-2);
    transform: translateY(-1px);
  }
}

.cloudcore-feedback {
  inline-size: 100%;
}

.cloudcore-feedback-state {
  box-sizing: border-box;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: var(--radius-4);
}

.cloudcore-loading-state {
  background:
    linear-gradient(110deg, transparent 20%, var(--gray-a3) 42%, transparent 64%),
    var(--cloudcore-surface);
  background-size: 220% 100%;
  animation: cloudcore-loading-shimmer 1.5s linear infinite;
}

.cloudcore-empty-state {
  border-style: dashed;
}

.cloudcore-error-state {
  border-color: var(--red-a7);
  background: color-mix(in srgb, var(--red-a2) 62%, var(--cloudcore-surface));
}

.cloudcore-feedback-state-icon {
  box-shadow: inset 0 0 0 1px var(--gray-a5);
}

@keyframes cloudcore-loading-shimmer {
  to { background-position: -220% 0; }
}

.cloudcore-table-region {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-gutter: stable;
}

.cloudcore-table-region table {
  min-inline-size: 48rem;
}

.cloudcore-table-region th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--gray-2);
  text-align: start;
  white-space: nowrap;
}

.cloudcore-table-region td,
.cloudcore-table-region th {
  padding-inline: var(--cloudcore-space-4);
}

.cloudcore-table-region tbody tr:hover {
  background: var(--accent-a2);
}

.cloudcore-table-region:focus-visible {
  outline-offset: 2px !important;
}

/* Legacy page tables receive the same overflow boundary as responsive_table. */
.cloudcore-shell-main .rt-TableRoot {
  max-inline-size: 100%;
  overflow-x: auto;
  scrollbar-gutter: stable;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cloudcore-shell-main .rt-TableRoot table {
  min-inline-size: 42rem;
}

/* Tables and their filter bars are page content, not nested cards. */
.cloudcore-shell-main .rt-Card:has(.rt-TableRoot),
.cloudcore-shell-main .rt-Card:has(.cloudcore-table-region),
.cloudcore-shell-main .rt-Card:has(.cloudcore-filter-bar) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}

.cloudcore-filter-bar {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-block-end: var(--cloudcore-space-2);
}

.cloudcore-shell-main .rt-TableRoot th {
  white-space: nowrap;
  text-align: start;
}

.cloudcore-shell-main .rt-TableRoot th[data-cloudcore-sortable="true"] {
  cursor: pointer;
  user-select: none;
  padding-inline-end: 1.75rem;
  position: relative;
}

.cloudcore-shell-main .rt-TableRoot th[data-cloudcore-sortable="true"]::after {
  content: "\2195";
  position: absolute;
  inset-inline-end: 0.55rem;
  color: var(--gray-9);
  font-size: 0.8em;
}

.cloudcore-shell-main .rt-TableRoot th[aria-sort="ascending"]::after {
  content: "\2191";
  color: var(--accent-11);
}

.cloudcore-shell-main .rt-TableRoot th[aria-sort="descending"]::after {
  content: "\2193";
  color: var(--accent-11);
}

[dir="rtl"] .cloudcore-shell-main .rt-TableRoot table {
  direction: rtl;
}

[dir="rtl"] .cloudcore-shell-main .rt-TableRoot th,
[dir="rtl"] .cloudcore-shell-main .rt-TableRoot td {
  text-align: start;
}

button,
[role="button"],
input,
select,
textarea {
  min-block-size: var(--cloudcore-touch-target);
}

.cloudcore-shell-main .rt-Card,
[role="dialog"] .rt-Card {
  border-width: 2px;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.cloudcore-shell-main .rt-TextFieldRoot,
.cloudcore-shell-main .rt-SelectTrigger,
.cloudcore-shell-main .rt-TextArea,
[role="dialog"] .rt-TextFieldRoot,
[role="dialog"] .rt-SelectTrigger,
[role="dialog"] .rt-TextArea {
  min-block-size: var(--cloudcore-field-height);
  min-inline-size: 12rem;
  font-size: max(1rem, 16px);
}

.cloudcore-shell-main input,
.cloudcore-shell-main textarea,
[role="dialog"] input,
[role="dialog"] textarea {
  min-inline-size: 0;
  padding-inline: 0.875rem;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  overflow: visible;
  text-overflow: clip;
  opacity: 0.72;
}

button[data-size="1"],
[role="button"][data-size="1"] {
  min-block-size: 2rem;
}

[role="dialog"] {
  max-block-size: min(92dvh, 64rem);
  max-inline-size: min(calc(100vw - 2rem), 64rem) !important;
}

.cloudcore-direction-surface,
[role="dialog"],
[role="alertdialog"],
[role="menu"],
[role="listbox"],
[data-radix-popper-content-wrapper] > * {
  direction: inherit;
  text-align: start;
}

html[dir="rtl"] .cloudcore-direction-surface,
html[dir="rtl"] [role="dialog"],
html[dir="rtl"] [role="alertdialog"],
html[dir="rtl"] [role="menu"],
html[dir="rtl"] [role="listbox"],
html[dir="rtl"] [data-radix-popper-content-wrapper] > * {
  direction: rtl !important;
  text-align: start;
}

html[dir="ltr"] .cloudcore-direction-surface,
html[dir="ltr"] [role="dialog"],
html[dir="ltr"] [role="alertdialog"],
html[dir="ltr"] [role="menu"],
html[dir="ltr"] [role="listbox"],
html[dir="ltr"] [data-radix-popper-content-wrapper] > * {
  direction: ltr !important;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] [data-radix-select-viewport] {
  text-align: start;
}

[dir="rtl"] .cloudcore-nav-button svg,
[dir="rtl"] .cloudcore-page-actions svg {
  flex-shrink: 0;
}

.cloudcore-nav-button {
  border-radius: var(--radius-3);
  min-inline-size: max-content;
  padding-inline: 0.9rem;
  gap: 0.5rem;
}

.cloudcore-primary-navigation-items {
  gap: 0.75rem !important;
  padding-inline: 0.15rem;
}

html[dir="rtl"] .cloudcore-primary-navigation-items {
  /* RTL inline progression already reverses visual order. row-reverse here
     used to reverse it a second time and preserved the LTR order. */
  direction: rtl;
  flex-direction: row !important;
}

html[dir="ltr"] .cloudcore-primary-navigation-items {
  direction: ltr;
  flex-direction: row !important;
}

[dir="rtl"] .cloudcore-navigation-scroll {
  direction: rtl;
}

/* Radix's horizontal scrollbar looked like a divider in RTL. Navigation
   remains scrollable by wheel, touch, keyboard and shift-wheel. */
.cloudcore-navigation-scroll [data-radix-scroll-area-scrollbar],
.cloudcore-navigation-scroll .rt-ScrollAreaScrollbar {
  display: none !important;
}

.cloudcore-navigation-scroll [data-radix-scroll-area-viewport],
.cloudcore-navigation-scroll .rt-ScrollAreaViewport {
  scrollbar-width: none;
}

.cloudcore-navigation-scroll [data-radix-scroll-area-viewport]::-webkit-scrollbar,
.cloudcore-navigation-scroll .rt-ScrollAreaViewport::-webkit-scrollbar {
  display: none;
  block-size: 0;
}

[dir="rtl"] .cloudcore-nav-menu-trigger svg:last-child,
[dir="rtl"] .cloudcore-workspace-option svg:last-child {
  transform: scaleX(-1);
}

.cloudcore-nav-menu-content {
  min-inline-size: 14rem;
  padding: 0.4rem;
  border: 2px solid var(--cloudcore-border);
  box-shadow: var(--cloudcore-shadow-2);
}

.cloudcore-nav-menu-item {
  min-block-size: 2.6rem;
  gap: 0.65rem;
  padding-inline: 0.75rem;
}

.cloudcore-identity-trigger {
  max-inline-size: 18rem;
}

.cloudcore-header-controls {
  min-inline-size: 0;
}

.cloudcore-workspace-trigger {
  max-inline-size: 17rem;
  gap: 0.45rem;
}

.cloudcore-workspace-billing {
  border: 2px solid var(--green-a6);
  background: var(--green-a2);
}

.cloudcore-workspace-option {
  justify-content: stretch !important;
  white-space: normal !important;
  border: 2px solid transparent;
}

.cloudcore-workspace-option:hover {
  border-color: var(--accent-a6);
}

.cloudcore-advanced-context {
  inline-size: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--cloudcore-border);
  border-radius: var(--radius-3);
  background: var(--gray-a2);
}

.cloudcore-advanced-summary {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-block-size: 2.5rem;
  cursor: pointer;
  font-weight: 600;
}

.cloudcore-notification-badge {
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-end: -0.45rem;
  min-inline-size: 1.35rem;
  block-size: 1.35rem;
  justify-content: center;
  padding-inline: 0.25rem;
  font-size: 0.68rem;
  pointer-events: none;
}

.cloudcore-notification-trigger,
.cloudcore-datetime-trigger {
  position: relative;
}

.cloudcore-datetime-trigger {
  gap: 0.45rem;
  white-space: nowrap;
}

.cloudcore-header-clock-label,
.cloudcore-live-clock-full,
.cloudcore-native-datetime {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.cloudcore-datetime-popover {
  inline-size: min(34rem, calc(100vw - 1rem));
  max-block-size: calc(100dvh - 1rem);
  overflow-y: auto;
  border: 2px solid var(--cloudcore-border);
  box-shadow: var(--cloudcore-shadow-2);
}

.cloudcore-datetime-fields {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.cloudcore-datetime-date-field,
.cloudcore-datetime-time-field {
  min-inline-size: 0;
  inline-size: 100%;
}

.cloudcore-native-datetime {
  inline-size: 100%;
  min-block-size: var(--cloudcore-field-height);
  box-sizing: border-box;
  padding-inline: 0.75rem;
  border: 1px solid var(--gray-a7);
  border-radius: var(--radius-2);
  background: var(--color-panel-solid);
  color: var(--gray-12);
}

.cloudcore-persian-calendar {
  display: none;
  inline-size: 100%;
  max-inline-size: 31rem;
  box-sizing: border-box;
  margin-inline: auto;
  padding: 1rem;
  border: 2px solid var(--cloudcore-border);
  border-radius: var(--radius-4);
  background: var(--cloudcore-surface-raised);
  box-shadow: inset 0 1px 0 var(--gray-a3);
}

html[lang="fa"] .cloudcore-persian-calendar {
  display: block;
}

html[lang="fa"] .cloudcore-datetime-fields {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[lang="fa"] .cloudcore-datetime-date-field,
html[lang="fa"] .cloudcore-datetime-time-field {
  grid-column: 1 / -1;
}

html[lang="fa"] #cloudcore-calendar-date {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.cloudcore-persian-calendar-title {
  min-inline-size: 0;
  text-align: center;
  font-family: var(--cloudcore-font-fa);
  font-size: 1rem;
  font-weight: 700;
}

.cloudcore-persian-calendar > .rt-Flex:first-child {
  display: grid !important;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  gap: 0.65rem;
}

.cloudcore-calendar-navigation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  border: 1px solid var(--gray-a6);
  border-radius: var(--radius-2);
  background: var(--gray-a2);
  color: var(--gray-12);
  cursor: pointer;
}

.cloudcore-calendar-navigation:hover,
.cloudcore-calendar-navigation:focus-visible {
  border-color: var(--accent-a8);
  background: var(--accent-a3);
}

.cloudcore-persian-calendar-weekdays,
.cloudcore-persian-calendar-grid {
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.cloudcore-persian-calendar-weekdays {
  margin-block: 0.9rem 0.4rem;
  color: var(--gray-10);
  font-family: var(--cloudcore-font-fa);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.cloudcore-persian-calendar-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: 2.65rem;
  padding: 0.15rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--gray-12);
  cursor: pointer;
  font-family: var(--cloudcore-font-fa);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.cloudcore-persian-calendar-grid button:hover {
  border-color: var(--accent-a7);
  background: var(--accent-a3);
}

.cloudcore-persian-calendar-grid button[aria-selected="true"] {
  background: var(--accent-9);
  color: var(--accent-contrast);
  font-weight: 800;
}

.cloudcore-persian-calendar-grid button[data-cloudcore-today="true"] {
  border-color: var(--accent-9);
  box-shadow: inset 0 0 0 1px var(--accent-a6);
}

.cloudcore-persian-calendar-grid button[data-cloudcore-other-month="true"] {
  color: var(--gray-8);
  opacity: 0.62;
}

.cloudcore-persian-calendar-footer {
  gap: 0.75rem;
  margin-block-start: 0.85rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--gray-a5);
}

.cloudcore-persian-calendar-selected {
  min-inline-size: 0;
  color: var(--gray-11);
  font-family: var(--cloudcore-font-fa);
  font-size: 0.78rem;
  line-height: 1.7;
}

.cloudcore-calendar-today {
  flex: 0 0 auto;
  min-block-size: 2.35rem;
  padding-inline: 0.85rem;
  border: 1px solid var(--accent-a7);
  border-radius: var(--radius-2);
  background: var(--accent-a3);
  color: var(--accent-11);
  cursor: pointer;
  font-family: var(--cloudcore-font-fa);
  font-weight: 700;
}

.cloudcore-calendar-today:hover,
.cloudcore-calendar-today:focus-visible {
  background: var(--accent-a5);
}

@media (max-width: 34rem) {
  .cloudcore-datetime-popover {
    inline-size: calc(100vw - 0.75rem);
    padding: 0.85rem !important;
  }

  .cloudcore-datetime-fields {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .cloudcore-persian-calendar {
    padding: 0.65rem;
    border-radius: var(--radius-3);
  }

  .cloudcore-persian-calendar-weekdays,
  .cloudcore-persian-calendar-grid {
    gap: 0.15rem;
  }

  .cloudcore-persian-calendar-grid button {
    min-block-size: 2.35rem;
    font-size: 0.88rem;
  }

  .cloudcore-persian-calendar-footer {
    align-items: stretch !important;
    flex-direction: column;
  }

  .cloudcore-calendar-today {
    inline-size: 100%;
  }
}

.cloudcore-client-activity {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2147483000;
  block-size: 3px;
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-8), var(--accent-11), var(--accent-8));
}

html[dir="rtl"] .cloudcore-client-activity {
  transform-origin: right center;
}

html[data-cloudcore-client-busy="true"] .cloudcore-client-activity {
  opacity: 1;
  animation: cloudcore-client-progress 1.15s ease-in-out infinite;
}

html[data-cloudcore-client-busy="true"] [data-cloudcore-client-pending="true"] {
  cursor: progress !important;
  opacity: 0.76;
}

@keyframes cloudcore-client-progress {
  0% { transform: scaleX(0); }
  55% { transform: scaleX(0.72); }
  100% { transform: scaleX(1); opacity: 0; }
}

.cloudcore-error-page {
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% -10%, var(--accent-a4), transparent 34rem),
    var(--color-background);
  color: var(--gray-12);
}

.cloudcore-error-panel {
  inline-size: min(100%, 52rem);
  box-sizing: border-box;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 2px solid var(--cloudcore-border);
  border-radius: var(--radius-5);
  background: var(--cloudcore-surface);
  box-shadow: var(--cloudcore-shadow-2);
}

.cloudcore-error-brand-mark,
.cloudcore-error-illustration-mark,
.cloudcore-error-illustration-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cloudcore-error-brand-mark {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-3);
  background: var(--accent-a3);
  color: var(--accent-11);
}

.cloudcore-error-illustration {
  min-block-size: 10rem;
}

.cloudcore-error-illustration-mark {
  position: relative;
  inline-size: 8rem;
  block-size: 8rem;
  border: 2px solid var(--red-a6);
  border-radius: 2.25rem;
  background: linear-gradient(145deg, var(--red-a3), var(--accent-a2));
  color: var(--red-10);
  transform: rotate(-4deg);
}

.cloudcore-error-illustration-badge {
  position: absolute;
  inset-inline-end: -0.75rem;
  inset-block-end: -0.75rem;
  inline-size: 3rem;
  block-size: 3rem;
  border: 2px solid var(--cloudcore-border);
  border-radius: 50%;
  background: var(--color-panel-solid);
  color: var(--accent-11);
}

.cloudcore-error-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: var(--cloudcore-touch-target);
  box-sizing: border-box;
  padding-inline: 1rem;
  border: 2px solid var(--accent-a7);
  border-radius: var(--radius-3);
  background: var(--accent-a3);
  color: var(--accent-11);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.cloudcore-error-action--primary {
  background: var(--accent-9);
  color: var(--accent-contrast);
}

/* Keep dialogs contextual in dark mode instead of blacking out the page. */
.rt-DialogOverlay,
[data-radix-dialog-overlay] {
  background: rgba(15, 23, 42, 0.26) !important;
  backdrop-filter: blur(1px);
}

html.dark .rt-DialogOverlay,
html.dark [data-radix-dialog-overlay] {
  background: rgba(0, 0, 0, 0.42) !important;
}

.cloudcore-notification-item {
  border-width: 2px;
}

.cloudcore-notification-item[data-cloudcore-notification-kind="error"] {
  border-color: var(--red-a7);
}

.cloudcore-notification-item[data-cloudcore-notification-kind="warning"] {
  border-color: var(--amber-a7);
}

.cloudcore-notification-item[data-cloudcore-notification-kind="success"] {
  border-color: var(--green-a7);
}

.cloudcore-async-indicator {
  min-block-size: 2rem;
  padding-inline: 0.75rem;
  border: 2px solid var(--accent-a6);
  border-radius: 999px;
  background: var(--accent-a3);
  color: var(--accent-11);
  white-space: nowrap;
}

.cloudcore-localized-datetime,
.cloudcore-localized-number {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

[data-cloudcore-format-output] {
  display: none;
}

[data-cloudcore-format-ready="true"] > [data-cloudcore-format-fallback] {
  display: none;
}

[data-cloudcore-format-ready="true"] > [data-cloudcore-format-output] {
  display: inline;
}

/* Preserve React's ownership of historical standalone boolean text while
   keeping the artifact out of the visual and accessibility trees. */
[data-cloudcore-boolean-artifact="true"] {
  display: none !important;
}

html.dark .cloudcore-shell,
html.dark .cloudcore-shell-chrome,
html.dark .cloudcore-shell-header,
html.dark .cloudcore-shell-navigation,
html.dark .cloudcore-shell-main,
html.dark [role="dialog"] {
  color: var(--gray-12);
}

html.dark .cloudcore-shell-chrome {
  background: color-mix(in srgb, var(--gray-1) 94%, transparent);
}

html.dark .cloudcore-summary-card,
html.dark .cloudcore-section-card,
html.dark .cloudcore-feedback-state,
html.dark .cloudcore-notification-item {
  background: color-mix(in srgb, var(--gray-2) 92%, transparent);
}

#cloudcore-console-screen > div,
#cloudcore-console-screen canvas {
  inline-size: 100%;
  block-size: 100%;
}

#cloudcore-console-screen canvas {
  outline: none;
}

@media (max-width: 64rem) {
  .cloudcore-shell-main {
    padding-block: 1.25rem;
  }

  .cloudcore-page-actions {
    inline-size: 100%;
    justify-content: flex-start !important;
  }
}

@media (max-width: 42rem) {
  .cloudcore-shell-header,
  .cloudcore-shell-navigation,
  .cloudcore-shell-main {
    padding-inline: 0.75rem;
  }

  .cloudcore-header-controls {
    inline-size: 100%;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
  }

  [dir="rtl"] .cloudcore-header-controls {
    justify-content: flex-end !important;
  }

  .cloudcore-identity-copy {
    display: none !important;
  }

  .cloudcore-workspace-trigger-label,
  .cloudcore-header-clock-label,
  .cloudcore-async-indicator span {
    display: none !important;
  }

  .cloudcore-workspace-trigger {
    padding-inline: 0.65rem !important;
  }

  .cloudcore-identity-trigger {
    padding-inline: 0.35rem !important;
  }

  .cloudcore-page-header {
    align-items: stretch !important;
  }

  .cloudcore-page-title {
    font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
  }

  .cloudcore-page-actions > button,
  .cloudcore-page-actions > a {
    flex: 1 1 auto;
  }

  .cloudcore-feedback-state {
    min-block-size: 210px;
    padding-inline: 1rem;
  }

  [role="dialog"] {
    inline-size: calc(100vw - 1rem) !important;
    max-inline-size: calc(100vw - 1rem) !important;
    padding: 1rem !important;
  }

  .cloudcore-shell-main .rt-TextFieldRoot,
  .cloudcore-shell-main .rt-SelectTrigger,
  .cloudcore-shell-main .rt-TextArea,
  [role="dialog"] .rt-TextFieldRoot,
  [role="dialog"] .rt-SelectTrigger,
  [role="dialog"] .rt-TextArea {
    min-inline-size: 0;
    inline-size: 100%;
  }
}

@media (max-width: 30rem) {
  .cloudcore-shell-header {
    padding-block: 0.65rem;
  }

  .cloudcore-brand [data-accent-color] {
    display: none;
  }

  .cloudcore-header-controls {
    gap: 0.25rem !important;
  }

  .cloudcore-table-region {
    margin-inline: -0.25rem;
    inline-size: calc(100% + 0.5rem);
  }
}