/* =========================================================
   ROUTIQ SHIPPING CORE
   FILE: cores/shipping/shipping.css
========================================================= */

:root {
  --shipping-bg:
    #f4f1f1;

  --shipping-surface:
    #ffffff;

  --shipping-surface-soft:
    #fbf7f7;

  --shipping-border:
    #e3d7d7;

  --shipping-text:
    #2b2020;

  --shipping-text-secondary:
    #756464;

  --shipping-text-muted:
    #9d8e8e;

  --shipping-primary:
    #b83a3a;

  --shipping-primary-dark:
    #7f2529;

  --shipping-primary-soft:
    #f7e8e8;

  --shipping-green:
    #3f8b61;

  --shipping-blue:
    #4b6f9f;

  --shipping-shadow:
    0 18px 44px
    rgba(87, 35, 35, 0.08);
}


/* =========================================================
   FOUNDATION
========================================================= */

* {
  box-sizing:
    border-box;
}


body {
  margin: 0;
}


button,
input,
select {
  font: inherit;
}


button {
  cursor: pointer;
}


[hidden] {
  display:
    none !important;
}


/* =========================================================
   SHIPPING HEADER
========================================================= */

.shipping-header {
  background:
    linear-gradient(
      110deg,
      #4d1518 0%,
      #76262a 48%,
      #3f1114 100%
    );

  border-bottom-color:
    rgba(201, 85, 85, 0.42);
}


.shipping-header
.page-title-block h1,

.shipping-header
.header-date,

.shipping-header
.header-time,

.shipping-header
.user-info strong {
  color:
    #fff5f5;
}


.shipping-header
.page-title-block p,

.shipping-header
.user-info p {
  color:
    rgba(255, 245, 245, 0.66);
}


.shipping-header
.header-feed,

.shipping-header
.feed-track {
  color:
    #ef9c9c;
}


/* =========================================================
   PAGE
========================================================= */

.shipping-page {
  min-height:
    calc(100vh - 72px);

  padding:
    34px
    clamp(24px, 3.2vw, 58px)
    54px;

  color:
    var(--shipping-text);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(184, 58, 58, 0.11),
      transparent 31%
    ),
    var(--shipping-bg);
}


.shipping-heading,
.summary-grid,
.main-grid,
.secondary-grid,
.activity-card {
  max-width:
    1680px;

  margin-left:
    auto;

  margin-right:
    auto;
}


/* =========================================================
   HEADING
========================================================= */

.shipping-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

  margin-bottom:
    26px;
}


.shipping-heading h1 {
  margin:
    0;

  font-size:
    clamp(
      1.85rem,
      2.5vw,
      2.65rem
    );

  letter-spacing:
    -0.04em;
}


.shipping-heading p {
  margin:
    8px 0 0;

  color:
    var(--shipping-text-secondary);
}


.section-kicker {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--shipping-primary);

  font-size:
    0.69rem;

  font-weight:
    760;

  letter-spacing:
    0.15em;
}


.system-pill {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    10px 14px;

  color:
    var(--shipping-primary);

  background:
    #ffffff;

  border:
    1px solid
    var(--shipping-border);

  border-radius:
    999px;

  font-size:
    0.78rem;

  font-weight:
    700;
}


.system-pill span {
  width:
    8px;

  height:
    8px;

  background:
    var(--shipping-primary);

  border-radius:
    50%;

  box-shadow:
    0 0 0 4px
    rgba(184, 58, 58, 0.12);
}


/* =========================================================
   SUMMARY
========================================================= */

.summary-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    16px;

  margin-bottom:
    22px;
}


.summary-grid article,
.card {
  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  border:
    1px solid
    var(--shipping-border);

  border-radius:
    18px;

  box-shadow:
    var(--shipping-shadow);
}


.summary-grid article {
  display:
    flex;

  min-height:
    105px;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    20px;
}


.summary-grid span {
  color:
    var(--shipping-text-secondary);

  font-size:
    0.75rem;

  font-weight:
    680;
}


.summary-grid strong {
  color:
    var(--shipping-primary-dark);

  font-size:
    2rem;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.main-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(420px, 0.85fr);

  gap:
    22px;

  margin-bottom:
    22px;
}


.secondary-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(420px, 0.8fr);

  gap:
    22px;

  margin-bottom:
    22px;
}


.card {
  min-width:
    0;

  padding:
    22px;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-head,
.subhead {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;
}


.section-head {
  margin-bottom:
    18px;
}


.subhead {
  margin:
    24px 0 14px;
}


.section-head h2,
.subhead h3 {
  margin:
    0;

  font-size:
    1.04rem;
}


.head-actions {
  display:
    flex;

  gap:
    10px;
}


.head-actions input {
  min-width:
    240px;
}


/* =========================================================
   FORM
========================================================= */

input,
select {
  min-height:
    42px;

  padding:
    9px 11px;

  color:
    var(--shipping-text);

  background:
    var(--shipping-surface-soft);

  border:
    1px solid
    var(--shipping-border);

  border-radius:
    8px;

  outline:
    none;
}


input:focus,
select:focus {
  border-color:
    var(--shipping-primary);

  box-shadow:
    0 0 0 3px
    rgba(184, 58, 58, 0.1);
}


.form-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    13px;
}


.form-grid label,
.label-controls label {
  display:
    grid;

  gap:
    6px;

  color:
    var(--shipping-text-secondary);

  font-size:
    0.63rem;

  font-weight:
    700;
}


.wide {
  grid-column:
    1 / -1;
}


/* =========================================================
   BUTTONS
========================================================= */

button {
  min-height:
    42px;

  padding:
    10px 15px;

  color:
    var(--shipping-primary);

  background:
    #ffffff;

  border:
    1px solid
    #d6b8b8;

  border-radius:
    8px;

  font-size:
    0.73rem;

  font-weight:
    720;
}


button.primary,
#browseFreight {
  color:
    #ffffff;

  background:
    linear-gradient(
      90deg,
      var(--shipping-primary-dark),
      var(--shipping-primary)
    );

  border-color:
    var(--shipping-primary);
}


.actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    10px;

  margin-top:
    18px;
}


/* =========================================================
   TABLE
========================================================= */

.table-wrap {
  overflow-x:
    auto;
}


table {
  width:
    100%;

  min-width:
    1100px;

  border-collapse:
    collapse;
}


th,
td {
  padding:
    12px 10px;

  text-align:
    left;

  border-bottom:
    1px solid
    var(--shipping-border);

  font-size:
    0.67rem;
}


th {
  color:
    var(--shipping-text-muted);

  background:
    #fbf8f8;
}


td {
  color:
    var(--shipping-text-secondary);
}


tbody tr {
  cursor:
    pointer;
}


tbody tr:hover,
tbody tr.selected {
  background:
    var(--shipping-primary-soft);
}


/* =========================================================
   STATUS
========================================================= */

.status {
  display:
    inline-flex;

  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:
    0.6rem;

  font-weight:
    760;
}


.neutral {
  color:
    var(--shipping-text-muted);

  background:
    #f1eded;
}


.packing {
  color:
    #8b5d24;

  background:
    #f8efdf;
}


.quoted {
  color:
    var(--shipping-primary-dark);

  background:
    var(--shipping-primary-soft);
}


.scheduled {
  color:
    #315f8f;

  background:
    #e9f1f8;
}


.shipped {
  color:
    #2f704f;

  background:
    #e7f4ec;
}


.exception {
  color:
    #ffffff;

  background:
    var(--shipping-primary);
}


.empty {
  padding:
    50px 20px;

  color:
    var(--shipping-text-muted);

  text-align:
    center;
}


/* =========================================================
   PACKAGE DETAILS
========================================================= */

.package-list {
  display:
    grid;

  gap:
    10px;
}


.package-row {
  display:
    grid;

  grid-template-columns:
    0.9fr
    repeat(
      4,
      minmax(70px, 1fr)
    )
    auto;

  gap:
    9px;

  align-items:
    end;

  padding:
    12px;

  background:
    var(--shipping-surface-soft);

  border:
    1px solid
    var(--shipping-border);

  border-radius:
    10px;
}


.package-row label {
  display:
    grid;

  gap:
    5px;

  color:
    var(--shipping-text-muted);

  font-size:
    0.56rem;
}


.remove-package {
  width:
    38px;

  height:
    38px;

  padding:
    0;
}


.package-summary {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    12px;

  margin-top:
    12px;
}


.package-summary > div {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    14px;

  background:
    var(--shipping-primary-soft);

  border:
    1px solid
    #e3c7c7;

  border-radius:
    9px;
}


.package-summary span {
  color:
    var(--shipping-text-secondary);

  font-size:
    0.67rem;
}


.package-summary strong {
  color:
    var(--shipping-primary-dark);
}


/* =========================================================
   FREIGHT DROP ZONE
========================================================= */

.drop-zone {
  display:
    flex;

  min-height:
    285px;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    34px;

  text-align:
    center;

  background:
    linear-gradient(
      145deg,
      #fffafa,
      #f8eded
    );

  border:
    1.5px dashed
    #c99999;

  border-radius:
    14px;
}


.drop-zone.dragging {
  background:
    var(--shipping-primary-soft);

  border-color:
    var(--shipping-primary);
}


.drop-icon {
  color:
    var(--shipping-primary);

  font-size:
    2.5rem;
}


.drop-zone h3 {
  margin:
    0;
}


.drop-zone p {
  max-width:
    580px;

  margin:
    0;

  color:
    var(--shipping-text-secondary);

  font-size:
    0.75rem;
}


.file-types {
  display:
    flex;

  gap:
    7px;
}


.file-types span {
  padding:
    4px 8px;

  background:
    #ffffff;

  border:
    1px solid
    var(--shipping-border);

  border-radius:
    5px;

  font-size:
    0.57rem;
}


.message {
  min-height:
    20px;

  margin-top:
    12px;

  font-size:
    0.68rem;
}


.review {
  margin-top:
    20px;

  padding-top:
    20px;

  border-top:
    1px solid
    var(--shipping-border);
}


/* =========================================================
   LABEL PREVIEW
========================================================= */

.label-preview {
  position:
    relative;

  display:
    grid;

  min-height:
    360px;

  align-content:
    center;

  justify-items:
    center;

  gap:
    22px;

  padding:
    28px;

  text-align:
    center;

  background:
    #ffffff;

  border:
    2px solid
    #111111;

  aspect-ratio:
    1.414 / 1;
}


.label-po {
  font-size:
    clamp(
      2.2rem,
      4vw,
      4.8rem
    );

  font-weight:
    900;
}


.label-customer {
  max-width:
    100%;

  font-size:
    clamp(
      2.4rem,
      4.5vw,
      5.5rem
    );

  font-weight:
    900;

  line-height:
    1.02;

  overflow-wrap:
    anywhere;
}


.label-destination {
  font-size:
    clamp(
      2.3rem,
      4vw,
      4.8rem
    );

  font-weight:
    900;
}


.label-sequence {
  position:
    absolute;

  right:
    22px;

  bottom:
    16px;

  font-size:
    0.9rem;

  font-weight:
    800;
}


.label-controls {
  display:
    grid;

  grid-template-columns:
    0.65fr
    1.35fr;

  gap:
    12px;

  margin-top:
    16px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width: 1200px
) {

  .main-grid,
  .secondary-grid {
    grid-template-columns:
      1fr;
  }


  .summary-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}


@media (
  max-width: 800px
) {

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


  .form-grid,
  .label-controls {
    grid-template-columns:
      1fr;
  }


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

}


/* =========================================================
   A4 LANDSCAPE PRINT
========================================================= */

@media print {

  body * {
    visibility:
      hidden !important;
  }


  .label-preview,
  .label-preview * {
    visibility:
      visible !important;
  }


  .label-preview {
    position:
      fixed;

    inset:
      0;

    width:
      100vw;

    height:
      100vh;

    border:
      0;

    aspect-ratio:
      auto;
  }


  @page {
    size:
      A4 landscape;

    margin:
      0;
  }

}

/* =========================================================
   SHIPPING HEADER COMPLETION
========================================================= */

.shipping-header .header-divider {
  background:
    rgba(230, 132, 132, 0.34);
}


.shipping-header .header-svg-icon,
.shipping-header .user-avatar svg,
.shipping-header .chevron-svg {
  color:
    #e7a0a0;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.shipping-header .user-avatar {
  color:
    #e7a0a0;

  background:
    rgba(184, 58, 58, 0.16);

  border-color:
    rgba(225, 119, 119, 0.3);
}


.shipping-header .user-block:hover {
  background:
    rgba(225, 119, 119, 0.1);
}


/* =========================================================
   SHIPPING THEME TOGGLE
========================================================= */

.shipping-header .theme-toggle {
  position:
    relative;

  display:
    inline-flex;

  width:
    58px;

  min-width:
    58px;

  height:
    30px;

  min-height:
    30px;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 7px;

  overflow:
    hidden;

  color:
    #efb4b4;

  background:
    rgba(48, 9, 12, 0.36);

  border:
    1px solid
    rgba(222, 107, 107, 0.36);

  border-radius:
    999px;

  cursor:
    pointer;

  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}


.shipping-header .theme-toggle:hover {
  border-color:
    rgba(238, 142, 142, 0.7);

  box-shadow:
    0 0 0 3px
    rgba(184, 58, 58, 0.12);
}


.shipping-header .theme-toggle:focus-visible {
  outline:
    2px solid
    #ef9c9c;

  outline-offset:
    3px;
}


.shipping-header .toggle-knob {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    22px;

  height:
    22px;

  background:
    #c44c4c;

  border-radius:
    50%;

  box-shadow:
    0 3px 8px
    rgba(37, 5, 8, 0.36),
    inset 0 1px 0
    rgba(255, 255, 255, 0.34);

  transition:
    transform 180ms ease,
    background-color 180ms ease;
}


.shipping-header .toggle-sun,
.shipping-header .toggle-moon {
  position:
    relative;

  z-index:
    2;

  width:
    13px;

  height:
    13px;

  fill:
    none;

  color:
    #efb4b4;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  pointer-events:
    none;
}


.shipping-header .toggle-sun {
  opacity:
    1;
}


.shipping-header .toggle-moon {
  opacity:
    0.58;
}


/* =========================================================
   DARK MODE VARIABLES
========================================================= */

body.shipping-dark-mode {
  --shipping-bg:
    #171313;

  --shipping-surface:
    #241d1e;

  --shipping-surface-soft:
    #2b2223;

  --shipping-border:
    #493638;

  --shipping-text:
    #f4eded;

  --shipping-text-secondary:
    #c9b9bb;

  --shipping-text-muted:
    #98878a;

  --shipping-primary:
    #dc6666;

  --shipping-primary-dark:
    #f08383;

  --shipping-primary-soft:
    rgba(184, 58, 58, 0.17);

  --shipping-shadow:
    0 20px 48px
    rgba(0, 0, 0, 0.32);
}


/* =========================================================
   DARK MODE HEADER
========================================================= */

body.shipping-dark-mode
.shipping-header {
  background:
    linear-gradient(
      110deg,
      #260b0e 0%,
      #421317 48%,
      #1c080a 100%
    );

  border-bottom-color:
    rgba(226, 101, 101, 0.36);
}


body.shipping-dark-mode
.shipping-header
.theme-toggle {
  background:
    rgba(12, 3, 4, 0.62);

  border-color:
    rgba(226, 101, 101, 0.52);
}


body.shipping-dark-mode
.shipping-header
.toggle-knob {
  background:
    #f0dddd;

  transform:
    translateX(28px);
}


body.shipping-dark-mode
.shipping-header
.toggle-sun {
  opacity:
    0.48;
}


body.shipping-dark-mode
.shipping-header
.toggle-moon {
  color:
    #ffffff;

  opacity:
    1;
}


/* =========================================================
   DARK MODE PAGE
========================================================= */

body.shipping-dark-mode
.shipping-page {
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(190, 63, 63, 0.12),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(190, 63, 63, 0.055),
      transparent 28%
    ),
    var(--shipping-bg);
}


body.shipping-dark-mode
.summary-grid article,

body.shipping-dark-mode
.card {
  background:
    rgba(36, 29, 30, 0.97);
}


body.shipping-dark-mode
.system-pill {
  background:
    #241d1e;

  border-color:
    var(--shipping-border);
}


body.shipping-dark-mode
input,

body.shipping-dark-mode
select {
  color:
    var(--shipping-text);

  background:
    var(--shipping-surface-soft);

  border-color:
    var(--shipping-border);

  color-scheme:
    dark;
}


body.shipping-dark-mode
button {
  color:
    #ef9c9c;

  background:
    #2b2223;

  border-color:
    #604245;
}


body.shipping-dark-mode
button.primary,

body.shipping-dark-mode
#browseFreight {
  color:
    #ffffff;

  background:
    linear-gradient(
      90deg,
      #7f2529,
      #b83a3a
    );

  border-color:
    #c24b4b;
}


body.shipping-dark-mode
th {
  color:
    var(--shipping-text-muted);

  background:
    #2a2223;
}


body.shipping-dark-mode
td {
  color:
    var(--shipping-text-secondary);
}


body.shipping-dark-mode
tbody tr:hover,

body.shipping-dark-mode
tbody tr.selected {
  background:
    rgba(184, 58, 58, 0.14);
}


body.shipping-dark-mode
.package-row {
  background:
    var(--shipping-surface-soft);
}


body.shipping-dark-mode
.drop-zone {
  background:
    linear-gradient(
      145deg,
      #2c2223,
      #241c1d
    );

  border-color:
    #805356;
}


body.shipping-dark-mode
.drop-zone.dragging {
  background:
    rgba(184, 58, 58, 0.17);

  border-color:
    var(--shipping-primary);
}


body.shipping-dark-mode
.file-types span {
  color:
    var(--shipping-text-secondary);

  background:
    #2d2425;

  border-color:
    var(--shipping-border);
}


/*
  Shipping Label은 실제 흰 종이에 출력되므로
  Dark Mode에서도 항상 흰색으로 유지한다.
*/
body.shipping-dark-mode
.label-preview {
  color:
    #000000;

  background:
    #ffffff;

  border-color:
    #000000;
}


/* =========================================================
   HEADER RESPONSIVE PROTECTION
========================================================= */

@media (
  max-width: 1050px
) {

  .shipping-header .header-feed {
    display:
      none;
  }

}


@media (
  max-width: 760px
) {

  .shipping-header .date-time {
    display:
      none;
  }


  .shipping-header .user-info {
    display:
      none;
  }

}

/* =========================================================
   WAREHOUSE SUITE SHARED SHELL — SHIPPING IDENTITY
========================================================= */

/* Shipping red accent for shared warehouse-header.css color system */
.shipping-header {
  --core-header-accent-rgb: 184, 58, 58;
}

/* Weather text — shipping red light palette */
.shipping-header .weather-block__temperature {
  color: #fff5f5;
}

.shipping-header .weather-block__location {
  color: rgba(255, 245, 245, 0.65);
}

/* Sidebar active state — restrained red treatment */
.sidebar-nav-item--shipping.is-active {
  border-color: rgba(184, 58, 58, 0.42);
}

.sidebar-nav-item--shipping.is-active .sidebar-nav-icon {
  color: #b83a3a;
}

/* Shipping variant for shared AI pill button */
.ai-pill-button--shipping {
  --ai-pill-accent: #cf4040;
  --ai-pill-accent-light: #ef9c9c;
  --ai-pill-accent-rgb: 207, 64, 64;
}

/* PULSE sidebar identity */
.sidebar-pulse-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 7px;
  margin: 8px 4px 0;
  border-top: 1px solid rgba(184, 58, 58, 0.12);
}

.sidebar-pulse-identity__icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  opacity: 0.86;
}

.sidebar-pulse-identity__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sidebar-pulse-identity__name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ef9c9c;
  line-height: 1.2;
}

.sidebar-pulse-identity__role {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 245, 245, 0.44);
  line-height: 1.2;
}