@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   ShopAdmin Main Dashboard Style - 100% Fully Responsive Layout
   ========================================================================== */

.shopadmin-root-container {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    padding: 24px 28px !important;
    background-color: #f8fafc !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    color: #1e293b !important;
    -webkit-font-smoothing: antialiased;
    width: 100% !important;
}

.shopadmin-root-container * {
    box-sizing: border-box;
}

/* Header Greeting & Date Selector */
.shopadmin-page-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 22px !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.shopadmin-header-left {
    flex: 1 1 280px !important;
}

.shopadmin-page-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

.shopadmin-page-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.shopadmin-header-right {
    flex-shrink: 0 !important;
}

.shopadmin-date-picker-badge {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.shopadmin-date-picker-badge svg {
    color: #94a3b8;
    flex-shrink: 0;
}

/* ==========================================================================
   Row 1: Top 6 Metric Cards Row
   ========================================================================== */
.shopadmin-metrics-6grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
}

@media (max-width: 1550px) {
    .shopadmin-metrics-6grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 991px) {
    .shopadmin-metrics-6grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
    .shopadmin-metrics-6grid { grid-template-columns: 1fr !important; }
}

.shopadmin-metric-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shopadmin-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04) !important;
}

.metric-card-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.metric-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.icon-purple-soft  { background-color: #f5f3ff !important; }
.icon-blue-soft    { background-color: #e0f2fe !important; }
.icon-yellow-soft  { background-color: #fef3c7 !important; }
.icon-emerald-soft { background-color: #ecfdf5 !important; }
.icon-green-soft   { background-color: #dcfce7 !important; }
.icon-pink-soft    { background-color: #fee2e2 !important; }

.metric-text-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.metric-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    display: block !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.metric-value {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
}

.metric-trend {
    font-size: 11px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
}

.trend-green { color: #16a34a !important; }
.trend-red   { color: #ef4444 !important; }

.trend-note {
    color: #94a3b8 !important;
    font-weight: 400 !important;
    margin-left: 2px !important;
}

/* ==========================================================================
   3-Column Rows (Rows 2 & 3: 46% | 27% | 27%)
   ========================================================================== */
.shopadmin-3col-row {
    display: grid !important;
    grid-template-columns: 1.45fr 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 22px !important;
}

@media (max-width: 1200px) {
    .shopadmin-3col-row { grid-template-columns: 1fr !important; }
}

.shopadmin-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 18px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
}

.shopadmin-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 18px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.card-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

.chart-header-legend {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.legend-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.legend-purple .badge-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background-color: #7c3aed !important; }
.legend-green .badge-dot  { width: 8px !important; height: 8px !important; border-radius: 50% !important; background-color: #10b981 !important; }

.btn-dropdown-pill {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.btn-dropdown-pill:hover {
    background: #f1f5f9 !important;
}

.shopadmin-viewall-link {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6366f1 !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

.shopadmin-viewall-link:hover {
    text-decoration: underline !important;
    color: #4f46e5 !important;
}

.shopadmin-chart-wrapper {
    position: relative !important;
    width: 100% !important;
}
.line-chart-container { height: 230px !important; }
.bar-chart-container  { height: 230px !important; }

/* Total Sales Doughnut Layout */
.shopadmin-donut-flex-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.donut-chart-canvas-wrap {
    width: 150px !important;
    height: 150px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
}

.donut-center-info {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    pointer-events: none !important;
    width: 100% !important;
}

.donut-center-amt {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: block !important;
    line-height: 1.2 !important;
}

.donut-center-lbl {
    font-size: 10px !important;
    color: #94a3b8 !important;
    display: block !important;
}

.donut-legend-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 140px !important;
}

.donut-legend-row {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
}

.legend-square {
    width: 10px !important;
    height: 10px !important;
    border-radius: 2px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.legend-name {
    color: #475569 !important;
    font-weight: 500 !important;
    flex: 1 !important;
}

.legend-percent {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Recent Orders List */
.shopadmin-recent-orders-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.recent-order-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f8fafc !important;
}

.recent-order-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.order-user-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.order-info-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.order-id-txt {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.order-cust-txt {
    font-size: 11px !important;
    color: #94a3b8 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.order-price-status {
    text-align: right !important;
    flex-shrink: 0 !important;
}

.order-amt-txt {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: block !important;
}

.order-status-badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-top: 1px !important;
}

.status-completed  { color: #16a34a !important; }
.status-processing { color: #2563eb !important; }
.status-pending    { color: #d97706 !important; }
.status-on-hold    { color: #d97706 !important; }

/* Top Selling Products List */
.shopadmin-products-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.top-product-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.product-icon-badge {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.product-info-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.product-title-txt {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.product-sold-txt {
    font-size: 11px !important;
    color: #94a3b8 !important;
    display: block !important;
}

.product-price-col {
    text-align: right !important;
    flex-shrink: 0 !important;
}

.product-rev-txt {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Top Vendors List */
.shopadmin-vendors-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.top-vendor-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.vendor-avatar-circle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.bg-navy   { background-color: #1e3a8a !important; }
.bg-blue   { background-color: #3b82f6 !important; }
.bg-orange { background-color: #f97316 !important; }
.bg-amber  { background-color: #f59e0b !important; }
.bg-dark   { background-color: #18181b !important; }

.vendor-info-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.vendor-title-txt {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.vendor-prods-txt {
    font-size: 11px !important;
    color: #94a3b8 !important;
    display: block !important;
}

.vendor-price-col {
    text-align: right !important;
    flex-shrink: 0 !important;
}

.vendor-rev-txt {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   Row 4: Bottom 5 Metrics Horizontal Bar
   ========================================================================== */
.shopadmin-bottom-metrics-bar {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 18px !important;
    padding: 18px 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
}

@media (max-width: 1200px) {
    .shopadmin-bottom-metrics-bar { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .shopadmin-bottom-metrics-bar { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .shopadmin-bottom-metrics-bar { grid-template-columns: 1fr !important; }
}

.bottom-metric-col {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.bm-icon-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.icon-type-customers { background-color: #f5f3ff !important; }
.icon-type-products  { background-color: #e0f2fe !important; }
.icon-type-returns   { background-color: #dcfce7 !important; }
.icon-type-stock     { background-color: #fef3c7 !important; }
.icon-type-revenue   { background-color: #dcfce7 !important; }

.bm-content-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.bm-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    display: block !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.bm-val-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.bm-val {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
}

.bm-trend-tag {
    font-size: 11px !important;
    font-weight: 700 !important;
}

.bm-trend-link {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #d97706 !important;
    text-decoration: none !important;
}

.bm-trend-link:hover {
    text-decoration: underline !important;
}

/* Global Mobile Viewport Padding */
@media (max-width: 768px) {
    .shopadmin-root-container {
        padding: 16px 14px !important;
    }

    .shopadmin-page-title {
        font-size: 19px !important;
    }

    .shopadmin-page-subtitle {
        font-size: 12px !important;
    }

    .shopadmin-date-picker-badge {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .shopadmin-header-right {
        width: 100% !important;
    }
}