/*
 * Podiy Beauty - Modern polish layer (v2: gold identity)
 * ---------------------------------------------------------------------------
 * Palette taken from the Podiy logo: soft gold on warm cream, plus dedicated
 * status colours (A2). Additive over AdminLTE; keeps component positions.
 */

:root {
    --podiy-gold: #c4a05a;
    --podiy-gold-deep: #a87e3a;
    --podiy-gold-soft: #e6d3a8;
    --podiy-cream: #f7ead1;
    --podiy-ink: #493d2a;
    /* status (A2) */
    --podiy-ok: #2f9e54;
    --podiy-warn: #d99b2b;
    --podiy-crit: #c8503b;

    --podiy-accent: var(--podiy-gold);
    --podiy-accent-dark: var(--podiy-gold-deep);
    --podiy-radius: 12px;
    --podiy-radius-sm: 8px;
    --podiy-shadow: 0 2px 10px rgba(94, 74, 30, .08);
    --podiy-shadow-hover: 0 8px 22px rgba(94, 74, 30, .14);
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ===== Ambient animated background: vertical bars drifting behind everything ===== */
.podiy-bg {
    position: fixed;
    inset: 0;
    z-index: -1;                 /* sits behind everything; no stacking-context traps */
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(160deg, #fbf5e8 0%, #f4e8cf 100%);
}
.podiy-bg span {
    position: absolute;
    top: -30vh;
    width: 46px;
    height: 60vh;
    border-radius: 40px;
    background: linear-gradient(180deg, rgba(196, 160, 90, .00), rgba(196, 160, 90, .16), rgba(196, 160, 90, .00));
    filter: blur(1px);
    animation: podiyDrift 16s linear infinite;
    opacity: .7;
}
.podiy-bg span:nth-child(1) { left: 6%;  animation-duration: 19s; animation-delay: -2s; }
.podiy-bg span:nth-child(2) { left: 22%; animation-duration: 24s; animation-delay: -8s; width: 30px; }
.podiy-bg span:nth-child(3) { left: 39%; animation-duration: 15s; animation-delay: -5s; width: 60px; }
.podiy-bg span:nth-child(4) { left: 57%; animation-duration: 27s; animation-delay: -12s; width: 34px; }
.podiy-bg span:nth-child(5) { left: 73%; animation-duration: 18s; animation-delay: -3s; }
.podiy-bg span:nth-child(6) { left: 88%; animation-duration: 22s; animation-delay: -9s; width: 52px; }
@keyframes podiyDrift {
    0%   { transform: translateY(0) rotate(0.001deg); }
    100% { transform: translateY(150vh); }
}
@media (prefers-reduced-motion: reduce) { .podiy-bg span { animation: none; } }

/* Let the ambient bars peek through: make the app chrome transparent so the
   fixed z-index:-1 background shows. Do NOT touch position/z-index of the
   sidebar, navbar or content-wrapper — that creates stacking contexts that trap
   Bootstrap modals behind their backdrop and break the fixed sidebar. */
html { background: #f8f1e2; }
body.hold-transition { background: transparent !important; }
.content-wrapper,
.main-footer { background: transparent !important; }

/* ===== Cards ===== */
.card {
    border: none;
    border-radius: var(--podiy-radius);
    box-shadow: var(--podiy-shadow);
    transition: box-shadow .2s ease, transform .16s ease;
    background: #fff;
}
.card:hover { box-shadow: var(--podiy-shadow-hover); }

/* ===== Buttons ===== */
.btn {
    border-radius: var(--podiy-radius-sm);
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform .05s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
}
.btn:hover { box-shadow: 0 3px 8px rgba(94, 74, 30, .14); }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background-color: var(--podiy-gold);
    border-color: var(--podiy-gold);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--podiy-gold-deep);
    border-color: var(--podiy-gold-deep);
}
.btn-outline-warning, .btn-outline-info, .btn-outline-primary { border-width: 1.5px; }
.btn-outline-warning { color: var(--podiy-gold-deep); border-color: var(--podiy-gold); }
.btn-outline-warning:hover { background: var(--podiy-gold); border-color: var(--podiy-gold); color: #fff; }
.btn-xs { border-radius: 6px; }

/* Button loading state (E4): add class .is-loading to spin + lock */
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading::before {
    content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px;
    vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff;
    border-radius: 50%; animation: podiySpin .7s linear infinite;
}
.btn-default.is-loading::before, .btn-outline-warning.is-loading::before { border-color: rgba(168,126,58,.4); border-top-color: var(--podiy-gold-deep); }
@keyframes podiySpin { to { transform: rotate(360deg); } }

/* ===== Inputs ===== */
.form-control {
    border-radius: var(--podiy-radius-sm);
    border-color: #e6ddcb;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--podiy-gold);
    box-shadow: 0 0 0 .18rem rgba(196, 160, 90, .20);
}
.input-group-text {
    border-radius: var(--podiy-radius-sm);
    border-color: #e6ddcb;
    background-color: #faf5ea;
    color: var(--podiy-gold-deep);
}
.input-group > .form-control:not(:last-child),
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child),
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ===== Tables ===== */
.table { border-radius: var(--podiy-radius-sm); overflow: hidden; }
.table thead th {
    border-top: none; border-bottom: 2px solid #efe7d6;
    text-transform: uppercase; font-size: .78rem; letter-spacing: .4px;
    color: #9a8c6d; background-color: #fbf7ee;
}
.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover { background-color: rgba(196, 160, 90, .08); }

/* ===== Modals ===== */
.modal-content { border: none; border-radius: var(--podiy-radius); box-shadow: 0 14px 44px rgba(73, 61, 42, .22); }
.modal-body { overflow-x: auto; }
.modal-header { background-color: #fbf7ee; border-bottom: 1px solid #efe7d6; }
.modal-header .modal-title { font-weight: 700; color: var(--podiy-ink); }

/* ===== Navbar / sidebar branding ===== */
.navbar-warning, .bg-warning { background: linear-gradient(90deg, var(--podiy-gold), var(--podiy-gold-deep)) !important; }
.navbar-warning .nav-link, .navbar-warning .navbar-nav .nav-link { color: #fff !important; }
.sidebar-light-warning .nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(90deg, var(--podiy-gold), var(--podiy-gold-deep)); color: #fff;
}
.brand-link { font-weight: 700; }
.nav-sidebar .nav-link { border-radius: var(--podiy-radius-sm); margin: 2px 8px; transition: background-color .15s ease; }
.text-warning { color: var(--podiy-gold-deep) !important; }

/* ===== Card headers (modernize the old coloured cards) ===== */
.card { border-top: 3px solid var(--podiy-gold); }
.card > .card-header { background: #fbf7ee; border-bottom: 1px solid #efe7d6; }
.card-info:not(.card-outline) > .card-header,
.card-primary:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header {
    background-color: #fbf7ee !important;
    color: var(--podiy-ink) !important;
}
.card-info, .card-primary, .card-success, .card-warning { border-color: transparent; }
.card-title { font-weight: 700; letter-spacing: .04em; color: var(--podiy-gold-deep); font-size: 15px; }
.card .btn-tool { color: #b6a684; }

/* ===== POS grand total emphasis ===== */
#grand_total2, #grand_total2_product { color: var(--podiy-gold-deep); }

/* ===== B2: gradient gold payment / stat cards ===== */
.podiy-grad {
    color: #fff;
    background: linear-gradient(135deg, var(--podiy-gold), var(--podiy-gold-deep));
    border-radius: var(--podiy-radius);
    box-shadow: var(--podiy-shadow);
}
.podiy-grad .info-box-text, .podiy-grad .info-box-number { color: #fff !important; }
/* Dashboard status boxes already use .info-box; give them the soft card feel */
.info-box { border-radius: var(--podiy-radius); box-shadow: var(--podiy-shadow); border: none; }
.small-box { border-radius: var(--podiy-radius); overflow: hidden; box-shadow: var(--podiy-shadow); }
.small-box.bg-info { background: linear-gradient(135deg, var(--podiy-gold), var(--podiy-gold-deep)) !important; }
.small-box.bg-success { background: linear-gradient(135deg, #38b866, var(--podiy-ok)) !important; }
.small-box.bg-warning { background: linear-gradient(135deg, #e9b64e, var(--podiy-warn)) !important; }
.small-box.bg-danger  { background: linear-gradient(135deg, #d96a57, var(--podiy-crit)) !important; }

/* ===== Login ===== */
.login-page { background: linear-gradient(135deg, #fbf3e4 0%, #f4e6c9 55%, #f7ecd6 100%); }