/* =====================================================
   Chandigarh Pets Online — Unfold Admin Global Overrides
   Darker text, better contrast, mobile-friendly
   ===================================================== */

/* ── GLOBAL TEXT CONTRAST ── */
/* Labels / helper text */
.text-gray-400,
[class*="text-gray-4"] {
    color: #4b5563 !important; /* gray-600 */
}
.text-gray-500,
[class*="text-gray-5"] {
    color: #374151 !important; /* gray-700 */
}
/* Sidebar nav text */
aside a,
aside span,
aside li {
    color: #111827 !important; /* gray-900 */
}
aside a:hover,
aside .active a {
    color: #065f46 !important;
}

/* ── TABLE CELLS & HEADERS ── */
table th {
    color: #111827 !important;
    font-weight: 700 !important;
}
table td {
    color: #1f2937 !important;
}
table th.text-gray-400,
table th[class*="text-gray"] {
    color: #374151 !important;
    font-weight: 800 !important;
}

/* ── CARD / SECTION HEADINGS ── */
h1, h2, h3, h4, h5 {
    color: #111827 !important;
}

/* ── FORM LABELS ── */
label,
.form-row label,
.field-box label {
    color: #1f2937 !important;
    font-weight: 600;
}

/* ── STAT / METRIC LABELS (xs text in KPI cards) ── */
p.text-xs {
    color: #374151 !important;
}
p.font-medium {
    color: #1f2937 !important;
}

/* ── UNFOLD SIDEBAR SPECIFIC ── */
nav[aria-label] a,
nav[aria-label] span {
    color: #0f172a !important;
}
.font-semibold {
    color: #111827;
}

/* ── BREADCRUMBS ── */
.text-gray-500.text-sm,
nav .text-gray-500 {
    color: #4b5563 !important;
}

/* ── DIVIDERS & BORDERS ── */
.divide-gray-50 > * + * {
    border-color: #e5e7eb !important;
}
.border-gray-100 {
    border-color: #d1d5db !important;
}

/* ── HOVER ROW BG ── */
.hover\:bg-gray-50:hover {
    background-color: #f3f4f6 !important;
}

/* ====================================================
   ANALYTICS PAGE — Mobile Responsive
   ==================================================== */

/* Header section */
@media (max-width: 640px) {
    /* Page wrapper */
    .px-4.lg\:px-12.py-6 {
        padding: 12px !important;
    }

    /* Page title */
    h1.text-2xl {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    /* Date filter form — stack vertically */
    .flex.flex-wrap.items-center.gap-2 form {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }
    .flex.flex-wrap.items-center.gap-2 form input[type="date"] {
        width: 100% !important;
        font-size: 0.8rem !important;
    }
    .flex.flex-wrap.items-center.gap-2 form button,
    .flex.flex-wrap.items-center.gap-2 a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* KPI cards — smaller padding */
    .grid.grid-cols-2 > div,
    .grid.grid-cols-2.sm\:grid-cols-3 > div {
        padding: 10px !important;
    }

    /* Tab nav — smaller tab buttons */
    #stat-tabs button {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Overview chart cards */
    .viz-card,
    .bg-white.rounded-xl.border {
        padding: 12px !important;
    }

    /* P&L summary banner big number */
    .text-3xl.font-black {
        font-size: 1.6rem !important;
    }

    /* Tables: ensure scroll */
    table {
        min-width: 400px;
    }
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Peak hours grid */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 > div {
        padding: 8px 4px !important;
    }
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 .text-lg {
        font-size: 1rem !important;
    }

    /* KPI 6-col grid: 3 columns on mobile */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6.gap-4.mb-6 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6.gap-4.mb-6 > div {
        padding: 8px !important;
    }
}

/* ====================================================
   ADMIN HUB (Control Hub) — Mobile
   ==================================================== */
@media (max-width: 640px) {
    #hub-page-wrapper {
        padding: 16px !important;
    }
    .hub-header h1 {
        font-size: 1.6rem !important;
    }
    .hub-header p {
        font-size: 0.7rem !important;
    }
    .tile-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .solid-tile {
        padding: 14px !important;
        border-radius: 18px !important;
        gap: 8px !important;
    }
    .tile-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.4rem !important;
        border-radius: 14px !important;
    }
    .tile-name {
        font-size: 0.8rem !important;
    }
    .tile-tag {
        font-size: 0.5rem !important;
        top: 8px;
        right: 10px;
        padding: 2px 5px;
    }
}

/* ====================================================
   DASHBOARD (index.html) — Mobile
   ==================================================== */
@media (max-width: 640px) {
    #awesome-dash {
        padding: 12px !important;
    }
    .hero-banner {
        padding: 1.2rem !important;
        border-radius: 14px !important;
        margin-bottom: 1rem !important;
    }
    .hero-banner h1 {
        font-size: 1.2rem !important;
    }
    .hero-banner p {
        font-size: 0.85rem !important;
    }
    .metric-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    .metric-card {
        padding: 0.75rem !important;
        border-radius: 12px !important;
    }
    .metric-value {
        font-size: 1.4rem !important;
    }
    .metric-label {
        font-size: 0.65rem !important;
    }
    .viz-container {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .viz-card {
        padding: 0.75rem !important;
    }
    .viz-title {
        font-size: 0.85rem !important;
        margin-bottom: 0.75rem !important;
    }
}