/**
 * CakePHP 5 admin: additions on top of bundled `styles.css` + minified `admin.css`.
 *
 * Headlines: `styles.css` sets --headline-font-family to "Bebas Neue", but Adobe kit
 * `aon8qay` only publishes proxima-nova + bodoni-urw. Bundled `styles.css` ships @font-face for
 * "bebas-neue-book" in the same file — use it so admin matches production typography.
 */

/**
 * Portal-style property table (Admin/Properties index) + primary/secondary actions.
 * Subset of legacy `app/webroot/css/portal.css` (`Elements/property_table.ctp`).
 */
.btn-primary,
a.btn-primary {
    display: inline-block;
    vertical-align: middle;
    border-radius: 0;
    border: 1px solid transparent;
    font-family: "bebas-neue-book", "Bebas Neue", sans-serif;
    font-weight: 400;
    text-decoration: none;
    transition: background-color 250ms, color 250ms;
    cursor: pointer;
    padding: 10px 8px;
    font-size: 15px;
    line-height: 1;
    background-color: #68c0d8;
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus {
    background-color: #25a7cb;
    color: #fff;
    text-decoration: none;
}
.btn-secondary,
a.btn-secondary {
    display: inline-block;
    vertical-align: middle;
    border-radius: 0;
    border: 1px solid transparent;
    font-family: "bebas-neue-book", "Bebas Neue", sans-serif;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 250ms, color 250ms;
    padding: 10px 8px;
    font-size: 15px;
    line-height: 1;
    background-color: transparent;
    border-color: #68c0d8;
    color: #68c0d8;
}
.btn-secondary:hover,
.btn-secondary:focus,
a.btn-secondary:hover,
a.btn-secondary:focus {
    background-color: #25a7cb;
    border-color: #25a7cb;
    text-decoration: none;
    color: #fff;
}
.portal-table-wrap {
    overflow-x: auto;
}
.portal-table {
    width: 100%;
    border: 1px solid rgba(65, 65, 64, 0.25);
}
.portal-table th {
    padding: 32px 14px 20px;
    background: #e0e0e0;
    color: #000;
    font-size: 0.8125rem;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}
.portal-table th:first-child {
    text-align: left;
}
.portal-table th:last-child {
    text-align: right;
}
.portal-table td {
    padding: 20px 14px;
    background: #fff;
    border-top: 1px solid rgba(65, 65, 64, 0.25);
    color: #000;
    font-size: 0.8125rem;
    text-align: center;
    white-space: nowrap;
}
.portal-table td:first-child {
    text-align: left;
    white-space: normal;
}
.portal-table td:last-child {
    text-align: right;
}
.portal-table td a {
    text-decoration: none;
}
.portal-table tr:nth-child(even) td {
    background: #f6f6f6;
}
.portal-table__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: 8px;
}
.portal-table__actions [class^="btn-"] {
    white-space: nowrap;
}

:root {
    --headline-font-family: "bebas-neue-book", "Bebas Neue", sans-serif;
}

/**
 * `plugins.css` bundles jQuery Nice Select, which uses `select { display: none }` so JS can
 * inject `.nice-select` widgets. Source admin loads that script; CakePHP 5 admin does not,
 * so every native dropdown stays invisible while still in the DOM.
 */
#main select {
    display: block;
    max-width: 100%;
}

/**
 * Admin login (step 1 / 2) + set-password: Pure expects direct children of `.pure-g` to be `.pure-u-*`
 * units. Nesting another full `.pure-g` inside an outer `.pure-g` (without wrapping in `.pure-u-*`)
 * breaks the flex row — fields look narrow and spacing goes wrong. Submit was also wrapped in `<p>`,
 * which adds large margins vs `PureForm->end('Login')` in the source app.
 */
#main .admin-login-form .admin-login-submit-row {
    margin-top: 0;
}

#main .admin-login-form.pure-form-stacked button[type="submit"].button-block {
    width: 100%;
    box-sizing: border-box;
}

#main .admin-login-form .admin-login-extras {
    margin-top: 0.35rem;
}

/**
 * Legacy `PureForm->end('Submit')`: wrap in `<div class="row">` + `button-block pure-button`.
 */
#main .pure-form-stacked .row {
    margin-top: 0.75rem;
}

#main .pure-form-stacked .row input[type="submit"].button-block,
#main .pure-form-stacked .row button[type="submit"].button-block {
    width: 100%;
    box-sizing: border-box;
}

/**
 * Maps Flash helpers (`.message`) to the same palette as `.alert` in bundled CSS.
 */
#main .message {
    margin: 1em 0;
    padding: 1em 1.25em;
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1.4;
}

#main .message.hidden {
    display: none !important;
}

#main .message.success {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}

#main .message.error {
    background: #ffebee;
    color: #ba1c1c;
    border: 1px solid #ef9a9a;
}

#main .message.warning {
    background: #fff8e1;
    color: #e65100;
    border: 1px solid #ffcc80;
}

#main .message.info,
#main .message.default {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #90caf9;
}

/**
 * Bundled `styles.css` draws Pure checkboxes with `label:before` and shows the tick via
 * `input[type=checkbox]:checked + label:before` (input must sit *before* the label as a sibling).
 * CakePHP 5 FormHelper nests the input inside the label, so the sibling rule never matches and the
 * box stays empty even when `checked` is true. These `:has()` rules mirror the bundled CSS states for
 * the nested markup; sibling markup (if any) keeps working via the original source selectors.
 */
.pure-form .pure-checkbox label:has(input[type="checkbox"]:checked)::before {
    content: "\e913";
}

.pure-form .pure-checkbox label:has(input[type="checkbox"][disabled]) {
    cursor: not-allowed;
}

.pure-form .pure-checkbox label:has(input[type="checkbox"][disabled])::before {
    background-color: #fcfcfc;
    color: #b4e2ef;
}

.pure-form .pure-checkbox label:has(input[type="checkbox"][disabled]:checked)::before {
    background-color: #fcfcfc;
    color: #b4e2ef;
}

/**
 * Property asset gallery remove control: bundled `admin.css` used bottom:0 + block while templates
 * set top:4px — together top+bottom stretched the hit area (white bar) to the full image height.
 */
#main a.asset-close {
    top: 4px;
    right: 4px;
    bottom: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    line-height: 1;
    width: auto;
    height: auto;
    z-index: 2;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/**
 * Admin property info form (create + update): map + draggable polymorphic asset cards.
 */
#main .admin-property-map {
    width: 100%;
    height: 360px;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
}

#main .associated-asset-card {
    border: 1px solid #ddd;
    padding: 0.5rem;
    max-width: 220px;
}

#main .associated-asset-card img {
    max-width: 100%;
    height: auto;
    display: block;
}

#main .associated-asset-card[draggable="true"] {
    cursor: grab;
}

#main .associated-asset-card.dragging {
    opacity: 0.6;
}

/**
 * Admin property update / create forms that use manual `pure-g` + `pure-u-*` columns with flat
 * FormHelper containers (see templates). Makes inputs fill the column; Chosen matches width.
 */
#main .property-admin-info-form.pure-form .pure-g [class*="pure-u-"] .input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
#main .property-admin-info-form.pure-form .pure-g [class*="pure-u-"] .input select,
#main .property-admin-info-form.pure-form .pure-g [class*="pure-u-"] .input textarea,
#main .property-update-features-form.pure-form .pure-g [class*="pure-u-"] .input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#main .property-update-features-form.pure-form .pure-g [class*="pure-u-"] .input select,
#main .property-update-features-form.pure-form .pure-g [class*="pure-u-"] .input textarea,
#main .property-update-optional-form.pure-form .pure-g [class*="pure-u-"] .input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#main .property-update-optional-form.pure-form .pure-g [class*="pure-u-"] .input select,
#main .property-update-optional-form.pure-form .pure-g [class*="pure-u-"] .input textarea,
#main .property-update-feed-settings-form.pure-form .pure-g [class*="pure-u-"] .input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#main .property-update-feed-settings-form.pure-form .pure-g [class*="pure-u-"] .input select,
#main .property-update-feed-settings-form.pure-form .pure-g [class*="pure-u-"] .input textarea,
#main .property-update-price-terms-form.pure-form .pure-g [class*="pure-u-"] .input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#main .property-update-price-terms-form.pure-form .pure-g [class*="pure-u-"] .input select,
#main .property-update-price-terms-form.pure-form .pure-g [class*="pure-u-"] .input textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#main .property-update-features-form .pure-g [class*="pure-u-"] .chosen-container,
#main .property-update-optional-form .pure-g [class*="pure-u-"] .chosen-container,
#main .pure-form-stacked .pure-g [class*="pure-u-"] .chosen-container {
    width: 100% !important;
    max-width: 100%;
}

/**
 * Digital Ad settings tab: large opt-in checkbox (legacy `admin_feed_settings.ctp` inline style).
 */
#main .property-update-feed-settings-form.pure-form .pure-checkbox label::before {
    width: 30px;
    height: 30px;
    padding-top: 3px;
    border: solid;
}

/**
 * Agents tab: drag targets + search filter hiding rows.
 */
#main #agents-left,
#main #agents-right {
    min-height: 3rem;
}

#main tr.property-agents-search-hidden {
    display: none !important;
}

/**
 * Submit / Next row at bottom of property update tabs.
 */
#main .property-update-form-actions {
    padding-top: 1rem;
}

/*
 * Align the two action columns with each other (Pure units default to `vertical-align: top`).
 * Do not use flex on the `pure-u-*` cells — that breaks `button-block` (width: 100%) on the submit input.
 */
#main .property-update-form-actions > [class*="pure-u-"] {
    vertical-align: middle;
}

/*
 * `styles.css` sets `.pure-form input[type=submit] { margin-top: 15px }` for stacked forms; that pushes
 * Submit below Next. Reset only in the property tab footer row (Submit stays full-width `button-block`,
 * Next stays a short `pure-button`).
 */
#main .pure-form .property-update-form-actions input[type="submit"],
#main .pure-form .property-update-form-actions button[type="submit"] {
    margin-top: 0;
}

/**
 * Multi-column admin forms (e.g. Brokerages create/update): templates use
 * `<div class="pure-g gutters"><div class="pure-u-*">` as the grid cell, then `Form->control()`.
 * Do not wrap each control in a second `pure-u-*` via FormHelper `containerClass` — Pure units only
 * size correctly as direct children of `.pure-g`, so nested units collapse and inputs look narrow.
 * Use wrapper `.admin-form-field` (no grid classes) inside the outer cell instead.
 */
.pure-form.pure-form-stacked .pure-g.gutters > [class*="pure-u"] > .admin-form-field {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pure-form.pure-form-stacked .pure-g.gutters > [class*="pure-u"] > .admin-form-field input.pure-input-1,
.pure-form.pure-form-stacked .pure-g.gutters > [class*="pure-u"] > .admin-form-field select.pure-input-1,
.pure-form.pure-form-stacked .pure-g.gutters > [class*="pure-u"] > .admin-form-field textarea.pure-input-1 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Marketing materials index: category headings (legacy `h3.sub-head`). */
#main h3.marketing-materials-category-title {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.5rem;
    font-weight: 600;
}

/* Drag-sort placeholder row (native HTML5 DnD). */
#main tr.mm-sort-placeholder td.mm-sort-placeholder-cell {
    height: 4px;
    padding: 0;
    border-top: 3px solid #68c0d8;
    background: rgba(104, 192, 216, 0.12);
    line-height: 0;
    font-size: 0;
}

#main tr.mm-row-dragging {
    opacity: 0.45;
}

#main tbody.marketing-materials-sortable tr[data-marketing-material-id],
#main tbody.training-videos-sortable tr[data-training-video-id],
#main tbody.staff-sortable tr[data-staff-id] {
    cursor: grab;
}

#main tbody.marketing-materials-sortable tr[data-marketing-material-id]:active,
#main tbody.training-videos-sortable tr[data-training-video-id]:active,
#main tbody.staff-sortable tr[data-staff-id]:active {
    cursor: grabbing;
}

/* Marketing materials create/update: legacy PureForm had File + Image in two columns. */
.pure-form.pure-form-stacked .pure-g.gutters > [class*='pure-u'] > .admin-form-field > .mm-asset-section-label {
    display: block;
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: #414040;
}

.pure-form.pure-form-stacked .pure-g.gutters > [class*='pure-u'] > .admin-form-field .asset-manager-widget {
    max-width: 100%;
    box-sizing: border-box;
}

/* CKEditor replaces the textarea; keep editor chrome full width of the grid cell. */
.pure-form.pure-form-stacked .pure-g.gutters > [class*='pure-u'] > .admin-form-field .cke {
    max-width: 100%;
    box-sizing: border-box;
}

.pure-form.pure-form-stacked .pure-g.gutters > [class*='pure-u'] > .admin-form-field .cke_inner,
.pure-form.pure-form-stacked .pure-g.gutters > [class*='pure-u'] > .admin-form-field .cke_contents {
    box-sizing: border-box;
}

.admin-text-muted {
    color: #666;
    font-size: 0.875rem;
}

/* Marketing materials admin lists: same thumbnail box on index + all presentation (legacy parity). */
#main .admin-marketing-material-thumb {
    display: block;
    width: 120px;
    height: 90px;
    object-fit: contain;
}