/* ==========================================================================
   FlexOps Ship Manager - Portal-Specific Theme
   Common Radzen overrides are now in the shared library:
   _content/FlexOps.Blazor.Shared/css/flexops-radzen-overrides.css
   This file only contains Ship Manager-specific rules.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Base Styles
   -------------------------------------------------------------------------- */
body {
  background-color: var(--flexops-bg-secondary) !important;
  color: var(--flexops-text-primary);
  font-family: var(--flexops-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

::selection {
  background-color: var(--flexops-brand-100);
  color: var(--flexops-brand-900);
}

html {
  scroll-behavior: smooth;
}


/* Striped rows are now in the shared library:
   flexops-radzen-overrides.css §18 */


/* --------------------------------------------------------------------------
   2. Status Indicators
   -------------------------------------------------------------------------- */
.test-status {
  font-weight: var(--font-weight-semibold);
  margin-left: var(--flexops-space-2);
}

/* .test-status.* only. The .success-text / .error-text / .warning-text /
   .info-text aliases that shared these rules had zero usages across every
   component in the app and are removed. They also carried four of the contrast
   failures found in the 2026-08-12 audit — dead rules that made the real problem
   look bigger than it was. .test-status is applied dynamically
   (ApiTesting.razor:171, class="test-status @api.Status.ToLower()"), so a text
   search for ".test-status.success" finds nothing; it is live. */
.test-status.success {
  color: var(--flexops-success-600);
}

.test-status.error {
  color: var(--flexops-error-600);
}

.test-status.running {
  color: var(--flexops-warning-600);
}


/* Alert/message styling (.rz-message) is now in the shared library:
   flexops-radzen-overrides.css §16 */

/* Progress bar styling (.rz-progressbar) is now in the shared library:
   flexops-radzen-overrides.css §17 */

/* --------------------------------------------------------------------------
   3. Utility Classes
   -------------------------------------------------------------------------- */

.batch-controls {
  background-color: var(--flexops-bg-primary);
  padding: var(--flexops-space-4);
  border-radius: var(--flexops-radius-xl);
  margin-bottom: var(--flexops-space-4);
  border: 1px solid var(--flexops-border-secondary);
  box-shadow: var(--flexops-shadow-xs);
}

.batch-row-invalid > td {
  background-color: var(--flexops-warning-50) !important;
  border-top: 1px solid var(--flexops-warning-200) !important;
  border-bottom: 1px solid var(--flexops-warning-200) !important;
}

.batch-row-invalid > td:first-child {
  border-left: 3px solid var(--flexops-warning-600) !important;
}

.batch-missing-fields {
  color: var(--flexops-warning-700);
  font-weight: var(--font-weight-semibold);
  white-space: normal;
}

.batch-field-missing .rz-inputtext,
.batch-field-missing input {
  background-color: var(--flexops-warning-50) !important;
  border-color: var(--flexops-warning-400) !important;
}

.pack-scan-panel {
  border-left: 4px solid var(--flexops-brand-600);
}

.pack-scan-input {
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold);
}

.pack-scan-input input {
  min-height: 44px;
}


/* --------------------------------------------------------------------------
   4. Ship It order-detail panels
   Replaces the per-card `height: 200px` / hand-typed font sizes that used to
   sit inline on every card in AddressSummarySection. Fixed heights clipped a
   long sender block while leaving a short recipient block half empty, and the
   card TITLE carried the same 16px/700 as the customer NAME below it, so the
   label competed with its own value.
   -------------------------------------------------------------------------- */
.shipit-panel {
  width: 100%;
  max-width: 503px;
  min-height: 160px;            /* floor, not a ceiling - content may exceed it */
}

/* Card title = a LABEL. Smaller, lighter, uppercase - it names the value, it
   does not compete with it. */
.shipit-card-label {
  display: block;
  margin-bottom: var(--flexops-space-3);
  color: var(--flexops-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The value the operator actually reads. */
.shipit-value-strong {
  display: block;
  width: 100%;
  margin-bottom: var(--flexops-space-1);
  color: var(--flexops-text-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.shipit-value {
  display: block;
  width: 100%;
  margin-bottom: var(--flexops-space-1);
  color: var(--flexops-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.shipit-value--last {
  margin-bottom: var(--flexops-space-4);
}

/* Two-column body: the gutter BETWEEN the columns must exceed the padding
   INSIDE a card, or the groups read as closer to each other than to their own
   contents. Radzen's stack gap was 16px against ~24px card padding. */
.shipit-order-details .rz-stack {
  gap: var(--flexops-space-6);
}

/* The two body columns are flex siblings with the default `align-items: stretch`,
   so the SHORT column was being stretched to the height of the TALL one. That is
   where the ~550px of blank space under the Rates card came from - it was not
   empty content, it was a stretched box. Top-align them and each column ends
   where its content ends. */

/* A disabled button should read as inert, not as a faded version of a live one.
   Radzen dims the brand fill with opacity, which left Reset/Save/Buy Label as
   washed-out pink and lavender - closer to an error state than to "not yet". */
.shipit-order-details .rz-button:disabled,
.shipit-order-details .rz-button.rz-state-disabled {
  background-color: var(--flexops-bg-tertiary) !important;
  border-color: var(--flexops-border-secondary) !important;
  color: var(--flexops-text-disabled) !important;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   9. Responsive Adjustments
   — !important on .rz-* selectors to override Radzen responsive defaults
   -------------------------------------------------------------------------- */
/* No max-width: 768px block. Ship Manager is desktop-only at a 1280px minimum,
   so rules for a 768px viewport only fire outside the supported range — and
   their presence reads as partial mobile support that does not exist and is not
   planned. Anything below 1280 is out of scope by product decision, not a bug
   waiting for more breakpoints. */


/* --------------------------------------------------------------------------
   10. Print Styles
   — !important is standard practice in print media queries
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: white !important;
  }

  .rz-sidebar,
  .rz-header,
  .rz-button {
    display: none !important;
  }

  .rz-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}


/* -------------------------------------------------------------------
 * Flat-rate box / preset pickers (PackageEditorSection dropdown templates)
 *
 * These templates carried twelve inline styles. Two of them asked for the
 * SAME token with DIFFERENT literal fallbacks -- var(--flexops-text-tertiary,
 * #475467) and var(--flexops-text-tertiary, #555) -- so the file disagreed
 * with itself about a colour that neither literal ever renders, because the
 * token is defined. That is the pattern check-css-vars.sh exists to catch.
 *
 * Radzen portals a dropdown popup out of the component's subtree, so these
 * live here as global classes rather than in a scoped .razor.css.
 * ------------------------------------------------------------------- */
.pkg-option {
    display: flex;
    align-items: center;
}

.pkg-option__label {
    cursor: pointer;
}

/* Standalone, NOT .pkg-option + a modifier: the row it replaces set no
   align-items, and inheriting center would centre the stacked children
   horizontally instead of leaving them on the leading edge. */
.pkg-option--stacked {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: var(--flexops-space-1) 0;
}

.pkg-preset-option {
    display: flex;
    flex-direction: column;
    gap: var(--flexops-space-1);
}

.pkg-preset-option__summary {
    font-size: var(--text-xs);
    color: var(--flexops-text-tertiary);
}

.pkg-carrier-logo {
    width: 80px;
    height: 20px;
    margin-right: var(--flexops-space-2);
    flex-shrink: 0;
}

/* Two sizes on purpose: the option list leads with the box name (was 1.1em),
   the selected value sits inline and stays at body size (was 1em). */
.pkg-box-name {
    font-size: var(--text-base);
    line-height: 1.4;
}

.pkg-box-name--value {
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* Indented to sit under the box name rather than the logo. Was a hand-tuned
   90px; the real offset is the logo plus its gutter, so it now derives from
   the same values .pkg-carrier-logo uses and cannot drift from them. */
.pkg-box-dims {
    font-size: var(--text-sm);
    color: var(--flexops-text-tertiary);
    line-height: 1.4;
    margin-left: calc(80px + var(--flexops-space-2));
}