/*
 * Money Culture CRM — Stage 8
 * Global Responsive & Consistency Safety Layer
 *
 * Purpose:
 * - establish predictable box sizing
 * - prevent horizontal overflow from common UI components
 * - improve tables/forms/buttons on small screens
 * - preserve existing page-specific functionality
 *
 * This file is deliberately conservative. It is not a page redesign.
 */

*,*::before,*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

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

img,svg,video,canvas{
  max-width:100%;
  height:auto;
}

iframe{
  max-width:100%;
  border:0;
}

/* Long text, IDs, email addresses and URLs should not break mobile layouts. */
h1,h2,h3,h4,h5,h6,
p,td,th,label,.text-break,.mc-text-break{
  overflow-wrap:anywhere;
}

/* Tables remain readable instead of forcing the entire viewport wider. */
table{
  max-width:100%;
}

.table-responsive,
.table-wrap,
.mc-table-wrap,
.ins-table-wrap,
.insurance-table-wrap,
.iv-table-wrap,
.investment-table-wrap,
.user-table-wrap,
.admin-table-wrap,
.settings-table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Forms should never force the viewport wider. */
input,select,textarea,button{
  max-width:100%;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea,
.form-control,
.form-select{
  min-width:0;
}

/* Prevent flex/grid children from creating accidental horizontal overflow. */
[class*="grid"],
[class*="row"],
.flex,
.d-flex{
  min-width:0;
}

[class*="grid"] > *,
[class*="row"] > *,
.flex > *,
.d-flex > *{
  min-width:0;
}

/* Safe defaults for common action groups. */
.btn-group,
.mc-btn-group,
.actions,
.header-actions,
.page-actions{
  min-width:0;
  max-width:100%;
}

/* Desktop remains unchanged; mobile receives the actual layout corrections. */
@media(max-width:900px){

  .page-container,
  .container,
  .mc-container{
    max-width:100%;
  }

  .page-header,
  .mc-page-header,
  .adm-header,
  .mc-header,
  .mcn-header,
  .reports-header,
  .ins-page-header,
  .insurance-page-header,
  .iv-page-header,
  .investment-page-header,
  .admin-page-header,
  .settings-page-header,
  .profile-page-header,
  .user-page-header{
    gap:14px;
  }

  /* Let action areas wrap instead of pushing the page horizontally. */
  .header-actions,
  .page-actions,
  .mc-header-actions,
  .adm-header-actions{
    flex-wrap:wrap;
  }

  /* Cards should occupy available width without fixed minimums. */
  .card,
  .mc-card,
  .adm-card,
  .edu-panel,
  .ins-card,
  .insurance-card,
  .iv-card,
  .investment-card{
    min-width:0;
  }
}

@media(max-width:600px){

  body{
    overflow-x:hidden;
  }

  /* Keep interactive controls finger-friendly without changing their meaning. */
  .btn,
  .mc-btn,
  button,
  input[type="submit"],
  input[type="button"]{
    min-height:40px;
  }

  /* Stack common action groups where their existing layout would wrap poorly. */
  .page-actions.mc-stack-mobile,
  .header-actions.mc-stack-mobile{
    flex-direction:column;
    align-items:stretch;
  }

  /* Avoid giant desktop heading scales on small devices. */
  h1{
    line-height:1.2;
  }

  /* Horizontal tab systems can scroll rather than break the viewport. */
  .tabs,
  .mc-tabs,
  .ws-tabs,
  .ins-tabs,
  .insurance-tabs,
  .iv-tabs,
  .investment-tabs{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  /* Kanban/pipeline workspaces are intentionally horizontal-scroll surfaces. */
  .mc-kanban-scroll,
  .kanban-scroll,
  .pipeline-scroll{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Prevent sticky action bars from exceeding the viewport. */
  .mc-form-sticky-bar,
  .sticky-actions{
    max-width:100vw;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}


/* Level 1 Global Shell — responsive navigation */
@media (max-width:900px){
  .sidebar-nav{overflow-y:auto;overflow-x:hidden}
  .sidebar{max-height:100dvh}
}
@media (max-width:640px){
  .sidebar-nav{height:calc(100dvh - 130px)}
  .sidebar-nav>a,.sidebar-group-toggle{min-height:44px}
}