/*! Budget Tracker – Mobile Layer (CSS-first, @media max-width 768px) */

.mobile-desktop-hint {
  display: none;
}

@media (max-width: 768px) {

  .mobile-desktop-hint {
    display: block;
  }


  /* -------------------------------------------------------------------------
     Container & Layout
     ------------------------------------------------------------------------- */
  .container {
    width: 100% !important;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  #content {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  #content > .container {
    overflow-x: visible;
  }

  /* Grid: single column */
  [class*="col-md-"],
  [class*="col-sm-"],
  [class*="col-lg-"],
  [class*="col-xs-"] {
    width: 100%;
    float: none;
    max-width: 100%;
  }

  .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  /* Utility horizontal margins on now-full-width columns can push the block
     past the viewport edge and create a small horizontal page scroll. */
  [class*="col-"].ml5,
  [class*="col-"].ml10,
  [class*="col-"].ml15,
  [class*="col-"].ml20 {
    margin-left: 0 !important;
  }

  [class*="col-"].mr5,
  [class*="col-"].mr10,
  [class*="col-"].mr15,
  [class*="col-"].mr20 {
    margin-right: 0 !important;
  }

  h1 {
    font-size: 22px;
    margin: 10px 0 16px;
    word-break: break-word;
  }

  /* -------------------------------------------------------------------------
     Forms
     ------------------------------------------------------------------------- */
  input,
  select,
  textarea,
  .form-control {
    font-size: 16px !important;
    max-width: 100%;
  }

  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="month"],
  input[type="date"],
  select,
  textarea,
  .form-control {
    width: 100% !important;
    box-sizing: border-box;
  }

  .form-horizontal .control-label,
  .form-horizontal .col-sm-2,
  .form-horizontal .col-sm-3,
  .form-horizontal .col-sm-4,
  .form-horizontal .col-sm-5,
  .form-horizontal .col-sm-6,
  .form-horizontal .col-sm-7,
  .form-horizontal .col-sm-8,
  .form-horizontal .col-sm-9,
  .form-horizontal .col-sm-10,
  .form-horizontal .col-sm-11,
  .form-horizontal .col-sm-12,
  .form-horizontal .col-md-2,
  .form-horizontal .col-md-3,
  .form-horizontal .col-md-4,
  .form-horizontal .col-md-5,
  .form-horizontal .col-md-6,
  .form-horizontal .col-md-7,
  .form-horizontal .col-md-8,
  .form-horizontal .col-md-9,
  .form-horizontal .col-md-10,
  .form-horizontal .col-md-11,
  .form-horizontal .col-md-12 {
    width: 100%;
    float: none;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }

  .form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
  }

  .chosen-container,
  .chosen-container-single,
  .multiple-select-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .btn,
  .btn-sm,
  input[type="submit"],
  input[type="button"],
  button {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .btn-xs {
    min-height: 36px;
  }

  /* -------------------------------------------------------------------------
     Login / Auth – zusätzlich unter schmalem Viewport
     ------------------------------------------------------------------------- */
  body.auth-page:not(.desktop-forced) #content {
    min-height: 100dvh;
    padding: 12px 12px 24px;
    align-items: stretch;
  }

  body.auth-page:not(.desktop-forced) #content > .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.auth-page:not(.desktop-forced) .login {
    width: 100%;
    max-width: none;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
  }

  body.auth-page:not(.desktop-forced) .login .panel-heading {
    font-size: 22px;
    padding: 20px 16px;
    font-weight: 600;
  }

  body.auth-page:not(.desktop-forced) .login .panel-body {
    padding: 24px 20px 28px;
  }

  body.auth-page:not(.desktop-forced) .login .form-group {
    margin-bottom: 20px;
  }

  body.auth-page:not(.desktop-forced) .login .form-group label {
    font-size: 16px;
    margin-bottom: 8px;
  }

  body.auth-page:not(.desktop-forced) .login .form-control {
    font-size: 18px !important;
    padding: 14px 16px;
    min-height: 52px;
    border-radius: 8px;
  }

  body.auth-page:not(.desktop-forced) .login .btn-block {
    min-height: 56px;
    font-size: 18px;
    font-weight: 600;
    margin-top: 8px;
    border-radius: 8px;
  }

  body.auth-page:not(.desktop-forced) .login-forgot-link {
    font-size: 16px;
    padding: 12px 0;
  }

  /* Legacy table login fallback */
  .login table,
  .login tbody,
  .login tr,
  .login td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .login td {
    padding: 4px 0;
  }

  .login label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
  }

  .login input[type="text"],
  .login input[type="password"],
  .login input[type="email"] {
    margin-bottom: 8px;
  }

  .login input[type="submit"] {
    width: 100%;
    margin-top: 8px;
  }

  /* -------------------------------------------------------------------------
     Modals
     ------------------------------------------------------------------------- */
  .modal-dialog {
    width: auto !important;
    max-width: calc(100vw - 20px);
    margin: 10px;
  }

  .modal-body {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* -------------------------------------------------------------------------
     Tables
     ------------------------------------------------------------------------- */
  .table-scroll-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }

  .table-scroll-wrap > table {
    margin-bottom: 0;
  }

  table.fixedheader > thead > tr > th {
    position: static !important;
  }

  table.fixedheader th[scope="row"] {
    position: static !important;
  }

  /* Session / activity tables – larger touch targets */
  .table_sessions td,
  .table_sessions th {
    padding: 8px 6px;
  }

  /* -------------------------------------------------------------------------
     Navbar – fullscreen hamburger drawer
     ------------------------------------------------------------------------- */
  .navbar > .container {
    width: 100% !important;
  }

  .navbar-header {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .navbar-brand {
    flex: 0 0 auto;
  }

  .navbar-search-toggle {
    margin-left: auto;
    margin-right: 8px;
  }

  .navbar-toggle {
    display: block;
    margin-right: 0;
    margin-left: 8px;
    order: 3;
  }

  .navbar-collapse {
    border-top: none;
  }

  .navbar-collapse.in,
  .navbar-collapse.collapsing {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: #222;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 60px 16px 24px;
    margin: 0;
    display: block !important;
    height: 100% !important;
    max-height: none !important;
  }

  .navbar-collapse.in .navbar-nav,
  .navbar-collapse.collapsing .navbar-nav {
    float: none;
    margin: 0;
  }

  .navbar-collapse.in .navbar-nav > li,
  .navbar-collapse.collapsing .navbar-nav > li {
    float: none;
    border-bottom: 1px solid #333;
  }

  .navbar-collapse.in .navbar-nav > li > a,
  .navbar-collapse.collapsing .navbar-nav > li > a {
    padding: 14px 8px;
    font-size: 16px;
  }

  .navbar-collapse.in .dropdown-menu,
  .navbar-collapse.collapsing .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    background: #2a2a2a;
    border: none;
    box-shadow: none;
    display: block;
  }

  .navbar-collapse.in .dropdown-menu > li > a,
  .navbar-collapse.collapsing .dropdown-menu > li > a {
    padding: 12px 16px;
    color: #ccc;
    white-space: normal;
  }

  .navbar-collapse.in .dropdown-menu > li > a:hover,
  .navbar-collapse.collapsing .dropdown-menu > li > a:hover {
    background: #333;
    color: #fff;
  }

  /* Category separators (e.g. <li><b>Budgets</b></li>) are dark-on-dark in the
     dark mobile drawer. Render them as legible brand-colored section headers. */
  .navbar-collapse.in .dropdown-menu > li > b,
  .navbar-collapse.collapsing .dropdown-menu > li > b {
    display: block;
    padding: 12px 16px 4px;
    color: #00B3C7;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .navbar-collapse.in .navbar-nav.navbar-right,
  .navbar-collapse.collapsing .navbar-nav.navbar-right {
    margin-top: 16px;
    border-top: 2px solid #444;
    padding-top: 8px;
  }

  .navbar-mobile-close {
    display: block;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1060;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    padding: 8px 12px;
    cursor: pointer;
  }

  /* Subnavbar */
  #subnavbar {
    padding: 8px 0;
  }

  #subnavbar .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Global search */
  .global-search-container {
    width: calc(100vw - 24px) !important;
    max-width: none;
    left: 12px !important;
    right: 12px;
  }

  .global-search-results {
    max-height: 50vh;
  }

  /* -------------------------------------------------------------------------
     Active session box
     ------------------------------------------------------------------------- */
  #active_box {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    z-index: 1030;
  }

  #active_box.collapsed {
    transform: translateY(calc(80% + env(safe-area-inset-bottom, 0px)));
  }

  /* -------------------------------------------------------------------------
     Panels & tabs
     ------------------------------------------------------------------------- */
  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-bottom: 1px solid #ddd;
  }

  .nav-tabs > li {
    float: none;
    display: inline-block;
  }

  .nav-tabs > li > a {
    padding: 10px 14px;
  }

  .td-edit-form .form-actions {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin: 20px -16px -16px -16px;
  }

  .td-edit-form .form-actions .actions-left,
  .td-edit-form .form-actions .actions-right {
    width: 100%;
    justify-content: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .td-edit-form .form-actions .btn {
    width: 100%;
    flex: none;
  }

  /* Sticky save bar (task edit – Phase 2) */
  .mobile-sticky-save {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1025;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 8px;
  }

  .mobile-sticky-save .btn {
    flex: 1;
    margin: 0;
  }

  body.has-mobile-sticky-save #content {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  /* Dashboard user select */
  .mobile-user-select-wrap {
    width: 100% !important;
    float: none !important;
    margin: 8px 0 !important;
  }

  .mobile-user-select-wrap select,
  .mobile-user-select-wrap .chosen-container {
    width: 100% !important;
  }

  /* Controlling / analyse desktop hint */
  .mobile-desktop-hint {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.4;
  }

  .mobile-desktop-hint .fa {
    margin-right: 6px;
    color: #856404;
  }

  /* Text alignment helpers on mobile */
  .text-right .btn,
  .text-right a.btn {
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }

  .pull-right.block,
  .pull-right.inline-block {
    float: none !important;
    display: block !important;
    width: 100%;
    margin: 8px 0 !important;
  }

  /* Controlling filter tables etc. */
  #content table.pull-left,
  #content table[style*="width:"] {
    width: 100% !important;
    max-width: 100%;
    float: none !important;
    margin-right: 0 !important;
  }

  /* Capacity planning: don't force nested layout tables to scroll separately */
  .capacity-overview-table td table,
  .table-excel td table,
  .raci_table table {
    min-width: 0;
  }

  /* -------------------------------------------------------------------------
     Capacity Planning – excel grid needs horizontal scroll, NOT column stacking.
     Global col-* { width:100% } breaks the 12-month sticky nav (col-xs-1)
     into a vertical list that fills the entire screen.
     ------------------------------------------------------------------------- */
  .capacity-planning-page .capacity-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Restore Bootstrap column widths inside capacity planning */
  .capacity-planning-page [class*="col-xs-1"] {
    width: 8.33333333%;
    float: left;
  }

  .capacity-planning-page [class*="col-xs-12"] {
    width: 100%;
    float: left;
  }

  .capacity-planning-page [class*="col-md-1"] {
    width: 8.33333333%;
    float: left;
  }

  .capacity-planning-page [class*="col-md-2"] {
    width: 16.66666667%;
    float: left;
  }

  .capacity-planning-page [class*="col-md-3"] {
    width: 25%;
    float: left;
  }

  .capacity-planning-page [class*="col-md-4"] {
    width: 33.33333333%;
    float: left;
  }

  .capacity-planning-page [class*="col-md-8"] {
    width: 66.66666667%;
    float: left;
  }

  .capacity-planning-page [class*="col-md-9"] {
    width: 75%;
    float: left;
  }

  .capacity-planning-page [class*="col-md-12"] {
    width: 100%;
    float: left;
  }

  .capacity-planning-page .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .capacity-planning-page .row:before,
  .capacity-planning-page .row:after {
    content: " ";
    display: table;
  }

  .capacity-planning-page .row:after {
    clear: both;
  }

  /* User stats row: name full width, metrics in two columns */
  .capacity-planning-page .sticky_navigation .row.mt10.mb10 > [class*="col-md-2"] {
    width: 50%;
    float: left;
    margin-bottom: 8px;
  }

  .capacity-planning-page .sticky_navigation .row.mt10.mb10 > [class*="col-md-2"]:first-child {
    width: 100%;
    float: none;
  }

  /* Month summary + month links: scroll horizontally instead of stacking */
  .capacity-planning-page .sticky_navigation .row.month-nav {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 4px;
  }

  .capacity-planning-page .sticky_navigation .row.month-nav:before,
  .capacity-planning-page .sticky_navigation .row.month-nav:after {
    display: none;
  }

  .capacity-planning-page .sticky_navigation .month-summary,
  .capacity-planning-page .sticky_navigation .month-link-container {
    display: inline-block;
    vertical-align: top;
    width: 56px !important;
    float: none !important;
    white-space: normal;
    box-sizing: border-box;
  }

  .capacity-planning-page table[style*="width:"] {
    width: auto !important;
  }

  #content .capacity-planning-page table[style*="width:"],
  #content .capacity-planning-page table.table-excel,
  #content .capacity-planning-page table.fixedheader,
  #content .capacity-planning-page .month-container table {
    width: auto !important;
    max-width: none;
    float: none !important;
  }
}

/* Hidden by default; shown via JS when nav open */
.navbar-mobile-close {
  display: none;
}

@media (max-width: 768px) {
  body.navbar-mobile-open .navbar-mobile-close {
    display: block;
  }
}

/* Desktop-forced: user opted out of mobile optimizations on small screen */
@media (max-width: 768px) {
  body.desktop-forced .navbar-collapse.in,
  body.desktop-forced .navbar-collapse.collapsing {
    position: static;
    height: auto !important;
    padding: 0;
    background: transparent;
  }

  body.desktop-forced .navbar-mobile-close {
    display: none !important;
  }

  body.desktop-forced .container {
    width: auto !important;
  }
}