/*
  Anu Baba Operations OS v4.9 — faithful mobile responsive layer
  Goal: preserve the desktop Navy + Aqua visual system and component geometry.
  This file changes layout only at <= 880px. It does NOT introduce a new mobile theme.
*/

@media (max-width:880px){
  :root{
    --ab-mobile-gutter:14px;
  }

  html,body{max-width:100%;overflow-x:hidden!important}
  body.anu-mobile-nav-open{overflow:hidden!important}
  .app{min-height:100dvh!important;display:block!important}
  .shell{margin-left:0!important;width:100%!important;min-width:0!important}

  /* Keep the exact desktop sidebar identity; only turn it into a drawer. */
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(270px,86vw)!important;
    height:100dvh!important;
    padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px))!important;
    transform:translateX(-102%)!important;
    transition:transform 180ms cubic-bezier(.2,.8,.2,1)!important;
    z-index:92!important;
    overflow:hidden!important;
    overscroll-behavior:contain!important;
    display:flex!important;
    flex-direction:column!important;
    background:#07182D!important;
    border-right:1px solid #173D64!important;
    box-shadow:0 22px 60px rgba(7,24,45,.24)!important;
  }
  .anu-mobile-nav-open .sidebar{transform:translateX(0)!important}
  .sidebar .brand{justify-content:flex-start!important;padding:2px 8px 18px!important}
  .sidebar .brand>div{display:block!important}
  .sidebar .brand img{width:42px!important;height:42px!important}
  .sidebar .nav{display:grid!important;gap:4px!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:0 3px 16px 0!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-gutter:stable}
  .sidebar .nav-section{display:block!important}
  .sidebar .nav-rule{display:block!important}
  .sidebar .nav-btn{
    width:100%!important;
    min-height:42px!important;
    height:auto!important;
    justify-content:flex-start!important;
    padding:10px 12px!important;
    gap:10px!important;
    border-radius:9px!important;
    text-align:left!important;
  }
  .sidebar .nav-btn>span:not(.nav-icon),.sidebar .nav-count{display:inline-flex!important}
  .sidebar .nav-count{margin-left:auto!important;align-items:center!important;justify-content:center!important}
  .sidebar .sidebar-bottom{display:grid!important;flex:0 0 auto!important;margin-top:0!important;gap:10px!important;padding-top:10px!important;padding-bottom:max(2px,env(safe-area-inset-bottom,0px))!important;background:#07182D!important;border-top:1px solid rgba(255,255,255,.08)!important;position:relative!important;z-index:2!important}
  .sidebar .sidebar-bottom .user-box{display:flex!important}
  .sidebar .sidebar-bottom .user-box>div{display:block!important}
  .sidebar .sidebar-bottom>.btn{display:inline-flex!important;width:100%!important;max-width:none!important}
  .sidebar .demo-switch{display:block!important}

  .anu-mobile-scrim{
    position:fixed!important;inset:0!important;z-index:90!important;border:0!important;border-radius:0!important;
    background:rgba(7,24,45,.52)!important;backdrop-filter:blur(2px)!important;
  }
  .anu-mobile-nav-open .anu-mobile-scrim{display:block!important}
  .anu-mobile-nav-toggle{
    display:grid!important;place-items:center!important;flex:0 0 40px!important;width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;border:1px solid var(--anu-border)!important;
    border-radius:8px!important;background:#fff!important;color:var(--anu-text)!important;padding:0!important;
  }

  /* Same white desktop topbar, scaled only for width. */
  .topbar-wrap{position:sticky!important;top:0!important;z-index:60!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(16px)!important}
  .topbar{min-height:64px!important;height:64px!important;padding:0 var(--ab-mobile-gutter)!important;gap:9px!important}
  .global-search{height:40px!important;min-width:0!important;width:auto!important;flex:1 1 auto!important;border-radius:8px!important;padding:0 11px!important}
  .global-search input{min-width:0!important;font-size:13px!important}
  .top-actions{flex:0 0 auto!important;gap:5px!important}
  .top-actions>.badge,.top-actions .badge{display:none!important}
  .top-actions .icon-btn{width:40px!important;height:40px!important;min-width:40px!important}
  .meeting-ribbon{
    margin:0 var(--ab-mobile-gutter) 8px!important;padding:9px 10px!important;border-radius:9px!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;
    max-height:none!important;font-size:10px!important;
  }
  .meeting-ribbon>div,.meeting-ribbon>span{min-width:0!important}
  .meeting-ribbon strong,.meeting-ribbon span{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Page spacing follows desktop rhythm, just narrower. */
  .main{width:100%!important;max-width:none!important;padding:22px var(--ab-mobile-gutter) 58px!important}
  .main.messages-main{padding:14px var(--ab-mobile-gutter) 34px!important}
  .page-header{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;margin-bottom:22px!important;text-align:left!important}
  .page-header>div{width:100%!important;min-width:0!important}
  .page-header h1{font-size:clamp(28px,8vw,36px)!important;line-height:1.08!important;margin:6px 0 7px!important;max-width:100%!important;text-align:left!important}
  .page-header p{font-size:13px!important;line-height:1.55!important;max-width:100%!important;text-align:left!important}
  .header-actions{width:100%!important;justify-content:flex-start!important;gap:8px!important;flex-wrap:wrap!important}
  .header-actions .btn{max-width:none!important}

  /* Do not redesign cards. Preserve left alignment and desktop hierarchy. */
  .panel,.metric-card,.market-card,.client-card,.va-card,.assignment-card,.invoice-card,.task-card,.complaint-card,
  .professional-card,.credential-card,.access-card,.agreement-paper,.booking-issue,.time-panel,.profile-hero,
  .applicant-card,.integration-card,.meeting-list-card{
    text-align:left!important;
  }
  .panel,.metric-card,.market-card,.client-card,.va-card,.assignment-card,.invoice-card,.task-card,.complaint-card,
  .professional-card,.credential-card,.access-card,.calendar-studio,.booking-issue,.time-panel,.profile-hero,.agreement-paper{
    min-width:0!important;
  }
  .panel{padding:18px!important}
  .panel-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important;text-align:left!important}
  .panel-head>div{min-width:0!important}
  .panel h2,.section-title h2{font-size:20px!important;line-height:1.3!important;text-align:left!important}
  .panel h3{font-size:16px!important;text-align:left!important}
  .panel p,.card-meta,.subtle{text-align:left!important}
  .person,.person>div{min-width:0!important}
  .person strong,.person span,.card-title,.card-meta{max-width:100%!important;text-align:left!important}
  .card-title{margin-top:12px!important}
  .tag-row{justify-content:flex-start!important;text-align:left!important}
  .badge{max-width:100%!important}

  /* Responsive grids only; internal card layout stays unchanged. */
  .grid.two,.grid.three,.grid.four,.form-grid,.policy-grid,.detail-layout,.invoice-addresses,.agreement-terms,
  .booking-grid,.split-grid,.profile-grid,.overview-grid{grid-template-columns:1fr!important}
  .metrics,.login-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .metric-card{min-height:118px!important;padding:16px!important}
  .metric-card strong{font-size:30px!important;margin:10px 0 4px!important}
  .card-grid{grid-template-columns:1fr!important;gap:12px!important}
  .market-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .market-card{padding:15px!important;min-height:150px!important}
  .market-card strong{font-size:17px!important;line-height:1.25!important;margin:12px 0 4px!important}
  .card-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  .card-kpis div{min-width:0!important}
  .card-kpis span,.card-kpis strong{overflow:hidden!important;text-overflow:ellipsis!important}
  .action-bar{justify-content:flex-start!important;flex-wrap:wrap!important}

  /* Forms keep the same field design. */
  .form{gap:12px!important}
  .field{min-width:0!important;text-align:left!important}
  .field label{text-align:left!important}
  .field input,.field select,.field textarea,.filter-select,.filter-input{width:100%!important;max-width:100%!important;min-width:0!important;font-size:14px!important}
  .field textarea{min-height:100px!important}
  .form>.btn,.form .btn.dark,.panel form>.btn{max-width:100%!important}
  input[type="file"]{max-width:100%!important;font-size:12px!important}
  input[type="file"]::file-selector-button{max-width:54vw!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}

  /* Filters retain desktop chip styling and simply wrap. */
  .filters,.v47-filterbar{gap:9px!important;align-items:flex-start!important}
  .filter-line{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:7px!important}
  .v47-filterbar{display:flex!important;flex-wrap:wrap!important;padding:12px!important}
  .v47-filterbar select{min-height:40px!important;max-width:100%!important}
  .v47-filterbar .result-count,.result-count{margin-left:0!important}
  .v47-market-filter-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important}

  /* Tables preserve columns and scroll horizontally inside their own container. */
  .table-wrap,.audit-table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}
  .table,.policy-table{min-width:700px!important;width:max-content!important;max-width:none!important}
  .table th,.table td,.policy-table th,.policy-table td{white-space:nowrap!important;padding:11px 12px!important;text-align:left!important}

  /* Same graph; responsive size only. */
  .chart-shell{padding:16px!important;overflow:hidden!important}
  .chart-svg{width:100%!important;height:230px!important;min-width:0!important}
  .chart-tooltip{max-width:min(220px,calc(100vw - 42px))!important;font-size:11px!important}
  .chart-head,.chart-toolbar{gap:9px!important;flex-wrap:wrap!important;align-items:flex-start!important}
  .chart-controls{justify-content:flex-start!important;flex-wrap:wrap!important}

  /* Full month calendar remains a 7-column calendar, not a redesigned card list. */
  .calendar-studio{padding:16px!important;overflow:hidden!important}
  .calendar-toolbar{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important}
  .calendar-toolbar>div{min-width:0!important}
  .v471-calendar-scroll{width:100%!important;overflow:visible!important}
  .v471-calendar-weekdays,.v471-calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;min-width:0!important;width:100%!important}
  .v471-calendar-weekdays span{font-size:9px!important;padding:8px 2px!important;text-align:center!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .v471-calendar-grid .calendar-date{min-height:70px!important;padding:7px 5px!important;text-align:left!important}
  .v471-calendar-grid .calendar-date .daynum{font-size:16px!important;line-height:20px!important}
  .v471-calendar-grid .calendar-date .occupancy{font-size:8px!important;line-height:11px!important;margin-top:4px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .v471-calendar-empty{min-height:70px!important}
  .calendar-legend{gap:8px!important;flex-wrap:wrap!important;font-size:9px!important}
  .booking-grid{gap:14px!important}
  .time-slots{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .time-slot{min-width:0!important}

  /* Chat keeps the desktop visual language. Only the two-column layout becomes one panel at a time. */
  .message-page{height:calc(100dvh - 150px)!important;min-height:560px!important;grid-template-columns:1fr!important;border-radius:12px!important}
  .message-page.chat-open .wa-sidebar{display:none!important}
  .message-page:not(.chat-open) .wa-chat{display:none!important}
  .wa-sidebar,.wa-chat{min-width:0!important;height:100%!important}
  .wa-sidebar-head{padding:13px!important;text-align:left!important}
  .wa-thread{grid-template-columns:42px minmax(0,1fr) 50px!important;gap:9px!important;padding:10px 12px!important;min-height:64px!important;text-align:left!important}
  .wa-thread>div,.wa-thread strong,.wa-thread span{min-width:0!important}
  .wa-thread strong,.wa-thread-preview{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .wa-thread-meta{width:50px!important;min-width:50px!important;text-align:right!important}
  .wa-chat-head{min-height:60px!important;height:auto!important;padding:8px 10px!important;gap:8px!important}
  .wa-chat-person{flex:1 1 auto!important;min-width:0!important}
  .wa-chat-person>div{min-width:0!important;text-align:left!important}
  .wa-chat-person strong,.wa-chat-person span{max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left!important}
  .wa-mobile-back{display:grid!important}
  .wa-message-scroll{padding:14px 11px 20px!important}
  .wa-bubble-wrap{max-width:88%!important}
  .wa-bubble{text-align:left!important;font-size:13.5px!important;line-height:1.45!important}
  .wa-composer-shell{padding:9px!important}
  .wa-composer{width:100%!important;min-width:0!important;gap:6px!important}
  .wa-composer textarea{font-size:14px!important;min-height:42px!important;max-height:120px!important}
  .wa-action-menu{max-width:min(240px,calc(100vw - 28px))!important}
  .wa-react-strip{max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch!important}
  .v451-chat-finder{position:static!important;width:100%!important;max-width:none!important;margin-top:7px!important}

  /* Credential Vault: same card design, clean single-column flow. */
  .credential-vault-grid,.vault-grid,.audit-kpis{grid-template-columns:1fr!important;gap:12px!important}
  .credential-card{padding:16px!important;text-align:left!important}
  .credential-card .cred-head,.credential-card .cred-person,.credential-card .cred-login,.credential-card .cred-actions{text-align:left!important}
  .credential-card .cred-head{align-items:flex-start!important}
  .credential-card .cred-title-wrap{min-width:0!important}
  .credential-card .cred-title-wrap strong,.credential-card .cred-title-wrap span{display:block!important;text-align:left!important}
  .credential-card .secret-line{min-width:0!important}
  .credential-card .secret-line>span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .credential-card .cred-actions{display:flex!important;justify-content:flex-start!important;gap:8px!important;flex-wrap:wrap!important}

  /* VA / workforce: preserve card internals; only wrap controls. */
  .v47-employment-head{align-items:flex-start!important;gap:10px!important;flex-wrap:wrap!important;text-align:left!important}
  .v47-employment-actions{display:flex!important;justify-content:flex-start!important;gap:8px!important;flex-wrap:wrap!important}
  .v47-meeting-row{grid-template-columns:70px minmax(0,1fr)!important;gap:10px!important;text-align:left!important}
  .v47-meeting-row>.btn{grid-column:1/-1!important;justify-self:start!important}

  /* Detail/agreement pages keep left alignment. */
  .agreement-paper{padding:18px!important;text-align:left!important}
  .agreement-header,.agreement-signatures,.detail-header,.profile-head{align-items:flex-start!important;gap:12px!important;flex-wrap:wrap!important;text-align:left!important}
  .info-row{gap:10px!important;align-items:flex-start!important}
  .info-row>span:last-child{text-align:right!important;overflow-wrap:anywhere!important}

  /* Modals become viewport-safe without changing their visual language. */
  .crop-modal,.v47-modal,.wa-modal{padding:12px!important}
  .crop-card,.v47-modal-card,.wa-dialog{width:min(100%,560px)!important;max-width:100%!important;max-height:90dvh!important;overflow:auto!important}
  .crop-stage{height:min(64vw,300px)!important}
  .crop-circle{width:min(66vw,260px)!important;height:min(66vw,260px)!important}
  .crop-controls{grid-template-columns:1fr!important}

  /* Login keeps desktop brand; only stacks the two-column layout. */
  .login-shell{display:block!important;min-height:100dvh!important}
  .login-visual{display:none!important}
  .login-panel{min-height:100dvh!important;padding:24px 16px calc(28px + env(safe-area-inset-bottom,0px))!important;align-items:flex-start!important;background:#fff!important}
  .login-box{width:100%!important;max-width:520px!important;margin:0 auto!important;padding-top:22px!important;text-align:left!important}
  .login-box h2,.login-box p{text-align:left!important}
  .login-tabs{width:100%!important}
}

@media (max-width:620px){
  .main{padding-inline:12px!important}
  .metrics,.login-analytics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .metric-card{min-height:108px!important;padding:13px!important}
  .metric-card strong{font-size:25px!important}
  .market-grid{grid-template-columns:1fr!important}
  .market-card{min-height:0!important}
  .card-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .header-actions{width:100%!important}
  .header-actions .btn{flex:1 1 150px!important}
  .v47-market-filter-actions{width:100%!important}
  .v47-market-filter-actions .chip{flex:1 1 130px!important;justify-content:center!important}
  .chart-svg{height:210px!important}
  .v471-calendar-grid .calendar-date{min-height:62px!important;padding:6px 4px!important}
  .v471-calendar-grid .calendar-date .daynum{font-size:15px!important}
  .v471-calendar-grid .calendar-date .occupancy{font-size:7.5px!important;line-height:10px!important}
  .v471-calendar-weekdays span{font-size:8px!important}
  .time-slots{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wa-bubble-wrap{max-width:91%!important}
}

@media (max-width:390px){
  .metrics,.login-analytics-grid{grid-template-columns:1fr 1fr!important}
  .metric-card{padding:12px!important}
  .card-kpis{gap:4px!important}
  .card-kpis div{padding:7px 5px!important}
  .card-kpis span{font-size:7px!important}
  .card-kpis strong{font-size:10px!important}
  .v471-calendar-grid .calendar-date{min-height:58px!important;padding:5px 3px!important}
  .v471-calendar-grid .calendar-date .daynum{font-size:14px!important;line-height:18px!important}
  .v471-calendar-grid .calendar-date .occupancy{font-size:7px!important}
}

@media (prefers-reduced-motion:reduce) and (max-width:880px){
  .sidebar{transition:none!important}
}

@media (max-width:880px){
  .sidebar .nav::-webkit-scrollbar{width:4px}
  .sidebar .nav::-webkit-scrollbar-thumb{background:#31506f;border-radius:999px}
  .sidebar .brand{flex:0 0 auto!important}
  .chart-canvas{touch-action:pan-y!important;-webkit-user-select:none!important;user-select:none!important}
  .chart-hit{pointer-events:all!important}
}