/*!
 * Add / Edit Product form — simplification layer.
 * Presentation only; product-form.js decides what gets .pf-hidden.
 *
 * Scoped to .product_form, which the Add page, the Edit page and the POS
 * quick-add modal all carry. Scoping to one page's id left the modal
 * rendering the shared fields unstyled.
 */

/* Collapsed cells. The inputs stay in the DOM and still submit. */
.product_form .pf-hidden,
#quick_add_product_form .pf-hidden {
    display: none !important;
}

/* The optional media block is closed until the toggle turns it on */
.product_form .js-product-media,
#quick_add_product_form .js-product-media {
    display: none;
}
.product_form .js-product-media.pf-open,
#quick_add_product_form .js-product-media.pf-open {
    display: block;
}

/* ------------------------------------------------------------------
   Toggle control
   ------------------------------------------------------------------ */
.pf-media-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
    padding: 8px 14px 8px 10px;
    border: 1px solid #E2E6EE;
    border-radius: 999px;
    background: #FAFAFD;
    color: #4B5563;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pf-media-toggle:hover {
    border-color: #C4A2F8;
    background: #F5EFFE;
    color: #5B21B6;
}
.pf-media-toggle:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

/* Switch */
.pf-media-toggle__switch {
    position: relative;
    flex: none;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: #CBD2DF;
    transition: background-color .18s ease;
}
.pf-media-toggle__switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .3);
    transition: transform .18s ease;
}
.pf-media-toggle.is-on {
    border-color: #C4A2F8;
    background: #F5EFFE;
    color: #5B21B6;
}
.pf-media-toggle.is-on .pf-media-toggle__switch {
    background: #7C3AED;
}
.pf-media-toggle.is-on .pf-media-toggle__switch::after {
    transform: translateX(15px);
}

.pf-media-toggle__text { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .pf-media-toggle,
    .pf-media-toggle__switch,
    .pf-media-toggle__switch::after { transition: none; }
}

/* ==================================================================
   Primary field grid
   ------------------------------------------------------------------
   The first box holds the eight fields a product actually needs. Its
   markup is still Bootstrap's float grid, but floats leave ragged holes
   once cells are collapsed, so the row is switched to flex: hidden cells
   simply disappear and the rest close up. Widths still come from the
   existing col-sm-* classes, so nothing had to be renamed.
   ================================================================== */
.product_form .pf-main-grid,
#quick_add_product_form .pf-main-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 4px;
}

/* Float clears are meaningless in flex and would break the run of cells */
.product_form .pf-main-grid > .clearfix,
#quick_add_product_form .pf-main-grid > .clearfix {
    display: none;
}

.product_form .pf-main-grid > [class*="col-sm-"],
#quick_add_product_form .pf-main-grid > [class*="col-sm-"] {
    float: none;
}

/* ---- Labels and inputs ------------------------------------------- */
.product_form .pf-main-grid label,
#quick_add_product_form .pf-main-grid label {
    font-size: 13px;
    font-weight: 600;
    color: #4A3B63;
    margin-bottom: 6px;
}

.product_form .pf-main-grid .form-control,
#quick_add_product_form .pf-main-grid .form-control,
.product_form .pf-main-grid .select2-container .select2-selection--single,
#quick_add_product_form .pf-main-grid .select2-container .select2-selection--single,
.product_form .pf-main-grid .select2-container .select2-selection--multiple,
#quick_add_product_form .pf-main-grid .select2-container .select2-selection--multiple {
    min-height: 40px;
    border-radius: 8px;
    border-color: #DED7EA;
    box-shadow: none;
}

.product_form .pf-main-grid .form-control:focus,
#quick_add_product_form .pf-main-grid .form-control:focus,
.product_form .pf-main-grid .select2-container--focus .select2-selection,
#quick_add_product_form .pf-main-grid .select2-container--focus .select2-selection {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

/* select2 renders its own inner box; line it up with the plain inputs */
.product_form .pf-main-grid .select2-selection--single .select2-selection__rendered,
#quick_add_product_form .pf-main-grid .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}
.product_form .pf-main-grid .select2-selection--single .select2-selection__arrow,
#quick_add_product_form .pf-main-grid .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

/* ---- Checkbox cells ---------------------------------------------- */
/* Manage Stock and the IMEI/serial switch are choices, not text entry, so they
   get a tinted panel that sets them apart from the inputs.
   They carry no label of their own, so they are dropped to the bottom of their
   flex line. That lands them exactly on the inputs beside them whatever those
   labels measure — a fixed top margin cannot, because label height varies by a
   pixel or two from row to row. */
.product_form .pf-main-grid > [class*="col-sm-"]:has(#enable_stock),
#quick_add_product_form .pf-main-grid > [class*="col-sm-"]:has(#enable_stock),
.product_form .pf-main-grid > .pf-check-col,
#quick_add_product_form .pf-main-grid > .pf-check-col {
    align-self: flex-end;
}

.product_form .pf-main-grid > [class*="col-sm-"]:has(#enable_stock) > .form-group,
#quick_add_product_form .pf-main-grid > [class*="col-sm-"]:has(#enable_stock) > .form-group,
.product_form .pf-main-grid > .pf-check-col > .form-group,
#quick_add_product_form .pf-main-grid > .pf-check-col > .form-group {
    display: flex;
    align-items: center;
    min-height: 40px;      /* same height as an input */
    padding: 0 14px;
    border: 1px solid #E6E0F0;
    border-radius: 10px;
    background: #FAF8FD;
}

/* The inline hint would make these two cells taller than every input next to
   them. The (i) tooltip beside the label already carries the same text. */
.product_form .pf-main-grid > [class*="col-sm-"]:has(#enable_stock) .help-block,
#quick_add_product_form .pf-main-grid > [class*="col-sm-"]:has(#enable_stock) .help-block,
.product_form .pf-main-grid > .pf-check-col .help-block,
#quick_add_product_form .pf-main-grid > .pf-check-col .help-block {
    display: none;
}

.product_form .pf-main-grid > [class*="col-sm-"]:has(#enable_stock) label,
#quick_add_product_form .pf-main-grid > [class*="col-sm-"]:has(#enable_stock) label,
.product_form .pf-main-grid > .pf-check-col label,
#quick_add_product_form .pf-main-grid > .pf-check-col label {
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
}

/* The media toggle spans the row and closes the box */
.product_form .pf-main-grid > .col-sm-12,
#quick_add_product_form .pf-main-grid > .col-sm-12 {
    margin-top: 6px;
}

/* A panel whose every field turned out to be collapsed. product-form.js sets
   this by measuring, since the outcome depends on business settings too.
   Hidden, not removed — the inputs inside still post. */
.product_form .box-primary.pf-empty-box {
    display: none;
}

/* ==================================================================
   Table headers inside the product forms
   ------------------------------------------------------------------
   These live here rather than in theme-dashtrap.css because that file
   is scoped to body.skin-purple, and the POS screen renders with
   `lockscreen` instead — so the quick-add modal opened from the POS
   never picked the brand colour up and its headers stayed green.
   ================================================================== */
.product_form .add-product-price-table > thead > tr > th,
#quick_add_product_form .add-product-price-table > thead > tr > th,
.product_form .add-product-price-table > tbody > tr:first-child > th,
#quick_add_product_form .add-product-price-table > tbody > tr:first-child > th,
.product_form .table-th-green > thead > tr > th,
#quick_add_product_form .table-th-green > thead > tr > th {
    background-color: #3B1063 !important;
    color: #fff !important;
    border-color: #3B1063 !important;
    font-weight: 600;
}

.product_form .add-product-price-table > thead > tr > th:first-child,
#quick_add_product_form .add-product-price-table > thead > tr > th:first-child,
.product_form .table-th-green > thead > tr > th:first-child,
#quick_add_product_form .table-th-green > thead > tr > th:first-child {
    border-top-left-radius: 8px;
}
.product_form .add-product-price-table > thead > tr > th:last-child,
#quick_add_product_form .add-product-price-table > thead > tr > th:last-child,
.product_form .table-th-green > thead > tr > th:last-child,
#quick_add_product_form .table-th-green > thead > tr > th:last-child {
    border-top-right-radius: 8px;
}

/* ==================================================================
   Tracking selector
   ------------------------------------------------------------------
   Three cards standing in for the enable_sr_no checkbox, which is
   still in the form underneath them — hidden, and driven by these.
   Keeping the real field means the controller and its validation see
   the request they always did.
   ================================================================== */
.product_form .pf-tracking-inputs {
    display: none;
}

.product_form .pf-tracking {
    display: grid;
    /* Four modes: General, Batch/Lot, Serial, IMEI. Two per row on a
       narrow desktop so the hint text stays readable. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.product_form .pf-track {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: start;
    padding: 11px 13px;
    border: 1px solid #E6E0F0;
    border-radius: 10px;
    background: #FAF8FD;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.product_form .pf-track:hover {
    border-color: #C4A2F8;
    background: #F5EFFE;
}
.product_form .pf-track:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

.product_form .pf-track.is-on {
    border-color: #7C3AED;
    background: #F3EDFE;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.product_form .pf-track__icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #E6E0F0;
    color: #7C3AED;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.product_form .pf-track.is-on .pf-track__icon {
    background: #7C3AED;
    border-color: #7C3AED;
    color: #fff;
}

.product_form .pf-track__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.product_form .pf-track__name {
    font-size: 13.5px;
    font-weight: 600;
    color: #3B1063;
    line-height: 1.3;
}
.product_form .pf-track__hint {
    font-size: 11.5px;
    color: #6B6484;
    line-height: 1.35;
}

@media (max-width: 1199px) {
    .product_form .pf-tracking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .product_form .pf-tracking { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .product_form .pf-track { transition: none; }
}

/* ==================================================================
   Medicine details + catalog search
   ================================================================== */
.product_form .pf-medicine {
    border: 1px solid #E6E0F0;
    border-radius: 10px;
    background: #FAF8FD;
    padding: 14px 16px 2px;
    margin-bottom: 15px;
}

.product_form .pf-medicine__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #3B1063;
    margin-bottom: 12px;
}
.product_form .pf-medicine__head .fa { color: #7C3AED; }

.product_form .pf-medicine__flags {
    display: flex;
    gap: 18px;
    align-items: center;
    padding-top: 6px;
}
.product_form .pf-medicine__flag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
}

/* Search results: a short list under the box, never the whole catalog. */
.product_form .pf-medicine__results {
    position: relative;
    z-index: 5;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #E6E0F0;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(59, 16, 99, .10);
    margin-top: 4px;
}

.product_form .med-group {
    padding: 7px 13px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6B6484;
    background: #F5F2FA;
    border-bottom: 1px solid #EFEAF7;
}

.product_form .med-result {
    display: block;
    width: 100%;
    text-align: start;
    padding: 9px 13px;
    border: 0;
    border-bottom: 1px solid #F2EEF8;
    background: #fff;
    cursor: pointer;
}
.product_form .med-result:hover { background: #F5EFFE; }
.product_form .med-result:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: -2px;
}

.product_form .med-result__name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #3B1063;
}
.product_form .med-result__meta {
    display: block;
    font-size: 11.5px;
    color: #6B6484;
    margin-top: 1px;
}

.product_form .med-result__tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}
.product_form .med-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.product_form .med-tag--stocked { background: #E4F5EA; color: #17603A; }
.product_form .med-tag--rx      { background: #EDE6FE; color: #4C1D95; }
.product_form .med-tag--abx     { background: #FDECD9; color: #8A4B08; }

.product_form .med-empty {
    padding: 13px;
    font-size: 12.5px;
    color: #6B6484;
}

/* ==================================================================
   Price table: only the numbers a shop actually types
   ------------------------------------------------------------------
   The cells are still there with their values — product-form.js only
   marks them, so every calculation that reads them keeps working and
   everything still posts. Hiding the header cell alongside the body
   cell is what keeps the remaining columns under the right headings.
   ================================================================== */
.product_form .add-product-price-table .pf-col-hidden,
#quick_add_product_form .add-product-price-table .pf-col-hidden {
    display: none !important;
}

/* With no "inc. tax" box beside it, the exc. tax box takes the row */
.product_form .add-product-price-table.pf-no-vat td > .col-sm-6:not(.pf-hidden),
#quick_add_product_form .add-product-price-table.pf-no-vat td > .col-sm-6:not(.pf-hidden) {
    width: 100%;
    float: none;
}

/* ==================================================================
   VAT applicable / not applicable
   ------------------------------------------------------------------
   An ordinary labelled field, sitting level with Product Type beside
   it: label on its own line, then a segmented pair sized to match the
   select's height so the two read as one row rather than as a banner
   dropped between them.

   Segmented rather than two loose radios because it is a single
   either/or decision — reading it as one control is what makes the
   state obvious at a glance.
   ================================================================== */
.product_form .pf-vat-col .form-group {
    margin-bottom: 0;
}

.product_form .pf-vat__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #4A3B63;
    line-height: 1.3;
}

.product_form .pf-vat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px;
    border: 1px solid #E3E0EC;
    border-radius: 10px;
    background: #F3F1F6;
}

.product_form .pf-vat__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Matches the select beside it: 4px track padding either side plus
       this makes 42px, the height of a .form-control on this form. */
    height: 32px;
    margin: 0;
    padding: 0 14px 0 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #4A3B63;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.product_form .pf-vat__option:hover {
    background: #E7E3F0;
    color: #2A0A4A;
}

/* The chosen one is lifted onto white, so the answer reads without
   comparing the two radio dots. */
.product_form .pf-vat__option.is-on,
.product_form .pf-vat__option.is-on:hover {
    background: #fff;
    color: #3B1063;
    box-shadow: 0 1px 2px rgba(27, 24, 50, .10);
}

/* Drawn rather than native: the browser paints a native radio from its
   own scheme, which on a dark OS came out as a filled dark disc — an
   empty option that looked chosen. */
.product_form .pf-vat__radio {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid #C9CFDD;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease;
}
.product_form .pf-vat__radio:checked {
    border-color: #7C3AED;
    border-width: 2px;
}
.product_form .pf-vat__radio:checked::after {
    content: "";
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: #7C3AED;
}
.product_form .pf-vat__radio:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .product_form .pf-vat { display: flex; width: 100%; }
    .product_form .pf-vat__option { flex: 1; justify-content: center; padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .product_form .pf-vat__option,
    .product_form .pf-vat__radio { transition: none; }
}

/* ==================================================================
   Phones
   ==================================================================
   The row above is flex rather than Bootstrap's float grid, so that a
   hidden cell disappears and the rest close up. Below Bootstrap's own
   sm breakpoint col-sm-4 sets no width at all, which in a flex row
   means each cell is as wide as whatever is inside it: Product Name
   came out 211px, Brand 204px and Category 284px, all on separate
   rows of a 357px form, ragged down the left edge for no reason.

   One field per row, each the full width of the form.
   ================================================================== */
@media (max-width: 767px) {
    .product_form .pf-main-grid > [class*="col-sm-"],
    #quick_add_product_form .pf-main-grid > [class*="col-sm-"] {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
}