/* R134.1: preserve the upstream ribbon, native toolbars and CAD commands.
 * Only small-screen spacing, overflow and DHWLABS colors are changed.
 * Existing R133 is copied intact, no JS code or DWG/PWA state touched.
 */
:root, html.dark, .ml-cad-viewer-container {
  --dhw-navy:#0b1b28;
  --dhw-cyan:#20b9d4;
  --ml-ui-accent:#20b9d4;
  --ml-ui-bg:#102330;
  --ml-ui-bg-fill:#1b303d;
  --ml-ui-border:#344f60;
  --el-color-primary:#20b9d4;
  --el-color-primary-dark-2:#1387a3;
}
.ml-cad-header,
.ml-cad-header .ml-ribbon,
.ml-cad-header .ml-ribbon__header {
  --ml-rb-header-start:#142938;
  --ml-rb-header-end:#0e202e;
  --ml-rb-bg:#132b39;
  --ml-rb-panel-bg:#152b39;
  --ml-rb-tab-text:#e8f4f8;
  --ml-rb-active:#2bc7dd;
  --ml-rb-active-bg:#203b4a;
  --ml-rb-hover-bg:#243d4b;
  --ml-rb-border:#36576a;
  --ml-rb-border-strong:#36576a;
}
.ml-cad-header,
.ml-cad-footer { background:#0e202e !important; border-color:#2b5166 !important; }
.ml-cad-footer .ml-status-bar { background:#0e202e !important; }
.ml-vertical-toolbar-host .ml-ex-ui-toolbar { background:#142938 !important; }
.ml-cad-header .ml-ribbon-tab.is-active { border-bottom-color:#20b9d4!important; color:#5addf1!important; }
.ml-cad-header .ml-ribbon__header { background:linear-gradient(180deg,#142938,#0e202e)!important; }

/* Phones: keep ONE native ribbon row, not an extra toolbar or a two-row header. */
@media (max-width:740px) {
  .ml-cad-header, .ml-cad-header .ml-ribbon {width:100%;max-width:100%;min-width:0;}
  .ml-cad-header .ml-ribbon__header {
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    justify-content:space-between;
    gap:3px !important;
    box-sizing:border-box;
    min-height:45px !important;
    height:45px !important;
    padding:0 5px !important;
    overflow:hidden !important;
  }
  .ml-cad-header .ml-ribbon__head-left {
    display:flex !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100%;
    align-items:center;
    gap:3px !important;
    overflow:hidden;
  }
  .ml-cad-header .ml-ribbon__head-left > :first-child {
    flex:0 0 auto;
    min-width:0;
  }
  /* Existing File / Home / Insert / Review / Measurement buttons stay native.
     Only THEIR container scrolls, not the canvas or floating CAD tools. */
  .ml-cad-header .ml-ribbon__head-left > .ml-ribbon-contextual-tabs {
    flex:1 1 auto !important;
    min-width:0 !important;
    width:0 !important;
    max-width:none;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
  }
  .ml-cad-header .ml-ribbon-contextual-tabs::-webkit-scrollbar {display:none;}
  .ml-cad-header .ml-ribbon-contextual-tabs .ml-ribbon-tabs,
  .ml-cad-header .ml-ribbon-contextual-tabs__ctx {
    display:inline-flex !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    min-width:max-content !important;
    gap:2px !important;
  }
  .ml-cad-header .ml-ribbon-tab {
    flex:0 0 auto !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    width:auto !important;
    min-width:max-content !important;
    max-width:none !important;
    font-size:13px !important;
    padding:0 10px !important;
    line-height:38px !important;
    height:40px !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  .ml-cad-header .ml-ribbon__control--minimize {
    flex:0 0 34px !important;
    min-width:34px !important;
    width:34px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 5px !important;
    margin:0 !important;
    border-radius:8px;
  }
  /* Native in-canvas Undo/Redo buttons are already available on phone.
     Remove ONLY their duplicated header copies, not the commands themselves. */
  .ml-cad-header .ml-ribbon__tabs-after .ml-ribbon-tabs-after {display:none !important;}
  .ml-cad-header .ml-ribbon__tabs-after:not(:has(img)) {display:none !important;}
  .ml-cad-header .ml-ribbon__tabs-after:has(img) {
    display:flex !important;
    flex:0 0 28px !important;
    min-width:28px !important;
    max-width:28px !important;
    overflow:hidden;
  }
  .ml-cad-header .ml-ribbon__tabs-after img {width:27px !important;height:27px !important;object-fit:contain;}
  .ml-cad-header .ml-ribbon__head-right {
    flex:0 0 94px !important;
    min-width:0 !important;
    width:94px !important;
    max-width:94px !important;
    display:flex !important;
    justify-content:flex-end;
    align-items:center;
    gap:0 !important;
    overflow:hidden;
  }
  .ml-cad-header .ml-ribbon__tabs-extra,
  .ml-cad-header .ml-ribbon-language-switch {max-width:94px;min-width:0 !important;gap:0 !important;}
  .ml-cad-header .ml-ribbon-language-switch__select {
    width:89px !important;
    min-width:0 !important;
    max-width:89px !important;
    font-size:12px;
  }
  /* File name is already available via the native File menu. Avoid titleEnglish overlap. */
  .ml-cad-header .ml-ribbon-file-name {display:none !important;}
  .ml-cad-header .ml-ribbon__panel:not(.ml-ribbon__panel--floating) {max-width:100%;}
  .ml-cad-header .ml-ribbon__header :is(button,[role=tab]) {touch-action:manipulation;}
  /* Existing status-bar horizontally scrolls; don't move or disable its native toggles. */
  .ml-cad-footer .ml-status-bar {max-width:100%;overflow-x:auto!important;scrollbar-width:none;}
  .ml-cad-footer .ml-status-bar::-webkit-scrollbar {display:none;}
  .ml-vertical-toolbar-host .ml-ex-ui-toolbar {max-height:min(68dvh,520px)!important;overflow-y:auto!important;}
}
@media (max-width:360px) {
  .ml-cad-header .ml-ribbon__header {padding:0 3px!important;gap:2px!important;}
  .ml-cad-header .ml-ribbon-tab {padding:0 9px!important;font-size:12.5px!important;}
  .ml-cad-header .ml-ribbon__head-right {flex-basis:82px!important;width:82px!important;max-width:82px!important;}
  .ml-cad-header .ml-ribbon-language-switch__select {width:78px!important;max-width:78px!important;}
}
/* Tablet: keep existing ribbon structure, only prevent tab labels from clipping. */
@media (min-width:741px) and (max-width:1023px) {
  .ml-cad-header .ml-ribbon__head-left {min-width:0;}
  .ml-cad-header .ml-ribbon-contextual-tabs {min-width:0;overflow-x:auto;scrollbar-width:none;}
  .ml-cad-header .ml-ribbon-contextual-tabs .ml-ribbon-tabs {width:max-content;white-space:nowrap;}
  .ml-cad-header .ml-ribbon-tab {white-space:nowrap;min-width:max-content;max-width:none;text-overflow:clip;}
  .ml-cad-header .ml-ribbon-file-name {display:none!important;}
}
/* Desktop layout and all CAD core interactions are untouched. */