/**
 * SeoEstore Legacy Theme
 * Replicated from legacy style3.css utility classes.
 * Uses Bootstrap 4-compatible patterns plus custom utilities.
 */

/* ── Root Variables (extracted from legacy patterns) ── */
:root {
    --ses-blue: #007bff;
    --ses-green: #28a745;
    --ses-red: #dc3545;
    --ses-orange: #fd7e14;
    --ses-yellow: #ffc107;
    --ses-purple: #6f42c1;
    --ses-aqua: #17a2b8;
    --ses-black: #212529;
    --ses-gray-05: #f8f9fa;
    --ses-gray-10: #e9ecef;
    --ses-gray-30: #adb5bd;
    --ses-gray-50: #6c757d;
    --ses-gray-70: #495057;
    --ses-gray-90: #212529;
}

/* ── Font Size Utilities (f-125 = 1.25rem, etc.) ── */
.f-100 { font-size: 1rem; }
.f-125 { font-size: 1.25rem; }
.f-150 { font-size: 1.5rem; }
.f-175 { font-size: 1.75rem; }
.f-200 { font-size: 2rem; }
.f-250 { font-size: 2.5rem; }
.f-300 { font-size: 3rem; }

/* ── Font Weight Utilities ── */
.b-4 { font-weight: 400; }
.b-5 { font-weight: 500; }
.b-6 { font-weight: 600; }
.b-7 { font-weight: 700; }
.b-8 { font-weight: 800; }

/* ── Background Color Utilities ── */
.bg-blue    { background-color: var(--ses-blue) !important; color: #fff; }
.bg-green   { background-color: var(--ses-green) !important; color: #fff; }
.bg-red     { background-color: var(--ses-red) !important; color: #fff; }
.bg-orange  { background-color: var(--ses-orange) !important; color: #fff; }
.bg-yellow  { background-color: var(--ses-yellow) !important; color: #212529; }
.bg-purple  { background-color: var(--ses-purple) !important; color: #fff; }
.bg-aqua    { background-color: var(--ses-aqua) !important; color: #fff; }
.bg-black   { background-color: var(--ses-black) !important; color: #fff; }
.bg-light   { background-color: var(--ses-gray-05) !important; }
.bg-gray-05 { background-color: var(--ses-gray-05) !important; }
.bg-gray-10 { background-color: var(--ses-gray-10) !important; }
.bg-gray-90 { background-color: var(--ses-gray-90) !important; color: #fff; }

/* ── Gradient Backgrounds ── */
.bg-blue-g      { background: linear-gradient(135deg, #007bff, #0056b3) !important; color: #fff; }
.bg-blue-green-g { background: linear-gradient(135deg, #007bff, #28a745) !important; color: #fff; }

/* ── Text Color Utilities ── */
.text-gray-05 { color: var(--ses-gray-05) !important; }
.text-gray-10 { color: var(--ses-gray-10) !important; }
.text-gray-30 { color: var(--ses-gray-30) !important; }
.text-gray-50 { color: var(--ses-gray-50) !important; }
.text-gray-70 { color: var(--ses-gray-70) !important; }
.text-gray-90 { color: var(--ses-gray-90) !important; }
.text-blue    { color: var(--ses-blue) !important; }
.text-green   { color: var(--ses-green) !important; }
.text-red     { color: var(--ses-red) !important; }

/* ── Info Box Icon bg-gray-50 (used for "All" filter) ── */
.info-box-icon.bg-gray-50 { background-color: var(--ses-gray-50) !important; color: #fff !important; }

/* ── Info Box (reports page status cards) ── */
.info-box {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    min-height: 80px;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.info-box:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
.info-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    min-height: 80px;
    font-size: 1.5rem;
}
.info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 15px;
    flex: 1;
}
.info-box-text {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.info-box-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2px;
}

/* ── Selected/Active state for info-box cards ── */
.info-box.active,
.info-box-selected {
    background: var(--ses-gray-90);
    color: var(--ses-gray-05);
}
.info-box.active .info-box-text,
.info-box-selected .info-box-text {
    color: var(--ses-gray-05);
}
.info-box.active .info-box-number,
.info-box-selected .info-box-number {
    color: #fff;
}

/* ── Custom Nav (topMenu horizontal links) ── */
.custom-nav .nav-link {
    color: var(--ses-gray-70);
    font-weight: 500;
    font-size: 0.9rem;
}
.custom-nav .nav-link:hover {
    color: var(--ses-blue);
}

/* ── Panel-wide overrides ── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f7fa;
    color: #333;
}

.navbar {
    background: transparent;
}

.badge {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
    vertical-align: super;
}

/* ── Mobile utilities ── */
@media (max-width: 991.98px) {
    .pc-only { display: none !important; }
}
@media (min-width: 992px) {
    .mobile-only { display: none !important; }
}

/* ── Footer ── */
footer a.text-gray-30:hover {
    color: #fff !important;
    text-decoration: none;
}

/* ── Link cleanup ── */
a.text-decoration-none:hover {
    text-decoration: none !important;
}

/* ── Header ── */
#header {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}