/*
Code Ref: TM-UI01-CSS-001
File: assets/css/tapmenu-premium-ui.css
Purpose: TapMenu premium clean UI system inspired by the uploaded HR/dashboard reference.
Scope: UI only. No database/order/POS/payment logic change.
*/

:root {
    --tm-premium-bg: #d8d4c9;
    --tm-premium-bg-2: #efede6;
    --tm-premium-shell: #f2f0ea;
    --tm-premium-card: #f8f7f2;
    --tm-premium-card-2: #e8e5dc;
    --tm-premium-black: #101010;
    --tm-premium-ink: #171717;
    --tm-premium-muted: #6e6a60;
    --tm-premium-line: rgba(15, 15, 15, .10);
    --tm-premium-soft-line: rgba(15, 15, 15, .06);
    --tm-premium-lime: #d8f26a;
    --tm-premium-cream: #fff5d6;
    --tm-premium-green: #a4dcc1;
    --tm-premium-gold: #eed8a4;
    --tm-premium-shadow: 0 24px 70px rgba(17, 17, 17, .14);
    --tm-premium-shadow-soft: 0 14px 36px rgba(17, 17, 17, .08);
    --tm-premium-radius-xl: 32px;
    --tm-premium-radius-lg: 24px;
    --tm-premium-radius-md: 18px;
    --tm-premium-radius-sm: 13px;
}

html {
    background: radial-gradient(circle at 16% 10%, rgba(255,255,255,.75), transparent 24%),
        linear-gradient(135deg, #c5c3bc 0%, #ece7db 52%, #aaa9a4 100%);
}

body,
.dashboard-body,
.vendor-dashboard-body,
.vendor-dashboard-ad-body {
    background: transparent !important;
    color: var(--tm-premium-ink) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .22;
    z-index: -1;
}

/* Main frame: same idea as uploaded rounded tablet dashboard */
.dashboard-wrap,
.vd-shell-main,
.auth-shell,
.super-admin-wrap,
.module-shell,
.public-menu-shell,
.menu-shell,
.checkout-shell,
.invoice-shell {
    border-radius: var(--tm-premium-radius-xl) !important;
}

.vd-shell-header,
.dashboard-topbar,
.vd-hero-card,
.vd-layout-tools,
.vd-card,
.panel-card,
.stat-card,
.module-card,
.auth-card,
.form-card,
.table-card,
.invoice-card,
.public-menu-card,
.product-card,
.menu-item,
.cart-card,
.checkout-card,
.super-admin-card {
    background: rgba(248, 247, 242, .92) !important;
    border: 1px solid var(--tm-premium-line) !important;
    border-radius: var(--tm-premium-radius-lg) !important;
    box-shadow: var(--tm-premium-shadow-soft) !important;
    backdrop-filter: blur(18px);
}

/* Premium black sidebar */
.vd-sidebar,
.sidebar,
.admin-sidebar,
.vendor-sidebar,
.app-sidebar {
    background: #101010 !important;
    color: #f7f5ee !important;
    border-radius: 0 var(--tm-premium-radius-xl) var(--tm-premium-radius-xl) 0 !important;
    box-shadow: 20px 0 60px rgba(0,0,0,.22) !important;
}

.vd-sidebar a,
.sidebar a,
.admin-sidebar a,
.vendor-sidebar a,
.app-sidebar a {
    color: rgba(247,245,238,.72) !important;
    border-radius: 14px !important;
}

.vd-sidebar a:hover,
.vd-sidebar a.active,
.sidebar a:hover,
.sidebar a.active,
.admin-sidebar a:hover,
.admin-sidebar a.active,
.vendor-sidebar a:hover,
.vendor-sidebar a.active,
.app-sidebar a:hover,
.app-sidebar a.active {
    background: rgba(216,242,106,.12) !important;
    color: #fff !important;
}

.vd-sidebar-nav a span,
.sidebar .icon,
.admin-sidebar .icon,
.vendor-sidebar .icon {
    background: rgba(255,255,255,.09) !important;
    color: #f7f5ee !important;
}

.vd-sidebar-nav a.active span,
.sidebar .active .icon,
.admin-sidebar .active .icon,
.vendor-sidebar .active .icon {
    background: var(--tm-premium-lime) !important;
    color: #101010 !important;
}

.vd-sidebar-cta,
.new-transaction-card,
.sidebar-cta {
    background: linear-gradient(135deg, #f5f0d0 0%, #d8f26a 100%) !important;
    color: #111 !important;
    border: none !important;
    box-shadow: 0 18px 34px rgba(216,242,106,.20) !important;
}

/* Header: premium clean, not too tall */
.vd-shell-header,
.dashboard-topbar {
    min-height: 76px !important;
    padding: 18px 24px !important;
    background: rgba(248,247,242,.86) !important;
}

.vd-shell-brand h1,
.vd-hero-main h2,
.dashboard-topbar strong,
.page-title,
h1, h2, h3 {
    letter-spacing: -.045em;
}

.vd-kicker,
.section-kicker,
.small-kicker {
    color: #56613a !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

/* Buttons */
button,
.btn,
.btn-primary,
.btn-small-link,
.action-btn,
.vendor-pro-menu-button,
input[type="submit"],
a.button {
    border-radius: 999px !important;
    font-weight: 800 !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-small-link:hover,
.action-btn:hover,
a.button:hover {
    transform: translateY(-1px);
}

.btn-primary,
.action-primary,
.vendor-pro-menu-button,
input[type="submit"] {
    background: #101010 !important;
    color: #fff !important;
    border: 1px solid #101010 !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.16) !important;
}

.btn-small-link,
.btn-secondary,
.action-secondary {
    background: rgba(255,255,255,.72) !important;
    color: #101010 !important;
    border: 1px solid var(--tm-premium-line) !important;
}

/* Cards: uploaded sample style */
.vd-stat-card,
.stat-card {
    min-height: 112px;
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(233,229,216,.78)) !important;
}

.vd-stat-card strong,
.stat-card strong,
.metric-value {
    color: #101010 !important;
    font-size: clamp(1.35rem, 1.6vw, 2.05rem) !important;
    font-weight: 900 !important;
}

.vd-stat-icon,
.stat-icon,
.metric-icon {
    background: #101010 !important;
    color: var(--tm-premium-lime) !important;
}

.vd-card:nth-of-type(3n+1),
.panel-card:nth-of-type(3n+1) {
    background: linear-gradient(145deg, rgba(248,247,242,.94), rgba(241,230,195,.72)) !important;
}
.vd-card:nth-of-type(3n+2),
.panel-card:nth-of-type(3n+2) {
    background: linear-gradient(145deg, rgba(248,247,242,.94), rgba(220,232,218,.75)) !important;
}
.vd-card:nth-of-type(3n+3),
.panel-card:nth-of-type(3n+3) {
    background: linear-gradient(145deg, rgba(248,247,242,.94), rgba(218,217,210,.76)) !important;
}

/* Tables */
.table-scroll,
.table-wrapper {
    border-radius: var(--tm-premium-radius-lg) !important;
    overflow: auto !important;
    border: 1px solid var(--tm-premium-soft-line) !important;
    background: rgba(255,255,255,.48) !important;
}

.data-table,
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.data-table th,
table th {
    background: rgba(16,16,16,.90) !important;
    color: #fff !important;
    font-weight: 800 !important;
    border-bottom: none !important;
}

.data-table th:first-child,
table th:first-child { border-top-left-radius: 14px; }
.data-table th:last-child,
table th:last-child { border-top-right-radius: 14px; }

.data-table td,
table td {
    border-bottom: 1px solid rgba(16,16,16,.06) !important;
}

/* Forms */
input,
select,
textarea,
.search-input,
.vd-header-search input {
    border-radius: 18px !important;
    border: 1px solid var(--tm-premium-line) !important;
    background: rgba(255,255,255,.68) !important;
    color: var(--tm-premium-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(216,242,106,.72) !important;
    outline-offset: 2px;
    border-color: rgba(16,16,16,.20) !important;
}

/* Badges and pills */
.pill,
.badge,
.status-badge,
.label-pill {
    border-radius: 999px !important;
    background: rgba(16,16,16,.08) !important;
    color: #101010 !important;
    border: 1px solid rgba(16,16,16,.07) !important;
    font-weight: 800 !important;
}

.pill-success,
.status-paid,
.status-active {
    background: rgba(164,220,193,.55) !important;
    color: #0c563d !important;
}
.pill-warning,
.status-pending {
    background: rgba(238,216,164,.65) !important;
    color: #714b08 !important;
}
.pill-danger,
.status-cancelled,
.status-blocked {
    background: rgba(240,120,120,.22) !important;
    color: #9e1f2f !important;
}

/* Dropdown menu */
.vendor-pro-menu-panel {
    background: rgba(248,247,242,.98) !important;
    border: 1px solid rgba(16,16,16,.12) !important;
    border-radius: 28px !important;
    box-shadow: var(--tm-premium-shadow) !important;
}
.vendor-pro-menu-section {
    background: rgba(255,255,255,.56) !important;
    border: 1px solid rgba(16,16,16,.08) !important;
    border-radius: 20px !important;
}
.vendor-pro-menu-section a {
    background: rgba(255,255,255,.66) !important;
    color: #101010 !important;
}
.vendor-pro-menu-section a:hover {
    background: #101010 !important;
    color: #fff !important;
}

/* Public menu clean premium touch */
.menu-header,
.public-menu-header,
.restaurant-header {
    background: rgba(248,247,242,.88) !important;
    border: 1px solid var(--tm-premium-line) !important;
    border-radius: 0 0 32px 32px !important;
    box-shadow: var(--tm-premium-shadow-soft) !important;
}

.menu-category-title,
.category-title {
    font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
    letter-spacing: -.04em !important;
    color: #101010 !important;
}

.add-to-cart,
.cart-add-btn,
.product-add-button,
.view-cart-btn,
.checkout-btn {
    background: #101010 !important;
    color: #fff !important;
    border-radius: 999px !important;
}

.floating-cart,
.cart-floating-bar,
.view-cart-bar,
.cart-summary-bar {
    background: rgba(16,16,16,.96) !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.28) !important;
}

/* Charts */
.vd-month-bar,
.vd-chart-bar-item .fill,
.vendor-bar-fill {
    background: linear-gradient(180deg, #101010 0%, #383838 100%) !important;
}
.vd-month-day.today .vd-month-bar,
.vd-chart-bar-item:nth-child(2) .fill {
    background: linear-gradient(180deg, #d8f26a 0%, #9faf2d 100%) !important;
}
.vd-status-track span {
    background: linear-gradient(90deg, #101010, #d8f26a) !important;
}

/* Cleaner duplicate prevention on dashboard */
.vd-hero-card + .vd-layout-tools {
    margin-top: 14px !important;
}

/* Mobile */
@media (max-width: 900px) {
    .vd-shell-header,
    .dashboard-topbar {
        border-radius: 22px !important;
        padding: 14px !important;
    }
    .vd-shell-brand h1,
    .dashboard-topbar strong {
        font-size: 1.2rem !important;
    }
    .vd-header-search {
        display: none !important;
    }
    .vendor-pro-menu-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: calc(100vh - 90px) !important;
        overflow: auto !important;
    }
    .vd-card,
    .panel-card,
    .stat-card,
    .module-card,
    .form-card {
        border-radius: 22px !important;
    }
}

/* Print remains clean */
@media print {
    .vd-sidebar,
    .sidebar,
    .vendor-pro-menu,
    .vd-layout-tools,
    .dashboard-topbar,
    .vd-shell-header {
        display: none !important;
    }
    body { background: #fff !important; }
    .vd-card,
    .panel-card,
    .invoice-card { box-shadow: none !important; }
}