/* =============================
   RESPONSIVE
============================= */
@media(max-width:1100px){
  .dashboard-grid{grid-template-columns:1fr 1fr}
  .dash-col-span-2{grid-column:span 2}
  .dash-col-span-3{grid-column:span 2}
}
@media(max-width:860px){
  .dashboard-grid{grid-template-columns:1fr}
  .dash-col-span-2,.dash-col-span-3{grid-column:span 1}
  .table-head,.case-row{grid-template-columns:1.5fr 1fr 0.8fr 0.7fr}
  .th:nth-child(3),.td:nth-child(3),.th:last-child,.td:last-child{display:none}
  .diary-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto}
  .diary-sidebar{max-height:200px}
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  :root{--sidebar-width:0px}
  .sidebar{position:fixed;top:0;bottom:0;left:-280px;width:280px;z-index:300;transition:left 0.3s ease;box-shadow:var(--shadow-lg)}
  /* On mobile, ignore the desktop "collapsed" icon-rail state entirely */
  body.sidebar-collapsed .sidebar{width:280px}
  body.sidebar-collapsed .sidebar-logo-text,
  body.sidebar-collapsed .sidebar-logo-icon,
  body.sidebar-collapsed .nav-section-label,
  body.sidebar-collapsed .nav-item .nav-label,
  body.sidebar-collapsed .nav-item .nav-badge,
  body.sidebar-collapsed .user-info,
  body.sidebar-collapsed .sidebar-user .settings-gear{display:revert}
  body.sidebar-collapsed .nav-item{justify-content:flex-start;padding:9px 12px}
  body.sidebar-collapsed .sidebar-logo{justify-content:flex-start}
  body.sidebar-collapsed .sidebar-user{justify-content:flex-start}
  body.sidebar-collapsed .sidebar-top{justify-content:flex-start}
  body.sidebar-collapsed #app-status-bar{left:0}
  body.sidebar-mobile-open .sidebar{left:0}
  #sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:250;opacity:0;pointer-events:none;transition:opacity 0.3s ease;backdrop-filter:blur(2px)}
  body.sidebar-mobile-open #sidebar-backdrop{opacity:1;pointer-events:all}
  .mobile-menu-btn{display:flex}
  .content-area{padding:14px}
  .auth-panel{padding:28px 22px}
  .stats-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .drawer{width:100vw}
  .table-head,.case-row{grid-template-columns:1.5fr 1fr 0.7fr}
  .th:nth-child(2),.td:nth-child(2){display:none}
  .chat-layout{height:calc(100vh - 180px);position:relative}
  .chat-bubble-row{max-width:88%}
  .chat-inbox-list{position:absolute;inset:0;width:100%;z-index:5;display:flex;flex-direction:column}
  .chat-inbox-list.hidden-mobile{display:none}
  .chat-window{display:none}
  .chat-window.active-mobile{display:flex}
  .chat-back-btn{display:flex!important}

  /* ===== Horizontal-overflow fixes (mobile only) ===== */
  /* Prevent any element from forcing the page wider than the viewport */
  body{overflow-x:hidden}
  .content-area{max-width:100vw;overflow-x:hidden}

  /* Search results dropdown: full width instead of a fixed min-width */
  .search-drop{min-width:0;width:100%;left:0;right:0}

  /* Notifications: fit within screen with side margins */
  .notification-stack{left:12px;right:12px;bottom:12px}
  .notification{min-width:0;max-width:none;width:100%}

  /* Quick-notes panel: fit within screen with side margins */
  #quick-notes-panel{left:12px;right:12px;width:auto;bottom:80px}

  /* Card/grid lists: allow single-column collapse below their min-width */
  #hearings-list,#employee-list,#files-grid,#view-reports > div[style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
  }

  /* Sticky notes: shrink to fit instead of overflowing the row */
  .sticky-note{min-width:0;max-width:none;flex:1 1 calc(50% - 5px)}
  .sticky-add{min-width:0;flex:1 1 calc(50% - 5px)}

  /* Case picker rows and chips wrap instead of pushing width */
  .case-picker-item{flex-wrap:wrap}
  .assigned-case-chip{white-space:normal}

  /* Diary toolbar: allow wrapping instead of horizontal scroll */
  .diary-toolbar{flex-wrap:wrap;row-gap:6px}

  /* Long table-ish content and wide inline elements shrink to container */
  .full-cal-grid,.full-cal-grid-header,.cal-grid{min-width:0}
  img,svg,video,canvas,iframe{max-width:100%}
  table{display:block;max-width:100%;overflow-x:auto}

  /* Modals/drawers never exceed the viewport width */
  .modal,.drawer{max-width:100vw}

  /* ===== Upper palette polish (mobile topbar) ===== */
  .topbar{
    padding:0 10px;
    gap:6px;
    height:60px;
    background:color-mix(in srgb, var(--bg-secondary) 92%, transparent);
    backdrop-filter:blur(10px) saturate(160%);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    border-bottom:1px solid var(--border);
    box-shadow:0 1px 0 rgba(0,0,0,0.03), 0 4px 16px -8px rgba(0,0,0,0.18);
    position:sticky;
    top:0;
    z-index:60;
  }
  /* Topbar left: hamburger + search — constrain search so actions always fit */
  .topbar-left{gap:6px;min-width:0;flex:1}
  .search-wrap{
    /* Key fix: don't let search grow infinitely — give it a capped flex share */
    flex:1 1 0;
    min-width:0;
    max-width:160px;
    padding:6px 10px;
    border-radius:10px;
    background:var(--bg-card);
    border-color:var(--border);
  }
  .search-wrap input{font-size:0.78rem;min-width:0}
  .search-wrap input::placeholder{font-size:0.75rem;letter-spacing:0}
  /* Actions: shrink icons slightly but keep them tappable */
  .topbar-actions{gap:5px;flex-shrink:0}
  .topbar-btn{
    width:36px;
    height:36px;
    font-size:0.88rem;
    flex-shrink:0;
    border-radius:10px;
    transition:transform 0.15s ease, background 0.15s ease;
  }
  .topbar-btn:active{transform:scale(0.92)}
  .mobile-menu-btn{
    width:36px;
    height:36px;
    border-radius:10px;
    flex-shrink:0;
  }
  /* Notification panel: full-width on mobile */
  #notif-panel{left:10px !important;right:10px !important;width:auto !important}

  /* Quick-add menu: full-width on mobile */
  #quick-add-menu{left:10px !important;right:10px !important;min-width:auto !important}

  /* Quick-add + button: same 36×36 as other topbar buttons, keeps accent */
  .quick-add-btn{
    width:36px !important;
    height:36px !important;
    border-radius:10px;
    flex-shrink:0;
  }

  /* "+ New Case" buttons inside content views: compact size, keep full text */
  .btn.admin-only-new-case{
    font-size:0.78rem !important;
    padding:7px 12px !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
  }
  .btn.admin-only-new-case::before{
    content:none !important;
  }
  /* Hide the search magnifier emoji on very small screens to reclaim ~20px */
  .search-wrap .search-icon{display:none}
  /* Hide print shortcut and command bar (keyboard-focused features) on mobile */
  #print-btn,#cmd-bar-btn{display:none}

  /* ===== Calendar mobile polish ===== */
  /* Month view: compact cells with dot indicators only */
  .full-cal-cell{min-height:44px;padding:4px 3px}
  .full-cal-date{font-size:0.7rem;width:20px;height:20px;margin-bottom:2px}
  .full-cal-day-name{padding:6px 2px;font-size:0.62rem;letter-spacing:0}
  .full-cal-header{padding:10px 12px}
  .full-cal-month{font-size:0.92rem}
  /* Hide text event pills on mobile — coloured dots handle the indication */
  .cal-event,.cal-event-more{display:none}
  /* Week view: compact headers */
  .week-day-label{font-size:0.58rem;letter-spacing:0}
  .week-day-num{font-size:0.78rem;width:24px;height:24px}
  .week-day-col{padding:6px 2px}
  .week-cal-header .week-cal-time-gutter{width:36px;min-width:36px}
  /* Agenda panel readable on mobile */
  .cal-agenda{border-radius:var(--radius-md)}
  .cal-agenda-item{padding:10px 12px;gap:8px}
  .cal-agenda-title{font-size:0.82rem}
  .cal-agenda-sub{font-size:0.72rem}

  /* ===== Sidebar drawer polish on mobile ===== */
  .sidebar{
    box-shadow:2px 0 32px rgba(0,0,0,0.22);
    border-right:none;
  }
  .sidebar-top{
    height:60px;
    display:flex;
    align-items:center;
    padding:0 16px;
    background:color-mix(in srgb, var(--bg-secondary) 95%, transparent);
  }
  .sidebar-logo{gap:10px}
  .sidebar-nav{padding:8px}
  .nav-item{border-radius:12px;padding:11px 12px;font-size:0.88rem}
  .nav-item .nav-icon{font-size:1.1rem}
  .content-area{padding:14px 14px 24px}
  .page-header{
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
    gap:8px;
  }
  .page-title{font-size:1.15rem;font-weight:800;letter-spacing:-0.01em}
  .page-subtitle{font-size:0.76rem}
  /* Buttons inside page headers stack more neatly on small screens */
  .page-header .btn{font-size:0.78rem;padding:7px 12px}

  /* Long unbroken strings (emails, IDs, URLs) wrap instead of overflowing */
  .info-value,.activity-text{
    word-break:break-word;
    overflow-wrap:anywhere;
  }
}