/* =========================
   GLOBAL LAYOUT
========================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: #050509;
  color: #ecf0f1;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
}

.app-container {
  display: flex;
  width: 100%;
  max-width: 1600px;
  padding: 20px;
  gap: 20px;
}

/* =========================
   SIDEBAR
========================= */
.sidebar {
  width: 512px;
  background: rgba(10, 18, 35, 0.82);
  border-radius: 14px;
  padding: 22px;
  border: 1px solid rgba(80, 100, 130, 0.45);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.45);

  display: flex;
  flex-direction: column;
  gap: 16px;

  height: auto;
  min-height: 100%;
  flex-grow: 0;
}

.add-load-btn {
  width: 100%;
  padding: 12px;
  background: #0ea5e9;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.add-load-btn:hover {
  background: #38bdf8;
}

.load-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  flex-grow: 1;
}

/* =========================
   LOAD ROW
========================= */
.load-row {
  background: rgba(25, 35, 60, 0.85);
  border: 1px solid rgba(70, 90, 120, 0.35);
  border-radius: 12px;

  display: flex;
  align-items: center;
  gap: 3px;

  padding: 3px 3px;
  width: 100%;
  min-height: 0px;
  overflow: hidden;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell select,
.cell input,
.cell button {
  height: 26px;
  margin: 0 !important;
  padding: 1px 4px;
  font-size: 13px;
  background: #0f172a;
  border: 2px solid #475569;
  border-radius: 8px;
  color: #e2e8f0;
}

/* WIDTHS */
.load-type   { width: 66px; }
.load-uldid  { width: 90px; }
.load-weight { width: 75px; text-align: center; }
.load-bulk   { width: 70px; }
.load-pos    { width: 63px; }

.delete-load {
  width: 40px;
  background: #ef4444 !important;
  border: none !important;
  font-weight: 700;
  cursor: pointer;
}

/* =========================
   CARGO AREA
========================= */
.cargo-area {
  flex: 1;
  background: radial-gradient(circle at top, #111827 0%, #020617 75%);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.25);

  /* FIX — do NOT match sidebar height */
  align-self: flex-start;
}
.cargo-area h1 {
  margin: 0;
  font-size: 24px;
}

.subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #9ca3af;
}

/* =========================
   HOLD SECTIONS
========================= */
.hold-section {
  margin-top: 28px;
  padding: 18px;
  background: rgba(10, 19, 38, 0.9);
  border-radius: 14px;
  border: 1px solid rgba(75, 85, 99, 0.6);
}

.hold-section h2 {
  margin: 0 0 10px;
  color: #fff;
}

/* =========================
   SLOT GRID
========================= */
.deck-grid {
  width: 750px;
  margin: 0 auto;
}

.aft-grid-wrapper {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;   /* <-- center children horizontally */
    align-items: flex-start;
}

.aft-right-col {
  display: flex;
  flex-direction: column;
}

.ake-row,
.pallet-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

/* =========================
   SLOTS (POS INSIDE BOX)
========================= */
.slot {
  height: 48px;
  border-radius: 10px;
  background: #0f172a;
  border: 1px solid #475569;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  overflow: hidden;

  color: #dbe2f0;
  font-size: 15px;
  font-weight: 700;
}

.slot::before { display: none; }

.slot::after {
  content: attr(data-pos);
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;

  color: #cfd8ff;
  font-size: 15px;
  font-weight: 700;
}

.slot.ake    { width: 70px; border-color: #2196f3; }
.slot.pallet { width: 110px; border-color: #b48c64; }

.slot.has-uld {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.45);
}
.slot.has-uld::after {
  color: white;
  font-weight: 800;
}

/* BLOCKED */
.slot.disabled {
  opacity: 0.35;
  filter: grayscale(0.7);
}
.slot.disabled::after {
  color: #6b7280 !important;
}

/* HIGHLIGHTS */
.slot.highlight {
  outline: 2px solid #22c55e !important;
  outline-offset: -2px;
}

.slot.invalid {
  outline: 2px solid #ef4444 !important;
  outline-offset: -2px;
  opacity: 0.35;
}

/* =========================
   ULD BOXES
========================= */
.uld-box {
  padding: 5px 8px;
  background: linear-gradient(to bottom right, #1e293b, #0f172a);
  border-radius: 6px;
  border: 1px solid #475569;
  color: #f1f5f9;
  font-size: 12px;
  cursor: grab;
  white-space: nowrap;

  position: relative;
  z-index: 5;
}

.uld-box.dragging {
  opacity: 0.9;
  cursor: grabbing;
  transform: scale(1.1);
  z-index: 9999;
}

/* =========================
   BUTTON BAR
========================= */
.cargo-buttons-bar {
  margin-top: 20px;
  padding: 15px;
  background: rgba(5,5,10,0.92);
  border-radius: 10px;
  border: 1px solid #334155;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cargo-buttons-bar button {
  padding: 10px 20px;
  border-radius: 8px;
  background: #111827;
  border: 1px solid #475569;
  color: #e5e7eb;
  font-weight: 600;
}

.cargo-buttons-bar .danger {
  border-color: #ef4444;
}

/* =========================
   EXPORT MODAL
========================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal.hidden { display: none; }

.modal-content {
  background: #0f172a;
  padding: 20px;
  border-radius: 12px;
  width: auto;                 /* ← remove fixed width */
  max-width: 90%;              /* safety */
  border: 1px solid #334155;
  text-align: center;
  display: inline-block;       /* ← shrink to fit */
}

#export-output {
  width: 100%;
  max-width: 80vw;
  min-width: 350px;

  height: 500px;   /* <-- YOU CONTROL SIZE HERE */
  resize: none;
  overflow: auto;

  background: #020617;
  border: 1px solid #475569;
  border-radius: 8px;

  padding: 10px;
  color: #e2e8f0;
  line-height: 20px;
  font-size: 14px;
  font-family: monospace;
}

/* ======================================
   REAL BULK BAY LAYOUT (53 / 52 / 51)
====================================== */

.bulk-column {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-left: 5px;
}

/* 53 — tall */
.bulk-53 {
  width: 90px;
  height: 164px;

  background: #0f172a;        /* same dark bg as slots */
  border-radius: 18px;
  border: 2px solid #a855f7;  /* purple border */
  color: #d8b4fe;             /* text color */
  
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 700;
}

/* stack for 52 and 51 */
.bulk-small-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 52 + 51 */
.bulk-small {
  width: 90px;
  height: 71px;

  background: #0f172a;        /* dark slot-style */
  border-radius: 18px;
  border: 2px solid #a855f7;  /* purple border */
  color: #d8b4fe;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 700;
}
/* ======================================
   REMOVE SPIN BUTTONS (WEIGHT FIELD)
====================================== */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

.start-screen {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  color: white;
}

.hidden {
  display: none !important;
}

.popup-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 15, 0.88);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    z-index: 3000;
}

.popup-window {
    background: #0d1117;
    border: 1px solid #2d3748;
    padding: 30px;
    border-radius: 14px;
    width: 350px;
    text-align: center;
}

.popup-window h2 {
    margin-bottom: 20px;
}

.popup-window input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
}

.popup-window button {
    width: 100%;
    padding: 12px;
    background: #0ea5e9;
    border: 0;
    color: white;
    font-size: 17px;
    border-radius: 10px;
    cursor: pointer;
}

.hidden {
    display: none !important;
}


.popup-select {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.popup-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: #d1d5db;
    text-align: left;
}

.pax-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.pax-box label {
    font-size: 13px;
    color: #cbd5e1;
}

.pax-box input {
    width: 100%;
    margin-top: 4px;
    padding: 10px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    color: white;
}

#totalPieces {
    margin-bottom: 20px;
}

.drag-load {
  width: 36px !important;
  background: #475569 !important;
  border: none !important;
  color: white;
  font-size: 16px;
  cursor: grab;
}
.drag-load:active {
  cursor: grabbing;
}



/* ==========================================================
   FLIGHT SUMMARY PANEL (Passengers + Pieces)
========================================================== */

.summary-panel {
    background: rgba(10, 18, 35, 0.82);
    border: 1px solid rgba(80, 100, 130, 0.45);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 25px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.45);
}

.summary-panel h3 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: #e2e8f0;
}

/* GRID FOR ITEMS */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.summary-item {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(100, 120, 150, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.45);
}

.summary-item label {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 3px;
}

.summary-item span {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

/* TOTAL BOX MORE HIGHLIGHTED */
.summary-item.total-box {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(140, 160, 200, 0.55);
}


.summary-input {
    width: 80px;
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 22px;
    font-weight: 600;
}

.summary-input::-webkit-inner-spin-button,
.summary-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* --------------------------------------------------
   Signature Badge (Professional + Italic)
-------------------------------------------------- */
.signature {
    position: fixed;
    bottom: 18px;
    right: 22px;

    font-size: 15px;
    font-weight: 500;
    font-style: italic;          /* << added */
    letter-spacing: 0.4px;

    padding: 8px 20px;
    border-radius: 12px;

    color: #f0f0f0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);

    box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);

    opacity: 0.88;
    user-select: none;
    transition: 0.25s ease;
    z-index: 5001 !important;   /* ← This fixes the blur */
}

.signature:hover {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 22px rgba(0, 0, 0, 0.55);
}