* {
    margin: 0;
    font-family: "Noto Sans", sans-serif;
}

body {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

:root {
    --blue: #0a5cff;
    --red: #ff0a05;
    --greens: #374c58;
    /* [UI1] Accent for non-destructive "manage" actions (devices, sub members). Matches the
       Bootstrap .btn-success already used by the Sub Members button in the member list. */
    --success: #198754;
}

.max-width {
    margin: auto;
    padding: 0 5px;
}

/* header */

header {
    background-color: var(--greens);
    /* background-color: #a5adaf; */
    padding: 5px;
}

.user {
    cursor: pointer;
}

.user_person {
    width: 50px;
    height: 50px;
    border: 1px solid #cad5d7;
    background-color: #849097;
}

/* logout button */

.logout-button {
    position: absolute;
    top: 50px;
    right: 3px;
    display: none;
    cursor: pointer;
    z-index: 1000;
}

.logout-button h6,
.logout-button button {
    background-color: #374c58;
    color: white;
    padding: 10px 35px;
    transition-duration: 0.3s;
    border: none;
}

.logout-button h6:hover,
.logout-button button:hover {
    background-color: #475259;
}

/* modal */

/* ===== [REMOVED: fixed modal offset/height] [UI2 — see changes/PHASE15_PANEL_UI.md] =====
   `top: 6%` shifted the whole dialog down while `max-height: 650px` sized it in pixels, so
   on any viewport shorter than ~700px the taller dialogs (Add App Version, Create Member)
   ran off the bottom with their submit button unreachable — the page behind scrolls, the
   modal does not. Replaced by the viewport-relative sizing + scrolling body in the
   "[UI2] Modals" block near the end of this file.

.modal {
    top: 6%;
}

.modal-content {
    height: auto;
    max-height: 650px;
    // overflow-y: scroll;
}
   ===== [/REMOVED: fixed modal offset/height] ===== */

.recipt-header,
.modal-header {
    padding: 15px;
    background-color: var(--greens) !important;
    color: white;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: none !important;
}

.recipt-header p {
    width: 100%;
    font-weight: 600;
    font-size: 17px;
    text-align: center;
}

.recipt-header img,
.modal-header img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    cursor: pointer;
}

#back {
    text-transform: capitalize;
}

.table-data table {
    border-bottom: 1px solid white;
}

.recipt-body {
    background-color: #ecf0f1;
    padding: 15px;
    max-height: 590px;
    overflow-y: scroll;
}

.buttons-csv {
}

.user_person {
    display: flex;
}

.user_person img {
    align-items: center;
    object-fit: contain;
}

/* ===== [REMOVED: second Back look] [UI3 — see changes/PHASE15_PANEL_UI.md] =====
   7px/12px and a 3px radius with no hover, against `.back-btn`'s 7px/20px and 10px radius
   below — so the car wizard, the notification form and car details had a visibly different
   (and unresponsive) Back button from every list page. Superseded by the single Back rule
   in the "[UI2] One list toolbar" block near the end of this file.

.page_back a,
.back {
    background-color: var(--red);
    padding: 7px 12px;
    border-radius: 3px;
    width: auto;
    cursor: pointer;
    text-decoration: none;
}
   ===== [/REMOVED: second Back look] ===== */

* {
    margin: 0;
}

#app {
    display: flex;
}

#side_nav_bar {
    width: 225px;
    flex-shrink: 0;
    /* background: #a5adaf; */
    overflow-y: auto;
    background: var(--greens);
}

#right_bar {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#right_bar > .navbar {
    flex-shrink: 0;
}

#right_bar > main {
    flex-grow: 1;
}

.main_content {
    /* border: 1px solid red; */
    height: 100%;
    /* background-color: #122C4405; */
    overflow-y: scroll;
}

#side_nav_bar .main_logo {
    display: block;
    width: 70%;
    margin: 10px auto;
}

#side_nav_bar .main_logo img {
    display: block;
    width: 70%;
    margin: auto;
}

#side_nav_bar .sub_menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 5px 5px 0px;
}

.active img {
    /* filter: brightness(0%); */
}

.filter_img {
    filter: brightness(0) saturate(100%);
}

.sub_menu a div {
    width: 35px;
    height: 25px;
}

#side_nav_bar .sub_menu a {
    font-size: 18px;
    color: black;
    text-decoration: none;
    /* text-transform: uppercase; */
    font-weight: bold;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    margin-bottom: 7px;
    background: white;
    padding: 8px 10px;
    font-weight: 600;
    width: 95%;
}

#side_nav_bar .sub_menu a:hover {
    background: #b5cfd6;
    color: black;
    font-weight: 700;
    transition-duration: 0.3s;
}

.sub_nav_bar {
    display: flex;
    justify-content: space-between;
}

#right_bar nav {
    background-color: var(--greens) !important;
    padding: 15px;
}

.container {
    margin-right: 0 !important;
}

.shows {
    display: flex;
    justify-content: space-between;
    /* margin: 1% 1%; */
    background-color: var(--greens);
    padding: 5px;
    align-items: center;
}

.modal {
    /* background-color: #0c0b11de; */
}

.shows p {
    color: white;
    font-size: 19px;
    font-weight: 600;
    margin-top: 5px;
}

.card {
    border-left: 4px solid white !important;
    color: white;
    background: var(--greens) !important;
}

main {
    background-color: #ecf0f1;
}

/* logout popup */

.logout-pop {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.838);
    z-index: 10;
    display: none;
}

.logout-popbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 140px;
    margin: auto;
    border: 1px solid black;
    padding: 20px 10px;
    background-color: rgb(243, 246, 250);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.logout-popbox p {
    font-size: 18px;
}

.logout-popbox h6 {
    color: white;
    background-color: var(--red);
    border: 2px solid var(--red);
    padding: 10px;
    cursor: pointer;
    width: 120px;
    transition-duration: 0.3s;
}

.logout-popbox h6:hover {
    background-color: white !important;
    color: #fa2cb4 !important;
    cursor: pointer;
    transition-duration: 0.3s;
}

#myTable {
    border: 1px solid rgba(10, 9, 9, 0.801) !important;
}

#myTable_wrapper {
    width: 98%;
    margin: 25px 1%;
}

.action {
    margin-left: 25%;
}

.action {
    justify-content: flex-end;
}

.action div {
    padding: 4px 8px;
    border-radius: 2px;
    margin-right: 10px;
    font-size: 17px;
    margin-top: 13%;
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after {
    left: 0%;
}

th:nth-child(1),
th:nth-child(2) {
    padding-left: 20px !important;
}

.main-div {
    padding: 50px 50px;
}

.card:hover {
    background-color: #428394 !important;
    color: black !important;
    transition-duration: 0.3s;
}

.fa-car-side {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.active {
    background-color: #b5cfd6 !important;
}

#logout {
    /* background-color: #496670 !important; */
    background-color: var(--red) !important;
    padding: 5px 15px 7px 15px;
    border-radius: 2px;
    border: 4px solid var(--red);
    font-weight: 600;
    color: white !important;
}

#logout:hover {
    background-color: white !important;
    color: var(--red) !important;
    transition-duration: 0.5s;
}

.heading {
    background-color: var(--greens);
    padding: 10px;
    margin: 5px;
}

.car_heading {
    background-color: var(--red);
    padding: 8px 25px;
    font-size: 20px;
}

.image-white {
    filter: brightness(0) invert(1);
}

/* Only genuinely clickable rows (those carrying a data-id navigation target, e.g. the
   dealer/car lists) show the clickable cursor — static list rows must not look clickable. */
tr[data-id]:hover {
    cursor: pointer;
}

/* Action / last column on the normal (non-flex) list tables: shrink it to its content
   and right-align, so the header label sits directly above the action buttons instead
   of floating far to the left. Keeps the last column consistent across every page.
   (#dataTable pages are flex rows and already right-align their action cell.) */
#custom_table th:last-child,
#custom_table td:last-child,
.area_table th:last-child,
.area_table td:last-child,
#app_manage th:last-child,
#app_manage td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right !important;
    /* override the varying inline paddings (20px/30px) so header + buttons line up */
    padding-right: 30px !important;
}

.fa-circle-down {
    color: white;
    padding: 3px 8px;
}

.hide_text {
    opacity: 0;
    font-size: 1px;
}

.obj_cover {
    object-fit: cover !important;
}

/* laravel pagination */

#pagination nav {
    background-color: white !important;
    display: flex;
    justify-content: flex-end;
}

#pagination .page-link.active,
.active > .page-link {
    background-color: var(--greens);
    border: 1px solid var(--greens);
    color: white !important;
}

#pagination .page-link {
    color: var(--greens);
    border: 1px solid var(--greens);
    border-radius: 0;
}

.add_cover .cover_re,
.add_image .car_image {
    opacity: 0;
}

/*  */

.custom_table {
    height: calc(100vh - 60px);
    overflow: auto;
}
.custom_table thead {
    background-color: var(--greens);
}
.custom_table td,
.custom_table th {
    text-align: left;
    padding: 8px 10px;
}

.custom_table .table-logo > span {
    display: inline-block;
    width: 75px;
    height: 75px;
    background-color: #849097;
}

/* area */

.area_table {
    width: 100%;
}

.area_table .name {
    width: 200px;
}

.area_table .pincode {
    width: 200px;
}

/* [UI1] Soft-removed: this forced 8px padding on ONLY the first two header cells, so the
   Area table's header sat at a different height from every other list — and from its own
   third column. The shared `thead th` rule in the Panel UI baseline now covers all of them.
.area_table th:nth-child(1),
.area_table th:nth-child(2) {
    padding: 8px 10px !important;
}
*/

/* ===== [REMOVED: third Back look] [UI3 — see changes/PHASE15_PANEL_UI.md] =====
   `:hover { color: white }` was a no-op — the button already was white-on-red, so the
   toolbar Back gave no feedback either. Superseded by the single Back rule in the
   "[UI2] One list toolbar" block near the end of this file.

.back-btn {
    color: white;
    padding: 7px 20px;
    background-color: var(--red);
    transition-duration: 0.3s;
    border: none;
    border-radius: 10px;
    text-decoration: none;
}
.back-btn:hover {
    color: white;
}
   ===== [/REMOVED: third Back look] ===== */

.red-btn {
    color: white;
    padding: 7px 20px;
    background-color: var(--red);
    transition-duration: 0.3s;
    border: none;
}
#add_sub_admin .profile_image {
    max-width: 300px;
}
#add_sub_admin .profile_pre {
    display: none;
}

.inquiryDropdown {
    width: 150px;
}

.btn-delete {
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 5px;
    color: white;
    background-color: var(--red);
    border: 3px solid var(--red);
    transition-duration: 0.4s;
}
.btn-delete:hover {
    background-color: white;
    color: var(--red);
    transition-duration: 0.4s;
}

#custom_table {
    width: 100%;
}

#custom_table tbody tr:nth-child(odd) {
    background-color: #ecf0f1;
}

#custom_table tbody tr:nth-child(even) {
    background-color: white;
}

.custom_table tbody tr:nth-child(odd) {
    background-color: #ecf0f1;
}

.custom_table tbody tr:nth-child(even) {
    background-color: white;
}

.btn-yellow {
    border: 1px solid rgb(249, 168, 48);
    background-color: rgb(249, 168, 48) !important;
    color: white !important;
    transition-duration: 0.4su;
}

.btn-yellow:hover {
    border: 1px solid rgb(249, 168, 48);
    color: rgb(249, 168, 48) !important;
    background-color: white !important;
}

.btn-blue {
    border: 1px solid var(--greens);
    background-color: var(--greens) !important;
    color: white !important;
    transition-duration: 0.4su;
}

.btn-blue:hover {
    border: 1px solid var(--greens);
    color: var(--greens) !important;
    background-color: white !important;
}

/* resell page */
#resellStatus {
    background-color: white;
    width: auto;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px 15px;
}

.resell_car_image {
    width: 75px;
    height: 75px;
    display: block;
}

.area_selector {
    display: grid;
    gap: 10px;
}

.area_selector h6 {
    margin-bottom: 0;
}

.area_selector .city_name {
    font-weight: bold;
    font-weight: 14px;
}

.area_selector .area_cnt {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.custom_form input {
    background-color: white;
    padding: 6px 10px;
    border: 1px solid #cad5d7;
}

.custom_form label {
    margin-bottom: 4px;
}

.custom_form textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #cad5d7;
    border-radius: 10px;
}

.small_text_resell {
    font-size: 12px;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
}


.banner_card {
    position: relative;
} 

.banner_card .delete_banner {
    position: absolute;
    top: 10px;
    right: 10px;
}

.banner_card .banner_image {
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Shared inline form-validation styles (see js/form-validate.js)
   --------------------------------------------------------------------------- */
.field-error {
    display: block;
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 4px;
    line-height: 1.2;
}

.is-invalid {
    border: 1px solid #dc3545 !important;
}

/* =====================================================================
 | Reusable theme toggle switch (active / inactive)
 | Two ways to drive the "on" state, so it fits existing flows without
 | changing any server behaviour:
 |   1. real checkbox  -> .theme-switch > input:checked   (auto-submit forms)
 |   2. presentational -> .theme-switch.is-on             (opens a confirm modal)
 ===================================================================== */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
}

.theme-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.theme-switch .slider {
    position: absolute;
    inset: 0;
    background-color: #b9c0c7;
    border-radius: 24px;
    transition: background-color 0.2s ease;
}

.theme-switch .slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.theme-switch input:checked + .slider,
.theme-switch.is-on .slider {
    background-color: #29af01;
}

.theme-switch input:checked + .slider::before,
.theme-switch.is-on .slider::before {
    transform: translateX(22px);
}

.theme-switch input:disabled + .slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   [UI1 — see changes/PHASE9_ADMIN_ACCOUNT.md] Panel UI baseline
   --------------------------------------------------------------------------
   custom.css is the ONLY stylesheet loaded on every panel page (layouts/app.blade.php
   line 30) — dealer_page.css / database.css load conditionally per route. Anything that
   must look the same in EVERY module therefore belongs here, not in those files.
   ========================================================================== */

/* --- 1. Clickable things show the hand cursor ----------------------------
   The panel drives most actions from <a> tags with NO href (the edit / lock /
   trash icons in every list) and from <div>/<img> modal triggers. Browsers only
   give `cursor: pointer` to anchors that HAVE an href, so all of those showed the
   text "I-beam" instead. Attribute selectors are used deliberately: they cover
   every existing occurrence AND anything added later, so no page can drift again.
   Previously this was patched per-element with inline style="cursor:pointer"
   (member_doc_types.blade.php) — that is what made the panel feel inconsistent. */
a:not([href]),
[data-bs-toggle],
[data-bs-dismiss],
[onclick],
label[for],
summary,
select,
input[type="checkbox"],
input[type="radio"],
.form-check-label,
button:not(:disabled):not([disabled]),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="reset"]:not(:disabled) {
    cursor: pointer;
}

/* Anything switched off must say so rather than look clickable. */
button:disabled,
button[disabled],
input:disabled,
select:disabled,
.disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

/* --- 2. One look for every list table ------------------------------------
   The list pages had grown six different table hooks — #dataTables, #dataTable,
   #custom_table, .custom_table, .area_table, #app_manage — each styled separately
   across custom.css, dealer_page.css and database.css. Worse, the green header and
   the avatar cell were defined ONLY in dealer_page.css, which is not loaded on
   sub-admin, sub-dealers, area or dead-stock — so those four lists rendered with a
   plain white header while every other module showed the green one.
   These rules give all six the same header, zebra striping, padding and hover.
   Layout mechanics are left alone (e.g. #dataTable rows stay flex). */
#dataTables thead,
#dataTable thead,
#custom_table thead,
.custom_table thead,
.area_table thead,
#app_manage thead,
.b_div tablethead {
    background-color: var(--greens);
}

#dataTables thead th,
#dataTable thead th,
#custom_table thead th,
.custom_table thead th,
.area_table thead th,
#app_manage thead th,
.b_div tablethead th {
    color: white;
    text-transform: capitalize;
    font-weight: 600;
    padding: 12px 10px;
    white-space: nowrap;
}

#dataTables tbody td,
#dataTable tbody td,
#custom_table tbody td,
.custom_table tbody td,
.area_table tbody td,
#app_manage tbody td,
.b_div tabletbody td {
    padding: 10px;
    vertical-align: middle;
}

/* Zebra striping — was defined for #dataTable/#custom_table/.custom_table only, and
   half-defined for #app_manage (even rows white, odd rows left unstyled). */
#dataTables tbody tr:nth-child(odd),
#dataTable tbody tr:nth-child(odd),
#custom_table tbody tr:nth-child(odd),
.custom_table tbody tr:nth-child(odd),
.area_table tbody tr:nth-child(odd),
#app_manage tbody tr:nth-child(odd),
.b_div tabletbody tr:nth-child(odd) {
    background-color: #ecf0f1;
}

#dataTables tbody tr:nth-child(even),
#dataTable tbody tr:nth-child(even),
#custom_table tbody tr:nth-child(even),
.custom_table tbody tr:nth-child(even),
.area_table tbody tr:nth-child(even),
#app_manage tbody tr:nth-child(even),
.b_div tabletbody tr:nth-child(even) {
    background-color: white;
}

#dataTables tbody tr:hover,
#dataTable tbody tr:hover,
#custom_table tbody tr:hover,
.custom_table tbody tr:hover,
.area_table tbody tr:hover,
#app_manage tbody tr:hover,
.b_div tabletbody tr:hover {
    background-color: #cad5d7;
}

/* The avatar cell was also dealer_page.css-only, so the sub-admin list rendered its
   profile images unsized. Same 75px circle everywhere now. */
.table-logo > span {
    display: inline-block;
    width: 75px;
    height: 75px;
    background-color: #849097;
}

/* Action column: same width/alignment on every list, including the four that were
   missing from the earlier rule above (#dataTables, .custom_table, .feedback_table). */
#dataTables th:last-child,
#dataTables td:last-child,
.custom_table th:last-child,
.custom_table td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right !important;
    padding-right: 30px !important;
}

/* The action icons themselves — consistent spacing and hit area in every module. */
.action_td .edit > a,
.action_td .edit > form {
    margin-left: 10px;
}

/* --- 3. Action-column icons ----------------------------------------------
   Every list's action column is `<div class="edit …">` holding icon links. The shape used
   to be enumerated by FontAwesome class in dealer_page.css AND (with different numbers)
   in database.css, so:
     - a new icon rendered as a bare glyph until someone remembered to add its class — which
       is why the DV1 "Allowed mobile" icon sat unstyled next to four styled buttons;
     - the same icons were 18px/rounded on the member list but 17px/square elsewhere.
   One structural rule instead: ANY icon inside an action column is an action button. New
   icons are styled automatically; only their accent colour is a decision.

   NOTE the `svg` in the selector: fontawesome's all.js (layouts/app.blade.php) REPLACES each
   `<i>` with an `<svg>` at runtime, so `.edit i` alone matches nothing on a live page. The
   `.fa-*` classes are copied onto the svg, which is why the old rules keyed off them. Both
   tags are listed so the styling holds whether or not the JS swap has run.

   Scoped to `> a >` on purpose: only a bare icon LINK is its own button. The document pages
   (member-documents, car-documents) put their icon inside a real Bootstrap
   `<button class="btn btn-outline-secondary">`, which already provides the button — giving
   that icon its own square background too would double up and distort the control. */
.edit > a > i,
.edit > a > svg {
    color: white;
    padding: 6px;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    /* 6px == Bootstrap's .rounded-2 (0.375rem). Some markup carries `rounded-2` on the icon
       and some does not (e.g. the lock in dealer_pagination) — matching the value here means
       every action icon has the same corner regardless of which classes the view happens to
       spell out, instead of a 1px difference between neighbours in the same row. */
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition-duration: 0.4s;
}

/* Accent map — the ONE place an action icon's colour is decided.
   Adding an action? Add its icon class to the matching group. */
.edit .fa-pen-to-square {            /* edit           */
    background-color: var(--greens);
    border: 3px solid var(--greens);
}
.edit .fa-trash,                     /* delete         */
.edit .fa-lock {                     /* change password */
    background-color: var(--red);
    border: 3px solid var(--red);
}
.edit .fa-folder-open {              /* documents      */
    background-color: var(--blue);
    border: 3px solid var(--blue);
}
.edit .fa-mobile-screen-button,      /* [DV1] allowed mobile devices */
.edit .fa-users,                     /* sub members    */
.edit .fa-rotate-left {              /* [T15] restore dead stock */
    background-color: var(--success);
    border: 3px solid var(--success);
}
.edit .fa-eye,                       /* view           */
.edit .fa-user {
    background-color: var(--greens);
    border: 3px solid var(--greens);
}

/* Hover: every action icon inverts to white-on-accent → accent-on-white. Written once
   against the border colour so it follows whatever accent the icon was given above. */
.edit > a > i:hover,
.edit > a > svg:hover {
    background-color: white;
}
.edit .fa-pen-to-square:hover,
.edit .fa-eye:hover,
.edit .fa-user:hover {
    color: var(--greens);
}
.edit .fa-trash:hover,
.edit .fa-lock:hover {
    color: var(--red);
}
.edit .fa-folder-open:hover {
    color: var(--blue);
}
.edit .fa-mobile-screen-button:hover,
.edit .fa-users:hover,
.edit .fa-rotate-left:hover {
    color: var(--success);
}

/* --- 4. Buttons that live INSIDE a list row ------------------------------
   [UI3 — see changes/PHASE15_PANEL_UI.md] The action column's icons invert on hover
   (white-on-accent → accent-on-white, rule above), but several controls in the SAME row
   are plain Bootstrap buttons and kept Bootstrap's own "darken slightly" hover:

     · the member list's Web URL **Copy** (`.btn-primary`)
     · **Sub Members** (`.btn-success`) — outside `.edit`, so the icon rule never reached it
     · **Pending · Documents** (`.btn-warning`), shown while a member's docs are incomplete
     · **View file / Replace** on the member- and car-document pages
     · the CBWA access buttons on the sub-members list

   So in one row some controls answered the pointer one way and their neighbours another.
   These give every in-row button the panel's invert, keyed on the Bootstrap colour class
   it already carries — no markup changes, and `.btn-outline-*` is left to Bootstrap since
   it already inverts the right way. */
#dataTable .btn,
#dataTables .btn,
#custom_table .btn,
.custom_table .btn,
.area_table .btn,
#app_manage .btn,
.table-data .btn {
    border-width: 1px;
    border-style: solid;
    font-weight: 600;
    transition-duration: 0.4s;
}

#dataTable .btn-primary:hover,
#dataTables .btn-primary:hover,
#custom_table .btn-primary:hover,
.custom_table .btn-primary:hover,
.area_table .btn-primary:hover,
#app_manage .btn-primary:hover,
.table-data .btn-primary:hover {
    background-color: #fff;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

#dataTable .btn-success:hover,
#dataTables .btn-success:hover,
#custom_table .btn-success:hover,
.custom_table .btn-success:hover,
.area_table .btn-success:hover,
#app_manage .btn-success:hover,
.table-data .btn-success:hover {
    background-color: #fff;
    color: var(--success);
    border-color: var(--success);
}

#dataTable .btn-warning:hover,
#dataTables .btn-warning:hover,
#custom_table .btn-warning:hover,
.custom_table .btn-warning:hover,
.area_table .btn-warning:hover,
#app_manage .btn-warning:hover,
.table-data .btn-warning:hover {
    background-color: #fff;
    /* the markup pairs .btn-warning with .text-white for contrast on amber; on the inverted
       state that would be white-on-white, so the colour is forced back. */
    color: #b8860b !important;
    border-color: #ffc107;
}

#dataTable .btn-danger:hover,
#dataTables .btn-danger:hover,
#custom_table .btn-danger:hover,
.custom_table .btn-danger:hover,
.area_table .btn-danger:hover,
#app_manage .btn-danger:hover,
.table-data .btn-danger:hover {
    background-color: #fff !important;
    color: var(--red);
    border-color: var(--red);
}

/* The status switch is the one in-row control that is not a button. It had no hover at
   all, so the only clue it could be clicked was the cursor. */
.theme-switch:hover .slider {
    box-shadow: 0 0 0 3px rgba(55, 76, 88, 0.15);
}

.theme-switch input:disabled:hover + .slider {
    box-shadow: none;
}

/* [UI3] "View file" on the member- and car-document pages is an `<a class="badge">` — a
   LINK dressed as a status pill, sitting in the same row as `<span class="badge">Required</span>`
   and `Not uploaded`, which are not clickable. It had no hover at all, so nothing
   distinguished the one you can click from the two you cannot. Only anchors get the
   treatment; the static labels stay as they are. Bootstrap's `.bg-*` utilities carry
   `!important`, hence the same here. */
a.badge {
    border: 1px solid transparent;
    text-decoration: none;
    transition-duration: 0.4s;
}

a.badge.bg-success:hover {
    background-color: #fff !important;
    color: var(--success) !important;
    border-color: var(--success);
}

a.badge.bg-danger:hover {
    background-color: #fff !important;
    color: var(--red) !important;
    border-color: var(--red);
}

a.badge.bg-secondary:hover {
    background-color: #fff !important;
    color: #6c757d !important;
    border-color: #6c757d;
}

/* [D03] the dashboard's Pending member chip */
a.badge.bg-warning:hover {
    background-color: #fff !important;
    color: #b8860b !important;
    border-color: #ffc107;
}

/* [T15 — 2026-08-02] Dashboard tile icon drawn as a Font Awesome glyph instead of a 40px
   PNG (the Dead Stock tile — its old out-of-stock.png read "SOLD OUT", the opposite of
   what dead stock means). Sized/coloured on the WRAPPER, never on the `i`: fontawesome's
   all.js replaces <i> with <svg> at runtime, so an i-only rule matches nothing live [UI1].
   Matches the 40px box and white of the sibling tiles' `.image-white` images. */
.dash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 34px;
    line-height: 1;
    color: #fff;
}

.dash-icon > i,
.dash-icon > svg {
    height: 1em;
    width: auto;
}

/* ==========================================================================
   [UI2 — see changes/PHASE15_PANEL_UI.md] Shared panel toast
   --------------------------------------------------------------------------
   Styling for js/ui-toast.js. Bootstrap 5's default toast is a translucent
   white panel with a #6c757d grey header — on the panel's own #ecf0f1 page
   background that reads as a blank rectangle, which is why the old "Copied!"
   message looked broken. Opaque panel, coloured header bar, accent left edge.
   ========================================================================== */
.ui-toast-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.ui-toast-container > .toast {
    pointer-events: auto;
}

.ui-toast {
    width: auto;
    min-width: 260px;
    max-width: 380px;
    background-color: #fff;
    border: none;
    border-left: 4px solid var(--greens);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.ui-toast-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--greens);
    color: #fff;
    border-bottom: none;
    font-weight: 600;
}

.ui-toast-header .btn-close {
    /* BS5 sizes .btn-close off a background image; shrink it so it matches the
       header height instead of towering over the title. */
    padding: 0;
    margin: 0;
    width: 0.7em;
    height: 0.7em;
    opacity: 0.85;
}

.ui-toast-header .btn-close:hover {
    opacity: 1;
}

/* fontawesome's all.js swaps <i> for <svg> at runtime, so both are listed [UI1]. */
.ui-toast-icon,
.ui-toast-header > svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ui-toast-body {
    padding: 10px 12px;
    color: #212529;
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
}

.ui-toast-success {
    border-left-color: var(--success);
}
.ui-toast-success .ui-toast-header {
    background-color: var(--success);
}

.ui-toast-error {
    border-left-color: var(--red);
}
.ui-toast-error .ui-toast-header {
    background-color: var(--red);
}

/* ==========================================================================
   [UI2 — see changes/PHASE15_PANEL_UI.md] One list toolbar for every module
   --------------------------------------------------------------------------
   Every list page has the same bar above the table — back / export / search /
   filter on the left, the primary Add action on the right — but each module had
   built it differently:

     · Member and Sub Admin used a bare `<section>` on the page background;
       Brand, Color, Model, Area, App Manage, Feedback, Member Docs and Car Docs
       used `.max-width.heading`, which is the dark-green SECTION-TITLE band. That
       put a second heavy dark stripe directly under the dark page header, and it
       meant the same control (a white search pill) sat on white in one module and
       on dark green in the next.
     · The Add button had four different looks: a red pill with a plus icon
       (Member), a red pill with a plus icon under a different class (Sub Admin),
       a white bordered button with a plus (Brand, Model), and a white bordered
       button with no icon at all (Color, Area, App Manage, Doc types).

   `.heading` is left alone — it is still the section-title band on Dashboard and
   Settings, which is what it is FOR. List pages carry `.list-toolbar` instead, and
   the three legacy add-button hooks (`.create_folder`, `.red-btn`,
   `.clear_filter[data-bs-toggle]`) are all mapped onto one `.btn-add` look so no
   view has to drop the class its JavaScript keys off.
   ========================================================================== */
.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-height: 62px;
    padding: 10px 14px;
    margin: 0 5px;
    background-color: #fff;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
}

/* Left cluster (back / export / search / filter) and right cluster (primary action).
   `flex: 1` on the left keeps the Add button hard right even when the left is empty,
   which is why Sub Admin and App Manage used to render an off-centre empty bar. */
.list-toolbar > .toolbar-start {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.list-toolbar > .toolbar-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* The alert banner is a toolbar child on most pages; never let it stretch the bar. */
.list-toolbar > div > .alert,
.list-toolbar .alert {
    margin-bottom: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* [UI4 — 2026-08-07] …and never let it MOVE the bar either.
   ------------------------------------------------------------------------
   The flash banner used to sit inside `.toolbar-start`, so its text counted towards
   that cluster's max-content width. Flex breaks lines on hypothetical (max-content)
   sizes — `min-width: 0` only lets an item shrink once it is already on a line — so
   a single "Car edited successfully" pushed the bar past its line and dropped
   `.toolbar-end` (the count / Dead stock / Add buttons) onto a second row. The car
   list showed it worst: it carries a third cluster (the status filters) in between,
   so the bar is near capacity before any message arrives.

   `<x-alert>` is now a DIRECT child of `.list-toolbar` on every list page, and this
   rule parks it on a full-width row of its own, last. The controls keep their exact
   positions whether or not there is a message; only the bar gets taller.

   `order` is what makes the row LAST regardless of where a view happens to place the
   tag — city/feedback have it mid-toolbar. And [UI4] the component renders nothing at
   all when there is no message, so this costs a quiet page no height. */
.list-toolbar > .panel-alert {
    flex: 1 0 100%;
    order: 99;
    min-width: 0;
}

/* Outside a toolbar (car details, member/car documents, sub-member listing) the wrapper
   must stay the plain block it has always been — those pages position it themselves. */
.panel-alert > .alert:last-child {
    margin-bottom: 0;
}

/* --- Toolbar controls ----------------------------------------------------
   Same height for the search box, the filter select and the buttons, so they sit
   on one baseline instead of the ragged row the per-module CSS produced. */
.list-toolbar .search_input input,
.list-toolbar .filter select,
.list-toolbar select {
    height: 38px;
    min-width: 220px;
    border: 1px solid #cad5d7;
    border-radius: 6px;
    background-color: #fff;
}

/* The magnifier was drawn by `.search_input input[type=text]` in dealer_page.css, which is
   only loaded on some routes — so Sub Members and Sub Admin showed a plain box while Member
   and Brand showed the icon. It belongs in the file every page loads [UI1]. */
.list-toolbar .search_input input {
    width: 260px;
    max-width: 100%;
    padding: 6px 12px 6px 32px;
    background-image: url(../image/icon/search.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: 10px center;
}

.list-toolbar .search_input input:focus,
.list-toolbar .filter select:focus,
.list-toolbar select:focus {
    outline: none;
    border-color: var(--greens);
    box-shadow: 0 0 0 2px rgba(55, 76, 88, 0.12);
}

/* --- One primary "Add" button -------------------------------------------
   Mapped onto the hooks each view already uses so no markup loses its JS handle.
   `.btn-add.clear_filter` is spelled out because dealer_page.css paints `.clear_filter p`
   as a white bordered pill and is loaded AFTER this file on several routes — a bare
   `.btn-add p` would tie on specificity and lose. */
.btn-add,
.btn-add.clear_filter,
.list-toolbar .create_folder,
.list-toolbar .red-btn,
.list-toolbar .clear_filter[data-bs-toggle="modal"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    background-color: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition-duration: 0.3s;
}

/* Those hooks wrap their label in a <p>; neutralise the per-module pill styling
   (`.clear_filter p` in dealer_page.css paints a white bordered button) so the
   wrapper is just text inside the one button above. */
.btn-add p,
.btn-add.clear_filter p,
.list-toolbar .create_folder p,
.list-toolbar .red-btn p,
.list-toolbar .clear_filter[data-bs-toggle="modal"] p {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-weight: 600;
    font-size: 15px;
}

.btn-add:hover,
.btn-add.clear_filter:hover,
.list-toolbar .create_folder:hover,
.list-toolbar .red-btn:hover,
.list-toolbar .clear_filter[data-bs-toggle="modal"]:hover {
    background-color: #fff;
    color: var(--red);
}

.btn-add:hover p,
.btn-add.clear_filter:hover p,
.list-toolbar .create_folder:hover p,
.list-toolbar .red-btn:hover p,
.list-toolbar .clear_filter[data-bs-toggle="modal"]:hover p {
    color: var(--red);
}

/* The icon inside an Add button follows the label's colour in both states.
   [UI3] fontawesome's all.js swaps <i> for <svg> at runtime, so size BOTH — an `i`-only
   rule matches nothing on a live page [UI1]. `fill: currentColor` is what makes the glyph
   invert along with the text; the SVG <img> this replaced could not do that and so stayed
   white against the white hover background. */
.btn-add > i,
.btn-add > svg,
.list-toolbar .create_folder > i,
.list-toolbar .create_folder > svg,
.list-toolbar .red-btn > i,
.list-toolbar .red-btn > svg,
.list-toolbar .clear_filter[data-bs-toggle="modal"] i,
.list-toolbar .clear_filter[data-bs-toggle="modal"] svg {
    width: 13px;
    height: 13px;
    color: inherit;
    fill: currentColor;
}

/* --- Back --------------------------------------------------------------
   [UI3] ONE Back button for the whole panel. There were four:
     · `.back-btn`      — the toolbar lists (7px/20px, 10px radius, no hover)
     · `.back`          — the car add/edit wizard and the notification form
     · `.page_back > a` — car details, sharing `.back`'s rule but in its own white strip
     · inline Bootstrap utilities — the customer page
   `.back` and `.page_back a` also had NO hover at all, so those two pages had a Back
   button that did not react to the pointer while every other control on the panel did.
   Listed together here (rather than renaming classes in the views) so nothing loses the
   hook its markup or JS depends on — the wizard's `.first_p`/`.sec_p`/`.third_p` Back
   links are `.back` elements with click handlers in car.js. */
.back-btn,
.back,
.page_back > a,
.list-toolbar .back-btn,
.list-toolbar .back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    border: 1px solid var(--red);
    border-radius: 6px;
    background-color: var(--red);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition-duration: 0.3s;
}

.back-btn:hover,
.back:hover,
.page_back > a:hover,
.list-toolbar .back-btn:hover,
.list-toolbar .back:hover {
    background-color: #fff;
    color: var(--red);
}

/* --- Export -------------------------------------------------------------- */

/* The CSV export is an icon-only control. It was a bare 2x glyph whose box changed
   size per module; give it the same square button as everything else. */
.list-toolbar .search_button#exp_csv,
.list-toolbar #exp_csv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background-color: var(--red);
    border-radius: 6px;
    cursor: pointer;
    transition-duration: 0.3s;
}

.list-toolbar #exp_csv:hover {
    background-color: #fff;
    border: 1px solid var(--red);
}

.list-toolbar #exp_csv p {
    margin: 0;
    padding: 0;
    background: none;
    line-height: 0;
}

/* fontawesome's all.js swaps <i> for <svg> [UI1] — size both. */
.list-toolbar #exp_csv i,
.list-toolbar #exp_csv svg {
    width: 20px;
    height: 20px;
    color: #fff;
    padding: 0;
}

.list-toolbar #exp_csv:hover i,
.list-toolbar #exp_csv:hover svg {
    color: var(--red);
}

/* ==========================================================================
   [UI2] Shared empty state
   --------------------------------------------------------------------------
   Member, Sub Admin, Car list, Dead stock and Feedback said "No record found";
   Brand, Color, Model, Area, App Manage and Sub Members said nothing at all —
   an empty grey area under a header row, which reads as a page that failed to
   load rather than a list with no rows. One look, one wording.
   ========================================================================== */
.list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 20px;
    color: #6b7c85;
    text-align: center;
}

.list-empty .list-empty-icon,
.list-empty .list-empty-icon > svg {
    width: 34px;
    height: 34px;
    font-size: 34px;
    line-height: 1;
    color: #b9c4c9;
}

.list-empty .list-empty-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #55666f;
}

.list-empty .list-empty-hint {
    margin: 0;
    font-size: 0.875rem;
}

/* An empty state inside a table keeps the table's own cell padding out of the way. */
td.list-empty-cell {
    padding: 0 !important;
    background-color: #fff;
}

/* ==========================================================================
   [UI2] Modals
   ========================================================================== */

/* Two separate problems with the modal box:

   1. `.recipt-body` was `overflow-y: scroll`, which paints a scrollbar gutter on EVERY
      modal — including the one-field Add Brand / Add Color dialogs, where a permanently
      greyed-out track sat next to the input as if content were being cut off.

   2. The sizes were in PIXELS and the modal was pushed down by `.modal { top: 6% }`:
      `.modal-content { max-height: 650px }` + `.recipt-body { max-height: 590px }`. On a
      laptop viewport the taller dialogs (Add App Version, Create Member) therefore ran off
      the bottom of the screen with their submit button unreachable — the page behind
      scrolls, the modal does not. Viewport-relative heights plus a scrolling body (the
      Bootstrap 5 `.modal-dialog-scrollable` shape, done in CSS so no markup changes) keep
      the header and the submit button on screen at any height. */
.modal-dialog {
    max-height: calc(100% - 3.5rem);
}

.modal-content {
    max-height: calc(100vh - 3.5rem);
}

.recipt-body {
    max-height: none;
    overflow-y: auto;
    /* `.modal-content` is a flex column in BS5 — grow into the leftover space and allow
       shrinking (min-height:0), otherwise the body refuses to scroll and overflows instead. */
    flex: 1 1 auto;
    min-height: 0;
}

/* One footer layout for the confirm/submit row, instead of each modal centring,
   right-aligning or stacking its buttons. */
.create_user_button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==========================================================================
   [UI2] Inline validation messages
   --------------------------------------------------------------------------
   `.field-error` is a `<small>` inserted after the field, and the panel's forms are
   a mix of flex ROWS (`.au_box`, the settings bar) and flex COLUMNS
   (`.create_user.d-flex.flex-column`, i.e. every modal). It has to behave in both:

     - `width: 100%` so it spans the control it belongs to rather than sitting
       beside it as another flex column;
     - `flex: none` so a flex COLUMN sizes it by its text. `flex: 0 0 100%` would
       set its **height** to 100% of the modal body there — flex-basis follows the
       main axis — and an `order:` value would move it to the end of the column,
       printing "Name is required" underneath the Add button instead of under the
       field it describes.
   ========================================================================== */
.field-error {
    width: 100%;
    max-width: 100%;
    flex: none;
}

/* A radio/checkbox GROUP is flagged on its wrapper, not on the individual inputs —
   a 1px red box drawn around a radio circle reads as a broken control. */
.au_box.is-invalid,
div.is-invalid,
fieldset.is-invalid {
    border: 1px solid #dc3545 !important;
    border-radius: 6px;
    padding: 6px 8px;
}

/* ==========================================================================
   [UI2] The panel's submit button
   --------------------------------------------------------------------------
   Every modal's action button is red because dealer_page.css styles
   `.create_user_button button`. Settings → Member ID Prefix has its Save button
   OUTSIDE that wrapper, so it fell through to the browser default and rendered as
   a grey system chip next to the panel's own controls. `.btn-panel` is that same
   red action button as a class you can put anywhere, and the wrapper rule is
   aligned to it so a modal button and a standalone one are the same control.
   ========================================================================== */
.btn-panel,
.create_user_button button,
.create_user_button input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    background-color: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    border-radius: 6px;
    font-weight: 600;
    line-height: 1;
    transition-duration: 0.3s;
}

.btn-panel:hover,
.create_user_button button:hover,
.create_user_button input[type="submit"]:hover {
    background-color: #fff;
    color: var(--red);
}

/* Secondary (cancel / close) — same size, quieter. */
.btn-panel-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px;
    background-color: #fff;
    color: var(--greens);
    border: 1px solid #b9c4c9;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1;
    transition-duration: 0.3s;
}

.btn-panel-secondary:hover {
    background-color: #eef2f3;
    color: var(--greens);
}

/* ==========================================================================
   [UI2] List scroll area
   --------------------------------------------------------------------------
   Brand / Color / Model / Area nest `.database_main` (a fixed
   `calc(100vh - 160px)` box) inside `main`, which scrolls too — so those four
   pages showed TWO vertical scrollbars side by side and the table could be
   scrolled independently of the page it was on. The inner box now grows with its
   content and the page is the only scroller, matching every other list.

   NOTE the `main` in each selector: database.css is loaded AFTER custom.css on those
   routes (layouts/app.blade.php), so a bare `.database_main` here would lose the tie
   on specificity+order. `main .database_main` outranks it. [UI1's per-route-CSS trap.]
   ========================================================================== */
main .database_main {
    height: auto;
}

main .database_main .section_add {
    overflow-y: visible;
}

main .database_main .b_div {
    overflow-y: visible;
}

/* ==========================================================================
   [DS1 — see changes/PHASE16_DEAD_STOCK_STATUS.md] Dead Stock status
   --------------------------------------------------------------------------
   Dead stock became a real `cars.stock_status` value (6), so it needs the same two
   hooks every other status has in App\Support\StockStatus:
     .dead_stock  → table_class,  the status cell in a list (dead_stock_list, car list)
     .dead_border → detail_class, the highlighted button on the car detail page

   They live HERE, not in car_detail.css, because the status shows up in three
   different modules (dead stock list, car list, car details) and car_detail.css is
   only loaded on two of them — the per-route-CSS trap [UI1] was written for.

   Muted grey on purpose: dead stock is the one status that means "this car is not
   trading". The other four table_class rules in car_detail.css are cosmetic no-ops
   (their background-images are commented out), so nothing here has to match them.
   ========================================================================== */
.dead_stock p {
    position: relative;
    color: #6b7a83;
}

.dead_stock img {
    opacity: 0.75;
}

.dead_border {
    border: 2px solid #6b7a83 !important;
}

/* [DS2] The dead-stock cover placeholder is a WIDE banner, not a car photo. `.obj_cover`
   (object-fit: cover) would crop it to the middle and show a slice of bodywork, which says
   nothing. `contain` keeps the whole "photo deleted — upload again" message readable in the
   list cell. Deliberately a separate class: real covers must keep cropping to fill the box. */
.dead-thumb {
    object-fit: contain !important;
    background-color: #f4f6f7;
}