/**
 * legacy-compat.css
 * ---------------------------------------------------------------------
 * WHY THIS FILE EXISTS
 * The v2 template ships Bootstrap 5 (see resources/libs/global/global.min.js)
 * but a large amount of markup generated from PHP controllers (status
 * badges, credit-type tags, form labels, input-group icons, etc.) was
 * written for Bootstrap 3 and still uses Bootstrap-3-only class names
 * that do not exist anywhere in resources/css/styles.css:
 *
 *   .label / .label-success / .label-danger / .label-warning /
 *   .label-mint / .label-purple / .label-pink / .label-table
 *   .form-group / .control-label
 *   .input-group-addon
 *   .close (legacy dismiss button, kept as a safety net)
 *
 * Rather than rewriting every controller string and every view (very
 * high risk of introducing typos into business logic that concatenates
 * HTML), this file restores the exact old visual styling for those
 * class names on top of Bootstrap 5. Colors below are taken directly
 * from the old resources/css/style.css so the look is unchanged.
 *
 * Loaded in: superadmin + user default_layout.php and login_layout.php,
 * directly after styles.css.
 * ---------------------------------------------------------------------
 */

/* ---- Bootstrap 3 "label" badges (status pills, credit-type tags) ---- */
.label {
    display: inline-block;
    padding: .2em .6em .3em;
    font-size: 85%;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .1em;
}
.label:empty {
    display: none;
}
.label-table {
    width: 100%;
    min-width: 4.5em;
    max-width: 100px;
    font-size: 1em;
    padding: 5px;
}
.label-default { background-color: #e3e8ee; color: #333; }
.label-primary { background-color: #2d85d2; }
.label-info    { background-color: #00D5E6; }
.label-success { background-color: #449D44; }
.label-warning { background-color: #FF9800; }
.label-danger  { background-color: #f0300b; }
.label-mint    { background-color: #3eb489; }
.label-purple  { background-color: #9C27B0; }
.label-pink    { background-color: #ff2349; }
.label-dark    { background-color: #3b4146; }

/* ---- Bootstrap 3 form spacing helpers (removed in BS5) ---- */
.form-group {
    margin-bottom: 1rem;
}
.control-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: .5rem;
    font-weight: 700;
}

/* ---- Bootstrap 3 input-group-addon (renamed to input-group-text in BS5) ---- */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    min-width: 45px;
    justify-content: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color, #495057);
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid var(--bs-border-color, #e1e5ea);
}
.input-group > .input-group-addon:not(:first-child) {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > .input-group-addon:not(:last-child) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---- Bootstrap 3 float helpers (renamed float-end/float-start in BS5) ---- */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* ---- Legacy "panel-control" header action wrapper (a handful of campaign
   detail pages still use this for a right-aligned header button/badge) ---- */
.card-header:has(.panel-control) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-control {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    order: 2;
}

/* =========================================================================
   TABLE UI OVERHAUL
   - row actions: kebab (three-dot) dropdown instead of a row of icon
     buttons that forced horizontal scrolling
   - restores left/right breathing room inside "p-0" card bodies that hold
     a DataTable (the card padding was removed so the table could span the
     full card width, but that also pushed the first/last column flush
     against the card edge)
   - every table in the app uses Bootstrap's "table-bordered" class, which
     draws a border around *every* cell in both directions - a dense grid
     that reads as dated next to the rest of the new design. Neutralising
     the vertical borders here (in one place) instead of editing every
     view's class list gives a flat, modern row-divider-only look.
   ========================================================================= */
.card-body.p-0 > .dt-container,
.card-body.p-0 > table.dataTable {
    padding-left: 4px;
}

.card-body.p-0 .dt-layout-row:first-child {
    padding: 16px 20px 14px;
}
.card-body.p-0 .dt-layout-row:last-child {
    padding: 14px 20px 16px;
}

/* Flatten table-bordered: keep only horizontal row dividers */
table.dataTable.table-bordered,
table.dataTable.table-bordered > thead,
table.dataTable.table-bordered > tbody {
    border: 0;
}
table.dataTable.table-bordered > thead > tr > th,
table.dataTable.table-bordered > tbody > tr > td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--bs-border-color-translucent, #eef0f2) !important;
    vertical-align: middle;
}
table.dataTable > thead > tr > th {
    background: var(--bs-tertiary-bg, #f8f9fb);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bs-secondary-color, #6b7280);
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb) !important;
    white-space: nowrap;
}
table.dataTable > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}
table.dataTable > tbody > tr:hover > td {
    background-color: var(--bs-tertiary-bg, #f8f9fb);
}
table.dataTable > tbody > tr > td {
    font-size: .875rem;
    padding-top: 12px;
    padding-bottom: 12px;
}

table.dataTable > thead > tr > th:first-child,
table.dataTable > tbody > tr > td:first-child {
    padding-left: 20px !important;
}
table.dataTable > thead > tr > th:last-child,
table.dataTable > tbody > tr > td:last-child {
    padding-right: 20px !important;
}

/* Search box + pagination bar */
.dt-search input {
    border-radius: 8px;
}
.dt-paging .dt-paging-button {
    border-radius: 6px !important;
}
.dt-paging .dt-paging-button.current {
    background: var(--bs-primary, #2563EB) !important;
    border-color: var(--bs-primary, #2563EB) !important;
    color: #fff !important;
}

/* =========================================================================
   AVAILABLE CREDITS TABLE CELL
   Replaces 6 stacked full-width colored pills (all the same visual weight,
   hard to scan) with one prominent "Default" figure plus a compact row of
   small chips for the campaign-type breakdown - the important number is
   now visually distinct from the secondary ones.
   ========================================================================= */
.credits-cell {
    min-width: 190px;
}
.credits-cell-primary {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--bs-heading-color, #0f172a);
    margin-bottom: 6px;
}
.credits-cell-primary .credits-cell-virtual {
    font-size: .75rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #6b7280);
}
.credits-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.credits-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 20px;
    background: var(--bs-tertiary-bg, #f3f4f6);
    color: var(--bs-body-color, #374151);
    white-space: nowrap;
}
.credits-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
}
.credits-dot.mint    { background: #3eb489; }
.credits-dot.purple  { background: #9C27B0; }
.credits-dot.pink    { background: #ff2349; }
.credits-dot.warning { background: #FF9800; }

/* Kebab action button */
.btn-table-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    background: transparent;
    color: var(--bs-body-color, #495057);
}
.btn-table-action:hover,
.btn-table-action:focus,
.btn-table-action[aria-expanded="true"] {
    background-color: var(--bs-tertiary-bg, #f3f4f6);
    color: var(--bs-primary, #2563EB);
}
.table-action-dropdown {
    display: inline-block;
}
.table-action-dropdown .dropdown-menu {
    min-width: 160px;
    padding: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
    border: 1px solid var(--bs-border-color, #e5e7eb);
}
.table-action-dropdown .dropdown-item {
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .875rem;
}
.table-action-dropdown .dropdown-item i {
    width: 16px;
    text-align: center;
    opacity: .75;
}

/* Action column: fixed narrow width now that it only holds one kebab button.
   Sticky-positioned so actions stay visible even if a very wide table still
   needs horizontal scroll (many columns), instead of being scrolled out of
   view like before. */
table.dataTable td.action-col,
table.dataTable th.action-col {
    width: 56px;
    text-align: center;
    white-space: nowrap;
    position: sticky;
    right: 0;
    background: var(--bs-body-bg, #fff);
    z-index: 2;
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .08);
}
table.dataTable th.action-col {
    background: var(--bs-tertiary-bg, #f8f9fb);
    z-index: 3;
}
table.dataTable > tbody > tr:hover > td.action-col {
    background: var(--bs-tertiary-bg, #f8f9fb);
}
/* DataTables' scrollX wraps the table in this div - it must be the
   positioning context the sticky column measures against */
.dt-scroll-body {
    position: relative;
}

/* ---- Safety net for any .close button the audit missed ----
   (all known instances were converted to Bootstrap 5's .btn-close,
   this just prevents an unstyled "×" if any dynamic string was missed) */
.close {
    float: right;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: .5;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.close:hover,
.close:focus {
    opacity: .75;
}