/* ==========================================================================
   PanchayatSetu Pro - Official Theme Stylesheet
   Designed to replicate PanchayatSetu.in with pixel-perfect rural governance UI
   ========================================================================== */

:root {
    /* ==========================================================================
       PANCHAYATSETU PRO 2026 - PRESTIGIOUS REGAL EMERALD & GOLD PALETTE
       Designed to look ultra-premium, authoritative & distinct from old site
       ========================================================================== */
    --ps-primary: #047857;          /* Regal Emerald */
    --ps-primary-hover: #065f46;    /* Deep Forest Jade */
    --ps-primary-dark: #022c22;     /* Midnight Emerald */
    --ps-primary-gradient: linear-gradient(135deg, #047857 0%, #0d9488 100%);
    
    --ps-sidebar-bg: linear-gradient(180deg, #022c22 0%, #064e3b 50%, #042f2e 100%);
    
    --ps-accent: #0d9488;           /* Modern Teal Cyan */
    --ps-accent-hover: #0f766e;
    --ps-accent-light: #f0fdfa;
    --ps-accent-border: #99f6e4;
    
    --ps-gold: #f59e0b;             /* Royal Gold / Amber Accent */
    --ps-gold-hover: #d97706;
    --ps-gold-light: #fef3c7;
    --ps-gold-border: #fcd34d;
    --ps-gold-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    
    --ps-emerald: #059669;
    --ps-emerald-light: #ecfdf5;
    --ps-emerald-border: #a7f3d0;
    
    --ps-royal: #1e3a8a;            /* Royal Navy / Midnight Blue */
    --ps-royal-light: #eff6ff;
    
    --ps-bg: #f8fafc;
    --ps-card-bg: #ffffff;
    --ps-border: #e2e8f0;
    --ps-border-hover: #10b981;
    
    --ps-ink-900: #0f172a;
    --ps-ink-800: #1e293b;
    --ps-ink-700: #334155;
    --ps-ink-600: #475569;
    --ps-ink-500: #64748b;
    --ps-ink-400: #94a3b8;
    
    --ps-radius-sm: 8px;
    --ps-radius-md: 14px;
    --ps-radius-lg: 20px;
    --ps-radius-xl: 26px;
    --ps-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --ps-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --ps-shadow-lg: 0 10px 15px -3px rgba(4, 120, 87, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --ps-shadow-glow: 0 0 20px -2px rgba(16, 185, 129, 0.25);
}

/* Base Reset & Typography */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--ps-bg);
    color: var(--ps-ink-800);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Layout Wrapper */
.ps-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    width: 100%;
    background-color: var(--ps-bg);
}

/* ==========================================================================
   Left Vertical Sidebar (Desktop only)
   ========================================================================== */
.ps-sidebar {
    display: none;
    width: 88px;
    background: var(--ps-sidebar-bg);
    border-right: 1px solid rgba(16, 185, 129, 0.25);
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 50;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    padding: 16px 0;
}

@media (min-width: 1024px) {
    .ps-sidebar {
        display: flex;
    }
}

.ps-sidebar-logo {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #ffffff;
    transition: transform 0.2s ease, background 0.2s ease;
}

.ps-sidebar-logo:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.22);
}

.ps-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
}

.ps-nav-item {
    width: 68px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    text-align: center;
}

.ps-nav-item span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1;
}

.ps-nav-item svg {
    width: 22px;
    height: 22px;
    transition: transform 0.2s ease;
}

.ps-nav-item:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.ps-nav-item:hover svg {
    transform: scale(1.12);
}

.ps-nav-item.active {
    background: #ffffff;
    color: var(--ps-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
.ps-main-container {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.ps-layout-wrapper > .ps-footer-premium {
    width: 100%;
    flex: 1 0 100%;
}

/* Desktop Header */
.ps-desktop-header {
    display: none;
    height: 76px;
    background: #ffffff;
    border-bottom: 1px solid var(--ps-border);
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.95);
}

@media (min-width: 1024px) {
    .ps-desktop-header {
        display: flex;
    }
}

.ps-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.ps-brand-icon {
    width: 42px;
    height: 42px;
    background: #f1f5f9;
    border: 1px solid var(--ps-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ps-primary);
    box-shadow: var(--ps-shadow-xs);
}

.ps-brand-title {
    font-size: 23px;
    font-weight: 900;
    color: var(--ps-ink-900);
    letter-spacing: -0.5px;
}

.ps-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ps-btn-signin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ps-accent);
    color: #ffffff;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.ps-btn-signin:hover {
    background: var(--ps-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

/* Mobile Header */
.ps-mobile-header {
    display: flex;
    height: 64px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ps-border);
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 40;
}

@media (min-width: 1024px) {
    .ps-mobile-header {
        display: none;
    }
}

.ps-hamburger {
    background: none;
    border: none;
    color: var(--ps-ink-700);
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
}

/* Mobile Drawer */
.ps-mobile-drawer {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 49;
}

.ps-mobile-drawer.open {
    display: block;
}

.ps-mobile-menu {
    background: #ffffff;
    width: 280px;
    height: 100%;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.ps-mobile-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ps-ink-800);
    transition: background 0.15s;
}

.ps-mobile-menu a:hover {
    background: var(--ps-accent-light);
    color: var(--ps-accent);
}

/* ==========================================================================
   Page Content Container
   ========================================================================== */
.ps-content-body {
    flex: 1;
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

@media (min-width: 640px) {
    .ps-content-body {
        padding: 28px 24px 60px;
    }
}

@media (min-width: 1024px) {
    .ps-content-body {
        padding: 36px 36px 72px;
    }
}

/* Hero Section */
.ps-hero-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--ps-border);
    padding-bottom: 22px;
    margin-bottom: 28px;
}

@media (min-width: 640px) {
    .ps-hero-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.ps-hero-title-group h1 {
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 900;
    color: var(--ps-ink-900);
    letter-spacing: -0.6px;
    margin: 0;
    line-height: 1.25;
}

.ps-hero-title-group p {
    font-size: clamp(13px, 1.8vw, 15px);
    color: var(--ps-ink-600);
    margin: 6px 0 0;
    font-weight: 500;
    line-height: 1.5;
}

.ps-lang-toggle {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--ps-border);
    padding: 3px;
    border-radius: 12px;
    box-shadow: var(--ps-shadow-xs);
    align-self: flex-start;
}

.ps-lang-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--ps-ink-600);
    transition: all 0.15s ease;
}

.ps-lang-btn.active {
    background: var(--ps-ink-900);
    color: #ffffff;
    box-shadow: var(--ps-shadow-xs);
}

/* Search Bar */
.ps-search-bar {
    position: relative;
    max-width: 680px;
    width: 100%;
    margin-bottom: 26px;
}

.ps-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ps-ink-400);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

.ps-search-input {
    width: 100%;
    padding: 14px 18px 14px 48px;
    background: #ffffff;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-md);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ps-ink-900);
    outline: none;
    transition: all 0.2s ease;
    box-shadow: var(--ps-shadow-xs);
}

.ps-search-input:focus {
    border-color: var(--ps-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Category Jump Chips */
.ps-category-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 34px;
    scrollbar-width: none;
}

.ps-category-chips::-webkit-scrollbar {
    display: none;
}

.ps-chip {
    padding: 8px 16px;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid var(--ps-border);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ps-ink-700);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ps-chip:hover, .ps-chip.active {
    background: var(--ps-accent);
    color: #ffffff;
    border-color: var(--ps-accent);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* ==========================================================================
   Tool Section & Cards
   ========================================================================== */
.ps-section {
    margin-bottom: 46px;
}

.ps-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.ps-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--ps-accent-light);
    color: var(--ps-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-section-title {
    font-size: clamp(17px, 2.2vw, 21px);
    font-weight: 800;
    color: var(--ps-ink-900);
    letter-spacing: -0.4px;
    margin: 0;
}

.ps-section-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 9999px;
    background: #f1f5f9;
    color: var(--ps-ink-600);
}

/* Grid of Cards */
.ps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 600px) {
    .ps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (min-width: 1024px) {
    .ps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1360px) {
    .ps-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
    }
}

/* Individual Tool Card */
.ps-tool-card {
    position: relative;
    background: var(--ps-card-bg);
    border-radius: var(--ps-radius-xl);
    padding: 22px 24px;
    border: 1px solid var(--ps-border);
    transition: all 0.22s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: var(--ps-shadow-xs);
    cursor: pointer;
    text-decoration: none;
    min-height: 200px;
}

.ps-tool-card:hover {
    border-color: var(--ps-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--ps-shadow-lg);
}

.ps-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.ps-card-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--ps-radius-md);
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.ps-card-icon-wrap svg {
    width: 22px;
    height: 22px;
}

.ps-card-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--ps-accent-light);
    color: #1d4ed8;
    border: 1px solid var(--ps-accent-border);
    white-space: nowrap;
}

.ps-card-body {
    flex: 1;
    position: relative;
    z-index: 2;
}

.ps-card-title {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--ps-ink-900);
    line-height: 1.35;
    letter-spacing: -0.3px;
    margin: 0 0 6px;
    transition: color 0.15s ease;
}

.ps-tool-card:hover .ps-card-title {
    color: var(--ps-accent);
}

.ps-card-desc {
    font-size: 12.8px;
    color: var(--ps-ink-600);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
}

.ps-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding-top: 10px;
    position: relative;
    z-index: 2;
}

.ps-card-btn-text {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ps-ink-500);
    transition: color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.ps-tool-card:hover .ps-card-btn-text {
    color: var(--ps-ink-800);
}

.ps-card-arrow-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ps-accent);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ps-tool-card:hover .ps-card-arrow-btn {
    transform: translateX(3px);
    background: var(--ps-primary-hover);
}

/* Bottom corner wave SVG decoration */
.ps-card-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    height: 70px;
    pointer-events: none;
    color: var(--ps-accent);
    opacity: 0.12;
    z-index: 1;
}

/* ==========================================================================
   Tool Single Guide / Post Template
   ========================================================================== */
.ps-single-article {
    background: #ffffff;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius-xl);
    padding: 24px 20px;
    box-shadow: var(--ps-shadow-xs);
    margin-bottom: 40px;
    max-width: 1100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .ps-single-article {
        padding: 40px 48px;
    }
}

.ps-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ps-ink-500);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ps-breadcrumbs a {
    color: var(--ps-accent);
}

.ps-breadcrumbs a:hover {
    text-decoration: underline;
}

.ps-article-header {
    border-bottom: 1px solid var(--ps-border);
    padding-bottom: 24px;
    margin-bottom: 28px;
}

.ps-article-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ps-article-title {
    font-size: clamp(22px, 3.5vw, 34px);
    font-weight: 900;
    color: var(--ps-ink-900);
    letter-spacing: -0.6px;
    line-height: 1.28;
    margin: 0 0 14px;
}

.ps-article-desc {
    font-size: 16px;
    color: var(--ps-ink-600);
    line-height: 1.6;
    margin: 0;
}

/* Portal Action Banner */
.ps-portal-action-box {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-radius: var(--ps-radius-lg);
    padding: 22px 26px;
    margin-bottom: 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 640px) {
    .ps-portal-action-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.ps-portal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ps-accent);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    padding: 12px 24px;
    border-radius: var(--ps-radius-md);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.ps-portal-action-btn:hover {
    background: var(--ps-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

/* Article Content HTML Styling */
.ps-article-content {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ps-ink-800);
}

.ps-article-content h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ps-ink-900);
    margin: 36px 0 16px;
    border-bottom: 2px solid var(--ps-accent-light);
    padding-bottom: 8px;
}

.ps-article-content h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ps-ink-900);
    margin: 28px 0 12px;
}

.ps-article-content p {
    margin: 0 0 18px;
}

.ps-article-content ul, .ps-article-content ol {
    margin: 0 0 20px;
    padding-left: 26px;
}

.ps-article-content li {
    margin-bottom: 8px;
}

.ps-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14.5px;
    background: #ffffff;
    border-radius: var(--ps-radius-md);
    overflow: hidden;
    box-shadow: var(--ps-shadow-xs);
    border: 1px solid var(--ps-border);
}

.ps-article-content th {
    background: #f8fafc;
    color: var(--ps-ink-900);
    font-weight: 700;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ps-border);
}

.ps-article-content td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ps-border);
    color: var(--ps-ink-700);
}

.ps-article-content tr:last-child td {
    border-bottom: none;
}

.ps-article-content tr:hover td {
    background: #f8fafc;
}

/* ==========================================================================
   Comprehensive Rural Governance Footer
   ========================================================================== */
.ps-footer {
    background: #0f172a;
    color: #94a3b8;
    border-top: 1px solid #1e293b;
    padding: 56px 20px 32px;
    margin-top: auto;
}

.ps-footer-inner {
    max-width: 1560px;
    margin: 0 auto;
}

.ps-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 48px;
}

@media (min-width: 640px) {
    .ps-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ps-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.ps-footer-col h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 18px;
}

.ps-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-footer-links a {
    color: #94a3b8;
    font-size: 13.5px;
    font-weight: 500;
    transition: color 0.15s ease;
}

.ps-footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.ps-footer-brand-title {
    font-size: 20px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 8px;
}

.ps-footer-tagline {
    font-size: 13.5px;
    color: #64748b;
    margin: 0 0 16px;
    line-height: 1.5;
}

.ps-footer-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #38bdf8;
    font-size: 13.5px;
    font-weight: 600;
}

.ps-footer-bottom {
    border-top: 1px solid #1e293b;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: #64748b;
}

@media (min-width: 640px) {
    .ps-footer-bottom {
        flex-direction: row;
    }
}

/* Fullwidth Tool Container */
.ps-tool-fullwidth-wrapper {
    width: 100%;
    min-height: 100vh;
    background-color: #f8fafc;
    overflow-x: hidden;
}

/* ==========================================================================
   PC / DESKTOP FIXED-WIDTH CONTAINER ENGINE FOR ALL ARTICLES & TOOLS
   Ensures clean, centered, standardized 1100px fixed width on desktop screens
   ========================================================================== */
@media (min-width: 1024px) {
    /* 1. Tool Fullwidth Wrapper & Inner Containers */
    .ps-tool-fullwidth-wrapper {
        width: 100%;
        box-sizing: border-box;
    }

    /* Fixed 1100px container width for all tool containers, headers, and sections */
    .ps-tool-fullwidth-wrapper .container,
    .ps-tool-fullwidth-wrapper header .container,
    .ps-tool-fullwidth-wrapper div.container,
    .ps-tool-fullwidth-wrapper section.container,
    .ps-tool-fullwidth-wrapper [class*="max-w-7xl"],
    .ps-tool-fullwidth-wrapper [class*="max-w-6xl"],
    .ps-tool-fullwidth-wrapper [class*="max-w-5xl"],
    .ps-tool-fullwidth-wrapper .container[class*="max-w-4xl"],
    .ps-tool-fullwidth-wrapper [class*="max-w-4xl"].container,
    .ps-tool-fullwidth-wrapper [class*="max-w-4xl"].mx-auto,
    .ps-tool-fullwidth-wrapper > div > div:not([class*="blur"]):not([class*="h-"]),
    .ps-tool-fullwidth-wrapper > div > section,
    .ps-tool-fullwidth-wrapper > div > article {
        max-width: 1100px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Standardize all top-level post form cards */
    .ps-tool-fullwidth-wrapper #action-plan-form-card,
    .ps-tool-fullwidth-wrapper div[id$="-form-card"],
    .ps-tool-fullwidth-wrapper div[id$="-card"] {
        max-width: 1100px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fixed 1100px for all articles and prose content */
    .ps-tool-fullwidth-wrapper .prose,
    .ps-tool-fullwidth-wrapper .prose-slate,
    .ps-tool-fullwidth-wrapper div[class*="prose"],
    .ps-single-article,
    .ps-article-content,
    .ps-article-header {
        max-width: 1100px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Classic Single Post Container & Breadcrumbs */
    .ps-single-article-body {
        max-width: 1100px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .ps-single-article-body .ps-breadcrumbs {
        max-width: 1100px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* Tool single article section */
    .ps-single-article {
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   HIGH-VISIBILITY WHITE TEXT ON ALL BLUE / INDIGO / DARK BUTTONS
   ========================================================================== */
/* Specific Dark Buttons with pure white text */
a.text-white:not([class*="bg-slate-"]):not([class*="bg-white"]):not([class*="bg-blue-50"]):not([class*="bg-emerald-50"]),
button.text-white:not([class*="bg-slate-"]):not([class*="bg-white"]):not([class*="bg-blue-50"]):not([class*="bg-emerald-50"]),
a[class*="bg-blue-600"], button[class*="bg-blue-600"],
a[class*="bg-blue-700"], button[class*="bg-blue-700"],
a[class*="bg-blue-800"], button[class*="bg-blue-800"],
a[class*="bg-indigo-600"], button[class*="bg-indigo-600"],
a[class*="bg-indigo-700"], button[class*="bg-indigo-700"],
a[class*="bg-emerald-600"], button[class*="bg-emerald-600"],
a[class*="bg-emerald-700"], button[class*="bg-emerald-700"],
div[class*="bg-blue-700"], div[class*="bg-indigo-700"],
a[href*="level=HomeGP"], a[href*="level=HomePO"] {
    color: #ffffff !important;
}

a[class*="bg-blue-700"] *, button[class*="bg-blue-700"] *,
a[class*="bg-emerald-700"] *, button[class*="bg-emerald-700"] *,
a[class*="bg-indigo-600"] *, button[class*="bg-indigo-600"] *,
a[href*="level=HomeGP"] *, a[href*="level=HomePO"] * {
    color: #ffffff !important;
}

a[class*="bg-blue-600"] svg, button[class*="bg-blue-600"] svg,
a[class*="bg-blue-700"] svg, button[class*="bg-blue-700"] svg,
a[class*="bg-indigo-600"] svg, button[class*="bg-indigo-600"] svg,
a[href*="level=HomeGP"] svg, a[href*="level=HomePO"] svg {
    stroke: #ffffff !important;
}

/* ==========================================================================
   MOBILE TOUCH & INTERACTION OPTIMIZATIONS
   ========================================================================== */
button, a, input, select, textarea, summary, [role="button"], [role="tab"], .ps-chip {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.15);
    cursor: pointer;
}

button svg, a svg, [role="button"] svg,
button span, a span, [role="button"] span {
    pointer-events: none;
}

a, button, [role="button"] {
    pointer-events: auto !important;
}

[role="button"] a, [role="button"] button,
.cursor-pointer a, .cursor-pointer button {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}

button:active, a:active, .ps-chip:active, [role="button"]:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

.ps-state-card-active {
    background-color: #fef3c7 !important;
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px #f59e0b, 0 4px 6px -1px rgba(245, 158, 11, 0.2) !important;
}

.overflow-x-auto, .ps-category-chips, div[class*="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

input, select, textarea {
    pointer-events: auto !important;
}

/* FAQ Answer Accordion Transition */
.faq-answer {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* District search results scrollbar */
#districtSearchResults {
    max-height: 380px;
}


/* ==========================================================================
   HIGH CONTRAST & TOUCH FIXES: High contrast on light UI, Pure white on Dark UI
   ========================================================================== */
/* Dark action buttons with pure white text */
a[class*="bg-indigo-600"], button[class*="bg-indigo-600"],
a[class*="bg-indigo-700"], button[class*="bg-indigo-700"],
a[class*="bg-blue-600"], button[class*="bg-blue-600"],
a[class*="bg-blue-700"], button[class*="bg-blue-700"],
a[class*="bg-blue-800"], button[class*="bg-blue-800"],
a[class*="from-sky-800"], button[class*="from-sky-800"],
a[class*="from-blue-600"], button[class*="from-blue-600"],
a[class*="from-blue-700"], button[class*="from-blue-700"],
a[href*="level=HomeGP"], a[href*="level=HomePO"],
.mis-category-card > button,
#mis-tab-vbgramg.active, #mis-tab-nrega.active,
#ration-action-btn,
div[class*="bg-blue-600"] {
    color: #ffffff !important;
}

.mis-category-card > button span,
.mis-category-card > button svg {
    color: #ffffff !important;
}

/* ABSOLUTE PROTECTION FOR LIGHT CARDS AND LINKS: NEVER WHITE TEXT */
a[class*="bg-blue-50"], a[class*="bg-blue-100"], a[class*="bg-blue-200"],
a[class*="bg-indigo-50"], a[class*="bg-indigo-100"],
a[class*="bg-sky-50"], a[class*="bg-sky-100"],
a[class*="bg-slate-50"], a[class*="bg-slate-100"], a[class*="bg-slate-200"],
a[class*="bg-white"],
button[class*="bg-slate-50"], button[class*="bg-slate-100"],
button[class*="bg-white"], button[class*="bg-blue-50"],
.mis-category-body a, .mis-category-body button {
    color: #0f172a !important;
}

/* Ensure inner titles inside light report cards are dark and prominent */
a[class*="bg-blue-50"] span, a[class*="bg-blue-100"] span,
a[class*="bg-slate-50"] span, a[class*="bg-slate-100"] span,
a[class*="bg-white"] span,
button[class*="bg-slate-50"] span, button[class*="bg-slate-100"] span,
button[class*="bg-white"] span,
.mis-category-body a span {
    color: #0f172a !important;
}

/* Preserve colored accents like external link icons */
.mis-category-body a svg {
    color: #2563eb !important;
    stroke: #2563eb !important;
}

/* Fix GP and PO Login links specific styling */
a[href*="level=HomeGP"], a[href*="level=HomePO"] {
    background-color: #2563eb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}
a[href*="level=HomeGP"]:hover, a[href*="level=HomePO"]:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Touch & tap responsiveness */
.ration-state-card, .ration-quick-chip, .mis-category-card button, [role="button"] {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
}


/* ==========================================================================
   PREMIUM & CLASSY CIVIC PLATFORM UPGRADES (NEW BRAND IDENTITY)
   ========================================================================== */

/* Active Sidebar Navigation Item with Gold/Amber Glow */
.ps-nav-item.active {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fcd34d !important;
    border: 1px solid rgba(252, 211, 77, 0.4) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}
.ps-nav-item.active svg {
    stroke: #fcd34d !important;
}

/* Premium Tool Cards with Emerald Glow on Hover */
.ps-tool-card {
    border: 1.5px solid #e2e8f0;
    border-radius: var(--ps-radius-md);
    background: #ffffff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.ps-tool-card:hover {
    transform: translateY(-3px);
    border-color: #10b981 !important;
    box-shadow: 0 14px 28px -4px rgba(4, 120, 87, 0.14), 0 4px 8px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Category Badges with Fresh Mint/Emerald Tint */
.ps-card-badge {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%) !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 700 !important;
}

/* Primary Action Buttons: Radiant Emerald to Teal Gradient */
.ps-btn-primary, button[type="submit"]:not([class*="bg-"]) {
    background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
    border: none !important;
    font-weight: 700 !important;
}
.ps-btn-primary:hover, button[type="submit"]:not([class*="bg-"]):hover {
    background: linear-gradient(135deg, #047857 0%, #0f766e 100%) !important;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35) !important;
}

/* ==========================================================================
   CLASSY REDESIGNED MULTI-COLUMN FOOTER STYLES
   ========================================================================== */
.ps-footer-premium {
    background: linear-gradient(180deg, #08121e 0%, #021a14 55%, #010f0b 100%);
    color: #94a3b8;
    border-top: 2px solid rgba(245, 158, 11, 0.35);
    position: relative;
    overflow: hidden;
    margin-top: auto;
    font-family: 'Inter', -apple-system, sans-serif;
}

.ps-footer-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.6), rgba(245, 158, 11, 0.8), rgba(16, 185, 129, 0.6), transparent);
}

.ps-footer-top-tier {
    padding: 48px 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-footer-brand-title-gold {
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff 0%, #fcd34d 60%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ps-footer-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    padding: 6px 14px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 700;
}

.ps-footer-grid-4col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 44px 24px;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .ps-footer-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ps-footer-grid-4col {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ps-footer-col-title {
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-footer-col-title span.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
}

.ps-footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ps-footer-link-list li a {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    touch-action: manipulation;
}

.ps-footer-link-list li a:hover, .ps-footer-link-list li a:active {
    color: #34d399;
    transform: translateX(3px);
}

/* State Gateways horizontal strip in footer */
.ps-footer-states-strip {
    background: rgba(2, 44, 34, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 18px 24px;
}

.ps-state-gateway-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s ease;
    cursor: pointer;
    touch-action: manipulation;
}

.ps-state-gateway-pill:hover, .ps-state-gateway-pill:active {
    background: #047857;
    border-color: #10b981;
    color: #ffffff;
    transform: scale(1.04);
}

/* Bottom Bar */
.ps-footer-bottom-bar {
    padding: 22px 24px;
    background: #010a08;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: #64748b;
    max-width: 1440px;
    margin: 0 auto;
}

.ps-back-to-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.ps-back-to-top-btn:hover, .ps-back-to-top-btn:active {
    background: #059669;
    border-color: #10b981;
    color: #ffffff;
}

/* ==========================================================================
   UNIVERSAL TOUCH ACCESS & INTERACTION ACCELERATION
   Ensures zero tap delay, instant response, and clean active animation
   ========================================================================== */
button, [role="button"], .cursor-pointer, .ps-chip, select, input, .ration-state-card, .ration-quick-chip, .mis-category-card button {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
}

button:active, [role="button"]:active, .ration-state-card:active, .ration-quick-chip:active {
    transform: scale(0.97) !important;
    transition: transform 0.07s ease !important;
}

/* ==========================================================================
   HIGH CONTRAST TEXT RULES FOR BUTTONS, SELECTS, CHIPS & INPUTS
   Ensure crystal-clear, deep ink text on all white/light backgrounds
   ========================================================================== */
button[class*="bg-white"], a[class*="bg-white"],
button[class*="bg-slate-50"], a[class*="bg-slate-50"],
button[class*="bg-slate-100"], a[class*="bg-slate-100"],
button[class*="bg-slate-200"], a[class*="bg-slate-200"],
button[class*="bg-gray-50"], a[class*="bg-gray-50"],
button[class*="bg-gray-100"], a[class*="bg-gray-100"],
button[class*="border-slate-"],
#m2-state-select, #m2-fy-select,
.worklist-mode-tab, .wl-step-num-btn,
select, input {
    color: #0f172a !important;
}

button[class*="bg-white"] span, button[class*="bg-slate-50"] span,
button[class*="bg-slate-100"] span, button[class*="bg-slate-200"] span,
#m2-state-select span, #m2-fy-select span,
.worklist-mode-tab span:not(.worklist-selected-badge):not(.worklist-tab-icon),
.wl-step-num-btn span {
    color: #0f172a !important;
}

/* Tab descriptions & muted sublabels */
.worklist-mode-tab .text-slate-500,
.worklist-mode-tab .text-slate-600 {
    color: #475569 !important;
}

/* Pure White Text ONLY on Dark / Primary Action Buttons */
button[class*="bg-emerald-600"], button[class*="bg-emerald-700"], button[class*="bg-emerald-800"],
button[class*="bg-teal-600"], button[class*="bg-teal-700"], button[class*="bg-teal-800"],
button[class*="bg-blue-600"], button[class*="bg-blue-700"], button[class*="bg-blue-800"],
button[class*="bg-indigo-600"], button[class*="bg-indigo-700"], button[class*="bg-indigo-800"],
button[class*="bg-amber-600"], button[class*="bg-amber-700"], button[class*="bg-amber-800"],
button[class*="bg-slate-900"], button[class*="bg-slate-800"],
a[class*="from-emerald-"], a[class*="from-blue-"], a[class*="from-teal-"],
button[class*="from-emerald-"], button[class*="from-blue-"], button[class*="from-teal-"],
.ps-btn-primary, #ration-action-btn, #worklist-open-expenditure-btn, #wl-res-action-btn,
.worklist-tab-icon.bg-emerald-700, .worklist-tab-icon.bg-blue-600,
.wl-step-num-btn.bg-emerald-700, .wl-step-num-btn[style*="#047857"],
.wl-step-num-btn[style*="rgb(4, 120, 87)"] {
    color: #ffffff !important;
}

button[class*="bg-emerald-700"] span, button[class*="bg-blue-700"] span,
button[class*="bg-amber-700"] span, button[class*="bg-emerald-600"] span,
#worklist-open-expenditure-btn span, #wl-res-action-btn span,
.wl-step-num-btn.bg-emerald-700 span, .wl-step-num-btn[style*="#047857"] span {
    color: #ffffff !important;
}

/* ==========================================================================
   LANGUAGE SWITCHER BUTTON ACTIVE & GOOGLE TRANSLATE STYLING
   ========================================================================== */
.ps-lang-btn.active, #navBtnLangEn.active, #navBtnLangHi.active, #mNavBtnLangEn.active, #mNavBtnLangHi.active, #btnLangEn.active, #btnLangHi.active {
    background: #064e3b !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}
.ps-lang-btn:not(.active), #navBtnLangEn:not(.active), #navBtnLangHi:not(.active), #mNavBtnLangEn:not(.active), #mNavBtnLangHi:not(.active), #btnLangEn:not(.active), #btnLangHi:not(.active) {
    background: transparent !important;
    color: #475569 !important;
}

/* Hide Google Translate Top Banner and Tooltips cleanly */
body { top: 0px !important; position: static !important; }
.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-tooltip, .goog-te-gadget {
    display: none !important;
    visibility: hidden !important;
}