:root{
  --mobile-nav-height:72px;
  --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --mobile-safe-top:env(safe-area-inset-top,0px);
}

.mobile-tab-bar,.mobile-sheet-backdrop,.mobile-sheet,.mobile-install-button,.network-status,.mobile-filter-toggle{display:none}

@media(max-width:820px){
  html{background:#edf6f4;overscroll-behavior-y:none}
  body{
    min-height:100dvh;
    background:#edf6f4;
    -webkit-tap-highlight-color:transparent;
    text-rendering:optimizeLegibility;
  }
  button,a,input,select,textarea{touch-action:manipulation}
  input,select,textarea{font-size:16px!important}
  .app{display:block;min-height:100dvh}
  .app:not(.hidden) .sidebar{display:none!important}
  .main{
    display:block;
    width:100%;
    margin:0!important;
    padding:calc(10px + var(--mobile-safe-top)) 10px calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 28px)!important;
    min-height:100dvh;
  }
  .topbar{
    position:sticky;
    top:0;
    z-index:25;
    min-height:58px;
    margin:0 -10px 10px;
    padding:9px 12px 10px;
    align-items:center;
    gap:10px;
    background:rgba(237,246,244,.94);
    border-bottom:1px solid rgba(164,193,188,.36);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .topbar h1{font-size:20px;line-height:1.15;letter-spacing:-.35px}
  .topbar p{display:none}
  .header-actions{display:flex;flex-direction:row;align-items:center}
  .header-actions #exportBtn{display:none!important}
  .header-actions #addLeadBtn{
    position:fixed;
    right:16px;
    bottom:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 16px);
    z-index:34;
    width:56px;
    height:56px;
    min-height:56px;
    padding:0;
    overflow:hidden;
    border-radius:18px;
    color:transparent;
    font-size:0;
    box-shadow:0 14px 30px rgba(15,118,110,.35);
  }
  .header-actions #addLeadBtn::after{
    content:"+";
    color:#fff;
    font-size:30px;
    font-weight:500;
    line-height:1;
  }
  .view{animation:mobile-view-in .18s ease-out}
  @keyframes mobile-view-in{from{opacity:.45;transform:translateY(4px)}to{opacity:1;transform:none}}

  .mobile-tab-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    min-height:calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
    padding:5px 7px calc(5px + var(--mobile-safe-bottom));
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    gap:2px;
    background:rgba(255,255,255,.96);
    border-top:1px solid #d7e5e2;
    box-shadow:0 -10px 30px rgba(22,62,62,.10);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .mobile-tab{
    position:relative;
    min-width:0;
    min-height:60px;
    padding:5px 2px 3px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border:0;
    border-radius:14px;
    background:transparent;
    color:#657b7d;
    font-weight:780;
  }
  .mobile-tab-icon{height:25px;font-size:21px;line-height:25px;font-weight:850}
  .mobile-tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1}
  .mobile-tab.active{color:#0f766e;background:#e5f6f2}
  .mobile-tab.active::before{
    content:"";
    position:absolute;
    top:3px;
    left:32%;
    right:32%;
    height:3px;
    border-radius:3px;
    background:#0f766e;
  }
  .mobile-tab .nav-badge{top:4px;right:18%;min-width:17px;height:17px;font-size:9px;line-height:17px}

  .mobile-sheet-backdrop{
    position:fixed;
    inset:0;
    z-index:79;
    background:rgba(3,22,24,.45);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s;
  }
  .mobile-sheet{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:80;
    max-height:min(82dvh,680px);
    padding:8px 14px calc(18px + var(--mobile-safe-bottom));
    display:block;
    overflow:auto;
    border-radius:26px 26px 0 0;
    background:#fff;
    box-shadow:0 -24px 60px rgba(8,40,42,.24);
    transform:translateY(105%);
    transition:transform .24s cubic-bezier(.22,.85,.25,1);
  }
  body.mobile-sheet-open{overflow:hidden}
  body.mobile-sheet-open .mobile-sheet-backdrop{display:block;opacity:1;pointer-events:auto}
  body.mobile-sheet-open .mobile-sheet{transform:none}
  .mobile-sheet-handle{width:44px;height:5px;margin:2px auto 14px;border-radius:8px;background:#d7e3e1}
  .mobile-sheet-header{display:grid;grid-template-columns:48px 1fr 44px;gap:11px;align-items:center;margin-bottom:14px}
  .mobile-sheet-avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#dff4ef;color:#0f766e;font-size:20px;font-weight:900}
  .mobile-sheet-header b{display:block;font-size:16px}
  .mobile-sheet-header span{display:block;margin-top:2px;color:#6a8082;font-size:12px}
  .mobile-sheet-close{width:44px;height:44px;border:0;border-radius:50%;background:#edf3f2;color:#284a4c;font-size:22px}
  .mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .mobile-menu-item{
    min-height:70px;
    padding:11px;
    display:grid;
    grid-template-columns:38px 1fr;
    gap:9px;
    align-items:center;
    text-align:left;
    border:1px solid #dce9e7;
    border-radius:17px;
    background:#f9fbfb;
    color:#183a3c;
  }
  .mobile-menu-item.active{border-color:#79c9bb;background:#ebf8f5;color:#0f6b64}
  .mobile-menu-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#e8f2f0;font-size:19px}
  .mobile-menu-copy b{font-size:13px}.mobile-menu-copy small{display:block;margin-top:3px;color:#718486;font-size:10px;line-height:1.2}
  .mobile-install-card{
    margin-top:12px;
    padding:13px;
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:10px;
    align-items:center;
    border:1px solid #bde2da;
    border-radius:18px;
    background:linear-gradient(135deg,#eaf9f5,#f7fffd);
  }
  .mobile-install-card .mobile-menu-icon{background:#0f766e;color:#fff}
  .mobile-install-card b{display:block;font-size:13px}.mobile-install-card small{display:block;color:#60787a;font-size:10px;line-height:1.25}
  .mobile-install-card button{min-height:42px;padding:8px 12px;border:0;border-radius:12px;background:#0f766e;color:#fff;font-size:12px;font-weight:800}
  .mobile-install-help{display:none;margin:9px 0 0;padding:11px;border-radius:13px;background:#fff8e7;color:#785511;font-size:12px;line-height:1.5}
  .mobile-install-help.show{display:block}
  .mobile-sheet-profile,.mobile-sheet-logout{width:100%;min-height:48px;margin-top:12px;border:0;border-radius:14px;font-weight:850}
  .mobile-sheet-profile{background:#eef7f6;color:#0f766e}
  .mobile-sheet-logout{background:#fff0f0;color:#b23636}

  .network-status{
    position:fixed;
    top:calc(8px + var(--mobile-safe-top));
    left:50%;
    z-index:110;
    padding:7px 12px;
    display:block;
    border-radius:999px;
    background:#a83232;
    color:#fff;
    font-size:11px;
    font-weight:800;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,-18px);
    transition:.2s;
  }
  .network-status.show{opacity:1;transform:translate(-50%,0)}

  #leadsView{display:flex;flex-direction:column}
  #leadsView.hidden{display:none}
  #leadsView>.dashboard-filter{order:1}
  #leadsView>#statCards{order:2}
  #leadsView>.panel:not(#agentPerformance){order:3}
  #leadsView>#agentPerformance{order:4}
  .dashboard-filter{display:none!important}
  .stats-grid{
    display:flex;
    gap:9px;
    margin:0 -10px 12px;
    padding:0 10px 4px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .stats-grid::-webkit-scrollbar{display:none}
  .stat-card{min-width:138px;padding:13px 14px;scroll-snap-align:start;border-radius:17px}
  .stat-card b{font-size:22px}.stat-card span{font-size:9px}
  .panel{margin:0 0 12px;padding:13px;border-radius:18px;box-shadow:0 7px 20px rgba(16,62,61,.06)}
  .panel-head{gap:8px;margin-bottom:12px}
  .panel-head h3{font-size:17px;line-height:1.2}.panel-head p{font-size:11px;line-height:1.35}
  .panel-head>.btn{min-width:44px;min-height:44px;padding:9px}
  .mobile-filter-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px}
  .filter-grid{grid-template-columns:1fr 1fr!important;gap:7px;padding:8px;border-radius:14px}
  .filter-grid>*{min-width:0;width:100%}
  .filter-grid #searchInput{grid-column:1/-1}
  .filter-grid.filters-collapsed>:not(#searchInput){display:none}
  .pipeline-stages{gap:8px;margin:0 -1px 4px;padding:1px 1px 11px}
  .stage-card{min-width:112px;padding:10px}.stage-card b{font-size:21px}

  .table-wrap{overflow:visible}
  table.mobile-card-table{
    display:block;
    width:100%;
    min-width:0!important;
    border-collapse:separate;
  }
  table.mobile-card-table thead{display:none}
  table.mobile-card-table tbody{display:grid;gap:10px}
  table.mobile-card-table tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 10px;
    width:100%;
    padding:12px;
    overflow:hidden;
    border:1px solid #dce9e7;
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 18px rgba(15,58,61,.05);
  }
  table.mobile-card-table td{
    min-width:0;
    padding:8px 2px;
    border:0;
    overflow-wrap:anywhere;
    font-size:12px;
  }
  table.mobile-card-table td::before{
    content:attr(data-mobile-label);
    display:block;
    margin-bottom:4px;
    color:#718486;
    font-size:9px;
    font-weight:800;
    letter-spacing:.55px;
    text-transform:uppercase;
  }
  table.mobile-card-table td:first-child{
    grid-column:1/-1;
    padding-top:2px;
    padding-bottom:10px;
    border-bottom:1px solid #edf3f2;
  }
  table.mobile-card-table td:first-child::before{display:none}
  table.mobile-card-table td[colspan]{grid-column:1/-1}
  table.mobile-card-table td[data-mobile-label="Quick stage"],
  table.mobile-card-table td[data-mobile-label="Action"],
  table.mobile-card-table td[data-mobile-label="Correction"],
  table.mobile-card-table td[data-mobile-label="Recording"]{grid-column:1/-1}
  .lead-table tr{border-left:4px solid #17a38a!important}
  .lead-table .lead-name{font-size:16px}
  .quick-stage{width:100%;min-width:0;min-height:48px;padding:10px 38px 10px 12px;font-size:15px!important}

  .card-grid{grid-template-columns:1fr;gap:10px}
  .info-card{padding:14px;border-radius:17px}
  .form-grid.two{grid-template-columns:1fr;gap:11px}
  .form-grid .full{grid-column:auto}
  label{font-size:13px}
  input,select,textarea{min-height:48px;border-radius:13px}
  .btn{min-height:46px;border-radius:13px}

  .drawer{
    inset:0;
    width:100%;
    border-radius:0;
    padding-top:var(--mobile-safe-top);
  }
  .drawer-head{padding:13px 15px 10px}.drawer-head h2{font-size:20px}
  .lead-actions{padding:9px 14px;gap:7px}.lead-actions .btn{padding:10px 6px;font-size:12px}
  .tabs{padding:0 8px}.tab{min-height:46px;padding:12px 10px;font-size:12px}
  .drawer-body{padding:14px 14px calc(18px + var(--mobile-safe-bottom))}

  dialog{
    width:100vw;
    max-width:none;
    max-height:92dvh;
    margin:auto 0 0;
    border-radius:24px 24px 0 0;
  }
  dialog[open]{animation:mobile-dialog-in .2s ease-out}
  @keyframes mobile-dialog-in{from{transform:translateY(18px);opacity:.65}to{transform:none;opacity:1}}
  .modal-form{max-height:92dvh;padding:17px 15px calc(18px + var(--mobile-safe-bottom));overflow:auto}
  .modal-head{position:sticky;top:-17px;z-index:3;margin:-17px -15px 14px;padding:16px 15px 11px;background:rgba(255,255,255,.96);border-bottom:1px solid #edf2f1;backdrop-filter:blur(10px)}
  .modal-actions{position:sticky;bottom:calc(-18px - var(--mobile-safe-bottom));z-index:3;margin:16px -15px calc(-18px - var(--mobile-safe-bottom));padding:11px 15px calc(12px + var(--mobile-safe-bottom));background:#fff;border-top:1px solid #e4ecea}
  .modal-actions .btn{flex:1}

  .chat-shell{height:calc(100dvh - var(--mobile-nav-height) - var(--mobile-safe-bottom) - 84px);min-height:420px;border:0;border-radius:17px}
  .chat-head{padding-top:calc(9px + var(--mobile-safe-top))}
  .chat-messages{padding:13px 8px}.chat-bubble{max-width:90%;font-size:14px}
  .chat-composer{grid-template-columns:minmax(0,1fr) auto;padding:8px;gap:7px}.chat-composer textarea{min-height:48px}.chat-composer button{min-width:70px;padding:9px}

  .login-shell{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    position:relative;
    z-index:100;
    overflow:auto;
    touch-action:manipulation;
    padding:calc(24px + var(--mobile-safe-top)) 15px calc(24px + var(--mobile-safe-bottom));
    background:radial-gradient(circle at 50% 5%,rgba(45,212,191,.28),transparent 19rem),linear-gradient(160deg,#123f43,#061f22);
  }
  .login-brand{display:none}
  .login-card{width:100%;max-width:430px;margin:auto;padding:28px 20px 22px;border-radius:25px;pointer-events:auto}
  .login-card input,.login-card button{pointer-events:auto;touch-action:manipulation}
  .login-card::before{
    content:"D";
    width:62px;
    height:62px;
    margin:0 auto 16px;
    display:grid;
    place-items:center;
    border-radius:19px;
    background:linear-gradient(145deg,#14b8a6,#0f766e);
    color:#fff;
    font-size:32px;
    font-weight:900;
    box-shadow:0 12px 28px rgba(15,118,110,.28);
  }
  .login-card .eyebrow,.login-card h2{text-align:center;display:block}
  .login-card h2{margin:9px 0 20px;font-size:27px}
  .mobile-install-button{
    width:100%;
    min-height:46px;
    margin-top:10px;
    display:block;
    border:1px solid #b9dcd5;
    border-radius:13px;
    background:#effaf7;
    color:#0f6f68;
    font-weight:800;
  }

  .attendance-policy-grid{grid-template-columns:1fr}
  .accounts-filters,.attendance-filters{grid-template-columns:1fr!important}
  .invoice-action-bar{grid-template-columns:1fr 1fr}
  .toast{left:12px;right:12px;top:calc(12px + var(--mobile-safe-top));text-align:center}
}

@media(max-width:390px){
  .mobile-menu-grid{grid-template-columns:1fr}
  .mobile-tab-label{font-size:9px}
  .mobile-tab-icon{font-size:20px}
  table.mobile-card-table tr{grid-template-columns:1fr}
  table.mobile-card-table td,
  table.mobile-card-table td:first-child{grid-column:1/-1}
}

@media(display-mode:standalone){
  body{user-select:none;-webkit-user-select:none}
  input,textarea,[contenteditable="true"]{user-select:text;-webkit-user-select:text}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media(max-width:900px){
  .chat-conversation{min-height:0;overflow:hidden;grid-template-rows:auto minmax(0,1fr) auto auto}
  .chat-messages{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .chat-composer{grid-template-columns:minmax(0,1fr) auto auto}
  .chat-composer textarea{grid-column:1/-1}
  .chat-attachment-name{grid-column:1/-1}
}