/* TumaMaoni light professional UI layer: visual only, no behavior changes. */
:root {
    --tm-bg: #f5f8fd;
    --tm-surface: #ffffff;
    --tm-soft: #f8fbff;
    --tm-border: #dbe6f4;
    --tm-border-strong: #c4d4ea;
    --tm-text: #102033;
    --tm-muted: #64748b;
    --tm-primary: #4f46e5;
    --tm-primary-dark: #4338ca;
    --tm-primary-soft: #eef2ff;
    --tm-teal: #10b981;
    --tm-teal-soft: #ecfdf5;
    --tm-amber: #d97706;
    --tm-red: #dc2626;
    --tm-radius: 12px;
    --tm-radius-lg: 20px;
    --tm-pill: 999px;
    --tm-shadow: 0 16px 40px rgba(16, 32, 51, 0.10);
    --tm-shadow-sm: 0 1px 3px rgba(16, 32, 51, 0.08);
}

html,
body {
    background:
        radial-gradient(circle at 10% 0%, rgba(79, 70, 229, 0.14), transparent 28rem),
        radial-gradient(circle at 90% 0%, rgba(16, 185, 129, 0.10), transparent 26rem),
        var(--tm-bg) !important;
    color: var(--tm-text) !important;
    letter-spacing: 0 !important;
}

.dashboard-page::before,
.auth-page::before {
    display: none !important;
}

.main-content {
    background: transparent !important;
}

.sidebar {
    width: 248px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border-right: 1px solid var(--tm-border) !important;
    box-shadow: 12px 0 36px rgba(16, 32, 51, 0.05) !important;
}

menu-item,
logout-btn,
.btn,
.btn-next,
.btn-prev,
.btn-submit,
.btn-nav,
.lang-btn,
.tab-btn,
.pagination-link,
.mobile-menu-toggle {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

.menu-item {
    min-height: 42px !important;
    font-size: 0.84rem !important;
}

.menu-item.active,
.btn-primary,
.btn-next,
.btn-submit,
.btn-nav {
    background: linear-gradient(135deg, var(--tm-primary), var(--tm-teal)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22) !important;
}

.menu-item:hover,
.logout-btn:hover,
.btn-secondary,
.btn-prev,
.lang-btn,
.pagination-link {
    background: #ffffff !important;
    border: 1px solid var(--tm-border) !important;
    color: var(--tm-primary) !important;
}

.dashboard-header,
.header-card {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(16, 185, 129, 0.08)),
        #ffffff !important;
    border: 1px solid rgba(79, 70, 229, 0.15) !important;
    border-radius: var(--tm-radius-lg) !important;
    box-shadow: var(--tm-shadow) !important;
}

.dashboard-header::after,
.header-card::after {
    display: none !important;
}

.auth-card::after {
    display: none !important;
}

.dashboard-header > *,
.auth-card > *,
.header-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.stat-card,
.dashboard-card,
.table-card,
.chart-card,
.settings-container,
.settings-card,
.filters-card,
.modal-content,
.smooth-card,
.auth-card,
.feature-card,
.pricing-card,
.testimonial-card,
.contact-card,
.help-card,
.legal-card,
.feedback-item,
.trend-item,
.detail-item {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.stat-card:hover,
.dashboard-card:hover,
.table-card:hover,
.smooth-card:hover,
.auth-card:hover,
.feature-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--tm-border-strong) !important;
    box-shadow: var(--tm-shadow) !important;
}

.card-header,
.table-header,
.filters-header,
.modal-header,
.settings-card .card-header {
    background: linear-gradient(180deg, #ffffff, var(--tm-soft)) !important;
    border-bottom: 1px solid var(--tm-border) !important;
}

.stat-card::before,
.auth-card::before {
    background: linear-gradient(90deg, var(--tm-primary), var(--tm-teal)) !important;
    opacity: 1 !important;
}

.stat-icon,
.department-icon,
.product-icon,
.section-heading i,
.feature-icon,
.benefit-icon,
.contact-icon {
    background: transparent !important;
    color: var(--tm-text) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

.stat-card:nth-child(2n) .stat-icon {
    background: transparent !important;
    color: var(--tm-text) !important;
}

h1,
h2,
h3,
h4,
.header-title h1,
.auth-header h1,
.auth-header h2,
.section-heading h3,
.card-header h3,
.table-header h3 {
    color: var(--tm-text) !important;
    letter-spacing: 0 !important;
}

/* Hero/header title: responsive, larger than previous override */
.header-title h1,
.hero h1,
.auth-header h1 {
    /* restore responsive scaling while keeping it compact on small screens */
    font-size: clamp(1.55rem, 3.6vw, 2.55rem) !important;
    line-height: 1.06 !important;
}

/* Increase hero title specifically to make main headline larger */
.hero .hero-title {
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
    line-height: 1.04 !important;
    font-weight: 1000 !important;
}

@media (max-width: 768px) {
    .hero .hero-title {
        font-size: 1.75rem !important;
    }
}

p,
.header-title p,
.stat-content p,
.user-shop,
.form-description {
    color: var(--tm-muted) !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.filter-group input,
.filter-group select,
.input-control {
    background: #ffffff !important;
    border: 1px solid var(--tm-border-strong) !important;
    border-radius: 16px !important;
    color: var(--tm-text) !important;
    box-shadow: 0 1px 0 rgba(16, 32, 51, 0.03) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.filter-group input:focus,
.filter-group select:focus,
.input-control:focus {
    border-color: var(--tm-primary) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14) !important;
    outline: none !important;
}

.table-container {
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: none !important;
}

.feedbacks-table th,
.departments-table th,
.products-table th {
    background: #f6f9fe !important;
    color: #506176 !important;
}

.feedbacks-table tr:hover,
.departments-table tr:hover,
.products-table tr:hover {
    background: #f8fbff !important;
}

.tag,
.category-tag,
.feedback-count,
.status-badge,
.recommend-badge,
.stat-trend,
.score-num,
.trend-count {
    border-radius: var(--tm-pill) !important;
    font-weight: 800 !important;
}

.tag-department,
.category-tag {
    background: var(--tm-primary-soft) !important;
    color: var(--tm-primary) !important;
}

.tag-location,
.feedback-count {
    background: var(--tm-teal-soft) !important;
    color: var(--tm-teal) !important;
}

.auth-page {
    align-items: center !important;
}

.auth-container {
    max-width: 420px !important;
}

.auth-card {
    position: relative !important;
    overflow: hidden !important;
    padding: 24px !important;
    backdrop-filter: none !important;
    box-shadow: var(--tm-shadow) !important;
}

.form-wrapper {
    max-width: 760px !important;
    padding-top: 28px !important;
}

.brand-header {
    position: sticky !important;
    top: 14px !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-lg) !important;
    padding: 12px 14px !important;
    box-shadow: var(--tm-shadow-sm) !important;
    backdrop-filter: blur(18px) !important;
}

.logo-box,
.shop-logo {
    background: linear-gradient(135deg, var(--tm-primary), var(--tm-teal)) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
}

.logo-circle,
.logo-icon {
    background: transparent !important;
    color: var(--tm-text) !important;
    border-radius: 16px !important;
}

.smooth-card {
    padding: 26px !important;
}

.step-dot {
    width: 34px !important;
    height: 8px !important;
    border-radius: var(--tm-pill) !important;
    background: #d8e2f0 !important;
}

.step-dot.active {
    background: var(--tm-primary) !important;
}

.rating-box,
.radio-label {
    background: var(--tm-soft) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
}

.radio-btn input:checked + .radio-label {
    background: var(--tm-primary-soft) !important;
    border-color: var(--tm-primary) !important;
    color: var(--tm-primary) !important;
}

.navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--tm-border) !important;
    box-shadow: var(--tm-shadow-sm) !important;
}

.hero,
.hero-section {
    background:
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 30rem),
        linear-gradient(180deg, #ffffff, #f7faff) !important;
}

@media (max-width: 768px) {
    .main-content {
        padding: 16px !important;
        padding-top: 82px !important;
    }

    .dashboard-header,
    .auth-card,
    .smooth-card,
    .stat-card,
    .dashboard-card,
    .table-card {
        border-radius: 20px !important;
    }

    .brand-header {
        position: static !important;
    }
}