/* IMO Declaration Page Styles */

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background-color: var(--background-glass);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* .btn/.btn-primary/.btn-secondary/.btn-danger superseded by the shared
   ones in css/neu-components.css (same fix as css/style.css's old
   button.btn and css/components/buttons.css). Left commented rather than
   deleted. Also several of the color vars below (--primary-dark,
   --secondary-dark, --danger-color, --danger-dark, --card-bg) were never
   actually aliased in css/themes/light.css — real names are
   --primary-color-dark, --container-color/--background-glass, etc. — so
   this block was silently rendering with missing colors even before the
   redesign; not worth fixing since neu-components.css replaces it anyway.
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: var(--danger-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
*/

/* Form Container — markup uses this class directly (imo.php/create/imo.php). */
.imo-form-container,
.form-container {
    width: 100%;
    /* .container (base.css) is a flex row, and a flex item's default
       min-width: auto lets a descendant's intrinsic min-content size (the
       shipping table's min-width: 600px below) win over width: 100%,
       forcing the whole page to overflow horizontally on narrow viewports
       instead of the table scrolling within its own overflow-x: auto box. */
    min-width: 0;
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    border-radius: var(--neu-radius);
    padding: 2rem;
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    /* css/components/form.css (shared, loaded via main.css) has its own
       old ".form-container { margin: 2rem auto; }" — same bug css/bol.css
       already documents fixing. That 20px top margin (2rem at this app's
       10px root font-size) doesn't touch .preview-container next to it
       (different class, unaffected), which sat this column 20px lower
       than its sibling despite both having identical padding otherwise. */
    margin: 0 0 2rem 0;
    /* Was max-width:1200px + margin:0 auto to center itself as the page's
       only visible column (the preview used to be a modal, hidden from
       layout). Now that .preview-container sits beside it as a real flex
       sibling (matching bol.php/packingslip.php), this needs to size like
       any other .form-container instead of self-centering. */
    flex: 1 1 0;
}

/* This column's real content is a fixed-size 8.5x11in scaled page, unlike
   the form's real inputs — same reasoning as css/packingslip.css's
   .preview-container: it gives up width first (flex-shrink:2) rather than
   splitting a width squeeze evenly with the form. */
.preview-container {
    flex: 1 2 0;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
    box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
    border-radius: var(--neu-radius);
    margin-bottom: 2rem;
}

.preview-container .action-buttons-container {
    width: 100%;
    margin-bottom: 12px;
}

.preview-container .button-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.preview-scroll-container {
    /* min(0.75, ...) keeps today's desktop/tablet look exactly as-is
       (this only ever shrinks below 0.75, never grows past it) while
       continuously scaling down on narrow viewports instead of clipping —
       90vw approximates this panel's own width once the layout stacks to
       a single column on mobile. */
    --preview-scale: min(0.75, calc(90vw / 816px));
    width: 100%;
    height: calc(1056px * var(--preview-scale) + 30px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
}

.imo-preview {
    width: 8.5in;
    height: 11in;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;
    /* var(--preview-scale), set on .preview-scroll-container, shrinks
       continuously with viewport width instead of a fixed 0.75 — at mobile
       widths this 816px-wide box (times 0.75 = 612px) was wider than the
       whole preview panel, and .preview-scroll-container's overflow:hidden
       was silently clipping the right side with no way to scroll to it. */
    transform: scale(var(--preview-scale, 0.75));
    transform-origin: top center;
}

/* The reference form's blue/white diagonal hazard-stripe borders down the
   left and right edges — ::before/::after so they're part of the page
   frame itself rather than something generateIMOPreviewHTML() has to
   redraw on every keystroke. Absolutely positioned descendants paint above
   normal-flow content regardless of source order, so these sit on top of
   .preview-content's edges; its own 0.3in padding (~29px) is wider than
   this 20px stripe, keeping actual field text clear of it.
   print-color-adjust: exact is required — browsers strip background
   images/gradients from the actual print output by default (an ink-saving
   "economy" mode, unless the user manually checks "Background graphics" in
   the print dialog) even though a CLI --print-to-pdf render includes them
   unconditionally, which is why this looked fine there but vanished from
   a real print. */
.imo-preview::before,
.imo-preview::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
    background: repeating-linear-gradient(
        135deg,
        #1a3d8f 0px, #1a3d8f 10px,
        #ffffff 10px, #ffffff 20px
    );
}

.imo-preview::before {
    left: 0;
}

.imo-preview::after {
    right: 0;
}

.imo-preview .preview-content {
    padding: 0.3in;
    height: 100%;
    box-sizing: border-box;
    color: black;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    line-height: 1.3;
    overflow: hidden;
}

.header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.header-container h1 {
    color: var(--text-color);
}

/* Form Input Styling — the raw input[type=...]/textarea/select selectors in
   neu-components.css already restyle these regardless of class (and win on
   specificity), so this mostly only matters for :hover/:focus/placeholder. */
.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 0.375rem;
    /* Fixed px with !important, plus an explicit line-height — see
       css/bol.css's .form-input for the fuller explanation of why
       !important is needed here (this page's markup uses the identical
       rows="5" + inline height:auto pattern, and .form-input ties in
       specificity with neu-components.css's own shared input rule). */
    font-size: 17px !important;
    line-height: 26px !important;
    font-family: var(--neu-font);
    background-color: var(--input-bg-color);
    color: var(--text-color);
    transition: all 0.2s ease;
}

/* pages/imo.php's Shipper textarea carries rows="5" plus an inline
   style="height:auto" — sized as rows × line-height by the browser, so
   the line-height bump above would otherwise grow this box 5x over.
   !important is the one thing that can still override an inline style. */
textarea.form-input {
    height: 141px !important;
    resize: none;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:hover {
    border-color: var(--primary-color-hover);
}

.form-input::placeholder {
    color: var(--text-color-secondary);
}

/* Form Sections */
.form-section {
    margin-bottom: 2rem;
}

.form-section h3 {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.form-section h4 {
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

/* Form Groups */
.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Special Sections */
.signature-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--container-color);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

.signature-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.receiving-org-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--container-color);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

.receiving-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.receiving-receipt {
    background-color: var(--container-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    margin-top: 1rem;
}

.receiving-receipt h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Declaration text (box 8), the shipping details table (box 12), boxes
   13-17, the box 18/19 certification row, and the box 9-11 three-column
   layout are all used in the markup but had no matching rules at all
   (class-name drift between the HTML and this file predates the redesign). */
.declaration-text {
    background-color: var(--container-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-color-secondary);
}

/* Numbered box titles ("1. Shipper:", "14. Shipping Details:", etc.) —
   bigger across the board, and color-fixed for the three that sit outside
   .form-group (.shipping-table/.packing-cert/.receiving-receipt's own
   <label>): css/components/form.css's ".form-group label { color:
   var(--text-color) }" never reaches them, so they fell back to the
   browser's default gray instead of the theme's text color. Scoped to
   .form-container so this doesn't touch .form-group labels on other pages
   that share that shared rule. */
.form-container .form-group label,
.form-container .shipping-table > label,
.form-container .packing-cert label,
.form-container .receiving-receipt label {
    /* Matches every other tool page's label size (css/create/placard.css's
       .form-group label) — was 1rem/normal-weight, rendering smaller and
       lighter than Placard's bold. Fixed px, not rem: bol.css hit a case
       where a page's root font-size wasn't the assumed 16px, making rem
       values render smaller than intended. */
    font-size: 14px;
    font-weight: bold;
    color: var(--text-color);
}

.shipping-table {
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.shipping-table table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background-color: var(--background-glass);
    border-radius: 0.5rem;
    overflow: hidden;
}

.shipping-table th,
.shipping-table td {
    padding: 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.shipping-table th {
    background-color: var(--container-color);
    color: var(--text-color);
    font-weight: 600;
}

.container-info-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.certification-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.packing-cert {
    background-color: var(--container-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
}

.packing-cert p {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-color-secondary);
}

.three-box-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.left-boxes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.signature-section-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--container-color);
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
}

.receiving-receipt p {
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-weight: 500;
}

/* Container Information Styling */
.container-info {
    background-color: var(--container-color);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    margin: 1rem 0;
}

.container-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Table Styling */
.imo-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background-color: var(--background-glass);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.imo-table th,
.imo-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.imo-table th {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.imo-table tr:hover {
    background-color: var(--container-color);
}

.imo-table tr:last-child td {
    border-bottom: none;
}

/* Print Styles — same robust pattern as css/packingslip.css/css/bol.css:
   visibility:hidden preserves hidden elements' layout space, so every
   ancestor between body and .imo-preview needs its own box model reset
   (not just display:none on the header/form), and .imo-preview itself is
   taken fully out of flow via position:absolute rather than relying on
   those resets alone. */
@media print {
    @page {
        margin: 0;
        size: letter;
    }

    body * {
        visibility: hidden;
    }

    .imo-preview,
    .imo-preview * {
        visibility: visible;
    }

    .header, .footer, .form-container {
        display: none !important;
    }

    .container {
        padding: 0;
        margin: 0;
    }

    body, html, .content, .preview-container, .preview-scroll-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .imo-preview {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        width: 100%;
        height: 100%;
        transform: none;
    }

    .imo-preview .preview-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 0.3in;
        font-size: 0.75rem;
        overflow: visible;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .form-row,
    .form-row-2,
    .form-row-3,
    .form-row-4 {
        grid-template-columns: 1fr;
    }
    
    .signature-section {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .receiving-inputs {
        grid-template-columns: 1fr;
    }
    
    .container-row {
        grid-template-columns: 1fr;
    }

    .container-info-row,
    .certification-row,
    .three-box-layout,
    .signature-section-3col {
        grid-template-columns: 1fr;
    }

    .header-container {
        flex-direction: column;
        align-items: stretch;
    }

    .container {
        flex-direction: column;
    }

    .form-container,
    .preview-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .imo-form-container {
        padding: 1rem;
    }

    /* Save/Load/Clear/Print row — .preview-container .button-group already
       wraps, but at the desktop .btn padding, 2-per-row still looked
       cramped on a narrow phone. Smaller buttons here so the wrapped rows
       look proportionate. */
    .preview-container .button-group {
        gap: 6px;
    }

    .preview-container .button-group .btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        gap: 6px;
    }
}