/* ============================================================
   responsive.css  —  OverseasHire / GulfGate
   IMPORTANT: isko main.css ke BAAD load karein:
     <link href="website-assets/css/main.css" rel="stylesheet" />
     <link href="responsive.css" rel="stylesheet" />

   Ye file main.css ki tooti hui media-queries ko fix karti hai
   (jaise ".sidebar;{...}" wale selectors jo browser drop kar deta tha)
   aur har screen size ke liye proper behaviour deti hai.
   ============================================================ */

/* ---------- 0. Base safety: horizontal scroll kabhi na aaye ---------- */
html, body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }

/* Mobile browser ki address-bar ke saath height sahi rahe */
@supports (height: 100dvh) {
    .app  { height: 100dvh; }
    .main { height: 100dvh; }
}

/* Touch scroll smooth + tables horizontally scrollable */
.table-wrap { -webkit-overflow-scrolling: touch; }

/* Topbar title ko chhoti screen par ellipsis mile, popups clip na ho */
.topbar > h2,
#topTitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reduced-motion respect (accessibility) */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Mobile sidebar backdrop (JS isse toggle karta hai) ---------- */
.sb-backdrop {
    position: fixed;
    inset: 0;
    top: 48px;                       /* shellbar ke neeche se */
    background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 70;                     /* sidebar(80) ke neeche, content ke upar */
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.sb-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}


/* ============================================================
   1. ≤ 1200px  —  bada laptop / chhota desktop
   ============================================================ */
@media (max-width: 1200px) {
    .sidebar   { width: 240px; }
    .main      { margin-left: 240px; }
    .page-container { padding: 20px 20px 56px; }
}


/* ============================================================
   2. ≤ 1080px  —  tablet landscape  (grids collapse)
   ============================================================ */
@media (max-width: 1080px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .chart-grid,
    .cand-grid,
    .row-2,
    .row-2-wide,
    .row-3,
    .matchbox,
    .notif-grid { grid-template-columns: 1fr; }

    .drawer { width: 440px; }
}


/* ============================================================
   3. ≤ 900px  —  yahan se sidebar OFF-CANVAS + hamburger
   ============================================================ */
@media (max-width: 900px) {
    /* Sidebar drawer ki tarah left se slide (default me chhupa) */
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
        z-index: 80;
        box-shadow: 0 0 40px rgba(15, 30, 60, .20);
    }

        .sidebar.open {
            transform: translateX(0);
        }

    /* Content full width */
    .main {
        margin-left: 0;
    }

    /* Hamburger dikhe */
    .hamburger {
        display: grid;
    }

    .sb-logo {
        display: grid;
    }

    .brand-row{
        display:none;
}
    .topbar {
        gap: 10px;
        padding: 0 14px;
    }
    #topTitle { font-size: 16px; }

    .content        { padding: 18px 16px 60px; }
    .page-container { padding: 0; }         /* content already padded */
    .credit-pill .lab { display: none; }
    .drawer { width: 100%; max-width: 100%; }
}


/* ============================================================
   4. ≤ 768px  —  phone: tables → cards, tighter spacing
   ============================================================ */
@media (max-width: 768px) {

    /* --- responsive tables (row = card) --- */
    table.rtable thead { display: none; }
    table.rtable,
    table.rtable tbody,
    table.rtable tr,
    table.rtable td { display: block; width: 100%; }

    table.rtable tbody tr {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        margin-bottom: 12px;
        padding: 6px 4px;
        background: #fff;
    }
    table.rtable tbody td {
        border: none;
        padding: 9px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        text-align: right;
    }
    table.rtable tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .3px;
        text-align: left;
    }
    table.rtable tbody td.namecell {
        justify-content: flex-start;
        text-align: left;
    }
    table.rtable tbody td.namecell::before { display: none; }
    table.rtable tbody td.act-menu,
    table.rtable tbody td.ckcell { justify-content: flex-end; }

    /* --- grids / headings --- */
    .stat-grid   { grid-template-columns: 1fr!important; }
    .cand-grid   { grid-template-columns: 1fr; }
    .page-head h1 { font-size: 19px; }

    /* --- toolbar / filters full width --- */
    .toolbar     { gap: 8px; }
    .search-mini { max-width: none; width: 100%; }
    .seg         { width: 100%; justify-content: center; }

    /* --- popups viewport ke andar rahein --- */
    .notif-pop {
        right: 8px;
        width: min(360px, calc(100vw - 16px));
    }
    .av-pop { right: 8px; }

    /* --- stepper: sirf circle dikhe, labels hide --- */
    .stp .stl { display: none; }

    /* --- modal / drawer --- */
    .modal { width: 96vw !important; }
}


/* ============================================================
   5. ≤ 640px  —  shellbar text trim
   ============================================================ */
@media (max-width: 640px) {
    .sb-viewing .vp { display: none; }        /* "Viewing as" hide, role rahe */
    .shellbar { gap: 8px; padding: 0 12px; }
}


/* ============================================================
   6. ≤ 560px  —  chhota phone
   ============================================================ */
@media (max-width: 560px) {
    .sb-viewing { display: none; }            /* jagah bachao */
    .sb-right   { gap: 6px; }

    .content        { padding: 16px 14px 56px!important; }
    .page-head h1   { font-size: 18px; }
    .card-pad       { padding: 14px; }

    /* modal footer buttons stack + full width */
    .modal-foot { flex-direction: column-reverse; }
    .modal-foot .btn { width: 100%; }

    /* drawer footer buttons full width */
    .drawer-foot .btn { flex: 1 1 100%; }

    /* pager: "Showing x of y" on its own line, Prev · Page x of y · Next below it */
    .pager { flex-wrap: wrap; gap: 8px; }
    .pager > span:first-child { flex: 1 1 100%; }
    .pager > .flex { flex: 1 1 100%; justify-content: space-between; }
    .pager > .flex .muted { white-space: nowrap; }
    .job-card .jc-foot {
        flex-wrap: wrap;
    }
    .job-card .jc-foot .btn-danger {
        margin-left: unset !important;
    }
}


/* ============================================================
   7. ≤ 480px  —  shellbar icon-only, form polish
   ============================================================ */
@media (max-width: 480px) {
    /* "Switch role" ka text hide, sirf icon */
    .role-trigger span:not(.switch-icon) { display: none; }
    .role-trigger { padding: 0 10px; }
    .role-trigger .trigger-arrow { margin-left: 0; }

    /* Exit ka label hide, sirf icon */
    .sb-btn .lbl { display: none; }
    .sb-btn { padding: 0 10px; }

    /* registration form */
    .btn-lg  { height: 48px; font-size: 15px; }
    .cc-sel  { font-size: 14px; }
    .ph-code { font-size: 14px; padding: 0 10px; }
    .trust   { font-size: 11px; padding: 4px 8px; }

    .topbar { padding: 0 12px; gap: 8px; }
    .icon-btn,
    .av-menu,
    .custom-dropdown-btn { width: 36px; height: 36px; }
}


/* ============================================================
   8. ≤ 380px  —  bahut chhoti screen
   ============================================================ */
@media (max-width: 380px) {
    .content   { padding: 14px 12px 52px; }
    .card-pad  { padding: 12px; }
    .role-menu { width: min(275px, calc(100vw - 18px)); right: -4px; }
    .notif-pop { width: calc(100vw - 12px); right: 6px; }
    .brand-name { font-size: 15px; }
}


/* ============================================================
   9. Landscape phone (kam height) — sidebar nav scroll theek
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
    .sidebar .nav { padding: 6px 8px; }
    .userbox { padding: 8px 12px; }
}