/* ===========================================================================
 * bwar-panels.css — shared panel styling for the hub (added 2026-08-16)
 *
 * The house look built on the Sales dashboard: a rounded card with a gradient
 * header carrying the title, filters and actions, over a light table with a
 * tinted column header. Loaded once from header-css.php so every page can use
 * it without pasting the same block into each file.
 *
 * Accents come from the BWAR brand ramp: orange -> magenta -> purple -> cyan.
 * Add .bw-head-<accent> to the header and .bw-a-<accent> to the panel so the
 * column header, hover tint and links all follow the same colour.
 * ======================================================================== */

.bw-panel {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .10), 0 1px 3px rgba(16, 24, 40, .06);
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: #fff;
}

/* ---- header --------------------------------------------------------- */
.bw-head {
    padding: .8rem 1.1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    min-height: 62px;
}
.bw-head-pink    { background: linear-gradient(45deg, #F04160 8%, #F27435 100%); }
.bw-head-orange  { background: linear-gradient(45deg, #E8590C 0%, #F08C00 55%, #FFB627 100%); }
.bw-head-purple  { background: linear-gradient(45deg, #8E43C4 0%, #B84FCE 55%, #D48AE0 100%); }
.bw-head-blue    { background: linear-gradient(45deg, #159BE6 0%, #2AB4FF 52%, #6FCDFF 100%); }
.bw-head-teal    { background: linear-gradient(45deg, #0E9F8E 0%, #17A2B8 55%, #2AB4FF 100%); }
.bw-head-green   { background: linear-gradient(45deg, #1E7A46 0%, #2E9E5B 55%, #56C271 100%); }
.bw-head-magenta { background: linear-gradient(45deg, #FF6D00 0%, #FA2E63 60%, #FE0C67 100%); }

.bw-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff !important;
    letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}
.bw-pill {
    margin-left: .55rem;
    padding: 2px 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .26);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    vertical-align: 3px;
}
/* Qualifier next to a title, e.g. "Current & next month". */
.bw-sub {
    margin-left: .6rem;
    padding: 2px 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    vertical-align: 3px;
    text-shadow: none;
}

.bw-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }

/* Controls sitting on the gradient. */
.bw-head label { color: #fff !important; font-size: 12.5px; font-weight: 600; margin: 0 .1rem 0 0; }
.bw-head .form-control,
.bw-head select,
.bw-head input[type="text"],
.bw-head input[type="search"] {
    height: 34px;
    border-radius: 17px;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 12.5px;
    padding: 0 .85rem;
    box-shadow: none;
}
.bw-head .form-control::placeholder,
.bw-head input::placeholder { color: rgba(255, 255, 255, .78); }
.bw-head .form-control:focus,
.bw-head select:focus,
.bw-head input:focus {
    outline: 0;
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
}
.bw-head select option { color: #343a40; }

/* Checkbox + label pair sitting on the gradient. */
.bw-check { display: inline-flex; align-items: center; gap: .4rem; }
.bw-check input { width: 15px; height: 15px; accent-color: #fff; cursor: pointer; }
.bw-check label { margin: 0; cursor: pointer; }

/* White pill button — the primary action on a coloured header. */
.bw-btn {
    height: 34px;
    padding: 0 1.05rem;
    border: 0;
    border-radius: 17px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
    transition: transform .1s, box-shadow .14s;
}
.bw-btn:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, .2); transform: translateY(-1px); }
.bw-a-pink    .bw-btn { color: #C22645; }
.bw-a-orange  .bw-btn { color: #B34A06; }
.bw-a-purple  .bw-btn { color: #7B3596; }
.bw-a-blue    .bw-btn { color: #0B7DBF; }
.bw-a-teal    .bw-btn { color: #0E8C8B; }
.bw-a-green   .bw-btn { color: #1E7A46; }
.bw-a-magenta .bw-btn { color: #D62A5B; }

/* ---- table ----------------------------------------------------------- */
.bw-body { padding: .35rem .6rem .6rem; }

.bw-table { width: 100%; margin: 0; font-size: 13px; }
.bw-table thead th {
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .65rem .75rem !important;
    border: 0 !important;
    white-space: nowrap;
    vertical-align: middle;
}
.bw-a-pink    .bw-table thead th { background: #fdecef; color: #b3273f; box-shadow: inset 0 -2px 0 #F04160; }
.bw-a-orange  .bw-table thead th { background: #fff4e2; color: #a35a06; box-shadow: inset 0 -2px 0 #F08C00; }
.bw-a-purple  .bw-table thead th { background: #f6ecfb; color: #7b3596; box-shadow: inset 0 -2px 0 #B84FCE; }
.bw-a-blue    .bw-table thead th { background: #e8f6ff; color: #0B6C9E; box-shadow: inset 0 -2px 0 #2AB4FF; }
.bw-a-teal    .bw-table thead th { background: #e6f6f6; color: #10736f; box-shadow: inset 0 -2px 0 #17A2B8; }
.bw-a-green   .bw-table thead th { background: #e7f6ec; color: #17703a; box-shadow: inset 0 -2px 0 #2E9E5B; }
.bw-a-magenta .bw-table thead th { background: #fdeceb; color: #b8342e; box-shadow: inset 0 -2px 0 #FA2E63; }

.bw-table tbody td {
    padding: .5rem .75rem;
    border-top: 1px solid #f1f3f6;
    vertical-align: middle;
    color: #495057;
}
.bw-table tbody tr:nth-child(even) > td { background: #fcfdfe; }
.bw-table tbody tr:hover > td { background: #f5f8fc; }
.bw-table tbody tr.bw-empty td { color: #adb5bd; text-align: center; padding: 2.2rem .75rem; background: #fff; }
.bw-table a { color: #2f6fb5; font-weight: 600; }

.bw-num  { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: #343a40; }
.bw-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bw-none { color: #ced4da; }

/* Soft status pills — solid Bootstrap badges shout at table density. */
.bw-badge { display: inline-block; padding: .22rem .62rem; border-radius: 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.bw-ok    { background: #e4f6ea; color: #17703a; box-shadow: inset 0 0 0 1px rgba(23, 112, 58, .13); }
.bw-warn  { background: #fff2e0; color: #a75f00; box-shadow: inset 0 0 0 1px rgba(167, 95, 0, .14); }
.bw-bad   { background: #fdeaea; color: #b32d21; box-shadow: inset 0 0 0 1px rgba(179, 45, 33, .14); }
.bw-info  { background: #e6f0fd; color: #1f5fa8; box-shadow: inset 0 0 0 1px rgba(31, 95, 168, .14); }
.bw-quiet { background: #eef1f4; color: #667080; box-shadow: inset 0 0 0 1px rgba(102, 112, 128, .12); }

/* ---- DataTables chrome, softened to match ----------------------------- */
.bw-panel .dataTables_wrapper { padding: 0 .35rem; }
.bw-panel .dataTables_filter input,
.bw-panel .dataTables_length select {
    height: 32px;
    border: 1px solid #e3e7eb;
    border-radius: 16px;
    background: #fafbfc;
    font-size: 12.5px;
    padding: 0 .8rem;
}
.bw-panel .dataTables_filter input:focus,
.bw-panel .dataTables_length select:focus { outline: 0; background: #fff; border-color: #b9c4cf; }
.bw-panel .dataTables_filter, .bw-panel .dataTables_length,
.bw-panel .dataTables_info, .bw-panel .dataTables_paginate { font-size: 12.5px; color: #6c757d; }
.bw-panel .page-link { border: 0; border-radius: 8px !important; margin: 0 2px; color: #495057; font-size: 12.5px; }
.bw-panel .page-item.active .page-link { background: #495057; color: #fff; }
.bw-panel .page-link:hover { background: #eef1f4; }

/* ---- modal headers ---------------------------------------------------- */
/* Hub modals get the brand gradient rather than whatever theme colour they
   picked up. Applied by class so it never touches third-party modals.

   Doubled selector on purpose: css1/main-new.css (inlined by navbar.php, so it
   lands AFTER this file) sets `.modal-header { background:#309C84 !important }`
   globally. Equal specificity + both !important means later wins, so a single
   `.bw-modal-head` loses. `.modal-header.bw-modal-head` outranks it outright. */
.modal-header.bw-modal-head,
.bw-modal-head {
    background: linear-gradient(45deg, #F04160 8%, #F27435 100%) !important;
    border-bottom: 0 !important;
    padding: .85rem 1.1rem !important;
    align-items: center !important;
}
.modal-header.bw-modal-head .modal-title,
.modal-header.bw-modal-head .title-model {
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}
.modal-header.bw-modal-head .close {
    color: #fff;
    opacity: .85;
    text-shadow: none;
    font-size: 26px;
    line-height: 1;
}
.modal-header.bw-modal-head .close:hover { color: #fff; opacity: 1; }

/* ---- inline notice ----------------------------------------------------- */
/* Shrinks to its text and centres, instead of a full-width bar with a lonely
   sentence adrift at the left. */
.bw-notice-wrap { display: flex; justify-content: center; width: 100%; }
.bw-notice {
    display: inline-block;
    max-width: 90%;
    margin: .2rem 0 .9rem;
    padding: .7rem 1.4rem;
    border: 0;
    border-left: 5px solid #17A2B8;
    border-radius: 8px;
    background: linear-gradient(90deg, #f0fbfc 0%, #ffffff 100%);
    box-shadow: 0 3px 12px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .07);
    color: #34495e;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
}
.bw-notice i { color: #17A2B8; margin-right: .45rem; }

/* Primary action inside a hub modal. main-new.css repaints .btn-primary green
   on hover, so this needs to outrank it too. */
.modal .bw-modal-btn,
.modal .bw-modal-btn:hover,
.modal .bw-modal-btn:focus,
.modal .bw-modal-btn:active {
    background: linear-gradient(45deg, #F04160 8%, #F27435 100%) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: 18px;
    box-shadow: 0 1px 4px rgba(240, 65, 96, .32);
}
.modal .bw-modal-btn:hover {
    box-shadow: 0 3px 10px rgba(240, 65, 96, .42);
    transform: translateY(-1px);
}
.modal .bw-modal-btn-ghost,
.modal .bw-modal-btn-ghost:hover,
.modal .bw-modal-btn-ghost:focus {
    background: #fff !important;
    border: 1px solid #dfe3e8 !important;
    color: #5b6572 !important;
    font-weight: 600;
    border-radius: 18px;
}
.modal .bw-modal-btn-ghost:hover { background: #f4f6f8 !important; }