/* Light mode content (skin-blue-light default) */
body.skin-blue-light .content-wrapper {
    background-color: #f4f5f7;
    color: #333;
}

body.skin-blue-light .main-footer {
    background-color: #fff;
    color: #555;
}

/* Dark mode content */
body.skin-blue .content-wrapper {
    background-color: #1e2a32 !important;
    color: #d0d7de !important;
}

body.skin-blue .main-footer {
    background-color: #1a2226 !important;
    color: #aaa !important;
    border-top: 1px solid #2c3b41 !important;
}

body.skin-blue .box {
    background-color: #253038 !important;
    border-top-color: #1183e1 !important;
    color: #d0d7de !important;
}

body.skin-blue .box-header {
    background-color: #1e2a32 !important;
    color: #d0d7de !important;
    border-bottom: 1px solid #2c3b41 !important;
}

body.skin-blue .box-footer {
    background-color: #1e2a32 !important;
    border-top: 1px solid #2c3b41 !important;
}

body.skin-blue .table,
body.skin-blue table {
    background-color: #253038 !important;
    color: #d0d7de !important;
}

    body.skin-blue .table > thead > tr > th,
    body.skin-blue .table > tbody > tr > td,
    body.skin-blue .table > tbody > tr > th {
        border-color: #2c3b41 !important;
    }

body.skin-blue .table-bordered {
    border-color: #2c3b41 !important;
}

body.skin-blue .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #1e2a32 !important;
}

body.skin-blue .form-control,
body.skin-blue input:not([type=submit]):not([type=button]),
body.skin-blue select,
body.skin-blue textarea {
    background-color: #1a2226 !important;
    color: #d0d7de !important;
    border-color: #374850 !important;
}

body.skin-blue .dropdown-menu {
    background-color: #253038 !important;
    border-color: #374850 !important;
}

    body.skin-blue .dropdown-menu > li > a {
        color: #d0d7de !important;
    }

        body.skin-blue .dropdown-menu > li > a:hover {
            background-color: #1e2a32 !important;
            color: #fff !important;
        }

body.skin-blue .modal-content {
    background-color: #253038 !important;
    color: #d0d7de !important;
}

body.skin-blue .modal-header,
body.skin-blue .modal-footer {
    border-color: #374850 !important;
}

body.skin-blue .nav-tabs > li > a {
    color: #d0d7de !important;
}

body.skin-blue .nav-tabs {
    border-color: #374850 !important;
}

body.skin-blue .panel {
    background-color: #253038 !important;
    border-color: #374850 !important;
}

body.skin-blue .panel-heading {
    background-color: #1e2a32 !important;
    border-color: #374850 !important;
    color: #d0d7de !important;
}

body.skin-blue #darkModeToggle i {
    color: #f0c040;
}

/* ══════════════════════════════════════════
   Global box/card/panel — theme aware
   ══════════════════════════════════════════ */

/* ── DARK (skin-blue) ── */
.skin-blue .box,
.skin-blue .card,
.skin-blue .panel,
.skin-blue .content-wrapper {
    background-color: #1e2a32;
    color: #d0d7de;
}

.skin-blue .box-header,
.skin-blue .card-header,
.skin-blue .panel-heading {
    background-color: #253038;
    color: #d0d7de;
    border-bottom-color: #2c3b41;
}

.skin-blue .box-footer,
.skin-blue .card-footer,
.skin-blue .panel-footer {
    background-color: #253038;
    border-top-color: #2c3b41;
}

.skin-blue .box-body,
.skin-blue .card-body,
.skin-blue .panel-body {
    background-color: #1e2a32;
    color: #d0d7de;
}

/* Borders */
.skin-blue .box,
.skin-blue .card,
.skin-blue .panel {
    border-color: #2c3b41;
}

    /* Links inside cards */
    .skin-blue .box a:not(.btn),
    .skin-blue .card a:not(.btn),
    .skin-blue .panel a:not(.btn) {
        color: #5aadff;
    }

        .skin-blue .box a:not(.btn):hover,
        .skin-blue .card a:not(.btn):hover,
        .skin-blue .panel a:not(.btn):hover {
            color: #8ec8ff;
        }

/* Muted / secondary text */
.skin-blue .text-muted,
.skin-blue small {
    color: #7fa8bf !important;
}

/* Scrollbars inside dark panels */
.skin-blue ::-webkit-scrollbar {
    width: 6px;
}

.skin-blue ::-webkit-scrollbar-track {
    background: #1e2a32;
}

.skin-blue ::-webkit-scrollbar-thumb {
    background: #374850;
    border-radius: 3px;
}

    .skin-blue ::-webkit-scrollbar-thumb:hover {
        background: #4a6070;
    }

/* ── LIGHT (skin-blue-light) ── */
.skin-blue-light .box,
.skin-blue-light .card,
.skin-blue-light .panel,
.skin-blue-light .content-wrapper {
    background-color: #ffffff;
    color: #333;
}

.skin-blue-light .box-header,
.skin-blue-light .card-header,
.skin-blue-light .panel-heading {
    background-color: #f4f7fb;
    color: #333;
    border-bottom-color: #e3e8f0;
}

.skin-blue-light .box-footer,
.skin-blue-light .card-footer,
.skin-blue-light .panel-footer {
    background-color: #f4f7fb;
    border-top-color: #e3e8f0;
}

.skin-blue-light .box-body,
.skin-blue-light .card-body,
.skin-blue-light .panel-body {
    background-color: #ffffff;
    color: #333;
}

.skin-blue-light .box,
.skin-blue-light .card,
.skin-blue-light .panel {
    border-color: #e3e8f0;
}

.skin-blue-light .text-muted,
.skin-blue-light small {
    color: #7a90a4 !important;
}

/* Buttons inside cards */
.skin-blue .btn-default {
    background-color: #253038;
    border-color: #374850;
    color: #d0d7de;
}

    .skin-blue .btn-default:hover {
        background-color: #2c3b41;
        color: #fff;
    }

/* ══════════════════════════════════════════
   List Group — theme aware
   ══════════════════════════════════════════ */

/* ── DARK (skin-blue) ── */
.skin-blue .list-group-item {
    background-color: #253038;
    border-color: #2c3b41;
    color: #d0d7de;
}

.skin-blue a.list-group-item,
.skin-blue button.list-group-item {
    color: #5aadff;
}

    .skin-blue a.list-group-item:hover,
    .skin-blue a.list-group-item:focus,
    .skin-blue button.list-group-item:hover,
    .skin-blue button.list-group-item:focus {
        background-color: #1e2a32;
        border-color: #1183e1;
        color: #8ec8ff;
    }

    .skin-blue a.list-group-item .small,
    .skin-blue a.list-group-item small {
        color: #7fa8bf;
    }

/* ── LIGHT (skin-blue-light) ── */
.skin-blue-light .list-group-item {
    background-color: #ffffff;
    border-color: #e3e8f0;
    color: #333;
}

.skin-blue-light a.list-group-item,
.skin-blue-light button.list-group-item {
    color: #1183e1;
}

    .skin-blue-light a.list-group-item:hover,
    .skin-blue-light a.list-group-item:focus,
    .skin-blue-light button.list-group-item:hover,
    .skin-blue-light button.list-group-item:focus {
        background-color: #f0f5ff;
        border-color: #1183e1;
        color: #0a5db5;
    }

    .skin-blue-light a.list-group-item .small,
    .skin-blue-light a.list-group-item small {
        color: #7a90a4;
    }

/* ══════════════════════════════════════════
   Content Header & Breadcrumb — theme aware
   ══════════════════════════════════════════ */

/* ── DARK (skin-blue) ── */
.skin-blue .content-header {
    background-color: #1e2a32;
    border-bottom: 1px solid #2c3b41;
}

    .skin-blue .content-header h1,
    .skin-blue .content-header h2,
    .skin-blue .content-header h3 {
        color: #d0d7de;
    }

.skin-blue .breadcrumb {
    background-color: transparent;
    color: #7fa8bf;
}

    .skin-blue .breadcrumb > li > a {
        color: #5aadff;
    }

        .skin-blue .breadcrumb > li > a:hover {
            color: #8ec8ff;
        }

    .skin-blue .breadcrumb > .active,
    .skin-blue .breadcrumb > li + li::before {
        color: #7fa8bf;
    }

/* ── LIGHT (skin-blue-light) ── */
.skin-blue-light .content-header {
    background-color: #f4f7fb;
    border-bottom: 1px solid #e3e8f0;
}

    .skin-blue-light .content-header h1,
    .skin-blue-light .content-header h2,
    .skin-blue-light .content-header h3 {
        color: #1a2a38;
    }

.skin-blue-light .breadcrumb {
    background-color: transparent;
    color: #7a90a4;
}

    .skin-blue-light .breadcrumb > li > a {
        color: #1183e1;
    }

        .skin-blue-light .breadcrumb > li > a:hover {
            color: #0a5db5;
        }

    .skin-blue-light .breadcrumb > .active,
    .skin-blue-light .breadcrumb > li + li::before {
        color: #7a90a4;
    }

/* ══════════════════════════════════════════
   Main Header & Navbar — theme aware
   ══════════════════════════════════════════ */

/* ── DARK (skin-blue) ── */
.skin-blue .main-header .navbar {
    background-color: #1a2a38;
}

    .skin-blue .main-header .navbar .nav > li > a {
        color: #d0d7de;
    }

        .skin-blue .main-header .navbar .nav > li > a:hover {
            background-color: #253038;
            color: #fff;
        }

/* ── LIGHT (skin-blue-light) ── */
.skin-blue-light .main-header .navbar {
    background-color: #1183e1; /* keep brand blue in light mode */
}

    .skin-blue-light .main-header .navbar .nav > li > a {
        color: #fff;
    }

        .skin-blue-light .main-header .navbar .nav > li > a:hover {
            background-color: rgba(0, 0, 0, .1);
            color: #fff;
        }

/* ══════════════════════════════════════════
   Dark mode toggle icon — always visible
   ══════════════════════════════════════════ */

/* Dark mode: sun icon in warm yellow */
.skin-blue #darkModeToggle i {
    color: #f0c040 !important;
}

/* Light mode: moon icon in white (on blue navbar) */
.skin-blue-light #darkModeToggle i {
    color: #fff !important;
}

/* ══════════════════════════════════════════
   Logo area — theme aware
   ══════════════════════════════════════════ */

/* ── DARK (skin-blue) ── */
.skin-blue .main-header .logo {
    background-color: #111e26;
    border-bottom: 1px solid #0d1a20;
}

    .skin-blue .main-header .logo:hover {
        background-color: #0d1a20;
    }

/* ── LIGHT (skin-blue-light) ── */
.skin-blue-light .main-header .logo {
    background-color: #0a5db5;
    border-bottom: 1px solid #0950a0;
}

    .skin-blue-light .main-header .logo:hover {
        background-color: #0950a0;
    }

/* ══════════════════════════════════════════
   Dark mode toggle — always visible
   ══════════════════════════════════════════ */

.skin-blue #darkModeToggle,
.skin-blue #darkModeToggle:hover,
.skin-blue #darkModeToggle:focus {
    color: #f0c040 !important;
}

    .skin-blue #darkModeToggle i {
        color: #f0c040 !important;
    }

.skin-blue-light #darkModeToggle,
.skin-blue-light #darkModeToggle:hover,
.skin-blue-light #darkModeToggle:focus {
    color: #fff !important;
}

    .skin-blue-light #darkModeToggle i {
        color: #fff !important;
    }

/* ══════════════════════════════════════════
           Product Card — skin-blue / skin-blue-light
           ══════════════════════════════════════════ */

/* ── Card shell ── */
.product-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .2s, border-color .2s;
}

/* ── Image block ── */
.product-card__image {
    position: relative;
    overflow: hidden;
    height: 200px;
    flex-shrink: 0;
}

    .product-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease;
    }

.product-card:hover .product-card__image img {
    transform: scale(1.05);
}

/* Quick view overlay button */
.product-card__view-btn {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 7px 16px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    background: rgba(17, 131, 225, .92);
    color: #fff;
    transition: bottom .25s ease, opacity .25s;
    opacity: 0;
}

.product-card:hover .product-card__view-btn {
    bottom: 10px;
    opacity: 1;
}

/* ── Body ── */
.product-card__body {
    padding: 12px 14px 8px;
    flex: 1;
}

.product-card__name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card__price {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
}

/* ── Footer ── */
.product-card__footer {
    padding: 10px 14px;
    border-top: 1px solid transparent;
}

/* ── Add to cart button ── */
.btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    background-color: #1183e1;
    color: #fff !important;
    border: none;
    cursor: pointer;
    transition: background .2s;
}

    .btn-add-cart:hover {
        background-color: #0a5db5;
        color: #fff !important;
    }

.btn-add-cart--lg {
    padding: 11px 20px;
    font-size: 15px;
    border-radius: 10px;
    margin-top: 20px;
}

/* ══════════════════════════════════════════
           DARK  skin-blue
           ══════════════════════════════════════════ */
.skin-blue .product-card {
    background-color: #253038;
    border-color: #2c3b41;
}

    .skin-blue .product-card:hover {
        box-shadow: 0 6px 24px rgba(0,0,0,.4);
        border-color: #1183e1;
    }

.skin-blue .product-card__name {
    color: #e8f0f7;
}

.skin-blue .product-card__price {
    color: #5aadff;
}

.skin-blue .product-card__footer {
    background-color: #1e2a32;
    border-color: #2c3b41;
}

/* ══════════════════════════════════════════
           LIGHT  skin-blue-light
           ══════════════════════════════════════════ */
.skin-blue-light .product-card {
    background-color: #fff;
    border-color: #e3e8f0;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
}

    .skin-blue-light .product-card:hover {
        box-shadow: 0 6px 24px rgba(0,0,0,.12);
        border-color: #1183e1;
    }

.skin-blue-light .product-card__name {
    color: #1a2a38;
}

.skin-blue-light .product-card__price {
    color: #1183e1;
}

.skin-blue-light .product-card__footer {
    background-color: #f4f7fb;
    border-color: #e3e8f0;
}

/* ══════════════════════════════════════════
           Product Modal
           ══════════════════════════════════════════ */
.product-modal {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.product-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    background: rgba(0,0,0,.35);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

    .product-modal__close:hover {
        background: rgba(0,0,0,.6);
    }

.product-modal__body {
    display: flex;
    flex-direction: row;
}

.product-modal__image-wrap {
    flex: 0 0 45%;
    max-height: 420px;
    overflow: hidden;
}

    .product-modal__image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.product-modal__detail {
    flex: 1;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-modal__name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.product-modal__price {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
}

.product-modal__description {
    font-size: 14px;
    line-height: 1.6;
    opacity: .8;
}

/* Modal dark */
.skin-blue .product-modal {
    background-color: #253038;
    color: #d0d7de;
}

.skin-blue .product-modal__name {
    color: #e8f0f7;
}

.skin-blue .product-modal__price {
    color: #5aadff;
}

/* Modal light */
.skin-blue-light .product-modal {
    background-color: #fff;
    color: #333;
}

.skin-blue-light .product-modal__name {
    color: #1a2a38;
}

.skin-blue-light .product-modal__price {
    color: #1183e1;
}

/* Responsive modal stacking */
@@media (max-width: 640px) {
    .product-modal__body {
        flex-direction: column;
    }

    .product-modal__image-wrap {
        flex: 0 0 220px;
        max-height: 220px;
    }

    .product-modal__detail {
        padding: 20px 18px;
    }
}

/*
 * backend.css patch — append these rules to ~/css/backend.css
 *
 * Fixes the dark mode toggle icon in the main header:
 *   1. Forces the icon visible on the dark header (white by default)
 *   2. Switches to dark text on the light skin
 *   3. Removes AdminLTE's default opacity/colour overrides on nav links
 *      that were washing out the icon
 */

/* ── Dark mode toggle icon ────────────────────────────────────────────────── */

/* Always visible — white on dark header */
#darkModeToggle {
    opacity: 1 !important;
}

    #darkModeToggle i,
    #darkModeIcon {
        color: #fff !important;
        font-size: 16px;
        transition: color .2s ease;
    }

/* Light skin — switch to dark so icon is visible on white header */
body.skin-blue-light #darkModeToggle i,
body.skin-blue-light #darkModeIcon {
    color: #333 !important;
}

/* Hover state — slight highlight */
#darkModeToggle:hover i,
#darkModeToggle:hover #darkModeIcon {
    color: #f9c74f !important; /* warm yellow on hover for both skins */
}