@import url('./main-layout.css');
@import url('./views/login-view.css');
@import url('./views/stocks-view.css');
@import url('./views/customers-view.css');
@import url('./views/calendar-view.css');
@import url('./views/expenses-view.css');
@import url('./views/checkout-view.css');
@import url('./views/help-view.css');
@import url('./views/reviews-view.css');
@import url('./profile-styles.css');

/* SarrafCloud unified palette
   Brand text:        #121358 (deep navy, primary text on light surfaces)
   Brand background:  #232F72 (navy, primary brand accent for buttons/headers)
   Everything else derived to harmonize and preserve readability. */
html {
  /* Brand palette */
  --sc-primary:         #232F72;
  --sc-primary-dark:    #121358;
  --sc-primary-hover:   #1A2363;
  --sc-primary-active:  #0E1148;
  --sc-primary-50:      #5762B6;
  --sc-primary-20:      #D3D7EA;
  --sc-primary-10:      #E8EAF5;
  --sc-primary-05:      #F4F6FB;
  --sc-on-primary:      #FFFFFF;
  --sc-accent-gold:     #C9A35E;
  /* Side-rail backdrop for desktop layouts — uses the same tint that
     the hanger buttons sit on so the app reads as one continuous fabric. */
  --sc-rail:            var(--sc-primary-10);

  /* Text */
  --sc-text:            #121358;
  --sc-text-secondary:  #4A5283;
  --sc-text-muted:      #7A82A8;
  --sc-text-disabled:   #ADB1CC;
  --sc-text-on-dark:    #FFFFFF;

  /* Surfaces / borders */
  --sc-surface:         #FFFFFF;
  --sc-surface-subtle:  #F4F6FB;
  --sc-surface-muted:   #E8EAF5;
  --sc-border:          #D8DDED;
  --sc-border-strong:   #B0B5D5;

  /* Semantic (muted, palette-friendly) */
  --sc-success:         #1F7A4A;
  --sc-success-bg:      #E5F3EC;
  --sc-success-text:    #0F4A2E;
  --sc-error:           #B2253B;
  --sc-error-bg:        #FBE7EB;
  --sc-error-text:      #7A1626;
  --sc-warning:         #C97614;
  --sc-warning-bg:      #FAEFD9;
  --sc-warning-border:  #E8C97C;
  --sc-warning-text:    #6D3F09;
  --sc-info:            #2A8FA8;
  --sc-info-bg:         #E2F1F5;
  --sc-info-text:       #14515F;

  /* Lumo overrides so all Vaadin components pick up the palette */
  --lumo-primary-color:           var(--sc-primary);
  --lumo-primary-color-50pct:     rgba(35, 47, 114, 0.5);
  --lumo-primary-color-10pct:     rgba(35, 47, 114, 0.1);
  --lumo-primary-text-color:      var(--sc-primary-dark);
  --lumo-primary-contrast-color:  var(--sc-on-primary);

  --lumo-error-color:             var(--sc-error);
  --lumo-error-color-50pct:       rgba(178, 37, 59, 0.5);
  --lumo-error-color-10pct:       rgba(178, 37, 59, 0.1);
  --lumo-error-text-color:        var(--sc-error-text);
  --lumo-error-contrast-color:    var(--sc-on-primary);

  --lumo-success-color:           var(--sc-success);
  --lumo-success-color-50pct:     rgba(31, 122, 74, 0.5);
  --lumo-success-color-10pct:     rgba(31, 122, 74, 0.1);
  --lumo-success-text-color:      var(--sc-success-text);
  --lumo-success-contrast-color:  var(--sc-on-primary);

  --lumo-base-color:              #FAFAFC;

  /* Uniform 15px corners across the app. Override all three Lumo
     border-radius scales — anywhere `var(--lumo-border-radius-*)` is
     used (Vaadin components, internal cards, badges) it resolves to 15. */
  --lumo-border-radius-s:         15px;
  --lumo-border-radius-m:         15px;
  --lumo-border-radius-l:         15px;

  /* Three-level elevation scale, navy-tinted to match the brand.
     `sm` — subtle (small cards, list items, badges)
     `md` — prominent (cards on the rail, navbar, hover lift)
     `lg` — strong (modals, login card, popovers) */
  --sc-shadow-sm:     0 2px 6px rgba(18, 19, 88, 0.08);
  --sc-shadow-md:     0 6px 18px rgba(18, 19, 88, 0.10);
  --sc-shadow-lg:     0 16px 40px rgba(18, 19, 88, 0.16);

  /* Bind Vaadin's Lumo box-shadow tokens to the same scale so any
     component that uses `var(--lumo-box-shadow-*)` participates. */
  --lumo-box-shadow-xs: var(--sc-shadow-sm);
  --lumo-box-shadow-s:  var(--sc-shadow-sm);
  --lumo-box-shadow-m:  var(--sc-shadow-md);
  --lumo-box-shadow-l:  var(--sc-shadow-md);
  --lumo-box-shadow-xl: var(--sc-shadow-lg);

  --lumo-body-text-color:         var(--sc-text);
  --lumo-header-text-color:       var(--sc-primary-dark);
  --lumo-secondary-text-color:    var(--sc-text-secondary);
  --lumo-tertiary-text-color:     var(--sc-text-muted);
}

/* Desktop-only: navy side rails around constrained views.
   AppLayout v24's content area has no `part` so we set bg on the host
   itself — it shows through the transparent [content] wrapper inside
   the shadow DOM. Routed views get a white surface that fully covers
   their box (min-height: 100% prevents navy peeking through gaps from
   views like calendar that center their content vertically). */
@media (min-width: 800px) {
  vaadin-app-layout {
    background-color: var(--sc-rail);
    background-image: url('./images/sarraf-pattern.svg');
    background-repeat: repeat;
    background-size: 150px 150px;
    background-position: 0 0;
    background-attachment: fixed;
  }

  /* Shared card surface — both constrained and full-width views inherit
     centering (margin-inline: auto) and chrome. Only `max-width` differs
     between them, so the morph animation only needs to animate that one
     property — centering happens naturally throughout. */
  vaadin-app-layout > :not([slot]) {
    background-color: var(--lumo-base-color);
    margin-block: 15px;
    margin-inline: auto;
    min-height: calc(100% - 30px);
    box-sizing: border-box;
    border-radius: 15px;
    box-shadow: var(--sc-shadow-md);
  }

  /* Constrained views: capped at 1200px AND always leaves at least 15px
     on each side. `min(1200px, calc(100% - 30px))` collapses the cap as
     the viewport shrinks so the auto-margin always splits 30px → 15px
     each, matching the full-width view's 15px frame. */
  vaadin-app-layout > :not([slot]):not(.full-width-view):not(.sc-bare-view) {
    max-width: min(1200px, calc(100% - 30px));
  }

  /* Wide views (calendar, inventory): same shared card logic, just a
     larger cap than the 1200px constrained views — their charts/cards
     have their own natural width and never need the whole viewport.
     `min(..., calc(100% - 30px))` still guarantees the 15px side gap. */
  vaadin-app-layout > .full-width-view {
    max-width: min(1500px, calc(100% - 30px));
  }

  /* Opt-out: bare-canvas views (login etc.) own the entire content area
     — no white card, no margin, no radius, no shadow. The view paints
     its own background and lays out its own centered content. */
  vaadin-app-layout > .sc-bare-view {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding-top: 0;
    min-height: 100%;
  }

  /* Card-shape morph between constrained ↔ full-width.
     ONLY `max-width` is animated — the shared `margin-inline: auto`
     re-centers the card on every frame as its width changes, so the
     card never drifts off-center mid-morph. The mid keyframe overshoots
     past the target width so the snap reads as a real bounce. */
  @keyframes sc-card-expand {
    0%   { max-width: 1200px; }
    65%  { max-width: min(1560px, calc(100% - 6px)); }
    100% { max-width: min(1500px, calc(100% - 30px)); }
  }

  @keyframes sc-card-shrink {
    0%   { max-width: min(1500px, calc(100% - 30px)); }
    65%  { max-width: 1100px; }
    100% { max-width: 1200px; }
  }

  vaadin-app-layout > .sc-transition-expand {
    animation: sc-card-expand 0.42s cubic-bezier(0.25, 0.85, 0.3, 1) backwards;
  }

  vaadin-app-layout > .sc-transition-shrink {
    animation: sc-card-shrink 0.42s cubic-bezier(0.25, 0.85, 0.3, 1) backwards;
  }
}

/* === Industry-standard spacing polish ===
   Normalize the small inconsistencies between views so the hierarchy
   reads cleanly: balanced grid cell padding, calmer heading rhythm,
   consistent vertical gap between first-level sections of a view. */

/* Grid cells: 8px / 16px balanced padding (header + body + footer match) */
vaadin-grid::part(cell),
vaadin-grid::part(header-cell),
vaadin-grid::part(footer-cell) {
  padding-block: var(--lumo-space-s);
  padding-inline: var(--lumo-space-m);
}

/* Headings: tighter rhythm with the following block — avoids the
   chunky double-spacing that comes from the browser's default UA margins
   stacking with Vaadin's section gaps. */
vaadin-app-layout :is(h1, h2, h3, h4) {
  margin-block-start: 0;
  margin-block-end: var(--lumo-space-s);
  line-height: 1.25;
}

/* First-level sections in a routed view: consistent 16px gap.
   Targets direct children of the routed view so each level keeps its
   own padding/gap inside, but the page-level rhythm is uniform. */
@media (min-width: 800px) {
  vaadin-app-layout > :not([slot]):not(.full-width-view) > * + * {
    margin-block-start: var(--lumo-space-m);
  }
}

/* Consistent top breathing room inside every routed view's white area.
   Applies on all screen sizes so the page never feels glued to the
   navbar. Overrides views that called setPadding(false) on themselves;
   side/bottom padding is left to each view's own preference. */
vaadin-app-layout > :not([slot]) {
  padding-top: var(--lumo-space-l);
}

/* Full-width views (calendar, inventory) need less top padding — their
   content already uses every horizontal pixel so a tighter top reads
   better. */
vaadin-app-layout > .full-width-view {
  padding-top: 12px;
}

/* Customers view extends Div which has no default padding — add the
   horizontal breathing room so the grid doesn't kiss the white card edges.
   box-sizing: border-box keeps that padding inside the setSizeFull() 100%
   width so the view doesn't overflow the viewport horizontally on phones. */
.customers-view {
  box-sizing: border-box;
  padding-inline: var(--lumo-space-l);
}

/* Stocks view, narrow screens (≤ 800px): hide the count badges next to the
   tab labels (jewelry, bullions, …) — they don't fit on a phone.
   The karat ("ayar") + stock filters are NOT handled here: the resize script
   in GridLayout measures the real row width on every resize and toggles them
   itself, so a CSS rule here would only fight that measurement. */
@media (max-width: 800px) {
  vaadin-tabs vaadin-tab span[theme~='badge'] {
    display: none;
  }
}

/* Range + metric selects rendered as one joined segmented control: drop the
   gap, square the touching corners and add a thin divider between them. Both
   stocks (filter row) and hangers (control row) reuse this. */
.stocker-joined-selects {
  gap: 0 !important;
  flex-shrink: 0;
}
.stocker-joined-selects > vaadin-select:not(:last-child)::part(input-field) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.stocker-joined-selects > vaadin-select:not(:first-child)::part(input-field) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid var(--lumo-contrast-20pct);
}

/* The right-side product drawer sits at z-index 1001; field dropdown overlays
   default to z-index 200 (vaadin-overlay :host), so they'd open BEHIND it —
   e.g. the labor (işçilik) combobox menu inside the drawer. Lift the input
   overlays above the drawer. !important is needed to beat the shadow :host. */
vaadin-combo-box-overlay,
vaadin-select-overlay,
vaadin-date-picker-overlay,
vaadin-time-picker-overlay {
  z-index: 1100 !important;
}