/* ============================================================
   TENDERZENITH CORE DESIGN SYSTEM & UTILITY STYLES
   ============================================================ */
:root {
    /* Strict Clean Light Enterprise Tokens with Dark Navy Utility Header */
    --tz-navy-dark: #0F172A;
    --tz-navy-surface: #1E293B;
    --tz-bg-primary: #FFFFFF;
    --tz-bg-secondary: #F8FAFC;
    --tz-bg-blue-subtle: #EFF6FF;
    --tz-text-primary: #0F172A;
    --tz-text-secondary: #475569;
    --tz-text-muted: #94A3B8;
    --tz-accent: #2563EB;
    --tz-accent-hover: #1D4ED8;
    --tz-border: #E2E8F0;
    --tz-border-light: #F1F5F9;

    /* Badges & Status */
    --tz-badge-live: #059669;
    --tz-badge-live-bg: #ECFDF5;
    --tz-badge-corrigenda: #D97706;
    --tz-badge-corrigenda-bg: #FFFBEB;
    --tz-badge-award: #2563EB;
    --tz-badge-award-bg: #EFF6FF;
    --tz-badge-funded: #7C3AED;
    --tz-badge-funded-bg: #F5F3FF;
    --tz-badge-icb: #0284C7;
    --tz-badge-icb-bg: #F0F9FF;
    --tz-badge-ncb: #475569;
    --tz-badge-ncb-bg: #F1F5F9;

    --tz-container-max: 1320px;
    --tz-radius: 8px;
    --tz-shadow-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
}

.page {
    position: relative;
}


.font-mono {
    font-family: 'JetBrains Mono', SFMono-Regular, Consolas, monospace !important;
}

.font-heading {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.015em;
}

/* Brand & Logo Link */
.tz-navbar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.tz-navbar-brand:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Container Constraint */
.tz-container {
    width: 100%;
    max-width: var(--tz-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Standardized Cards */
.tz-card {
    background-color: var(--tz-bg-primary);
    border: 1px solid var(--tz-border);
    border-radius: var(--tz-radius);
    box-shadow: var(--tz-shadow-subtle);
    padding: 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tz-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px 0 rgba(15, 23, 42, 0.06);
}

/* Top Category Card */
.tz-category-card {
    background-color: #FFFFFF;
    border: 1px solid var(--tz-border);
    border-radius: 8px;
    padding: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transition: all 0.15s ease;
}
.tz-category-card:hover {
    border-color: var(--tz-accent);
    background-color: var(--tz-bg-blue-subtle);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}
.tz-category-icon {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: var(--tz-bg-secondary);
    border: 1px solid var(--tz-border);
    flex-shrink: 0;
}

/* Live Tender Row */
.tz-tender-row {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--tz-border);
    transition: background-color 0.15s ease;
}
.tz-tender-row:last-child {
    border-bottom: none;
}
.tz-tender-row:hover {
    background-color: var(--tz-bg-blue-subtle);
}

/* Buttons */
.btn-tz-primary {
    background-color: var(--tz-accent);
    border: 1px solid var(--tz-accent);
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 13.5px;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}
.btn-tz-primary:hover {
    background-color: var(--tz-accent-hover);
    border-color: var(--tz-accent-hover);
    color: #FFFFFF !important;
}

.btn-tz-outline {
    background-color: #FFFFFF;
    border: 1px solid var(--tz-border);
    color: var(--tz-text-primary) !important;
    font-weight: 500;
    font-size: 13.5px;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}
.btn-tz-outline:hover {
    background-color: var(--tz-bg-secondary);
    border-color: #CBD5E1;
    color: var(--tz-text-primary) !important;
}

.btn-tz-upgrade {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    color: #1D4ED8 !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    border-radius: var(--tz-radius);
    height: 32px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    white-space: nowrap;
}
.btn-tz-upgrade:hover {
    background: #DBEAFE;
    border-color: #93C5FD;
    color: #1E40AF !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.14);
    transform: translateY(-0.5px);
}
.btn-tz-upgrade:active {
    transform: translateY(0);
    background: #BFDBFE;
    box-shadow: none;
}
.btn-tz-upgrade .tz-crown-icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.btn-tz-upgrade:hover .tz-crown-icon {
    transform: scale(1.1) rotate(-3deg);
    filter: drop-shadow(0 1px 2px rgba(217, 119, 6, 0.3));
}

.btn-tz-dashboard {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #1E293B !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    border-radius: var(--tz-radius);
    height: 32px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.btn-tz-dashboard:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
    transform: translateY(-0.5px);
}
.btn-tz-dashboard:active {
    transform: translateY(0);
    background: #F1F5F9;
    box-shadow: none;
}

.btn-tz-profile {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #1E293B !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    border-radius: var(--tz-radius);
    height: 32px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.btn-tz-profile:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #0F172A !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
    transform: translateY(-0.5px);
}
.btn-tz-profile:active {
    transform: translateY(0);
    background: #F1F5F9;
    box-shadow: none;
}

/* Badges */
.tz-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.tz-badge-live {
    background-color: var(--tz-badge-live-bg);
    color: var(--tz-badge-live);
    border: 1px solid #A7F3D0;
}
.tz-badge-corrigenda {
    background-color: var(--tz-badge-corrigenda-bg);
    color: var(--tz-badge-corrigenda);
    border: 1px solid #FDE68A;
}
.tz-badge-award {
    background-color: var(--tz-badge-award-bg);
    color: var(--tz-badge-award);
    border: 1px solid #BFDBFE;
}
.tz-badge-funded {
    background-color: var(--tz-badge-funded-bg);
    color: var(--tz-badge-funded);
    border: 1px solid #DDD6FE;
}
.tz-badge-icb {
    background-color: var(--tz-badge-icb-bg);
    color: var(--tz-badge-icb);
    border: 1px solid #BAE6FD;
}
.tz-badge-ncb {
    background-color: var(--tz-badge-ncb-bg);
    color: var(--tz-badge-ncb);
    border: 1px solid #E2E8F0;
}
.tz-badge-sector {
    background-color: var(--tz-bg-secondary);
    color: var(--tz-text-secondary);
    border: 1px solid var(--tz-border);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
}

/* Pill Navigation / Filter Tags */
.tz-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--tz-text-secondary);
    background-color: #FFFFFF;
    border: 1px solid var(--tz-border);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.tz-pill:hover {
    color: var(--tz-accent);
    border-color: var(--tz-accent);
    background-color: var(--tz-bg-blue-subtle);
}
.tz-pill.active {
    color: var(--tz-accent);
    border-color: var(--tz-accent);
    background-color: var(--tz-bg-blue-subtle);
    font-weight: 600;
}

/* Clamping */
.text-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   GLOBAL MOBILE RESPONSIVENESS SYSTEM (360px - 768px)
   ============================================================ */
@media (max-width: 767.98px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    body {
        overflow-x: hidden;
        min-width: 320px;
    }
    img, video, canvas, iframe {
        max-width: 100%;
        height: auto;
    }

    body, p, .form-label, .form-check-label {
        font-size: 14px;
    }
    
    /* Prevent iOS auto-zoom on inputs */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Container padding on small devices */
    .tz-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Table responsive overflow wrapper */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.tz-footer {
    margin-top: 64px;
}