/* --- SYSTEM REBOOT & CORE VALUES --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #0f172a; /* Slate 900: Deep dark background */
    color: #cbd5e1; /* Slate 300: High legibility text */
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- COLUMN 1: SIDEBAR TRACK PANEL --- */
.sidebar {
    width: 280px;
    background-color: #020617; /* Slate 950: Darker panel contrast */
    border-right: 1px solid #1e293b; /* Slate 800: Subdued partition line */
    padding: 32px 24px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.brand-icon {
    /*background: linear-gradient(135deg, #16a34a, #2563eb); */ /* Clean brand gradient */
    width: 25px;
    height: 25px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 14px;
}

.brand-name {
     /* 1. CORE TRIGGER: Forces all child elements to lay out horizontally */
    display: flex !important; 
    
    /* 2. FLEX DIRECTION: Confirms you want a single row layout (default state) */
    flex-direction: row; 
    color: #f8fafc;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.nav-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 24px;
}

.nav-links {
    list-style: none;
}

.nav-links li {
    margin-bottom: 4px;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.nav-links a:hover, .nav-links a.active {
    color: #f8fafc;
    background-color: #1e293b; /* Dark highlight box */
}

/* --- MAIN PAGE GRID STRUCTURE --- */
.main-content {
    margin-left: 280px; /* Pushes content right to respect desktop sidebar width */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- MOBILE COMPATIBLE BAR CONFIGS --- */
.top-navbar {
    display: none; /* Hidden on monitors */
    background-color: #020617;
    border-bottom: 1px solid #1e293b;
    padding: 16px 24px;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
}

.menu-toggle-btn {
    background: none;
    border: 1px solid #334155;
    color: #f8fafc;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background 0.15s ease;
}

.menu-toggle-btn:hover {
    background-color: #1e293b;
}

/* --- THE API CONTENT SECTIONS ROW MATRIX --- */
.api-section {
    display: flex;
    border-bottom: 1px solid #1e293b;
    min-height: 250px;
    flex-wrap: wrap; /* Wraps code beneath descriptions on small screens */
}

/* COLUMN 2: DESCRIPTIONS & ARRAYS PANEL */
.api-description-panel {
    flex: 1 1 500px; /* Fluid width sizing scale */
    padding: 60px 40px;
    background-color: #0f172a;
}

.api-section-title {
    color: #f8fafc;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

p.desc-text {
    font-size: 15px;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 32px;
}

/* Parameter Grid Definitions Tables */
.parameter-table-title {
    font-size: 13px;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.parameter-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.parameter-table th {
    padding: 10px 12px;
    border-bottom: 1px solid #334155;
    color: #64748b;
    font-weight: 600;
}

.parameter-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #1e293b;
    vertical-align: top;
}

.param-name {
    font-family: monospace;
    font-weight: 700;
    color: #38bdf8; /* Sharp neon parameter blue */
}

.param-type {
    font-family: monospace;
    color: #f43f5e; /* Rose type indicator */
    font-size: 12px;
}

.param-req {
    background-color: rgba(244, 63, 94, 0.1);
    color: #fb7185;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.param-desc {
    color: #94a3b8;
    line-height: 1.4;
}

/* COLUMN 3: BLACK TERMINAL CODE VIEW PANEL */
.api-code-panel {
    flex: 1 1 400px;
    background-color: #020617;
    padding: 60px 40px;
    border-left: 1px solid #1e293b;
    display: flex;
    flex-direction: column;
}

.code-box-title {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.code-block-container {
    background-color: #0b1329; /* Extra rich dark slate blue block inner fill */
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
}

pre {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
}

/* Syntax Token Colors (Emulates live terminal syntax rendering) */
.syntax-key { color: #7dd3fc; }
.syntax-string { color: #a7f3d0; }

/* --- TOP WELCOME HERO PORTAL STYLES --- */
.api-hero-header {
    display: flex;
    justify-content: space-between; /* Snaps left elements left and pushes links right */
    align-items: center;
    padding: 40px;
    background-color: #0b1329; /* Deep slate blue matching your terminal container boxes */
    border-bottom: 1px solid #1e293b;
    width: 100%;
    flex-wrap: wrap; /* Safety valve: Wraps elements gracefully on medium monitors */
    gap: 20px;
}

.hero-left-box {
    flex: 1 1 500px;
}

.hero-main-title {
    font-size: 26px;
    font-weight: 800;
    color: #f8fafc; /* Crisp solid bright white text label */
    letter-spacing: -0.75px;
    line-height: 1.2;
}

.hero-sub-text {
    font-size: 13px;
    color: #64748b; /* Subdued gray text track */
    margin-top: 6px;
    font-weight: 500;
}

/* Right Side Link Block Alignment Configurations */
.hero-right-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.auth-hint-text {
    color: #94a3b8;
}

.auth-divider-slash {
    color: #475569;
    padding: 0 4px;
}

/* Button UI Toggles Styling rules */
.auth-btn {
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-signup {
    color: #22c55e; /* Vibrant green link highlight */
    border-bottom: 1px dashed transparent;
}
.btn-signup:hover {
    color: #4ade80;
    border-bottom-color: #4ade80; /* Smooth hover border line track */
}

.btn-login {
    color: #38bdf8; /* Sharp neon parameter blue link highlight */
    border-bottom: 1px dashed transparent;
}
.btn-login:hover {
    color: #7dd3fc;
    border-bottom-color: #7dd3fc;
}

/* --- SECTION 7 POSTMAN RECONSTRUCTED GRAPHICS CONTAINER --- */
.postman-screenshot-wrapper {
    position: relative;
    width: 100%;
    max-width: 360px;
    background-color: #0b1329; /* Deep terminal look matching code boxes */
    border: 1px dashed #334155;
    border-radius: 8px;
    padding: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transition: border-color 0.2s;
}

.postman-screenshot-wrapper:hover {
    border-color: #22c55e; /* Subtle glow when hovered */
}

.postman-mock-header {
    background-color: #020617;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    border: 1px solid #1e293b;
}

.mock-method {
    color: #4ade80;
    font-weight: 800;
    margin-right: 8px;
}

.mock-url {
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.postman-real-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Forces your screenshot image to fill the card neatly */
    z-index: 10;
}

.postman-fallback-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(30, 41, 59, 0.85);
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 5;
    border: 1px solid #334155;
}


/* --- 📱 RESPONSIVE RESPONSIVE SMARTPHONE ADAPTATIONS --- */
@media (max-width: 1024px) {
    /* Stop forcing horizontal row directions */
    body {
        display: block !important; 
    }
    .top-navbar {
        display: flex; /* Activate header navbar bar */
        width: 100%;
    }
    .sidebar {
        transform: translateX(-100%); /* Slide sidebar completely out of sight default */
        width: 280px;
    }
    .sidebar.mobile-open {
        transform: translateX(0); /* Slide overlay menu back into screen focus if toggled */
    }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important; /* Eliminates ghost horizontal sliding space */
    }
    .api-section {
        flex-direction: column !important; /* Stacks information descriptions above code arrays */
        width: 100% !important;
    }
    .api-code-panel {
        border-left: none;
        border-top: 1px solid #1e293b;
        padding: 40px 24px;
    }
    .api-description-panel {
        padding: 40px 24px;
    }
    .api-description-panel, .api-code-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding: 32px 16px !important; /* Reduces large desktop cushion vertical gaps */
        flex: none !important;
    }
    
     /* started added for responsive*/
     /* Forces parameters tables to adapt nicely on small screens instead of stretching */
    .parameter-table, 
    .parameter-table thead, 
    .parameter-table tbody, 
    .parameter-table tr, 
    .parameter-table td, 
    .parameter-table th {
        display: block !important;
        width: 100% !important;
    }

    .parameter-table thead {
        display: none !important; /* Hides flat tabletop headers on mobile viewports */
    }

    .parameter-table tr {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px dashed #334155; /* Creates clean visual separators for parameters */
    }

    .parameter-table td {
        padding: 4px 0 !important;
        border: none !important;
    }
    
    /* Adds short labels in front of parameter rows for clarity on phones */
    .parameter-table td:nth-of-type(1)::before { content: "Field: "; color: #64748b; font-size: 11px; }
    .parameter-table td:nth-of-type(2)::before { content: "Type: "; color: #64748b; font-size: 11px; }
    
   /* end added for responsive*/
   
   
    .api-hero-header {
        flex-direction: column !important; /* Stacks links neatly beneath the main title on mobile */
        align-items: flex-start !important; /* Re-aligns elements to the clean left margin wall */
        padding: 24px 16px !important; /* Compresses excess vertical cushion margins padding spacing */
        gap: 12px !important;
    }
    
    .hero-main-title {
        font-size: 20px !important; /* Scales title font size text down comfortably for mobile views */
    }
    
    .hero-right-box {
        margin-top: 4px !important; /* Separation gap space between header strings and buttons */
    }
    
    .api-hero-header {
        flex-direction: column !important;  /* Stacks links neatly beneath the main title on mobile */
        align-items: flex-start !important;  /* Re-aligns elements to the clean left margin wall */
        padding: 20px 16px !important;       /* Compresses excess vertical cushion padding space */
        gap: 8px !important;                 /* Drastically tightens the gap between title and links */
        height: auto !important;             /* Collapses all vertical runaway ghost spaces */
    }
    
    /* 🌟 THE CORE FIX: Collapses the flex growth container on mobile screens */
    .hero-left-box {
        flex: none !important; 
        width: 100% !important;
    }
    
    .hero-main-title {
        font-size: 20px !important;          /* Scales title text down comfortably for mobile views */
        margin: 0 !important;
        line-height: 1.2;
    }
    
    .hero-sub-text {
        margin-top: 4px !important;          /* Pulls description closer to your main header title */
        margin-bottom: 0px !important;
    }
    
    .hero-right-box {
        margin-top: 6px !important;          /* Adds a clean, compact 6px space right above the link group */
        padding: 0 !important;
    }

}


/* --- METHOD BADGE DECORATIONS --- */
.method-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.method-badge.post { 
    background-color: rgba(22, 163, 74, 0.15); 
    color: #4ade80; 
}

/* --- ENDPOINT CONTAINER BAR --- */
.endpoint-url-bar {
    display: inline-flex;
    align-items: center;
    background-color: #1e293b;
    padding: 8px 4px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    color: #e2e8f0;
    margin-bottom: 24px;
    border: 1px solid #334155;
    width: 100%;
    word-break: break-all; /* Prevents overflow on mobile viewports */
}

.endpoint-url-bar .http-verb {
    font-weight: 700;
    margin-right: 12px;
    text-transform: uppercase;
}
.endpoint-url-bar .http-verb.post { color: #4ade80; }

/* --- TERMINAL SYNTAX HIGHLIGHT EXTENSIONS --- */
.syntax-number { color: #fbcfe8; }   /* Pink highlight for integers/decimals */
.syntax-boolean { color: #fca5a5; }  /* Light red highlight for true/false */

/* --- GET METHOD TYPE DISPLAY COLOR EXTENSIONS --- */
.method-badge.get { 
    background-color: rgba(37, 99, 235, 0.15); 
    color: #60a5fa; /* Clean blue text badge */
}

.endpoint-url-bar .http-verb.get { 
    color: #60a5fa; 
}

/* --- SECTION 6 COHESIVE CARD DIRECTORY STYLES --- */
.networks-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
    width: 100%;
}

.country-network-card {
    flex: 1 1 calc(33.333% - 14px); /* Three columns on screen window panels */
    min-width: 280px;
    background-color: #020617; /* Dark tech slate box matching terminal contrast */
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.country-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.flag-icon {
    font-size: 24px;
    line-height: 1;
}

.country-card-title {
    color: #f8fafc;
    font-size: 16px;
    font-weight: 700;
}

.country-card-code {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.country-card-code code {
    color: #38bdf8; /* Blue parameter highlight style */
    font-weight: 600;
}

.carrier-list-title {
    font-size: 11px;
    text-transform: uppercase;
    color: #475569;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.carrier-badge-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.carrier-badge-list li {
    background-color: #1e293b;
    color: #e2e8f0;
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #334155;
}

/* Smartphone Stacking Refinements */
@media (max-width: 768px) {
    .country-network-card {
        flex: 1 1 100%; /* Stacks cards cleanly into single lines on mobile screens */
    }
}


/* --- FORCE CODE TEXT CONTRAINT BOUNDARIES ON MOBILE --- */
pre, code {
    white-space: pre-wrap !important;       /* Forces long code lines to wrap onto a new line */
    word-wrap: break-word !important;       /* Breaks long words or single string variables */
    word-break: break-all !important;       /* Splits ultra-long API URLs seamlessly */
}

.code-block-container {
    background-color: #0b1329;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 16px;
    width: 100% !important;                 /* Restricts width strictly to parent container block */
    max-width: 100% !important;
    overflow-x: hidden !important;          /* Disables horizontal side-scrolling runaway margins */
}