:root{--bg:#f5f7fb;--card:#fff;--ink:#152033;--muted:#6b7485;--line:#e5e9f0;--primary:#3157d5;--danger:#c0392b;--ok:#16835b;--warn:#b7791f}*{box-sizing:border-box}body{margin:0;font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}a{color:var(--primary);text-decoration:none}.app{display:flex;min-height:100vh}.sidebar{width:240px;background:#111827;color:#fff;padding:22px 14px;position:sticky;top:0;height:100vh}.brand{font-size:19px;font-weight:800;padding:8px 10px 25px}.brand span{display:block;font-size:11px;font-weight:500;color:#aeb8ca;margin-top:3px}.sidebar nav{display:grid;gap:5px}.sidebar nav a{color:#cbd5e1;padding:11px 12px;border-radius:9px}.sidebar nav a:hover{background:#1f2937;color:#fff}.main{flex:1;padding:25px;max-width:1600px;margin:auto;width:100%}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h1{margin:0 0 2px;font-size:25px}h2{margin:0 0 16px;font-size:18px}h3{margin:0 0 10px}.muted{color:var(--muted)}.avatar{width:44px;height:44px;border-radius:50%;background:#e9edff;display:grid;place-items:center;font-weight:800;overflow:hidden;color:#3157d5}.avatar img{width:100%;height:100%;object-fit:cover}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;box-shadow:0 2px 10px #1a2a4a08}.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px}.stat strong{display:block;font-size:25px;margin:5px 0}.stat small{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid .full{grid-column:1/-1}label{display:grid;gap:6px;font-weight:600;color:#344054}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #d7dce5;border-radius:9px;background:#fff;font:inherit;color:inherit}textarea{resize:vertical}.button,button{border:1px solid #d4d9e2;background:#fff;color:#263244;padding:9px 13px;border-radius:8px;cursor:pointer;font:inherit;display:inline-block}.button.primary,button.primary{background:var(--primary);border-color:var(--primary);color:#fff}.danger{color:#fff!important;background:var(--danger)!important;border-color:var(--danger)!important}.inline{display:inline-block;margin:2px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:800px}th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef1f5;font-size:12px}.badge.applied,.badge.screening-done{background:#edf3ff;color:#3157d5}.badge.security-deposit-paid,.badge.onboarded{background:#e7f8ef;color:#16835b}.badge.rejected,.badge.withdrawn{background:#fdecec;color:#b42318}.badge.security-deposit-pending,.badge.interview-scheduled{background:#fff4dd;color:#9a6700}.flash{padding:12px 14px;border-radius:10px;margin-bottom:16px;background:#edf3ff}.flash.error{background:#fdecec;color:#9b1c1c}.flash.success{background:#e7f8ef;color:#146c4c}.timeline{display:grid;gap:0}.timeline .item{position:relative;padding:0 0 18px 28px;border-left:2px solid #dbe1ec}.timeline .item:before{content:'';position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--primary)}.timeline .item:last-child{border-left-color:transparent}.empty{padding:35px;text-align:center;color:var(--muted)}.notice{padding:12px;border-radius:9px;background:#f7f9fc;border:1px solid var(--line);margin:10px 0}.right{float:right}.actions{display:flex;gap:7px;flex-wrap:wrap}.photo-preview{width:90px;height:90px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}.kicker{font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:700;letter-spacing:.04em}.job-card{padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px}.job-card h3{font-size:18px}.search{display:flex;gap:8px;margin-bottom:15px}.search input{max-width:420px}.secure{background:#fff8e8;border:1px solid #f0d99a;padding:13px;border-radius:10px}.successbox{background:#edf9f3;border:1px solid #b9e5cd;padding:13px;border-radius:10px}@media(max-width:1000px){.sidebar{width:205px}.stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.app{display:block}.sidebar{position:static;width:auto;height:auto;padding:10px}.brand{padding:8px}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{white-space:nowrap}.main{padding:15px}.stats,.grid,.form-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(2,1fr)}header{align-items:flex-start}table{min-width:700px}}@media(max-width:460px){.stats,.grid,.form-grid{grid-template-columns:1fr}.stat strong{font-size:22px}}

/* =========================================================
   RESPONSIVE PRODUCTION OVERRIDES
   Desktop layout remains unchanged.
   ========================================================= */

/* Prevent accidental horizontal page overflow */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Better default sizing for flexible content */
img,
video,
iframe {
    max-width: 100%;
}

/* =========================================================
   TABLET + MOBILE
   ========================================================= */
@media (max-width: 900px) {

    .app {
        display: block;
        min-height: 100vh;
        width: 100%;
    }

    /* Mobile/tablet navigation */
    .sidebar {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 8px 10px;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .brand {
        padding: 5px 8px 7px;
        font-size: 17px;
        line-height: 1.15;
    }

    .brand span {
        display: inline;
        margin-left: 4px;
        font-size: 10px;
    }

    .sidebar nav {
        display: flex;
        width: 100%;
        gap: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 10px;
        font-size: 13px;
    }

    .main {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 18px;
    }

    header {
        gap: 12px;
        margin-bottom: 18px;
    }

    h1 {
        font-size: 22px;
    }

    .card {
        padding: 17px;
        border-radius: 13px;
    }

    .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search {
        flex-wrap: wrap;
    }

    .search input {
        max-width: none;
        flex: 1 1 240px;
    }

    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-radius: 9px;
    }

    table {
        min-width: 720px;
    }

    th,
    td {
        padding: 10px 9px;
    }

    .actions {
        width: 100%;
    }

    .actions .button,
    .actions button {
        min-height: 40px;
    }
}

/* =========================================================
   PHONES
   ========================================================= */
@media (max-width: 600px) {

    .sidebar {
        padding: 7px 8px;
    }

    .brand {
        padding: 4px 6px 6px;
        font-size: 16px;
    }

    .brand span {
        font-size: 10px;
    }

    .sidebar nav a {
        padding: 8px 9px;
        font-size: 12px;
        border-radius: 8px;
    }

    .main {
        padding: 12px;
    }

    header {
        align-items: center;
        margin-bottom: 14px;
    }

    header > div {
        min-width: 0;
    }

    h1 {
        font-size: 20px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    h2 {
        font-size: 17px;
    }

    .avatar {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .card {
        padding: 14px;
        margin-bottom: 13px;
        border-radius: 12px;
    }

    /* One-column forms on phones */
    .form-grid,
    .grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .form-grid .full {
        grid-column: auto;
    }

    label {
        font-size: 13px;
    }

    input,
    select,
    textarea {
        min-height: 42px;
        padding: 10px;
        font-size: 16px;
    }

    textarea {
        min-height: 110px;
    }

    button,
    .button {
        min-height: 42px;
        padding: 10px 13px;
    }

    .actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .actions .button,
    .actions button {
        width: 100%;
        text-align: center;
    }

    /* Dashboard statistics */
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .stat {
        padding: 13px;
        min-width: 0;
    }

    .stat strong {
        font-size: 21px;
        overflow-wrap: anywhere;
    }

    .stat small {
        font-size: 11px;
    }

    /* Job cards */
    .job-card {
        padding: 14px;
        border-radius: 11px;
    }

    .job-card h3 {
        font-size: 17px;
        overflow-wrap: anywhere;
    }

    /* Referral / code / notices */
    .notice,
    .secure,
    .successbox {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    code {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Tables stay functional without breaking page width */
    .table-wrap {
        margin-left: -2px;
        margin-right: -2px;
        width: calc(100% + 4px);
    }

    table {
        min-width: 680px;
    }

    th,
    td {
        font-size: 12px;
        padding: 9px 8px;
    }

    th {
        font-size: 10px;
    }

    /* Search controls */
    .search {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .search input,
    .search button,
    .search .button {
        width: 100%;
        max-width: none;
    }

    .right {
        float: none;
        display: block;
        margin-top: 8px;
    }

    .photo-preview {
        width: 80px;
        height: 80px;
    }

    .timeline .item {
        padding-left: 22px;
    }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */
@media (max-width: 380px) {

    .main {
        padding: 9px;
    }

    .card {
        padding: 12px;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .stat strong {
        font-size: 20px;
    }

    .brand {
        font-size: 15px;
    }

    .sidebar nav a {
        font-size: 11px;
        padding: 7px 8px;
    }
}


/* =========================================================
   FINAL MOBILE NAVIGATION
   ========================================================= */

.mobile-menu-btn,
.mobile-overlay {
    display: none;
}

@media (max-width: 900px) {
    .app {
        display: block;
        width: 100%;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed;
        z-index: 3000;
        top: 0;
        left: 0;
        width: min(285px, 82vw);
        height: 100dvh;
        min-height: 100dvh;
        padding: 18px 12px;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 10px 0 30px rgba(0,0,0,.20);
    }

    body.mobile-menu-open .sidebar {
        transform: translateX(0);
    }

    .sidebar .brand {
        padding: 8px 10px 20px;
        font-size: 20px;
    }

    .sidebar .brand span {
        display: block;
        margin: 3px 0 0;
        font-size: 11px;
    }

    .sidebar nav {
        display: grid;
        gap: 5px;
        width: 100%;
        overflow: visible;
    }

    .sidebar nav a {
        display: block;
        width: 100%;
        white-space: normal;
        padding: 12px 13px;
        font-size: 14px;
    }

    .mobile-overlay {
        position: fixed;
        z-index: 2900;
        inset: 0;
        display: block;
        background: rgba(0,0,0,.48);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, visibility .22s ease;
    }

    body.mobile-menu-open .mobile-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .main {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 16px;
    }

    header {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-bottom: 18px;
    }

    .mobile-menu-btn {
        display: grid;
        place-items: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        color: var(--ink);
        font-size: 22px;
        line-height: 1;
    }

    header > div {
        flex: 1;
        min-width: 0;
    }

    header h1 {
        font-size: 21px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    header .avatar {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        min-width: 42px;
        max-width: 42px;
    }

    .form-grid,
    .grid {
        grid-template-columns: 1fr;
    }

    .form-grid .full {
        grid-column: auto;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 680px;
    }
}

@media (max-width: 600px) {
    .main {
        padding: 11px;
    }

    header {
        margin-bottom: 13px;
        gap: 8px;
    }

    header h1 {
        font-size: 19px;
    }

    header .muted {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-menu-btn {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        min-height: 40px;
        font-size: 20px;
    }

    header .avatar {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .card {
        padding: 13px;
        margin-bottom: 12px;
    }

    .form-grid,
    .grid {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat {
        padding: 11px;
    }

    .stat strong {
        font-size: 20px;
    }

    .actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .actions .button,
    .actions button {
        width: 100%;
        text-align: center;
    }

    input,
    select,
    textarea {
        font-size: 16px;
        max-width: 100%;
    }
}

@media (max-width: 380px) {
    .main {
        padding: 8px;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 11px;
    }

    header h1 {
        font-size: 18px;
    }
}

/* MOBILE NAV FINAL OVERRIDE V2 */

/* MOBILE NAV FINAL OVERRIDE V2 */

.mobile-menu-btn {
    display: none;
    position: relative;
    z-index: 5001;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    margin: 0 10px 0 0;
    border: 1px solid #d9dee8;
    border-radius: 8px;
    background: #fff;
    color: #273142;
    font-size: 22px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.mobile-overlay {
    display: none;
}

@media screen and (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .app {
        display: block !important;
        width: 100% !important;
        min-height: 100vh;
    }

    /* REAL OFF-CANVAS SIDEBAR */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(285px, 82vw) !important;
        max-width: 285px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 18px 12px !important;

        z-index: 5000 !important;

        transform: translate3d(-110%, 0, 0) !important;
        transition: transform .25s ease !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        box-sizing: border-box !important;
    }

    body.mobile-menu-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Mobile navigation must be vertical */
    .sidebar nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .sidebar nav a {
        display: flex !important;
        width: 100% !important;
        min-height: 44px !important;
        align-items: center !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    /* Dark background behind the drawer */
    .mobile-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 4999 !important;

        display: none !important;

        background: rgba(0,0,0,.45) !important;
        cursor: pointer !important;
    }

    body.mobile-menu-open .mobile-overlay {
        display: block !important;
    }

    /* Header */
    .main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }

    .main > header {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .mobile-menu-btn {
        display: block !important;
        flex: 0 0 42px !important;
    }

    .main > header h1 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .main > header .avatar {
        flex: 0 0 auto !important;
    }

    /* Cards and dashboard */
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .grid,
    .form-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tables remain usable by horizontal scrolling */
    .table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table {
        min-width: 700px !important;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 600px) {

    .main {
        padding: 12px !important;
    }

    .main > header {
        min-height: 52px !important;
    }

    .main > header h1 {
        font-size: 22px !important;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .stats .card,
    .stats > * {
        min-width: 0 !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        font-size: 16px !important;
    }

    .btn,
    button[type="submit"] {
        min-height: 44px;
    }
}

@media screen and (max-width: 380px) {
    .stats {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================
   FINAL PRODUCTION MOBILE NAVIGATION
   ========================================================== */

.mobile-menu-btn,
.mobile-overlay{
    display:none;
}

@media (max-width:900px){

    .app{
        display:block !important;
        min-height:100vh;
    }

    .sidebar{
        position:fixed !important;
        left:0;
        top:0;
        bottom:0;
        width:min(285px,82vw) !important;
        height:100dvh !important;
        max-height:100dvh;
        overflow-y:auto;
        z-index:3000 !important;
        transform:translateX(-105%);
        transition:transform .22s ease;
        box-shadow:8px 0 30px rgba(0,0,0,.22);
    }

    body.mobile-menu-open .sidebar{
        transform:translateX(0);
    }

    .sidebar nav{
        display:flex !important;
        flex-direction:column !important;
        gap:6px;
        overflow:visible !important;
    }

    .sidebar nav a{
        width:100%;
        min-height:44px;
        display:flex;
        align-items:center;
    }

    .mobile-overlay{
        position:fixed;
        inset:0;
        z-index:2900;
        background:rgba(0,0,0,.45);
        display:block;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .2s ease;
    }

    body.mobile-menu-open .mobile-overlay{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .main{
        width:100% !important;
        min-width:0 !important;
        padding:15px !important;
    }

    header{
        display:flex !important;
        align-items:center !important;
        gap:10px;
        min-height:56px;
    }

    .mobile-menu-btn{
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        min-width:44px;
        border:0;
        border-radius:10px;
        cursor:pointer;
        font-size:24px;
        line-height:1;
    }

    header .avatar,
    header .topuser{
        max-width:48px;
        overflow:hidden;
    }

    .form-grid{
        grid-template-columns:1fr !important;
    }

    .grid{
        grid-template-columns:1fr !important;
    }

    .stats{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .table-wrap{
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    table{
        min-width:700px;
    }

    input,
    select,
    textarea,
    button{
        max-width:100%;
    }
}

@media (max-width:600px){

    .main{
        padding:10px !important;
    }

    header h1{
        font-size:20px;
    }

    header p{
        font-size:12px;
    }

    .card{
        padding:14px !important;
    }

    .stats{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px;
    }

    .actions,
    .inline-form{
        flex-direction:column;
        align-items:stretch;
    }

    .actions button,
    .inline-form button{
        width:100%;
    }

    input,
    select,
    textarea{
        font-size:16px !important;
    }
}

@media (max-width:380px){

    .stats{
        grid-template-columns:1fr !important;
    }

    .mobile-menu-btn{
        width:42px;
        height:42px;
        min-width:42px;
    }
}