/**
 * Stilovi za $.fn.cmsProductConfigurator.sub.quartz
 * Izolovane cms-quartz-* klase (§2.2, §5) — ne oslanjaju se na prave
 * Bootstrap klase, rade identično bez obzira na učitanu Bootstrap verziju.
 */

/* ------------------------------------------------------------------
 * §2.2 — Fullscreen modal (BootstrapDialog, v3/v5 kompatibilno preko
 * descendant selektora nad istom .modal-dialog > .modal-content strukturi).
 * "Zamka": i BS3 i BS5 po default-u stavljaju max-height na .modal-body,
 * što seče flex-lanac visine — mora se eksplicitno resetovati kroz ceo
 * lanac modal-content -> modal-body -> wrapper.
 * ------------------------------------------------------------------ */
.cms-quartz-dialog-fullscreen {
    padding: 0 !important;
}

.cms-quartz-dialog-fullscreen .modal-dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    margin: 0;
}

.cms-quartz-dialog-fullscreen .modal-content {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cms-quartz-dialog-fullscreen .modal-header,
.cms-quartz-dialog-fullscreen .modal-footer {
    flex: 0 0 auto;
}

.cms-quartz-dialog-fullscreen .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow: hidden;
    padding: 0;
    display: flex;
}

/* BootstrapDialog ubacuje .bootstrap-dialog-body > .bootstrap-dialog-message
 * kao decu .modal-body pre nego što se message doda — bez eksplicitnog
 * flex/height i na njima, visina/širina se ne prenosi do našeg wrapper-a
 * (isti "zamka" problem iz §2.2, samo jedan nivo dublje). */
.cms-quartz-dialog-fullscreen .modal-body > .bootstrap-dialog-body,
.cms-quartz-dialog-fullscreen .bootstrap-dialog-message {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------
 * §5 — Layout: jedan red, dve kolone (leva fluid, desna fiksna 480px).
 * ------------------------------------------------------------------ */
.cms-quartz-body-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.cms-quartz-col-left {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    background: #f4f5f6;
}

.cms-quartz-col-right {
    flex: 0 0 480px;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    background: #ffffff;
    border-left: 1px solid #e0e0e2;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * Stage (crtež) + zoom/pan overlay (§5 — apsolutno pozicionirano preko
 * crteža, gornji-levi ugao, kompaktan "glass" izgled).
 * ------------------------------------------------------------------ */
.cms-quartz-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.cms-quartz-svg {
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
    touch-action: none;
    cursor: grab;
}

/* Katanac panela gasi pointer evente svom hit/drag elementu na crtežu; pan i
 * zoom ostaju. ZAMKA: .cms-quartz-edge-hit služi DVEMA akcijama — resize
 * (katanac panela 2) i klik-za-finishing (katanac panela 4). Otud :not()
 * izuzetak, da zaključane dimenzije ne blokiraju i dodavanje finiša. */
.cms-quartz-svg.cms-quartz-lock-dimensions .cms-quartz-edge-hit:not(.cms-quartz-edge-hit-finishing-pick) {
    pointer-events: none;
}

.cms-quartz-svg.cms-quartz-lock-layout .cms-quartz-cutline-hit {
    pointer-events: none;
}

.cms-quartz-svg.cms-quartz-lock-cutouts .cms-quartz-cutout {
    pointer-events: none;
}

.cms-quartz-svg.cms-quartz-lock-finishing .cms-quartz-finishing-marker {
    pointer-events: none;
}

.cms-quartz-svg.cms-quartz-panning {
    cursor: grabbing;
}

.cms-quartz-zoom-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.cms-quartz-zoom-controls button {
    border: none;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    padding: 0;
    width: 20px;
    height: 20px;
    font-weight: 900;
}

.cms-quartz-zoom-controls button:hover {
    background: #ffffff;
}

/* Plutajući toolbar za biranje strane/tipa finiša — isti "glass" jezik kao
 * zoom-controls, ali centriran preko vrha (zoom-controls su levo, pa se ne
 * poklapaju). */
.cms-quartz-finishing-picker {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 340px;
    padding: 10px 15px 15px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* zaglavlje razvučeno
 * preko cele širine oblačića, naslov levo / X skroz desno. */
.cms-quartz-finishing-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cms-quartz-finishing-picker-title {
    font-size: 14px;
    font-weight: 700;
    color: #33343a;
}

.cms-quartz-finishing-picker-close {
    width: 22px;
    height: 22px;
    line-height: 1;
    border: none;
    background: none;
    color: #77787e;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.cms-quartz-finishing-picker-close:hover {
    color: #33343a;
}

.cms-quartz-finishing-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cms-quartz-finishing-picker-axes {
    justify-content: center;
    align-items: flex-start;
    gap: 18px;
}

/* 3×3 mreža po osi: oznaka ose u sredini, dugme za svaku ivicu na strani
 * koja odgovara njenom STVARNOM položaju na ekranu (računa se geometrijski
 * u edgeScreenCompassSuffix, ne iz role-sufiksa). */
.cms-quartz-finishing-compass {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    align-items: center;
    justify-items: center;
    gap: 6px;
}

.cms-quartz-finishing-compass-label {
    grid-row: 2;
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: #73a732;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
}

/* "On" stanje: boju postavlja inline style iz JS-a (boja tog tipa finiša),
 * ovde samo deblji okvir da se uključeno jasno razlikuje od isključenog.
 * Dvoklasni selektor je OBAVEZAN — .cms-quartz-btn/-btn-sm koriste `border:`
 * skraćenicu koja resetuje border-width, i definisani su NIŽE u fajlu, pa bi
 * pri istoj specifičnosti pobedili. */
.cms-quartz-finishing-compass-btn.cms-quartz-finishing-compass-btn-on {
    border-width: 2px;
    font-weight: 700;
}

/* Dok je aktivan режим biranja strane, hover na ivicu daje jasno DRUGAČIJI
 * (žuti) fidbek od običnog resize hover-a (plavi, .cms-quartz-edge-hit) —
 * korisnik mora odmah da vidi da je u drugom režimu. */
.cms-quartz-svg-finishing-pick-mode .cms-quartz-edge-hit-finishing-pick:hover {
    stroke: rgba(232, 163, 61, 0.35);
}

/* .cms-quartz-edge-hit ima
 * cursor:move (za resize), ali dok je aktivan finishing-pick režim klik
 * DODAJE/UKLANJA finishing, ne resize-uje ništa — pointer je prikladniji
 * (element-level cursor pobeđuje nasleđeni crosshair sa .cms-quartz-svg-
 * finishing-pick-mode). */
.cms-quartz-edge-hit.cms-quartz-edge-hit-finishing-pick {
    cursor: pointer;
}

.cms-quartz-svg-finishing-pick-mode {
    cursor: crosshair;
}

/* Ne-blokirajući oblačić za validacione poruke, centriran pri DNU crteža —
 * zamena za toastr, koji je blokirao celu stranu. */
.cms-quartz-bubble {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) scale(0.92);
    z-index: 8;
    max-width: 70%;
    padding: 10px 16px;
    border-radius: 10px;
    background: #ffc358e6;
    color: #33343a;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.cms-quartz-bubble-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* §6.8/§6.11 dopunjeno — trajna (ne-nestajuća) crvena greška, npr. kad se
 * otvori preklapaju i Sačuvaj je blokiran, dok se yellow varijanta koristi
 * za prolazne validacione poruke. */
.cms-quartz-bubble-error {
    background: #e5484de6;
    color: #ffffff;
}

/* Pan "d-pad" — 3x3 grid, samo krstasti raspored popunjen. */
.cms-quartz-pan-pad {
    display: grid;
    grid-template-columns: repeat(3, 20px);
    grid-template-rows: repeat(3, 20px);
    gap: 0px;
}

.cms-quartz-pan-up     { grid-column: 2; grid-row: 1; }
.cms-quartz-pan-left   { grid-column: 1; grid-row: 2; }
.cms-quartz-pan-right  { grid-column: 3; grid-row: 2; }
.cms-quartz-pan-down   { grid-column: 2; grid-row: 3; }

/* Zoom klaster — odvojen vertikalnom linijom od pan d-pad-a. */
.cms-quartz-zoom-pad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 10px;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------------
 * §5 — Paneli (Layout / Toolbar / Specifikacija), card-like izgled.
 * ------------------------------------------------------------------ */
.cms-quartz-panel {
    border: 1px solid #e0e0e2;
    border-radius: 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.cms-quartz-panel-head {
    background: #58585a;
    color: #ffffff;
    border-bottom: 1px solid #e0e0e2;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* samo naslovi panela SA katancem su flex (Specifikacija ostaje
 * običan tekstualni head, bez dugmeta). */
.cms-quartz-panel-head-lockable {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Korisnikov zahtev — "Dodaj Otvor"/"Dodaj Finishing" premešteni u
 * zaglavlje panela, pored dugmeta za zaključavanje; grupisani zajedno na
 * desnoj strani (naslov ostaje levo preko justify-content:space-between). */
.cms-quartz-panel-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cms-quartz-panel-body {
    padding: 12px 14px;
}

/* §5 dopunjeno — vizuelna potvrda da je panel zaključan: sav njegov sadržaj
 * (input/select/dugme) dobija disabled kad je katanac aktivan. */
.cms-quartz-panel-body input:disabled,
.cms-quartz-panel-body select:disabled,
.cms-quartz-panel-body button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Tanka linija između sekcija u panelu (Spojevi/Radijusi/Dužine/...),
 * ali NE i između pojedinačnih redova unutar iste sekcije. */
.cms-quartz-toolbar-section {
    border-top: 1px solid #e0e0e2;
    padding-top: 14px;
    margin-top: 14px;
}

.cms-quartz-toolbar-row:first-child.cms-quartz-toolbar-section {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Blaga linija unutar jedne sekcije — razdvaja grupe iste vrste (ose kod
 * linija sečenja, pojedinačne otvore). Svetlija od .cms-quartz-toolbar-section,
 * koja razdvaja same sekcije panela. */
.cms-quartz-subdivider {
    border-top: 1px solid #f0f0f1;
    margin: 10px 0;
}

.cms-quartz-toolbar-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cms-quartz-panel-lock-btn {
    line-height: 1;
}

/* Korisnikov zahtev — sva dugmad u zaglavlju panela (katanac i "Dodaj
 * Otvor"/"Dodaj Finishing") dobijaju istu zelenu pozadinu, beo tekst i beli
 * border. Dvoklasni selektor po dugmetu (umesto samo kontejnera) je
 * NAMERAN — ".cms-quartz-btn-primary.cms-quartz-btn-sm" ispod je već
 * dvoklasan (0,2,0), pa bi ga jednoklasni kontejner-selektor izgubio bez
 * obzira na redosled u fajlu (ista zamka kao kod ranijih finishing/cutout
 * dugmadi). ".cms-quartz-btn-pending" (0,3,0),
 * definisan NIŽE u fajlu, i dalje ispravno pobeđuje pri jednakoj
 * specifičnosti (žuto dok je režim biranja aktivan). */
.cms-quartz-panel-head-actions .cms-quartz-panel-lock-btn,
.cms-quartz-panel-head-actions .cms-quartz-btn-primary.cms-quartz-btn-sm {
    background: #789c48;
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* Zaključan panel — narandžasto, isti jezik kao otključana geometrija
 * custom otvora, da se stanje vidi bez čitanja ikonice. Troklasni selektor
 * jer dvoklasni iznad postavlja zelenu. */
.cms-quartz-panel-head-actions .cms-quartz-panel-lock-btn.locked {
    background: #e8a33d;
    border-color: #ffffff;
    color: #33343a;
}

.cms-quartz-panel-head-actions .cms-quartz-panel-lock-btn.locked:hover {
    background: #d9922c;
}

.cms-quartz-panel-head-actions .cms-quartz-panel-lock-btn:hover,
.cms-quartz-panel-head-actions .cms-quartz-btn-primary.cms-quartz-btn-sm:hover {
    background: #6a8a3f;
}

.cms-quartz-layout-buttons {
    display: flex;
    gap: 8px;
}

.cms-quartz-btn {
    border: 1px solid #c9cace;
    background: #ffffff;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.cms-quartz-btn:hover {
    background: #f0f1f2;
}

.cms-quartz-btn.active {
    background: #73a732;
    border-color: #73a732;
    color: #ffffff;
}

.cms-quartz-btn-primary {
    background: #73a732;
    border-color: #73a732;
    color: #ffffff;
}

/* "Dodaj Finishing" dugme postaje žuto
 * dok je aktivan režim biranja strane. Troklasni selektor (veći od
 * .cms-quartz-btn-primary.cms-quartz-btn-sm ispod) garantuje pobedu bez
 * obzira na redosled u fajlu — isti CSS-specifičnost bug kao kod "Dodaj
 * Otvor" dugmeta bi se inače ponovio. */
.cms-quartz-btn-primary.cms-quartz-btn-sm.cms-quartz-btn-pending {
    background: #e8a33d;
    border-color: #e8a33d;
    color: #33343a;
}

.cms-quartz-btn-sm {
    border: 1px solid #c9cace;
    background: #ffffff;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
}

/* ZAMKA: .cms-quartz-btn-sm je definisan POSLE .cms-quartz-btn-primary sa
 * istom specifičnošću, pa mu background:#fff pobeđuje dok color:#fff ostaje
 * — beo tekst na beloj pozadini. Dvoklasni selektor vraća zelenu. */
.cms-quartz-btn-primary.cms-quartz-btn-sm {
    background: #73a732;
    border-color: #73a732;
}

.cms-quartz-toolbar-row {
    margin-bottom: 14px;
}

.cms-quartz-toolbar-row:last-child {
    margin-bottom: 0;
}

.cms-quartz-toolbar-row > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #55565c;
    margin-bottom: 6px;
}

.cms-quartz-corner-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cms-quartz-corner-btn {
    min-width: 34px;
}

.cms-quartz-joint-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
}

.cms-quartz-joint-group span {
    margin-right: 4px;
}

.cms-quartz-input-label {
    display: inline-block;
    font-size: 12px;
    margin-right: 4px;
    margin-left: 8px;
}

.cms-quartz-input-label:first-child {
    margin-left: 0;
}

/* Svaka X/Y/Z osa u sopstvenom redu. */
.cms-quartz-axis-row {
    display: flex;
    align-items: center;
}

.cms-quartz-axis-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #73a732;
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    margin-right: 8px;
    padding: 2px 4px;
}

/* Bedž finiša ("XF1", "XF10") nosi title tooltip — treba mu malo vise
 * horizontalnog prostora od ostalih bedževa. */
.cms-quartz-finishing-row .cms-quartz-axis-row-badge {
    padding: 0 6px;
}

.cms-quartz-input,
.cms-quartz-select {
    box-sizing: border-box;
    border: 1px solid #c9cace;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 13px;
    margin-right: 6px;
}

.cms-quartz-input {
    width: 10ch;
}

/* §2/§5 dopunjeno — red za ručno dodat otvor/finishing u toolbar-u. */
.cms-quartz-cutout-row,
.cms-quartz-finishing-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: -6px;
}

/* .cms-quartz-btn-sm (na istom
 * elementu) već daje normalan izgled dugmeta; ovde ostaje samo razmak sa
 * obe strane da se vizuelno odvoji i od input-a ispred i od Ukloni dugmeta
 * iza. */
.cms-quartz-add-cutline-btn {
    margin-left: 8px;
    margin-right: 8px;
}

/* Red sa koordinatama temena custom otvora — uža polja, 8 ih je u redu. */
/* Dugme za zaključavanje geometrije custom otvora — kad je otključano
 * boji se, da se odmah vidi da je oblik u "slobodnom" režimu. */
.cms-quartz-geom-lock-btn {
    margin: 0 0 0 8px;
}

.cms-quartz-free-mode-btn {
    margin: 0 0 0 4px;
}

.cms-quartz-free-mode-btn.active {
    background: #e8a33d;
    border-color: #e8a33d;
    color: #33343a;
}

.cms-quartz-geom-lock-btn.active {
    background: #e8a33d;
    border-color: #e8a33d;
    color: #33343a;
}

/* Detalji otvora — uvučeni red(ovi) ispod reda sa oznakom i akcijama.
 * Za presete/kružne su to dimenzije + pozicija, za custom redovi po temenu. */
.cms-quartz-quad-vertices,
.cms-quartz-cutout-detail {
    padding-left: 10px;
    margin-top: 4px;
    margin-bottom: 10px;
}

.cms-quartz-cutout-dims-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.cms-quartz-cutout-dims-row:last-child {
    margin-bottom: 0;
}

.cms-quartz-quad-vertex-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.cms-quartz-quad-vertex-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    font-size: 12px;
    font-weight: 700;
    color: #55565c;
}

.cms-quartz-quad-angle {
    margin-left: 10px;
    font-size: 12px;
    color: #77787e;
}

.cms-quartz-quad-sides {
    margin-top: 6px;
    font-size: 11px;
    color: #77787e;
}

.cms-quartz-quad-input {
    width: 9ch;
    margin-right: 6px;
}



.cms-quartz-taphole-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    margin: 0 0 0 8px;
    cursor: pointer;
    line-height: 1;
}

/* Checkbox nosi sopstvene browser margine koje ga izbace iz sredine reda. */
.cms-quartz-taphole-label input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

.cms-quartz-modal-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.cms-quartz-modal-row:last-child {
    margin-bottom: 0;
}

/* Otvor se bira pločicama sa slikom, ne <select>-om. Širina je podešena
 * tako da sva 4 (3 preseta + Custom) stanu u jedan red. */
.cms-quartz-cutout-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.cms-quartz-cutout-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 130px;
    padding: 1px;
    border: 2px solid #a7a9ac;
    border-radius: 4px;
    cursor: pointer;
    background: #ffffff;
    box-sizing: border-box;
}

.cms-quartz-cutout-tile-selected {
    box-shadow: 0px 0px 0px 5px #d1e58c;
}

.cms-quartz-cutout-tile img {
    width: 100%;
    object-fit: cover;
    border-radius: 3px;
    background: #f0f1f2;
}

.cms-quartz-cutout-tile-label {
    margin-top: 6px;
    margin-bottom: 4px;
    font-size: 11px;
    text-align: center;
    color: #33343a;
    font-weight: 500;
}

.cms-quartz-cutout-tile-custom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 76px;
    font-size: 30px;
    line-height: 1;
    color: #9a9ba0;
    background: #f0f1f2;
    border-radius: 3px;
}

.cms-quartz-cutout-custom-row {
    padding-left: 4px;
}

/* Naslovi sekcija u modalu za dodavanje otvora. */
.cms-quartz-modal-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #33343a;
    margin-bottom: 10px;
}

/* Strana (X/Y/Z) se bira preko dugmića, ne <select>-a * "active" stanje već stiže od postojećeg .cms-quartz-btn.active pravila
 * (isti jezik kao layout I/L/U dugmad), ovde samo razmak između dugmadi. */
.cms-quartz-modal-axis-row {
    gap: 8px;
}

/* ------------------------------------------------------------------
 * Specifikacija panel — tabele.
 * ------------------------------------------------------------------ */
.cms-quartz-spec-total {
    font-size: 14px;
    margin-bottom: 10px;
}

.cms-quartz-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 12px;
}

.cms-quartz-spec-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    color: #77787e;
    border-bottom: 1px solid #e0e0e2;
    padding: 4px 4px;
}

.cms-quartz-spec-table td {
    padding: 4px 4px;
    border-bottom: 1px solid #f0f0f1;
}

/* §4/rupa za slavinu u specifikaciji. */
.cms-quartz-spec-taphole {
    font-size: 11px;
    color: #77787e;
    margin-top: 2px;
}

/* ------------------------------------------------------------------
 * SVG tehnički crtež (§6.1, §6.1.1).
 *
 * vector-effect: non-scaling-stroke drži debljinu linija konstantnom u
 * pikselima bez obzira na mm-skalu viewBox-a i trenutni zoom — linije
 * ostaju jasno debele i "spolja" čitljive na svim veličinama ploče (#8).
 * ------------------------------------------------------------------ */
.cms-quartz-contour {
    fill: #d1e58c;
    stroke: #58585a;
    stroke-width: 3.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* deo konture gde je finishing primenjen
 * se precrtava linijom "podebljanom za 2 piksela" u odnosu na konturu
 * (3.5 + 2 = 5.5); boja je INLINE (per-zapis, po tipu finish-a — vidi
 * OPTIONS.finishingTypes[].color), ova klasa nosi samo debljinu/ostalo. */
.cms-quartz-finishing-overlay {
    stroke-width: 5.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    fill: none;
}

/* Divider/joint linije su čisto vizuelne (isečci/spojevi) i mogu vizuelno
 * pasti tačno preko edge-resize hit-linije (npr. spoj u refleksnom uglu) —
 * pointer-events:none da nikad ne "kradu" klik od interaktivnih elemenata
 * ispod/iznad sebe (isti razlog kao .cms-quartz-dim-row). */
.cms-quartz-divider {
    stroke: #9a9ba1;
    stroke-width: 2.5;
    stroke-dasharray: 10 7;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.cms-quartz-joint-line {
    stroke: #c94f4f;
    stroke-width: 2.5;
    stroke-dasharray: 4 5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* Blaga providnost segment labela (X1, X2...) ispod
 * otvora ostaje vidljiva kroz njega umesto da bude potpuno prekrivena. */
.cms-quartz-cutout {
    fill: #f4f5f6;
    fill-opacity: 0.78;
    stroke: #2b2c30;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    cursor: move;
}

/* Ručice za oblikovanje custom (quad) otvora. Stranica: široka nevidljiva
 * hit-linija (tanka geometrija se nepouzdano pogađa mišem — isti razlog kao
 * kod linija sečenja), obojena tek na hover. */
.cms-quartz-cutout-side-hit {
    stroke: rgba(47, 111, 235, 0.001);
    stroke-width: 14;
    vector-effect: non-scaling-stroke;
    cursor: move;
}

.cms-quartz-cutout-side-hit:hover {
    stroke: rgba(47, 111, 235, 0.35);
}

.cms-quartz-cutout-vertex {
    fill: #ffffff;
    stroke: #2f6feb;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
}

.cms-quartz-cutout-vertex:hover {
    fill: #2f6feb;
}

/* Zaključan panel Otvori gasi i ručice, ne samo pomeranje otvora. */
.cms-quartz-svg.cms-quartz-lock-cutouts .cms-quartz-cutout-side-hit,
.cms-quartz-svg.cms-quartz-lock-cutouts .cms-quartz-cutout-vertex {
    pointer-events: none;
}

/* §6.8 dopunjeno — otvor u sudaru (preklapa drugi otvor ili zonu radijusa)
 * se označi crveno umesto da se pozicija na silu blokira/vraća — vidi
 * computeCutoutProblems i persistentError u glavnoj ulaznoj tački. */
.cms-quartz-cutout-problem {
    fill: #e5484d;
    fill-opacity: 0.55;
    stroke: #b3261e;
}

/* §4 dopunjeno — rupa za slavinu je čisto dekorativna (izvedena pozicija,
 * ne prevlači se direktno), zato pointer-events:none. */
.cms-quartz-taphole {
    fill: #ffffff;
    fill-opacity: 0.85;
    stroke: #2b2c30;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* §2 dopunjeno — ručna linija sečenja: dve linije na istoj geometriji, isti
 * princip kao .cms-quartz-edge-hit (široka nevidljiva hit-linija ispod tanke
 * vizuelne) — geometrijski prava (nula-širine) linija je nepouzdano
 * pogodljiva mišem bez široke hit-površine. */
.cms-quartz-cutline-hit {
    stroke: rgba(47, 111, 235, 0.001);
    stroke-width: 22;
    vector-effect: non-scaling-stroke;
    cursor: col-resize;
}

/* Korisnikov zahtev — isti hover kao .cms-quartz-edge-hit (resize ivice):
 * plava, poluprovidna. */
.cms-quartz-cutline-hit:hover {
    stroke: rgba(47, 111, 235, 0.18);
}

.cms-quartz-cutline-visual {
    stroke: #73a732;
    stroke-width: 3.5;
    stroke-dasharray: 12 6;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

/* Klik-bilo-gde-na-ivicu resize — nevidljiva ali široka
 * hit-linija preko svake spoljne ivice; blaga highlight na hover da
 * korisnik otkrije da je ivica "grabbable", bez trajnog vizuelnog markera
 * koji bi zaklanjao radijuse. */
.cms-quartz-edge-hit {
    stroke: transparent;
    stroke-width: 26;
    vector-effect: non-scaling-stroke;
    cursor: move;
    fill: none;
}

.cms-quartz-edge-hit:hover {
    stroke: rgba(47, 111, 235, 0.18);
}

/* sad minimalne
 * (r=6, postavljeno u JS-u) i u boji tipa finish-a (inline `style`,
 * OPTIONS.finishingTypes[].color); `fill` ovde je samo fallback. */
.cms-quartz-finishing-marker {
    fill: #73a732;
    stroke: #ffffff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    cursor: ew-resize;
}

/* Kote su čisto vizuelna anotacija — witness linija polazi TAČNO sa ivice
 * konture (isto mesto gde stoji edge-resize hit-linija ispod nje), pa bez
 * pointer-events:none povremeno "krade" klik namenjen resize-u kad korisnik
 * cilja tačno na ivicu (otkriveno testom). */
.cms-quartz-dim-row {
    pointer-events: none;
}

.cms-quartz-dim-line {
    stroke: #55565c;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.cms-quartz-witness {
    stroke: #b3b4b9;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.cms-quartz-arrow-path {
    fill: #55565c;
    stroke: none;
}

/* Maska oko brojeva: kota-linije, produžne linije i kontura neizbežno prolaze
 * kroz labele u gustom crtežu (izmereno: 11 od 21 labele u sceni sa dva otvora
 * i obradom ivica). Beli potez ISPOD glifa (paint-order) čini broj čitljivim
 * bez skrivanja geometrije — za razliku od pune bele pločice, koja bi pod
 * rotacijom ostavljala vidljiv isečak preko ploče.
 *
 * ZAMKA: vector-effect:non-scaling-stroke, koji koriste SVE linije radi
 * konstantne debljine pri zoom-u, ovde se NE SME primeniti. Maska mora da
 * skalira zajedno sa fontom (oba su u mm), inače bi na odzumiranom crtežu
 * ostala fiksnih 6 ekranskih piksela i progutala slova. */
.cms-quartz-dim-text,
.cms-quartz-joint-cut-label {
    paint-order: stroke fill;
    stroke: #ffffff;
    stroke-width: 6;
    stroke-linejoin: round;
}

.cms-quartz-dim-text {
    font-size: 32px;
    fill: #33343a;
    font-family: Arial, Helvetica, sans-serif;
}

/* Velika, boldirana, providna oznaka segmenta (npr. "X1") po sredini dela
 * — vidljiva ali "ne bode oči". pointer-events:none tako
 * da nikad ne blokira klik na cutout/edge-resize ispod sebe. */
.cms-quartz-segment-label {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    fill: #2b2c30;
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
}

/* §6.2.5 — hover nad RUČICOM osvetli ugao koji će se promeniti.
 *
 * K-oznaka je dobila SOPSTVENU klasu (ranije je delila .cms-quartz-segment-label
 * sa velikim X1/Y1 oznakama) — inače bi svetla varijanta ispod pogodila i njih.
 * Osnovni izgled je namerno identičan starom, da promena klase ne pomeri crtež. */
.cms-quartz-corner-label {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    fill: #2b2c30;
    opacity: 0.22;
    pointer-events: none;
    user-select: none;
}

/* Svetla kopija — leži TAČNO preko stalne, prigušene (ista putanja kroz
 * cornerLabelPlacement), pa je na hover samo "pojača". */
.cms-quartz-corner-label-active {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    fill: #2f6feb;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.12s ease-out;
}

.cms-quartz-corner-angle-arc {
    fill: none;
    stroke: #2f6feb;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease-out;
}

/* Grupa sadrži i ručicu i oznake, ali SAMO ručica prima pointer evente
 * (ostalo je pointer-events:none), pa se :hover pali isključivo kad je miš
 * stvarno na krugu za vuču — ne kad prođe preko luka ili broja.
 *
 * ZAMKA (pravilo iste specifičnosti): pravila su DVOKLASNA da sigurno pobede
 * osnovni `opacity` iznad, bez obzira na redosled u fajlu. */
.cms-quartz-angle-handle-group:hover .cms-quartz-corner-angle-arc,
.cms-quartz-angle-handle-group:hover .cms-quartz-corner-label-active {
    opacity: 1;
}

/* ------------------------------------------------------------------
 * FAL — slobodni uglovi (§6.2.4)
 * ------------------------------------------------------------------ */

/* Prekidač u zaglavlju Panela 2. ZAMKA: zaglavlje panela boji svoju dugmad
 * zeleno preko dvoklasnog ".cms-quartz-panel-head-actions .cms-quartz-..."
 * selektora (0,2,0), pa aktivno (narandžasto) stanje mora biti bar troklasno
 * da pobedi bez oslanjanja na redosled u fajlu — ista zamka koja je već
 * dvaput uhvaćena kod finishing/lock dugmadi. */
.cms-quartz-panel-head-actions .cms-quartz-fal-btn {
    background: #789c48;
    color: #ffffff;
    border: 1px solid #ffffff;
    margin: 0 4px 0 0;
}

.cms-quartz-panel-head-actions .cms-quartz-fal-btn.active {
    background: #e8a33d;
    border-color: #e8a33d;
    color: #33343a;
}

.cms-quartz-angle-row {
    display: flex;
    align-items: center;
}

.cms-quartz-angle-row .cms-quartz-axis-row-badge {
    min-width: 34px;
}

.cms-quartz-angle-input {
    width: 72px;
}

.cms-quartz-unit-suffix {
    font-size: 12px;
    margin-left: 4px;
    color: #6b6c72;
}

/* Razdvajanje sekcije uglova od dužina — ista svetla linija kao između
 * grupa linija sečenja. */
.cms-quartz-subdivider-top {
    border-top: 1px solid #f0f0f1;
    padding-top: 10px;
}

/* Prednja (izvedena) dužina po kraku — informativno, jer se unos dužine
 * odnosi na zadnju, zidnu liniju. */
.cms-quartz-front-lengths {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: #6b6c72;
}

/* Oznaka ugla na crtežu. Ranije je bila sitna i providna kao T/K labele, ali
 * te labele su dekoracija a ovo je MERA — i, pošto se sad ispisuje samo kad
 * ugao nije prav, pojavljuje se retko i mora da se pročita. Zato veličina i
 * maska kao kod kota (.cms-quartz-dim-text). */
.cms-quartz-angle-label {
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    fill: #33343a;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    paint-order: stroke fill;
    stroke: #ffffff;
    stroke-width: 6;
    stroke-linejoin: round;
}

/* Luk ugla je ANOTACIJA, ne geometrija. Pun luk poluprečnika 110 u ćošku je
 * korisnik pročitao kao zaobljenje ćoška (OPTIONS.radius=60 crta upravo tu,
 * punom linijom) — zato isprekidano i u boji kota, uz produžne krakove koji
 * probijaju luk: to je standardna oznaka ugla sa tehničkog crteža i ne može
 * da se pomeša sa konturom ploče. */
.cms-quartz-angle-arc {
    fill: none;
    stroke: #7a7b82;
    stroke-width: 2;
    stroke-dasharray: 7 5;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}


/* Ručice za miš — vidljive samo dok su slobodni uglovi uključeni i panel
 * otključan. Rotaciona (spoj) i klizna (čeoni rez) se razlikuju bojom, ne
 * oblikom.
 * Korisnikov zahtev — cursor:pointer (šaka sa prstom), ISTI kao na ručicama
 * custom otvora (.cms-quartz-cutout-vertex): sve tačke koje se hvataju i
 * vuku moraju da se pod mišem ponašaju isto, bez obzira što jedna pomera
 * otvor a druga geometriju. */
.cms-quartz-joint-angle-handle,
.cms-quartz-end-angle-handle {
    fill: #ffffff;
    stroke: #e8a33d;
    stroke-width: 4;
    cursor: pointer;
}

.cms-quartz-end-angle-handle {
    stroke: #2f6feb;
}

.cms-quartz-joint-angle-handle:hover,
.cms-quartz-end-angle-handle:hover {
    fill: #fdf3e3;
}

/* Zaključan panel Dimenzije gasi i ručice uglova na crtežu — isti obrazac
 * kao edge-hit linije iznad (troslojno sprovođenje katanca, §6.14). */
.cms-quartz-svg.cms-quartz-lock-dimensions .cms-quartz-joint-angle-handle,
.cms-quartz-svg.cms-quartz-lock-dimensions .cms-quartz-end-angle-handle {
    pointer-events: none;
    opacity: 0.35;
}

/* FAL kote: prednja (unutrašnja) dužina, kosi čeoni rez, rez na spoju.
 * Plavičaste da se na prvi pogled razlikuju od kota zadnje (zidne) strane —
 * inače bi se dve dužine iste ploče čitale kao ista vrsta mere. */
.cms-quartz-dim-row-front .cms-quartz-dim-line {
    stroke: #2f6feb;
}

.cms-quartz-dim-row-front .cms-quartz-witness {
    stroke: #9db8f3;
}

.cms-quartz-dim-row-front .cms-quartz-dim-text {
    fill: #2f6feb;
}

/* Rez na spoju leži unutar materijala — nema mesta za kota-liniju sa
 * produžnim linijama, pa ide labela duž same linije reza. */
.cms-quartz-joint-cut-label {
    font-size: 26px;
    fill: #2f6feb;
    font-family: Arial, Helvetica, sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.cms-quartz-arrow-path-front {
    fill: #2f6feb;
}