/* ============================================================
   DriverNotes — адаптивный ретрофит (BMLP-22).
   Грузится site-wide ПОСЛЕ style.css/dnx_chrome.css.
   Делает фикс-ширинную легаси-вёрстку текучей на мобильных,
   без переписывания шаблонов. Планшет: <=900, телефон: <=600.
   ============================================================ */

/* базовая гигиена — на любых узких экранах */
@media (max-width: 900px){
  html, body { max-width:100% !important; overflow-x:hidden !important; }
  img, table, iframe, video, object, embed, svg { max-width:100% !important; }
  img { height:auto; }

  /* === главные контейнеры -> текучие === */
  .footer, .new-footer, .new-footer.dnxf { min-width:0 !important; }
  .box { width:auto !important; max-width:100% !important; box-sizing:border-box !important; padding-left:14px !important; padding-right:14px !important; }
  .all .main:first-child { width:auto !important; max-width:100% !important; box-sizing:border-box !important; padding-left:12px !important; padding-right:12px !important; }
  .main, .footer .main { width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  .content, .whitebox, .whitebox-midd, .whitebox-bg, .main-holder, .holder, .pager { width:auto !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

  /* фикс-ширинные внутренние блоки -> 100% */
  .new-journal-btn, .create-journal, #boxTop, #boxMain, .text_info2,
  .journal .video, .journal .video .video-frame, .whitebox2 .video-frame { width:auto !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; }

  /* таблицы, которые верстают колонки — пусть текут */
  table[width], td[width], th[width] { width:auto !important; max-width:100% !important; }
}

/* === ШАПКА на планшете/телефоне — БЕЗОПАСНЫЙ МИНИМУМ ===
   Шапка гарантированно ВИДИМА (тёмный фон + лого). Сложное десктопное меню
   на мобилке временно скрыто (до бургера, Этап 2) — чтобы ничего не ломалось. */
/* на мобилке прячем ВСЮ кэш-шапку и показываем свою .dnx-mh с бургером */
@media (max-width: 900px){
  .header.inner-header { display:none !important; }
}
/* --- мобильная шапка + бургер (десктоп: скрыта) --- */
.dnx-mh{ display:none; }
@media (max-width: 900px){
  .dnx-mh{ display:flex !important; align-items:center; justify-content:space-between; background:#1f2b3a; padding:11px 16px; position:relative; z-index:1000; }
  .dnx-mh-logo img{ height:30px; width:auto; display:block; }
  .dnx-mh-cb{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
  .dnx-mh-b{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:38px; padding:8px 6px; cursor:pointer; box-sizing:border-box; }
  .dnx-mh-b span{ display:block; height:2.5px; background:#fff; border-radius:2px; transition:.22s; }
  .dnx-mh-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#1f2b3a; border-top:1px solid #34455c; box-shadow:0 18px 34px rgba(0,0,0,.34); }
  .dnx-mh-cb:checked ~ .dnx-mh-nav{ display:block; }
  .dnx-mh-nav a{ display:block; color:#fff !important; padding:14px 20px; font-size:16px; text-decoration:none !important; border-bottom:1px solid rgba(255,255,255,.07); }
  .dnx-mh-nav a:active, .dnx-mh-nav a:hover{ background:#2a3a50; }
  .dnx-mh-hr{ display:block; height:8px; }
  .dnx-mh-cta{ background:#efbf1e; color:#1f2b3a !important; margin:10px 16px !important; border-radius:10px; text-align:center; font-family:'RobotoM',Arial,sans-serif; border-bottom:0 !important; }
  .dnx-mh-cb:checked ~ .dnx-mh-b span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .dnx-mh-cb:checked ~ .dnx-mh-b span:nth-child(2){ opacity:0; }
  .dnx-mh-cb:checked ~ .dnx-mh-b span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}

/* === ТЕЛЕФОН === */
@media (max-width: 600px){
  body { font-size:13px; }
  h1, .whitebox h1 { font-size:22px !important; line-height:1.2 !important; }
  h2 { font-size:19px !important; }
  /* двухколоночные раскладки -> одна колонка */
  .sidebar, .sidebar.right, .right-sidebar, .left-sidebar { float:none !important; width:auto !important; max-width:100% !important; margin:16px 0 0 !important; }
  .content-left, .content-right, .col, .column { float:none !important; width:auto !important; max-width:100% !important; }
  /* DNX-футер: колонки в одну */
  .dnxf-cols { grid-template-columns:1fr !important; gap:22px !important; }
  .dnxf-bottom { flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }
  .dnxf-tags .row { gap:6px !important; }
  /* формы/инпуты — на всю ширину, удобные тапы */
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea { max-width:100% !important; box-sizing:border-box !important; }
  /* карточки списков (люди/авто/лента) */
  .user-item, .car-item, .post-item, .action-item { width:auto !important; max-width:100% !important; float:none !important; }
}
/* ============================================================
   BMLP-22 доп.блок: кабинетные страницы (гараж/машина/галерея).
   Легаси-скин .container/.inner/.sidebar/.main-frame имеет
   ФИКС-ширины (673/658/300/966px) — не текут, обрезаются
   body{overflow-x:hidden}. Делаем внутренний грид текучим.
   Только @media, десктоп не затрагиваем. Палитра не меняется.
   ============================================================ */
@media (max-width: 900px){
  /* контейнер: убрать десктопную min-height (пустая колонка на мобиле) */
  .container { min-height:0 !important; }

  /* центральная колонка и её обёртки -> в один поток, 100% */
  .inner, .inner-clearfix, .inner.inner-clearfix, .inner-border,
  .main-frame, .main-frame-wide,
  .garage-main .main-frame, .main-clearfix .main-frame {
    float:none !important; width:auto !important; max-width:100% !important;
    padding-left:0 !important; padding-right:0 !important;
    box-sizing:border-box !important;
  }

  /* правый сайдбар (меню владельца/реклама) -> под контент, на всю ширину */
  .sidebar, .sidebar.right, .right-owner-block, .fbkad, .holder {
    float:none !important; width:auto !important; max-width:100% !important;
    margin-left:auto !important; margin-right:auto !important;
    box-sizing:border-box !important;
  }

  /* большие фикс-разделители (966px и пр.) -> по ширине контейнера */
  .hr, .inner.inner-clearfix .hr { width:auto !important; max-width:100% !important; }

  /* галерея: контейнер 115% -> 100%, миниатюры текут и центрируются */
  ul.gallery-list { width:100% !important; box-sizing:border-box !important; text-align:center; }
  ul.gallery-list li { margin-right:14px !important; margin-left:14px !important; text-align:left; }

  /* профиль/список машин в гараже */
  .new-profile-info, .new-profile-m, .garage-new-top .new-profile-m,
  ul.my-cars-list, ul.left.my-cars-list {
    float:none !important; width:auto !important; max-width:100% !important;
    box-sizing:border-box !important;
  }
  .garage-new-top { height:auto !important; }
  .garage-new-top .new-profile-m { height:auto !important; }

  /* --- colorbox-попапы (добавить/редактировать фото) на мобиле ---
     JS уже ставит maxWidth:96%; тут делаем ВНУТРЕННОСТИ текучими,
     чтобы поля и кнопка «Загрузить» не уезжали за край. */
  #cboxLoadedContent { width:auto !important; box-sizing:border-box !important; }
  #cboxLoadedContent .wind_reg,
  #cboxLoadedContent form,
  #cboxLoadedContent table { width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  #cboxLoadedContent table td { word-break:break-word; }
  #cboxLoadedContent input[type="text"] { width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  #cboxLoadedContent input[type="file"] { max-width:100% !important; }
  /* кнопка сабмита: не прижимать к правому краю (уходила за экран) */
  #cboxLoadedContent .jq_button_submit.right,
  #cboxLoadedContent a.greenbut2-sm.right { float:none !important; display:inline-block !important; margin-top:8px !important; }

  /* графики (расход/статистика) — инлайн min-width:400px -> текучие */
  #container, #container_run, #chart_container, .fusioncharts-container {
    min-width:0 !important; max-width:100% !important;
  }
}


/* ===== BMLP-22: adaptive event popup (colorbox) v5 — CONCRETE vw width (no shrink-collapse) ===== */
@media (max-width: 900px){
  #colorbox{ width:96vw !important; left:2vw !important; right:auto !important; }
  #cboxWrapper{ width:auto !important; max-width:96vw !important; }
  #cboxContent{ width:auto !important; max-width:96vw !important; }
  #cboxLoadedContent{ width:88vw !important; max-width:88vw !important; max-height:80vh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; box-sizing:border-box; }
  #jq_auth_car_repair,#jq_edit_action_details,#action-create,#action-edit,
  #jq_auth_car_repair .popup-holder,#jq_edit_action_details .popup-holder{ width:100% !important; max-width:100% !important; box-sizing:border-box; }
  #jq_auth_car_repair .left,#jq_auth_car_repair .right,
  #jq_edit_action_details .left,#jq_edit_action_details .right,
  #jq_auth_car_repair .action-selector,#jq_auth_car_repair .action-selector-holder,#jq_auth_car_repair .bluebox,
  #jq_auth_car_repair .inp-area,#jq_edit_action_details .inp-area{ float:none !important; width:auto !important; max-width:100% !important; min-height:0 !important; box-sizing:border-box; }
  #jq_auth_car_repair .field-text,#jq_edit_action_details .field-text{ display:block !important; float:none !important; width:auto !important; margin:0 0 5px !important; }
  #jq_auth_car_repair .field-inp,#jq_auth_car_repair .field-inp .hldr,
  #jq_edit_action_details .field-inp,#jq_edit_action_details .field-inp .hldr{ display:block !important; float:none !important; width:auto !important; max-width:100% !important; margin-left:0 !important; box-sizing:border-box; }
  #jq_auth_car_repair input[type=text],#jq_auth_car_repair select,#jq_auth_car_repair textarea,
  #jq_edit_action_details input[type=text],#jq_edit_action_details select,#jq_edit_action_details textarea{ width:100% !important; max-width:100% !important; box-sizing:border-box; }
  #jq_auth_car_repair .r,#jq_auth_car_repair .r.tr,#jq_edit_action_details .r,#jq_edit_action_details .r.tr{ float:none !important; display:inline !important; }
  #jq_auth_car_repair h1,#jq_auth_car_repair h1 select{ max-width:100% !important; font-size:16px !important; }
  #greypopbox-nodes,#greypopbox-search,#greypopbox-menu,#greypopbox{ max-width:90vw !important; }
  /* v7: спрятать декоративную рамку colorbox (cboxTop/Bottom/Middle) — торчала белой полосой */
  #cboxTopLeft,#cboxTopCenter,#cboxTopRight,
  #cboxBottomLeft,#cboxBottomCenter,#cboxBottomRight,
  #cboxMiddleLeft,#cboxMiddleRight{ display:none !important; }
  #cboxContent{ float:none !important; }
  /* v6: убрать белую полосу сверху — helper-попапы вне потока + trim отступов */
  #jq_auth_car_repair .greypopbox{ position:absolute !important; }
  #jq_auth_car_repair .popup-holder{ padding-top:0 !important; margin-top:0 !important; }
  #jq_auth_car_repair h1{ margin:2px 0 6px !important; }
  #jq_auth_car_repair .avarage-kms{ margin:0 0 8px !important; }
  #jq_auth_car_repair #run_alert{ position:absolute !important; }
}