/* ============================================================
   Drawer shell
   ============================================================

   The slide-in panel: an overlay, the panel itself, a header with a title, a
   step label and a close button, a scrolling body, a footer, an error strip, a
   form and field row, and a spinner.

   Structure only. Nothing here paints a button or knows what the drawer is for;
   the consuming component supplies the content and the button intents.

   Why a global stylesheet rather than a component: the applications this came
   from mount several different drawers, and CSS isolation cannot express that -
   a rule in any one component's .razor.css carries that component's scope
   attribute and would not reach the others. Once there is a real shared drawer
   component to own this, these rules belong inside it, which is why the file is
   deliberately small and free of anything feature-specific.

   Names were `rfq-*` in the application this came from, which was never accurate
   even there - a drawer is not an RFQ. They are `ds-drawer*` here.
   ============================================================ */

.ds-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.ds-drawer-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

/* max-width keeps the panel inside the viewport between the mobile breakpoint and its
   own width: at 600px the 700px panel used to hang 100px off the left edge, taking the
   start of every line of its content with it. */
.ds-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 700px;
  max-width: 100%;
  height: 100dvh;
  background: var(--ds-surface);
  z-index: 801;
  transform: translateX(105%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(15, 23, 42, 0.12);
}

.ds-drawer--open {
  transform: translateX(0);
}

/* Half-screen variant used by the internal dashboard Create RFQ drawer. A
   modifier of this shell, so it belongs with the shell. */
/* min-width is what makes this the WIDE drawer, but a minimum larger than the screen is
   not a minimum, it is an overflow: a flat 560px put the panel 170px off the left edge
   of a 390px phone. Capping the minimum at the viewport keeps the intent - never
   narrower than 560px when there is room - and yields to the screen when there is not.
   Above 560px nothing here changes. */
.ds-drawer--wide {
  width: 50vw;
  min-width: min(560px, 100%);
  max-width: 920px;
}

/* --- Header ---------------------------------------------------------------- */
.ds-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--ds-divider);
  flex-shrink: 0;
}

.ds-drawer__header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ds-drawer__title {
  font-size: var(--ds-text-20);
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.ds-drawer__step-label {
  font-size: var(--ds-text-13);
  color: var(--ds-text-secondary);
  margin: 0;
}

.ds-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-text-muted);
  padding: 6px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: -2px;
}

.ds-drawer__close:hover {
  color: var(--ds-text-body);
  background: var(--ds-surface-sunken);
}

/* --- Body and form --------------------------------------------------------- */
.ds-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  overscroll-behavior: contain;
}

.ds-drawer-form {
  display: flex;
  flex-direction: column;
}

.ds-drawer__error {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: var(--ds-warning-text);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: var(--ds-text-13);
  margin-bottom: 16px;
}

.ds-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* --- Footer and actions ---------------------------------------------------- */
.ds-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 28px;
  border-top: 1px solid var(--ds-divider);
  flex-shrink: 0;
  background: var(--ds-surface-alt);
}


@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

.ds-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--ds-white);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* There was a rule here sizing drawer inputs at 0.875rem. It is gone, and with it
   an inconsistency: the drawers now use MudBlazor's own 16px for every control.

   The rule had four selectors and they did not behave alike. Three of them -
   .ds-drawer .mud-input-slot, .ds-drawer .mud-input input and
   .ds-drawer .mud-input textarea - tied exactly on specificity (0,2,1) with
   MudBlazor's `.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root
   { font-size: inherit }` and lost on link order, so they never did anything.

   The fourth, .ds-drawer .mud-select-input, did win. MudBlazor puts
   mud-select-input on the wrapper of a MudSelect/MudAutocomplete, and at (0,2,0)
   this outranked MudBlazor's `.mud-typography-subtitle1` (0,1,0) on that wrapper -
   on specificity, so load order never saved it. The field's inputs then inherited
   14px down the chain. Plain MudTextFields have no such class, kept the 16px, and
   sat next to the smaller selects.

   That is why only some fields were affected: none in the public Create-RFQ
   drawer, 4 in the Proposal drawer's one autocomplete, 16 across the internal
   drawer's four. Removing the rule lets those wrappers inherit MudBlazor's 16px
   like everything beside them. It also clears the last obstacle to reordering the
   stylesheets: with MudBlazor linked first the three dormant selectors would have
   started winning and taken every drawer control down to 14px. */

@media (max-width: 540px) {
  .ds-drawer {
    width: 100%;
  }

  .ds-field-row {
    grid-template-columns: 1fr;
  }
}