/*
 * EziMart theme: grocery look for businesses with the 'mart' feature (or EZ_THEME=mart).
 * Loaded after the app CSS by layouts/partials/css and the auth layouts; every rule is
 * scoped to html.ez-mart so other businesses never see it.
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

html.ez-mart {
    --mart-forest: #0d3b24;
    --mart-forest-2: #0a2f1c;
    --mart-green: #16a34a;
    --mart-green-d: #15803d;
    --mart-leaf: #86efac;
    --mart-lime: #bef264;
    --mart-orange: #f97316;
    --mart-amber: #f59e0b;
    --mart-tomato: #ef4444;
    --mart-cream: #f7f4ec;
    --mart-paper: #fffdf8;
    --mart-ink: #17241c;
    --mart-muted: #66756b;
    --mart-line: #e6e0d2;
    --mart-radius: 14px;
    --mart-shadow: 0 1px 2px rgba(23, 36, 28, .05), 0 6px 18px -8px rgba(23, 36, 28, .12);
}

html.ez-mart body,
html.ez-mart .tw-font-sans,
html.ez-mart .main-header,
html.ez-mart .content-wrapper,
html.ez-mart h1, html.ez-mart h2, html.ez-mart h3, html.ez-mart h4, html.ez-mart h5,
html.ez-mart .btn, html.ez-mart .form-control, html.ez-mart table {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif !important;
}

html.ez-mart, html.ez-mart body,
html.ez-mart main, html.ez-mart .tw-bg-gray-100, html.ez-mart .content-wrapper {
    background-color: var(--mart-cream) !important;
}
html.ez-mart body { color: var(--mart-ink); }

/* ---------- primary colour remap (Tailwind build uses blue) ---------- */
html.ez-mart .tw-bg-primary-800, html.ez-mart .tw-bg-blue-800 { background-color: var(--mart-forest) !important; }
html.ez-mart .hover\:tw-bg-primary-700:hover { background-color: var(--mart-green-d) !important; }
html.ez-mart .tw-bg-primary-50 { background-color: #ecfdf3 !important; }
html.ez-mart .tw-text-primary-700, html.ez-mart .tw-text-primary-800, html.ez-mart .tw-text-primary-600 { color: var(--mart-green-d) !important; }
html.ez-mart .tw-border-primary-500\/30 { border-color: rgba(22, 163, 74, .25) !important; }
html.ez-mart .tw-from-primary-800,
html.ez-mart .tw-bg-gradient-to-r.tw-from-primary-800 {
    --tw-gradient-from: var(--mart-forest) var(--tw-gradient-from-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.ez-mart .tw-to-primary-900 { --tw-gradient-to: #14532d var(--tw-gradient-to-position) !important; }

/* ---------- sidebar ---------- */
html.ez-mart aside.side-bar {
    background: linear-gradient(180deg, var(--mart-forest) 0%, var(--mart-forest-2) 100%) !important;
    border-right: 0 !important;
}
html.ez-mart aside.side-bar > a:first-of-type {
    background: transparent !important;
    border: 0 !important;
    height: 72px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
html.ez-mart #side-bar { border-right: 0 !important; padding: 14px 12px !important; }
html.ez-mart #side-bar::-webkit-scrollbar { width: 6px; }
html.ez-mart #side-bar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 6px; }
html.ez-mart #side-bar a,
html.ez-mart #side-bar summary,
html.ez-mart #side-bar .tw-text-gray-600,
html.ez-mart #side-bar .tw-text-gray-700 {
    color: #cfe5d7 !important;
    border-radius: 11px !important;
    font-weight: 500 !important;
}
html.ez-mart #side-bar a:hover,
html.ez-mart #side-bar summary:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}
html.ez-mart #side-bar a.tw-bg-gray-200,
html.ez-mart #side-bar a.tw-bg-gray-100.tw-text-primary-700 {
    background: linear-gradient(90deg, var(--mart-green) 0%, #22c55e 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(34, 197, 94, .6);
}
html.ez-mart #side-bar a svg, html.ez-mart #side-bar summary svg { opacity: .9; }
html.ez-mart #side-bar .tw-border-gray-200,
html.ez-mart #side-bar ul { border-color: rgba(255, 255, 255, .12) !important; }
html.ez-mart #side-bar .tw-bg-white { background: transparent !important; }

/* sidebar brand */
html.ez-mart .ez-mart-brand { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 16px; color: #fff; text-decoration: none; }
html.ez-mart .ez-mart-brand .logo {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
    background: linear-gradient(135deg, var(--mart-lime), #4ade80);
    display: grid; place-items: center; color: var(--mart-forest);
    box-shadow: 0 6px 16px -6px rgba(190, 242, 100, .7);
}
html.ez-mart .ez-mart-brand .name { min-width: 0; line-height: 1.15; }
html.ez-mart .ez-mart-brand .name b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ez-mart .ez-mart-brand .name small { display: block; font-size: 11px; color: var(--mart-leaf); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- top header ---------- */
html.ez-mart main > div > header,
html.ez-mart header.tw-bg-gradient-to-r,
html.ez-mart .tw-bg-gradient-to-r.tw-from-primary-800.tw-border-b {
    background: linear-gradient(90deg, var(--mart-forest) 0%, #14532d 55%, var(--mart-green-d) 100%) !important;
    border-bottom: 0 !important;
}
html.ez-mart header .tw-bg-primary-800,
html.ez-mart .tw-bg-gradient-to-r .tw-bg-primary-800 {
    background: rgba(255, 255, 255, .12) !important;
    border-radius: 10px !important;
}
html.ez-mart header a[href*="/pos/create"],
html.ez-mart header a[href*="/ez/mart/pos"] {
    background: var(--mart-orange) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* ---------- dashboard hero (home/index top band) ---------- */
html.ez-mart .tw-pb-6.tw-bg-gradient-to-r {
    background-color: var(--mart-forest) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'%3E%3Cpath d='M20 40c10-18 32-18 40 0-12 10-28 10-40 0z'/%3E%3Ccircle cx='110' cy='40' r='14'/%3E%3Cpath d='M110 26c2-8 8-10 12-10'/%3E%3Cpath d='M30 110h36l-4 26H34z'/%3E%3Cpath d='M38 110c0-10 20-10 20 0'/%3E%3Cpath d='M100 100c16 0 24 14 18 30-8 6-22 6-30 0-6-16 2-30 12-30z'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(120deg, var(--mart-forest) 0%, #14532d 50%, var(--mart-green-d) 100%) !important;
}
html.ez-mart .tw-pb-6.tw-bg-gradient-to-r h1,
html.ez-mart .tw-pb-6.tw-bg-gradient-to-r .tw-text-white { color: #fff !important; }

/* ---------- cards, boxes, widgets ---------- */
html.ez-mart .box,
html.ez-mart .tw-rounded-xl.tw-bg-white,
html.ez-mart .tw-bg-white.tw-shadow-sm,
html.ez-mart .tw-bg-white.tw-ring-1,
html.ez-mart .info-box,
html.ez-mart .small-box,
html.ez-mart .nav-tabs-custom {
    border-radius: var(--mart-radius) !important;
    border: 1px solid var(--mart-line) !important;
    box-shadow: var(--mart-shadow) !important;
    background-color: var(--mart-paper) !important;
}
html.ez-mart .box-header { border-bottom: 1px solid var(--mart-line) !important; }
html.ez-mart .box.box-primary, html.ez-mart .box.box-solid.box-primary { border-top: 3px solid var(--mart-green) !important; }
html.ez-mart .box-title, html.ez-mart .content-header h1 { font-weight: 800 !important; letter-spacing: -.01em; color: var(--mart-ink) !important; }
html.ez-mart .content-header h1 small { color: var(--mart-muted) !important; }

/* stat tile icons get fresh colours instead of blue */
html.ez-mart .tw-bg-sky-100, html.ez-mart .tw-bg-blue-100 { background-color: #dcfce7 !important; }
html.ez-mart .tw-text-sky-500, html.ez-mart .tw-text-blue-500 { color: var(--mart-green) !important; }

/* ---------- buttons ---------- */
html.ez-mart .btn { border-radius: 10px !important; font-weight: 600 !important; }
html.ez-mart .btn-primary, html.ez-mart .tw-dw-btn-primary, html.ez-mart .bg-primary,
html.ez-mart .btn-primary:focus {
    background-color: var(--mart-green) !important; border-color: var(--mart-green) !important; color: #fff !important;
}
html.ez-mart .btn-primary:hover, html.ez-mart .tw-dw-btn-primary:hover { background-color: var(--mart-green-d) !important; border-color: var(--mart-green-d) !important; }
html.ez-mart .btn-success, html.ez-mart .bg-green { background-color: #059669 !important; border-color: #059669 !important; }
html.ez-mart .btn-warning, html.ez-mart .bg-yellow { background-color: var(--mart-amber) !important; border-color: var(--mart-amber) !important; color: #fff !important; }
html.ez-mart .btn-info, html.ez-mart .bg-aqua, html.ez-mart .bg-light-blue { background-color: #0f766e !important; border-color: #0f766e !important; color: #fff !important; }
html.ez-mart .tw-dw-btn-accent, html.ez-mart .tw-dw-btn-info { background-color: var(--mart-orange) !important; border-color: var(--mart-orange) !important; color: #fff !important; }
html.ez-mart a { color: var(--mart-green-d); }
html.ez-mart a.tw-text-white, html.ez-mart .tw-text-white a, html.ez-mart button.tw-text-white { color: #fff !important; }
html.ez-mart a.tw-bg-primary-800[href*="/pos/create"],
html.ez-mart a.tw-bg-primary-800[href*="/ez/mart/pos"] {
    background: var(--mart-orange) !important; color: #fff !important; font-weight: 700 !important;
    box-shadow: 0 8px 18px -8px rgba(249, 115, 22, .9);
}
html.ez-mart #side-bar a { text-decoration: none; }

/* ---------- forms ---------- */
html.ez-mart .form-control, html.ez-mart .select2-container--default .select2-selection--single,
html.ez-mart .select2-container--default .select2-selection--multiple, html.ez-mart .input-group-addon {
    border-radius: 10px !important; border-color: var(--mart-line) !important;
}
html.ez-mart .input-group .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html.ez-mart .input-group .input-group-addon:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; background: #f1f6ef !important; color: var(--mart-green-d) !important; }
html.ez-mart .form-control:focus { border-color: var(--mart-green) !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15) !important; }

/* ---------- tables ---------- */
html.ez-mart table.dataTable thead th, html.ez-mart .table > thead > tr > th, html.ez-mart .table thead th {
    background: #eef5ec !important; color: #244232 !important; font-weight: 700 !important; border-bottom: 1px solid var(--mart-line) !important;
}
html.ez-mart .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fbf9f3 !important; }
html.ez-mart .table-hover > tbody > tr:hover { background-color: #f0f8ef !important; }
html.ez-mart .pagination > .active > a, html.ez-mart .pagination > .active > span { background-color: var(--mart-green) !important; border-color: var(--mart-green) !important; }
html.ez-mart .dt-buttons .btn, html.ez-mart .dt-button { border-radius: 8px !important; }

/* ---------- misc ---------- */
html.ez-mart .label-success, html.ez-mart .bg-success { background-color: #16a34a !important; }
html.ez-mart .label-info { background-color: #0f766e !important; }
html.ez-mart .nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--mart-green) !important; }
html.ez-mart .modal-content { border-radius: 16px !important; overflow: hidden; }
html.ez-mart .modal-header { background: var(--mart-paper); border-bottom: 1px solid var(--mart-line); }
html.ez-mart .main-footer, html.ez-mart footer { background: transparent !important; color: var(--mart-muted) !important; }
html.ez-mart ::selection { background: rgba(190, 242, 100, .6); }

/* ---------- auth pages (login / forgot password) ---------- */
html.ez-mart .ez-mart-auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--mart-cream); }
html.ez-mart .ez-mart-auth .hero {
    position: relative; overflow: hidden; color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(circle at 85% 15%, rgba(190, 242, 100, .25), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(249, 115, 22, .25), transparent 45%),
        linear-gradient(140deg, var(--mart-forest) 0%, #14532d 55%, var(--mart-green-d) 100%);
}
html.ez-mart .ez-mart-auth .hero h1 { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; color: #fff; }
html.ez-mart .ez-mart-auth .hero p { font-size: 16px; color: #d7f0df; max-width: 440px; }
html.ez-mart .ez-mart-auth .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
html.ez-mart .ez-mart-auth .chips span { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; }
html.ez-mart .ez-mart-auth .produce { font-size: 54px; letter-spacing: 6px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25)); }
html.ez-mart .ez-mart-auth .panel { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
html.ez-mart .ez-mart-auth .card {
    width: 100%; max-width: 420px; background: var(--mart-paper); border: 1px solid var(--mart-line); border-radius: 22px;
    padding: 34px 32px; box-shadow: 0 30px 60px -30px rgba(13, 59, 36, .35);
}
html.ez-mart .ez-mart-auth .card h2 { font-size: 26px; font-weight: 800; margin: 0 0 4px; color: var(--mart-ink); letter-spacing: -.02em; }
html.ez-mart .ez-mart-auth .card .sub { color: var(--mart-muted); margin-bottom: 22px; font-size: 14px; }
html.ez-mart .ez-mart-auth label { font-weight: 600; font-size: 13px; color: #33463a; }
html.ez-mart .ez-mart-auth input[type=text], html.ez-mart .ez-mart-auth input[type=password], html.ez-mart .ez-mart-auth input[type=email] {
    width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--mart-line); background: #fff; padding: 0 14px; font-size: 15px; outline: none;
}
html.ez-mart .ez-mart-auth input:focus { border-color: var(--mart-green); box-shadow: 0 0 0 4px rgba(22, 163, 74, .15); }
html.ez-mart .ez-mart-auth button[type=submit] {
    width: 100%; height: 50px; border: 0; border-radius: 12px; font-weight: 800; font-size: 16px; color: #fff; cursor: pointer;
    background: linear-gradient(90deg, var(--mart-green) 0%, #22c55e 100%); box-shadow: 0 12px 24px -12px rgba(22, 163, 74, .8);
}
html.ez-mart .ez-mart-auth button[type=submit]:hover { filter: brightness(1.05); }
@media (max-width: 900px) {
    html.ez-mart .ez-mart-auth { grid-template-columns: 1fr; }
    html.ez-mart .ez-mart-auth .hero { padding: 28px 22px; }
    html.ez-mart .ez-mart-auth .hero h1 { font-size: 30px; }
    html.ez-mart .ez-mart-auth .produce { font-size: 36px; }
}

/* ---------- old auth layout (register / password reset) in mart installs ---------- */
html.ez-mart:has(body.ez-body) { background: linear-gradient(140deg, #0d3b24 0%, #14532d 55%, #15803d 100%) !important; }
html.ez-mart body.ez-body { background: transparent !important; font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif !important; }
html.ez-mart .ez-panel { background: linear-gradient(160deg, #0d3b24 0%, #14532d 60%, #15803d 100%) !important; }
html.ez-mart .ez-auth, html.ez-mart .ez-card { border-radius: 22px !important; }
html.ez-mart body.ez-body .btn-primary, html.ez-mart body.ez-body .tw-dw-btn-primary, html.ez-mart body.ez-body button[type=submit] { background: #16a34a !important; border-color: #16a34a !important; }
html.ez-mart .ez-nav a.ez-btn-outline:hover { color: #15803d !important; }

html.ez-mart .ez-strip { background: linear-gradient(120deg, #0d3b24 0%, #14532d 55%, #15803d 100%) !important; }
html.ez-mart .wizard > .steps .current a, html.ez-mart .wizard > .steps .current a:hover, html.ez-mart .wizard > .steps .current a:active,
html.ez-mart .wizard > .actions a, html.ez-mart .wizard > .actions a:hover, html.ez-mart .wizard > .actions a:active { background: #16a34a !important; color: #fff !important; }
html.ez-mart .wizard > .steps .done a, html.ez-mart .wizard > .steps .done a:hover { background: #86efac !important; color: #0d3b24 !important; }

/* sidebar: full screen height and stays in place while the page scrolls */
@media (min-width: 1024px) {
    html.ez-mart aside.side-bar {
        position: sticky !important; top: 0 !important; height: 100vh !important; max-height: 100vh !important;
        align-self: flex-start !important; overflow: hidden !important;
    }
    html.ez-mart aside.side-bar #side-bar { overflow-y: auto !important; min-height: 0 !important; }
}

/* phones and tablets: one even dashboard band, no seam between the two gradient blocks */
@media (max-width: 1279px) {
    html.ez-mart .tw-pb-6.tw-bg-gradient-to-r,
    html.ez-mart .tw-bg-gradient-to-r.tw-from-primary-800:not(.tw-border-b) { background: #0f4429 !important; background-image: none !important; }
}
@media (max-width: 640px) {
    html.ez-mart .content-header h1 { font-size: 20px !important; }
    html.ez-mart .box, html.ez-mart .tw-rounded-xl.tw-bg-white { border-radius: 12px !important; }
    html.ez-mart .content { padding-left: 10px !important; padding-right: 10px !important; }
    html.ez-mart .dataTables_wrapper { overflow-x: auto; }
}

/* sidebar sub menus on the dark sidebar */
html.ez-mart #side-bar div.tw-bg-gray-200,
html.ez-mart #side-bar div.tw-bg-gray-100 { background: rgba(255, 255, 255, .06) !important; border-radius: 12px !important; }
html.ez-mart #side-bar .chiled { margin-top: 6px !important; margin-bottom: 8px !important; }
html.ez-mart #side-bar .chiled > .tw-absolute { background: rgba(255, 255, 255, .16) !important; }
html.ez-mart #side-bar .chiled a { color: #b9d8c4 !important; background: transparent !important; box-shadow: none !important; padding: 2px 0 !important; }
html.ez-mart #side-bar .chiled a:hover { color: #fff !important; background: transparent !important; }
html.ez-mart #side-bar .chiled a.tw-text-primary-700,
html.ez-mart #side-bar .chiled a.tw-font-bold,
html.ez-mart #side-bar .chiled a.tw-font-semibold,
html.ez-mart #side-bar .chiled a.active { color: #bef264 !important; font-weight: 700 !important; }
html.ez-mart #side-bar div.tw-bg-gray-200 > a.drop_down,
html.ez-mart #side-bar a.drop_down.tw-bg-gray-200 { background: transparent !important; color: #fff !important; box-shadow: none !important; font-weight: 700 !important; }
html.ez-mart #side-bar a.drop_down:focus { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
html.ez-mart #side-bar .tw-text-primary-700 { color: #fff !important; }

/* phones: wide tables scroll sideways inside their card instead of being cut off */
@media (max-width: 768px) {
    html.ez-mart table.table:not(.dataTable) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html.ez-mart table.table:not(.dataTable) th, html.ez-mart table.table:not(.dataTable) td { white-space: nowrap; }
    html.ez-mart .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    html.ez-mart .box-body { overflow-x: auto; }
}