/* css/style.css */

/*
 * Breakpoints
 * ------------------
 * md:  max-width: 900px   tablet / narrow window
 * sm:  max-width: 600px   mobile / very small screen
 */

.nowrap {
    white-space: nowrap;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.navbar-brand .brand-gap {
    display: inline-block;
    margin-left: 0.8rem;
}

.navbar.bg-primary {
    background-color: #1f6b45 !important;
}

.card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 8px;
}

.card-header {
    border-radius: 8px 8px 0 0 !important;
}

.form-label {
    font-weight: 500;
    color: #333;
}

.btn-primary {
    background-color: #0d6efd;
    border: none;
    padding: 10px 20px;
}

.btn-primary:hover {
    background-color: #0b5ed7;
}

.btn-success {
    padding: 10px 20px;
}

.btn-info {
    padding: 10px 20px;
}

.alert {
    border-radius: 6px;
}

table {
    margin: 1em;
}

.table {
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
}

/* Derived / conditional columns: gray header when N/A for current choices (Kapı & Cam tables). */
table[data-id="frameTable"] thead th.col-not-applicable,
table[data-id="glassTable"] thead th.col-not-applicable {
    color: #8a8a8a;
    font-weight: 500;
}

.badge {
    font-size: 0.85rem;
    padding: 0.4em 0.6em;
}

code {
    background-color: #f1f3f5;
    padding: 2px 6px;
    border-radius: 3px;
    color: #e83e8c;
}

.success-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: none;
}

.success-modal.show {
    display: block;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: none;
}

.modal-backdrop.show {
    display: block;
}

select {
    background-color: lightgray;
}

/*
 * Order form (see form.html `.order-form`): 2px borders on fields.
 * En_aç.knt (width_ak) is disabled until ÇKK + Kanat_eşit Hayır; it used the UA thin border while
 * neighbors already had 2px, so enabling/focusing made that cell ~2px wider and shifted columns.
 * Same 2px + border-box for disabled controls; border-color only differs.
 */
.order-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(:disabled):not([readonly]),
.order-form select:not(:disabled),
.order-form textarea:not(:disabled):not([readonly]) {
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
}

.order-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):disabled,
.order-form select:disabled,
.order-form textarea:disabled {
    border-width: 2px;
    border-style: solid;
    border-color: #ced4da;
    box-sizing: border-box;
}

.grid-container, .grid-container2 {
    display: inline-grid;
    grid-template-columns: minmax(var(--grid-col1, 0px), max-content) min-content;
    gap: 0.5em;
    margin-bottom: 2em;
    align-items: center;
    margin-left: 1em; 
}

.bandrasterTable:not(:has(.gridRowWrapper:not([hidden]))),
.venetianTable:not(:has(.gridRowWrapper:not([hidden]))) {
    display: none;
}

.grid-container3 {
    display: inline-grid;
    grid-template-columns: minmax(var(--grid-col1, 0px), max-content) repeat(2, min-content);
    gap: 0.5em;
    margin-bottom: 2em;
    align-items: center;
    margin-left: 1em;
}

.grid-container4 {
    display: inline-grid;
    grid-template-columns: var(--grid-col1, min-content) repeat(3, min-content);
    gap: 0.5em;
    margin-bottom: 2em;
    align-items: center;
    margin-left: 1em;
}

.grid-container2.compact-gap,
.grid-container3.compact-gap,
.grid-container4.compact-gap {
    display: grid;
    margin-bottom: 0.5em;
}

.table5.manual-entry-gap {
    margin-top: 1em;
}

/* Door design manual entry (table5): free-text input 30em wide; keep Stock Code input default */
.door-design .table5 .gridRowWrapper > input[type="text"]:not([placeholder="Stok Kodu"]) {
    width: 30em;
    min-width: 30em;
    max-width: 30em;
    box-sizing: border-box;
}

/* Door design manual entry (table5): align label + first input with Door Handle / Lock rows */
.door-design .table5 {
    grid-template-columns: minmax(21ch, 21ch) minmax(30em, min-content) min-content min-content;
}

.grid-container2.table6.compact-gap,
.grid-container2.table7.compact-gap {
    grid-template-columns: minmax(14em, 14em) minmax(0, 1fr);
}

.bandrasterTable.compact-gap {
    grid-template-columns: max-content minmax(0, 1fr);
}

/* Spacing for Bandraster/Venetian now handled by door-lower-section [data-group] rules */

.venetianTable.compact-gap {
    grid-template-columns: max-content minmax(16em, 16em) minmax(16em, 16em);
}

/* Single-row tables: keep label and control on same row (span2 would force control to next row in 2-col grid) */
.bandrasterTable .span2,
.venetianTable .span2 {
    grid-column: auto;
}

/* Door design: single control height so Door Leaf, Frame/Leaf profile, and all dropdowns match */
.door-design {
    --door-control-height: 1.75rem;
}

/* Door design table2: same label column (21ch) as table3 so Door Leaf, Door Surface, Glass Thickness, Description align */
.door-design .table2 {
    grid-template-columns: minmax(21ch, 21ch) repeat(2, min-content);
}

/* Door design table2: Stock Code box on same row as Description, no label; 
   use default input sizing so it matches other Stock Code fields (e.g. Kapı Kolu). */
.door-design .table2 .stock-code-cell input {
    width: auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}

/* Door design: Door Leaf, Door Surface, Glass Thickness — same box size (match Door Leaf). Clone has .door-design, not #modelDoor */
.door-design .table2 select {
    width: 30em;
    min-width: 30em;
    max-width: 30em;
    height: var(--door-control-height);
    box-sizing: border-box;
}

/* Door design: Door Handle 1/2, Door Closer, Barrel, etc. — same box size (match Door Handle 1). Width sized for long option text. Exclude Pull Arm detail rows */
/* Door Handle 1: select inside div:nth-child(2). Door Handle 2: select is itself 2nd child (no wrapper div) */
.door-design .table3 .gridRowWrapper:not(.doorHandle1Details):not(.doorHandle2Details) > div:nth-child(2) select,
.door-design .table3 .gridRowWrapper.doorHandle2 > select:nth-child(2),
.door-design .table4 .gridRowWrapper > div:nth-child(2) select {
    width: 30em;
    min-width: 30em;
    max-width: 30em;
    height: var(--door-control-height);
    box-sizing: border-box;
}

.bandrasterTable select,
.bandrasterTable input,
.venetianTable select,
.venetianTable input,
.table6 select,
.table6 input,
.table7 select,
.table7 input {
    width: 16em;
    min-width: 16em;
    max-width: 16em;
    box-sizing: border-box;
}

.grid-container6 {
    display: inline-grid;
    grid-template-columns: minmax(21ch, 21ch) minmax(30em, min-content) repeat(4, min-content);
    gap: 0.5em;
    margin-bottom: 2em;
    align-items: center;
    margin-left: 1em;
}

/* Door design table3: fixed label column (21ch); min width on col2 so Pull Arm 1 row doesn't shrink main dropdowns */
.door-design .table3 {
    grid-template-columns: minmax(21ch, 21ch) minmax(30em, min-content) repeat(4, min-content);
}

/* Door design table4: same column layout as table3 so boxes align with Door Handles / Door Handle 1 */
.door-design .table4 {
    grid-template-columns: minmax(21ch, 21ch) minmax(28em, min-content) repeat(4, min-content);
}

/* Shared parent grid for all door lower-section optional features.
   All data-group children (Bandraster, Venetian, Tekmelik, Menfez, Gözetleme Camı)
   use subgrid so their label columns are all sized to the widest label.
   Same first two tracks as .door-design .table4 / .table5 so controls line up with hardware and manual rows. */
.door-design .door-lower-section {
    display: grid;
    grid-template-columns: minmax(21ch, 21ch) minmax(28em, min-content) repeat(4, min-content);
    column-gap: 0.5em;
    align-items: center;
    margin-left: 1em;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

.door-design .door-lower-section [data-group] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0.5em;
    align-items: center;
}

/* Space between consecutive visible sections. Sized to match the visual gap
   between upper-section grid blocks (e.g. Kapı Fitili → Kapı Kolu Seçeneği),
   which is produced by .grid-container6 margin-bottom + a <br> line-box. */
.door-design .door-lower-section [data-group]:not([hidden]) ~ [data-group]:not([hidden]) {
    margin-top: 2em;
}

/* Tekmelik + Tekmelik Yüksekliği + Tekmelik Rengi (+ detail) are one logical
   block; use row gap (0.5em) like Menfez inner rows. */
.door-design .door-lower-section [data-group="kick"]:not([hidden]) ~ [data-group="kickHeight"]:not([hidden]),
.door-design .door-lower-section [data-group="kickHeight"]:not([hidden]) ~ [data-group="kickColor"]:not([hidden]),
.door-design .door-lower-section [data-group="kick"]:not([hidden]) ~ [data-group="kickColor"]:not([hidden]),
.door-design .door-lower-section [data-group="kickColor"]:not([hidden]) ~ [data-group="kickColorDetail"]:not([hidden]) {
    margin-top: 0.5em;
}

/* Tekmelik row: main dropdown sits in the second grid cell. Renk now has its own row
   (data-group="kickColor"), so this wrapper only holds the Kick select. */
.door-design .door-lower-section [data-group="kick"] > .kick-control-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 0.5em;
    min-width: 0;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    min-height: var(--door-control-height);
}

/* Main select (col2) fills its column so widths are consistent across sections.
   Targets the select inside the second direct-child div (the main control wrapper).
   Exclude .kick-control-row: Tekmelik uses flex + fixed-width Kick select; 100% would fill the 28em track. */
.door-design .door-lower-section [data-group] > div:nth-child(2):not(.kick-control-row) select {
    width: 100%;
}

/* Jaluzi: two grid rows (Jaluzi + Renk); fixed control width like other lower-section fields. */
.door-design .door-lower-section [data-group="venetian"] select[name="VenetianBlinds"],
.door-design .door-lower-section [data-group="venetian"] input[name="VenetianBlindsColorInput"] {
    width: 16em;
    min-width: 16em;
    max-width: 16em;
    box-sizing: border-box;
    height: var(--door-control-height);
}

/* .gridRowWrapper uses display:contents — [hidden] on the wrapper does not reliably hide descendants.
   Force-collapse the optional Renk row when hidden so Jaluzi stays visible and Renk stacks on row 2. */
.door-design .door-lower-section .venetianTable > .venetian-blinds-renk-row[hidden] {
    display: none !important;
}

/* Venetian: both rows use display:contents, so four cells flatten into the 6-column subgrid and
   auto-placement puts all four on row 1. Pin Jaluzi to row 1 and Renk to row 2 (cols 1–2). */
.door-design .door-lower-section .venetianTable > .gridRowWrapper:not(.venetian-blinds-renk-row) > .nowrap {
    grid-column: 1;
    grid-row: 1;
}
.door-design .door-lower-section .venetianTable > .gridRowWrapper:not(.venetian-blinds-renk-row) > .span2 {
    grid-column: 2;
    grid-row: 1;
}
.door-design .door-lower-section .venetianTable .venetian-blinds-renk-row:not([hidden]) > .nowrap {
    grid-column: 1;
    grid-row: 2;
}
.door-design .door-lower-section .venetianTable .venetian-blinds-renk-row:not([hidden]) > .span2 {
    grid-column: 2;
    grid-row: 2;
}

/* Tekmelik: main dropdown fixed width; other inline selects stay compact. */
.door-design .door-lower-section [data-group="kick"] > .kick-control-row > select[name="Kick"] {
    width: 16em;
    min-width: 0;
    max-width: 16em;
    box-sizing: border-box;
    flex: 0 0 16em;
    margin-right: 1em;
    height: var(--door-control-height);
}

.door-design .door-lower-section [data-group="kick"] > .kick-control-row select:not([name="Kick"]) {
    width: auto;
    min-width: 0;
    max-width: 12em;
    flex: 0 1 auto;
    height: var(--door-control-height);
}

.door-design .door-lower-section [data-group="kickHeight"] > input[type="text"],
.door-design .door-lower-section [data-group="kickColor"] > select[name="KickColor"],
.door-design .door-lower-section [data-group="kickColorDetail"] > input[type="text"] {
    width: 16em;
    min-width: 0;
    max-width: 16em;
    box-sizing: border-box;
    justify-self: start;
}

/* Hide data-group when its only content (gridRowWrapper) is hidden (e.g. no options).
   Venetian has two rows (Jaluzi + optional Renk); do not hide the whole block when Renk is hidden. */
.door-design .door-lower-section .bandrasterTable:has(> .gridRowWrapper[hidden]) {
    display: none;
}

/* Menfez detail rows and sight-glass rows: 2-column subgrid so each label+control is
   on its own row. (display:contents on these wrappers would flatten children into the
   6-column parent and pack three pairs per row.) */
.door-design .door-lower-section [data-group="menfez"] > [data-id="culvertDetails"],
.door-design .door-lower-section [data-group="sightglass"] > .sightGlassRow1,
.door-design .door-lower-section [data-group="sightglass"] > .sightGlassRow2,
.door-design .door-lower-section [data-group="sightglass"] > .sightGlassOffset {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 3;
    /* Match [data-group] gap so inner rows space like the Menfez → Yükseklik row */
    gap: 0.5em;
}

.door-design .door-lower-section [data-group="menfez"] > [data-id="culvertDetails"][hidden],
.door-design .door-lower-section [data-group="sightglass"] > .sightGlassRow1[hidden],
.door-design .door-lower-section [data-group="sightglass"] > .sightGlassRow2[hidden],
.door-design .door-lower-section [data-group="sightglass"] > .sightGlassOffset[hidden] {
    display: none !important;
}

/* Door design frame table: narrow Stock Code column; margin so End column aligns with Lock Striker dropdown */
.door-design [data-id="frameTable"] {
    margin-left: 0.5em;
}
.door-design [data-id="frameTable"] th:nth-child(3),
.door-design [data-id="frameTable"] td:nth-child(3) {
    width: 10em;
    min-width: 10em;
    max-width: 10em;
    box-sizing: border-box;
}
.door-design [data-id="frameTable"] td:nth-child(3) input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * Kapı kasa body: left-align so fixed-width inputs are not centered in wide cells (global td { text-align: center }).
 * Boy_akt.knt: fixed th/td width so toggling th.col-not-applicable cannot widen the column;
 * input fills the cell — gap to Boy_kasa stays stable when Başlık becomes "Kasa İçi Başlıklı".
 */
.door-design [data-id="frameTable"] tbody td:not(.select-col):not(.notation-cell) {
    text-align: left;
}
.door-design [data-id="frameTable"] th[data-col="height2"],
.door-design [data-id="frameTable"] td[data-col="height2"] {
    width: 5em;
    min-width: 5em;
    max-width: 5em;
    box-sizing: border-box;
    text-align: left;
}
.door-design [data-id="frameTable"] td[data-col="height2"] input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Kasa row selects: keep a consistent minimum width so placeholders like "-" or "Seçenek yok..." do not shrink the cell. */
.door-design [data-id="frameTable"] tbody select {
    min-width: 5em;
    box-sizing: border-box;
}

.grid-container8 {
    display: inline-grid;
    grid-template-columns: var(--grid-col1, min-content) repeat(7, min-content);
    gap: 0.5em;
    margin-bottom: 2em;
    align-items: center;
}

/* ── Project list table ── */
.project-table {
    border: 1px solid #c8ddd0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    margin-bottom: 1rem;
}

details.project-card {
    width: 100%;
    background: white;
    border-bottom: 1px solid #e0e8e3;
    position: static;
    margin-bottom: 0;
}

details.project-card:last-child {
    border-bottom: none;
}

details.project-card[open] {
    background: white;
    padding: 0;
    margin-bottom: 0;
}

details.project-card > summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.85rem 1rem;
    background: white;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: inherit;
    transition: background 0.15s;
}

details.project-card > summary > div.nowrap {
    width: 18rem;
    flex-shrink: 0;
}

details.project-card > summary > div:nth-child(2) {
    width: 10rem;
    flex-shrink: 0;
}

details.project-card > summary > div:nth-child(3) {
    width: 5rem;
    flex-shrink: 0;
}

details.project-card > summary > div:nth-child(4) {
    width: 8rem;
    flex-shrink: 0;
}

details.project-card > summary > div:nth-child(5) {
    width: 12rem;
    flex-shrink: 0;
}

details.project-card > summary > div:nth-child(6) {
    width: 9rem;
    flex-shrink: 0;
}

details.project-card > summary > div:nth-child(7) {
    width: 8rem;
    flex-shrink: 0;
}

/* Header row mirrors the summary's flex metrics (gap: 2em, padding: .85rem 1rem)
   so labels align pixel-perfect with the data below.  The summary's gap is
   actually inherited from `details > summary:not(.project-grid)` lower down,
   not from `details.project-card > summary`, so we match that value (2em) here.
   Font-size is applied to the child divs rather than the container so it does
   not change the em-based gap calculation. */
.project-table-header {
    display: flex;
    align-items: center;
    gap: 2em;
    padding: 0.55rem 1rem;
    background: #e8f4ef;
    border-bottom: 1px solid #c8ddd0;
    color: #555;
}

.project-table-header > div {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.project-table-header > div.nowrap { width: 18rem; flex-shrink: 0; }
.project-table-header > div:nth-child(2) { width: 10rem; flex-shrink: 0; }
.project-table-header > div:nth-child(3) { width: 5rem; flex-shrink: 0; }
.project-table-header > div:nth-child(4) { width: 8rem; flex-shrink: 0; }
.project-table-header > div:nth-child(5) { width: 12rem; flex-shrink: 0; }
.project-table-header > div:nth-child(6) { width: 9rem; flex-shrink: 0; }
.project-table-header > div:nth-child(7) { width: 8rem; flex-shrink: 0; }
.project-table-header .order-count { font-size: inherit; color: inherit; font-weight: inherit; }

details.project-card > summary:hover {
    background: #e8f4ef;
    color: inherit;
}

details.project-card[open] > summary {
    background: #e8f4ef;
    border-bottom: 1px solid #e0e8e3;
    font-weight: 600;
    margin-bottom: 0;
    padding: 0.85rem 1rem;
    color: inherit;
}

.project-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
    margin-left: auto;
}

.order-count {
    font-size: 0.78rem;
    color: #888;
    font-weight: 400;
}

.chevron {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-right: 2.5px solid #1f6b45;
    border-bottom: 2.5px solid #1f6b45;
    transform: rotate(-45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
}

details.project-card[open] > summary .chevron {
    transform: rotate(45deg);
}

details.project-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

details.project-card ul li {
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.88rem;
    transition: background 0.1s;
    display: flex;
    align-items: center;
}

details.project-card ul li:last-child {
    border-bottom: none;
}

details.project-card ul li:hover {
    background: #f5f5f5;
}

details.project-card ul li a {
    display: grid;
    grid-template-columns: 1.6em 7.5rem 1fr 7rem;
    align-items: center;
    column-gap: 1.25rem;
    padding: 0.42rem 1rem;
    color: inherit;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.order-lock {
    width: 1.4em;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.85em;
}

#orderLockStatus {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3em 0.7em;
    border-radius: 4px;
}

#orderLockStatus.lock-locked {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.order-identity {
    white-space: nowrap;
}

.order-num {
    color: #1f6b45;
    font-weight: 700;
}

.order-info {
    color: #111;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-designs {
    color: #666;
    font-weight: 400;
}

details.project-card ul li a .order-date {
    color: #999;
    font-weight: 400;
    font-size: 0.82em;
    white-space: nowrap;
    grid-column: 4;
    justify-self: end;
}

.project-actions .page-nav {
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.project-actions .page-nav:empty {
    display: none;
}

/* md: scale down project summary columns */
@media (max-width: 900px) {
    details.project-card > summary > div.nowrap { width: 11rem; }
    details.project-card > summary > div:nth-child(2) { width: 7rem; }
    details.project-card > summary > div:nth-child(3) { width: 4rem; }
    details.project-card > summary > div:nth-child(4) { width: 6rem; }
    details.project-card > summary > div:nth-child(5) { width: 8rem; }
    details.project-card > summary > div:nth-child(6) { width: 6rem; }
    details.project-card > summary > div:nth-child(7) { width: 6rem; }

    .project-table-header > div.nowrap { width: 11rem; }
    .project-table-header > div:nth-child(2) { width: 7rem; }
    .project-table-header > div:nth-child(3) { width: 4rem; }
    .project-table-header > div:nth-child(4) { width: 6rem; }
    .project-table-header > div:nth-child(5) { width: 8rem; }
    .project-table-header > div:nth-child(6) { width: 6rem; }
    .project-table-header > div:nth-child(7) { width: 6rem; }
}

/* sm: revert to free-flow flex */
@media (max-width: 600px) {
    details.project-card > summary > div.nowrap,
    details.project-card > summary > div:nth-child(2),
    details.project-card > summary > div:nth-child(3),
    details.project-card > summary > div:nth-child(4),
    details.project-card > summary > div:nth-child(5),
    details.project-card > summary > div:nth-child(6),
    details.project-card > summary > div:nth-child(7),
    .project-table-header > div.nowrap,
    .project-table-header > div:nth-child(2),
    .project-table-header > div:nth-child(3),
    .project-table-header > div:nth-child(4),
    .project-table-header > div:nth-child(5),
    .project-table-header > div:nth-child(6),
    .project-table-header > div:nth-child(7) {
        width: auto;
        flex-shrink: 1;
    }
}

/* ── Form design sections (Kapı, Cam Panel, etc.) ── */
details[class*="-design"] {
    border-radius: 6px;
    border: 1px solid #c8ddd0;
    margin-bottom: 1em;
    width: fit-content;
    position: relative;
}

details[class*="-design"]:not([open]) {
    min-width: 45em;
}

details[class*="-design"][open] {
    background: white;
    border: 1px solid #c8ddd0;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 1.5em;
}

details[class*="-design"] > summary {
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    transition: background 0.15s;
    cursor: pointer;
    font-weight: inherit;
    margin-bottom: 0;
}

details[class*="-design"] > summary:hover {
    background: #e8f4ef;
    color: inherit;
}

details[class*="-design"][open] > summary:hover {
    background: #c8e2d0;
}

details[class*="-design"][open] > summary {
    background: #e8f4ef;
    color: inherit;
    font-weight: 600;
    border-bottom: 1px solid #c8ddd0;
    border-radius: 6px 6px 0 0;
    margin-bottom: 1em;
    padding: 0.45rem 0.75rem;
}

/* ── Project action buttons ── */
.project-actions {
    padding: 0.6rem 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    border-top: 1px solid #f0f0f0;
}

.btn-create {
    padding: 0.3rem 0.9rem;
    font-size: 0.82rem;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    background: #1f6b45;
    color: white;
    border: 1.5px solid #1f6b45;
    transition: background 0.12s, border-color 0.12s;
}

.btn-create:hover {
    background: #174f34;
    border-color: #174f34;
}

.btn-archive {
    padding: 0.3rem 0.9rem;
    font-size: 0.82rem;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    color: #666;
    border: 1.5px solid #ccc;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.btn-archive:hover {
    background: #fff5f5;
    color: #b91c1c;
    border-color: #f0b4b4;
}

.btn-trash {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    color: #aaa;
    border: 1px solid #ddd;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-trash:hover {
    background: #fff5f5;
    color: #b91c1c;
    border-color: #f0b4b4;
}

.btn-delete {
    padding: 0.3rem 0.9rem;
    font-size: 0.82rem;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    color: #b91c1c;
    border: 1.5px solid #f0b4b4;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.btn-delete:hover {
    background: #b91c1c;
    color: white;
    border-color: #b91c1c;
}

.page-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.5rem 0 0.25rem;
    flex-wrap: wrap;
}

.page-nav .page-btn {
    min-width: 28px;
    height: 26px;
    padding: 0 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
    color: #444;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.page-nav .page-btn:hover:not(:disabled):not(.active-page) {
    background: #e8f4ef;
    border-color: #1f6b45;
}

.page-nav .page-btn.active-page {
    background: #1f6b45;
    color: white;
    border-color: #1f6b45;
    font-weight: 600;
}

.page-nav .page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.page-nav .page-ellipsis {
    color: #aaa;
    font-size: 0.82rem;
    padding: 0 0.1rem;
}

.span2 {
    grid-column: span 2;
}
.span3 {
    grid-column: span 3;
}

/* Door design: Kapı Kolu Seçeneği dropdown width */
.door-design select[name="doorHandles"] {
    width: 30em;
    min-width: 30em;
    max-width: 30em;
    box-sizing: border-box;
}

#colorForm {
    padding-top: 2.5em;
    text-align: right;
    padding-left: 3em;
}

#mainForm {
    float: left;
}

h2, h3 {
    margin-top: 2em;
}

label {
    white-space: nowrap;
    margin-top: 0.25em;
}

/* Door design: spacing between "Sipariş?" and "Özel Detay/Boya?" controls */
.door-design label:has(> select[name="ordered"]) {
    margin-right: 1em;
}

/* Stok Kodu inputs: no extra inner padding on the right (Kapı donanım, tablo satırları, vb.). */
input[name="StockCode"],
input[name="doorHandle1StockCode"],
input[name="doorHandle2StockCode"] {
    padding-right: 0;
}

td, th {
    white-space: nowrap;
    text-align: center;
}
th {
    padding-left:0.5em;
    padding-right:0.5em;
}

fieldset {
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  position: relative;
    display: inline-grid;
    grid-template-rows: min-content 1fr;
    /* Column 2 is pinned to 20em so switching the Pazar dropdown between
       Yurtiçi (short il list) and Yurtdışı (long country names) does not
       resize the form. Without this the column auto-fits the widest <option>
       in whichever <select> is currently rendered, which visibly shifts every
       other input. 20em comfortably fits the longest country name. */
    grid-template-columns: max-content 20em;
    gap: 1em;
    max-width: 600px;
    margin-bottom: 2em;
}
/* Inputs/selects fill the fixed 20em cell; min-width:0 is required because
   the intrinsic min-width of a <select> is "widest option" and would
   otherwise blow past the column width. */
fieldset > input,
fieldset > select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
fieldset button {
    grid-column: 1 / span 2;
    justify-self: end;
}
legend {
  padding: 0 10px;
  font-size: 1.1rem;
  font-weight: 600;
    grid-column: 1 / span 2;
    width: auto;
}

.flash-container {
    margin: 1rem 0;
}

.flash {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Colors based on category */
.flash.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flash.info {
    background: #cce5ff;
    color: #004085;
    border: 1px solid #b8daff;
}

.flash.warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.flash.error, .flash.danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

main {
    padding: 1em;
}

.inline-block {
    display: inline-block;
}

details {
    margin-bottom: 1em;
    width: fit-content;
    position: relative;
}

.blank-row {
    /* 1. Span across all columns */
      grid-column: 1 / -1; /* Starts at line 1, ends at the last line (-1) */

      /* 2. Make it visually blank and control height */
      background: none;
      border: none;
      height: 20px; /* Adjust the height of the blank space */
      padding: 0;
}

/* Door Surface contains "Duz" => surfaceRows is hidden in JS.
   Collapse only the spacer above it; keep the lower spacer for profile color separation. */
.door-design .colorForm .blank-row:has(+ .surfaceRows[hidden]) {
    display: none;
}

/* Glass panel: data-group subgrid — children align to the parent grid columns */
.glass-panel-design [data-group] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0.5em;
    align-items: center;
}

/* Extra gap between the Cam Çerçeve Rengi dropdown and the silicone/tape
   colour row below it, and between the optional Renk (free-text) row and
   the silicone/tape row. */
.glass-panel-design .frameColorOptions .gridRowWrapper.siliconColor > .siliconColorLabel,
.glass-panel-design .frameColorOptions .gridRowWrapper.siliconColor > select[name="siliconColor"] {
    margin-top: 1.5em;
}

/* Match the Renk free-text input's width to the Cam Çerçeve Rengi select
   above it (both share the same grid column; the input otherwise uses its
   browser-default character width and renders slightly narrower). */
.glass-panel-design .frameColorOptions .glassFrameColorDetail .color-info-wrap {
    width: 100%;
}
.glass-panel-design .frameColorOptions input[name="glassFrameColorDetail"] {
    width: 100%;
    box-sizing: border-box;
}

/* Inter-group spacing: applied to any visible group that has a visible group before it */
.glass-panel-design [data-group]:not([hidden]) ~ [data-group]:not([hidden]) {
    margin-top: 1.5em;
}

/* Cam Kalınlık row: select + optional "Kalın olan cam her zaman dış oda
   tarafındadır." hint. The cell is a normal block so the select keeps the
   same width as every other col-2 select in the card (grid col 2 is
   sized to the widest min-content across the card — the select would
   shrink if the note participated in that sizing). The note is
   absolutely positioned just outside the cell's right edge so it can
   stretch on a single line without contributing to the grid column
   width or forcing a line break. */
.glass-panel-design .glassThicknessCell {
    position: relative;
}
.glass-panel-design .glassThicknessCell > select {
    width: 100%;
    box-sizing: border-box;
}
.glass-panel-design .glass-thickness-note {
    position: absolute;
    left: calc(100% + 0.75em);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-style: italic;
    color: #555;
    font-size: 0.92em;
}

.nodisplay {
    display: none;
}

/* make detail/summary h3 size */
details > summary {
  font-size: inherit;
  font-weight: inherit;
    transition: color 200ms ease, padding 200ms ease;
}

/* Keep non-project details as horizontal flex rows */
details > summary:not(.project-grid) {
    display: flex;
    align-items: center;
    gap: 2em;
}
details > summary:hover {
    background-color: black;
    color: white;
}

details h3 {
  margin: 0;
}

details > summary > h3 {
  display: inline;
}

details[open] summary {
    font-weight: 600;
    margin-bottom: 1em;
    background-color: unset;
    color: unset;
    padding: 0;
}

button {
    border-radius: 8px;
    border: 2px solid green;
}

button.delete-row-btn, button.warn, button.del-manual-row {
    border: 2px solid darkred;
}

button.delete-row-btn,
button.del-manual-row {
    min-width: 3em;
    padding: 0.1em 0.4em;
}

button.delete-design {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    background: white;
    color: #b91c1c;
    border: 1.5px solid #f0b4b4;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

button.delete-design:hover {
    background: #b91c1c;
    color: white;
    border-color: #b91c1c;
}

details:not([open]) button.delete-design {
    display: none;
}

/* Keep Glass Panel add-row button on a new line. */
#modelGlassPanel button[onclick^="addGlassRow"],
details.glass-panel-design button[onclick^="addGlassRow"] {
    display: block;
}

/* DESIGN MODULE OPEN/CLOSE ANIMATION */
details > .details-anim{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows 250ms ease, opacity 200ms ease, transform 200ms ease;
}

details[open] > .details-anim{
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

/* Force 0fr during close animation (JS adds/removes is-closing) */
details[open].is-closing > .details-anim{
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
}

/* Force 0fr during open setup phase (removed via RAF to trigger transition) */
details[open].is-opening > .details-anim{
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
}

.details-inner{
  overflow: hidden;
}

/* Restore overflow once fully open (not during any animation) */
details[open]:not(.is-closing):not(.is-opening):not(.is-opening-anim) > .details-anim > .details-inner {
  overflow: visible;
}

.add-row-btn {
    margin-left: 1em;
}

.add-row-btn:not(.select-rows-btn) {
    min-width: 9em;
}

.select-rows-btn {
    min-width: 8em;
}

.select-col {
    display: none;
}

details.is-selecting .select-col {
    display: table-cell;
}

.notation-col,
.notation-cell {
    width: 2.8em;
    min-width: 2.8em;
    max-width: 2.8em;
    text-align: center;
    font-weight: 600;
    font-size: 0.85em;
    color: #555;
    white-space: nowrap;
    padding: 0;
    box-sizing: border-box;
}

.row-select-hint {
    display: none;
    font-size: 0.82rem;
    color: #666;
    margin-left: 0.5em;
}

details.is-selecting .row-select-hint {
    display: inline;
}

.design-notes {
    padding-left: 1em;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  details > .details-anim{ transition: none; }
}


/* FOR TOGGLING CULVERT DETAILS VISIBILITY */
.table6 [data-id="culvertDetails"] {
  display: contents; /* wrapper doesn't break the grid */
    hidden: true; /* default to hidden */
}

*[hidden] {
    display: none;
}
/*
.table6 [data-id="culvertDetails"][hidden] {
  display: none;
}*/

/* FOR TOGGLING SIGHT GLASS DETAILS VISIBILITY */
.sightGlassRow1, .sightGlassRow2, .sightGlassOffset {
  display: contents; /* wrapper doesn't break the grid */
    hidden: true; /* default to hidden */
}
/*
.sightGlassRow1[hidden], .sightGlassRow2[hidden], .sightGlassOffset[hidden] {
  display: none;
}*/

/* TOGGLING surface option row visibility */
/* Door design colorForm: align to "Please choose..." dropdown column only (21ch + 30em), not Stock Code.
   Include .grid-container2 so track sizing wins over generic .grid-container2 rules. */
.door-design .colorForm.grid-container2 {
    grid-template-columns: minmax(21ch, 21ch) minmax(30em, 30em);
}
/* In 2-column grid, keep label and control on same row (span2 would push control to next row) */
.door-design .colorForm .span2 {
    grid-column: 2;
    justify-self: start;
}
/* Kasa / Kanat profil rengi: same height as other door dropdowns (no extra horizontal padding vs Kapı Fitili) */
.door-design .colorForm select[name="ProfileColor"],
.door-design .colorForm select[name="DoorLeafProfileColor"] {
    height: var(--door-control-height);
    min-height: 0;
}
.door-design .colorForm input[name="CustomProfileColor"],
.door-design .colorForm input[name="addLeafProfileColor"],
.door-design .colorForm input[name="glassFrameColorDetail"] {
    width: 30em;
    max-width: 30em;
    box-sizing: border-box;
    height: var(--door-control-height);
    min-height: 0;
    max-height: 100%;
    padding: 0 0.1em;
    line-height: 1;
    margin: 0;
}

/* Door design: specific single-row controls at 30em width */
.door-design .colorForm select[name="surfaceOption"],      /* Yüzey Seçeneği */
.door-design .colorForm input[name="surfaceDetail1"],      /* Yüzey / Yüzey (İç Oda) */
.door-design .colorForm input[name="surfaceDetail2"],      /* Yüzey (Dış Oda) */
.door-design .colorForm select[name="doorSeal"],           /* Kapı Fitili */
.door-design .colorForm select[name="glassFrameColor"],    /* Cam Çerçeve Rengi */
.door-design .colorForm select[name="addLeafProfile"],     /* Ek Kanat Profili */
.door-design .colorForm select[name="glassTapeColor"],    /* Cam Bant Rengi */
.door-design .colorForm select[name="ProfileColor"],      /* Kasa Profil Rengi */
.door-design .colorForm select[name="DoorLeafProfileColor"] { /* Kanat Profil Rengi */
    width: 30em;
    min-width: 30em;
    max-width: 30em;
    box-sizing: border-box;
}

.colorForm [data-id="surfaceDetails2"] {
    display: contents;
    hidden: true;
}
/*
.colorForm [data-id="surfaceDetails2"][hidden] {
    display: none;
}*/

.design-holder textarea {
    width:50vw;
    height: 10em;
}

/* Hide the <br> spacer after an empty design holder so no gap appears
   when a design type (e.g. Kapı) has no entries added yet. */
.design-holder:empty {
    display: none;
}

.design-holder:empty + br {
    display: none;
}

/*
 * Wide Kapı / design modules: min-width grids and 30em dropdowns exceed many viewports.
 * Contain each holder; overflow-x is a fallback on very narrow windows.
 * zoom: whole form scales like browser zoom ~80% so content fits at actual 100% zoom without Ctrl+minus.
 * Adjust zoom (e.g. 0.85) if text feels too small. Safari/Firefox/Chrome support `zoom` for layout.
 */
.order-form {
    max-width: 100%;
    box-sizing: border-box;
    zoom: 0.8;
}
.design-holder {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    box-sizing: border-box;
}

/* used to wrap rows so that we can easily show hide complete grid rows, but also allows the contained elements to serve as primary grid element */
.gridRowWrapper {
    display: contents;
}
/*
.gridRowWrapper[hidden] {
    display: none;
}*/

.regular-grid {
    display: grid;
}

/* ── Archive page ── */
.archive-empty {
    color: #888;
    font-style: italic;
}

.trash-section {
    margin-top: 2rem;
}

.trash-section h2 {
    margin-top: 0;
    color: #7c1d1d;
}

.trash-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #e0e8e3;
    font-size: 0.88rem;
    background: white;
}

.trash-item:last-child {
    border-bottom: none;
}

.trash-project-name {
    color: #555;
    flex: 1;
}

.trash-delete-form {
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
 * File attachments — toolbar, modals, and file list
 * --------------------------------------------------------------------- */

/* System field + attachment toolbar on one row */
.system-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5em;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}

.requested-delivery-row {
    display: flex;
    align-items: center;
    gap: 0.75em;
    flex-wrap: wrap;
    /* Match gap below system-row (same as space between Sistem row and this row) */
    margin-bottom: 2.5em;
    /* Inset from form left — match .system-color-row */
    padding-left: 1rem;
    box-sizing: border-box;
}

/* Space above Kapı / Cam Panel / … — not on .requested-delivery-row */
#addDesignsButtons {
    margin-top: 1em;
}

.requested-delivery-label {
    white-space: nowrap;
    font-weight: 500;
}

.order-form #requestedDeliveryDate {
    min-width: 10rem;
}

.system-color-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75em;
    /* Breathing room below Kapı / Cam Panel / … button row */
    margin-top: 3em;
    margin-bottom: 0.5em;
    /* Inset from the left edge of the form (tune rem value to taste) */
    padding-left: 1rem;
    box-sizing: border-box;
}

.system-color-field,
.renk-field-wrapper {
    display: grid;
    grid-template-columns: 10.5rem 1fr;
    align-items: center;
    gap: 0.75em;
    width: 100%;
    max-width: 32rem;
}

.system-color-label,
.renk-label {
    white-space: nowrap;
    font-weight: 500;
}

.order-form #sistemRengi,
.order-form #renkColor {
    width: 100%;
    max-width: 18rem;
    min-width: 10rem;
    box-sizing: border-box;
}

.attachment-toolbar {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding-top: 0.1em;
}

.attachment-label {
    margin-right: 0.1em;
}

.attachment-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.28em 0.55em;
    border: 2px solid green;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    transition: background 0.12s;
}

.attachment-icon-btn:hover {
    background: #f0fff4;
}

.attachment-count-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: #1f6b45;
    color: white;
    border-radius: 10px;
    padding: 0.05em 0.4em;
    min-width: 1.2em;
    text-align: center;
    display: none;
}

.attachment-count-badge.visible {
    display: inline-block;
}

/* Modal overlay */
.attachment-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-modal-overlay[hidden] {
    display: none;
}

.attachment-modal {
    background: white;
    border-radius: 12px;
    padding: 1.5em;
    width: min(460px, 90vw);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

.attachment-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25em;
}

.attachment-modal-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

.attachment-modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 0.2em;
    line-height: 1;
    color: #666;
    border-radius: 4px;
}

.attachment-modal-close:hover {
    color: #111;
    background: #f0f0f0;
}

/* Upload drop zone (inside modal) */
.attachment-drop-zone {
    border: 2px dashed #a8c4b0;
    border-radius: 8px;
    padding: 2em 1.5em;
    background: #f3f8f5;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.attachment-drop-zone.drag-over {
    border-color: #1f6b45;
    background: #e8f4ec;
}

.attachment-drop-zone .drop-icon {
    color: #1f6b45;
    margin-bottom: 0.6em;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.attachment-drop-zone p {
    margin: 0.3em 0;
    color: #555;
    font-size: 0.9rem;
}

.drop-zone-sep {
    color: #888;
    font-size: 0.85rem;
}

.attachment-browse-btn {
    margin-top: 0.6em;
    font-size: 0.88rem;
    padding: 0.3em 1.2em;
}

.attachment-upload-status {
    font-size: 0.85rem;
    color: #555;
    margin: 0.75em 0 0 0;
    text-align: center;
}

.attachment-upload-status.error {
    color: #b91c1c;
}

/* File list inside browser modal */
.attachment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 340px;
    overflow-y: auto;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.9rem;
    padding: 0.5em 0;
    border-bottom: 1px solid #f0f0f0;
}

.attachment-item:last-child {
    border-bottom: none;
}

.attachment-filename {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.attachment-size {
    color: #888;
    font-size: 0.8rem;
    white-space: nowrap;
}

.attachment-download-btn {
    font-size: 0.8rem;
    padding: 0.1em 0.5em;
    border-radius: 4px;
    text-decoration: none;
    border: 2px solid green;
    background: white;
    cursor: pointer;
    color: inherit;
    display: inline-block;
    white-space: nowrap;
}

.attachment-download-btn:hover {
    background: #f0fff4;
    color: inherit;
    text-decoration: none;
}

.attachment-delete-btn {
    font-size: 0.78rem;
    padding: 0.1em 0.4em;
    white-space: nowrap;
}

.attachment-list-empty {
    color: #888;
    font-size: 0.9rem;
    text-align: center;
    margin: 0.5em 0;
}
/* -------------------------------------------------------------------------
   Components module (Task 7.2)
   ------------------------------------------------------------------------- */

details.components-module {
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #c8ddd0;
    margin-bottom: 1em;
    min-width: 45em;
}

details.components-module[open] {
    background: white;
    border: 1px solid #c8ddd0;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 1.5em;
}

details.components-module > summary {
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    transition: background 0.15s;
    cursor: pointer;
    font-weight: inherit;
    margin-bottom: 0;
}

details.components-module > summary:hover {
    background: #e8f4ef;
    color: inherit;
}

details.components-module[open] > summary:hover {
    background: #c8e2d0;
}

details.components-module[open] > summary {
    background: #e8f4ef;
    color: inherit;
    font-weight: 600;
    border-bottom: 1px solid #c8ddd0;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
    padding: 0.45rem 0.75rem;
}

.comp-table-wrapper {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: auto;
    /* Paint containment + overflow promote a GPU compositing layer so
       scrolling within the container never triggers a main-thread repaint */
    contain: paint;
    /* Hide scrollbar — mousewheel/trackpad still scrolls normally */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.comp-table-wrapper::-webkit-scrollbar {
    display: none;
}

.components-table {
    table-layout: fixed;
    width: auto;
    border-collapse: collapse;
    font-size: 0.85rem;
}

/* Column widths — fixed so alignment holds regardless of collapse state. */
.components-table .comp-col-stok { width: 7rem; }
.components-table .comp-col-name { width: 28rem; }
.components-table .comp-col-unit { width: 4rem; }
.components-table .comp-col-qty  { width: 6rem; }
.components-table .comp-col-notes { width: 12rem; }

/* Override the global td,th { text-align: center } */
.components-table th,
.components-table td {
    text-align: left;
}

.components-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-bottom: 2px solid #bbb;
    background: #f9f9f9;
}

.components-table tbody tr {
    border-bottom: 1px solid #e8e8e8;
}

/* Shared heading cell — uses padding-left for indentation */
.comp-heading-cell {
    padding: 0.32rem 0.6rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comp-row-t:hover .comp-heading-cell    { background: #d06b1b; }
.comp-row-h1:hover .comp-heading-cell   { background: #b8956a; }
.comp-row-h2:hover .comp-heading-cell   { background: #f0cf40; }

/* T (title) rows — orange */
.comp-row-t {
    background: #E87722;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.comp-heading-t {
    padding-left: 0.6rem;
}

/* H1 rows — tan */
.comp-row-h1 {
    background: #C8A97E;
    color: #2a1a00;
    font-weight: 600;
    font-size: 0.88rem;
}

.comp-heading-h1 {
    padding-left: 1.6rem;
}

/* H2 rows — yellow */
.comp-row-h2 {
    background: #FFE066;
    color: #3a2e00;
    font-weight: 600;
    font-size: 0.84rem;
}

.comp-heading-h2 {
    padding-left: 2.8rem;
}

/* Chevron indicator inside heading cells */
.comp-chevron {
    display: inline-block;
    font-size: 0.65rem;
    margin-right: 0.45rem;
    vertical-align: middle;
    transition: transform 120ms ease;
}

.comp-section-closed .comp-chevron {
    transform: rotate(-90deg);
}

/* Note rows — non-selectable, blue background */
.comp-row-note {
    background: #ddeeff;
}

.comp-row-note td {
    padding: 0.22rem 0.6rem;
    font-style: italic;
    font-size: 0.9em;
}

/* Component rows */
.comp-row-c {
    cursor: pointer;
}

.comp-row-c td {
    padding: 0.22rem 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-row-c td.comp-name {
    white-space: normal;
    word-break: break-word;
    text-overflow: clip;
}

.comp-row-c:hover {
    background: #f0f0f0;
}

.comp-row-c.comp-selected {
    background: #d4edda;
}

.comp-row-c.comp-selected td {
    box-shadow: inset 0 0 0 1px #5cb85c;
}

/* Mode bar — sits above the table, shows current mode + toggle button */
.comp-mode-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem 0.5rem;
    border-bottom: 1px solid #ddd;
    background: #fafafa;
}

.comp-mode-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.comp-mode-btn {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    border: 1.5px solid green;
    background: white;
    cursor: pointer;
}

.comp-mode-btn:hover {
    background: #f0fff4;
}

.comp-toggle-all-btn {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    border: 1.5px solid #aaa;
    background: white;
    color: #444;
    cursor: pointer;
}

.comp-toggle-all-btn:hover {
    background: #f5f5f5;
}

.comp-search {
    margin-left: auto;
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid #bbb;
    border-radius: 4px;
    min-width: 14rem;
}

.comp-search:focus {
    outline: none;
    border-color: #888;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* Quantity input in the table */
.comp-qty-input {
    width: 5em;
    text-align: right;
    padding: 0.1rem 0.3rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.82rem;
    font-family: inherit;
    -moz-appearance: textfield;
    appearance: textfield;
}

.comp-qty-input::-webkit-outer-spin-button,
.comp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.comp-qty-input:disabled {
    background: transparent;
    border-color: transparent;
    color: #aaa;
    cursor: default;
}

/* Notes column — same editability as Miktar; free text */
.comp-notes-input {
    width: 100%;
    max-width: 12rem;
    box-sizing: border-box;
    text-align: left;
    padding: 0.1rem 0.3rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.82rem;
    font-family: inherit;
}

.comp-notes-input:disabled {
    background: transparent;
    border-color: transparent;
    color: #aaa;
    cursor: default;
}

/* ------------------------------------------------------------------ KK module */

details.kk-module {
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #c8ddd0;
    margin-bottom: 1em;
    /* Collapsed: same width behavior as Kapı / Cam Panel (details[class*="-design"]). Open: full width cap below. */
    width: fit-content;
    min-width: 0;
}

/* Match collapsed design cards — min-width 45em + fit-content header (see details[class*="-design"]:not([open])) */
details.kk-module:not([open]) {
    min-width: 45em;
}

details.kk-module[open] {
    background: white;
    border: 1px solid #c8ddd0;
    border-radius: 6px;
    padding: 0;
    margin-bottom: 1.5em;
    /* Wide content + horizontal scroll in .kk-table-block; cap width when expanded only */
    width: 100%;
    max-width: 83rem;
}

details.kk-module > summary {
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    transition: background 0.15s;
    cursor: pointer;
    font-weight: inherit;
    margin-bottom: 0;
}

details.kk-module > summary:hover {
    background: #e8f4ef;
    color: inherit;
}

details.kk-module[open] > summary:hover {
    background: #c8e2d0;
}

details.kk-module[open] > summary {
    background: #e8f4ef;
    color: inherit;
    font-weight: 600;
    border-bottom: 1px solid #c8ddd0;
    border-radius: 6px 6px 0 0;
    /* Same as details[class*="-design"][open] > summary (Cam Panel, Ahşap, …) */
    margin-bottom: 1em;
    padding: 0.45rem 0.75rem;
}

/*
 * .details-anim is display:grid; .details-inner defaults to min-width:auto (= table max-content).
 * That stretches past details.kk-module max-width and overflow:visible paints outside the card.
 */
details.kk-module > .details-anim > .details-inner {
    min-width: 0;
}

/* Column 2: fixed width — a few em wider than natural short labels, enough for long Yüzey text; no 1fr (avoids full-width stretch and max-content jump) */
.kk-module-form-grid {
    display: grid;
    grid-template-columns: minmax(9ch, 11ch) 18em;
    column-gap: 0.5em;
    row-gap: 0.5em;
    margin-left: 1em;
    /* Space below Kategori / Yüzey block before Boş Satır — same as .glass-panel-design [data-group] sibling gap (1.5em) */
    margin-bottom: 2em;
    padding: 0;
    align-items: center;
    justify-content: start;
}

/* KK Yüzey: hidden unconditionally (.gridRowWrapper uses display:contents; [hidden] alone is unreliable). */
.kk-module-form-grid > .kk-yuzey-manual-row {
    display: none !important;
}

/* Kategori → Yüzey Tipi: same top spacing as old Kategori → Yüzey (row-gap + margin). */
.kk-module-form-grid > .kk-yuzey-tipi-row:not([hidden]) > .col1,
.kk-module-form-grid > .kk-yuzey-tipi-row:not([hidden]) > .kk-yuzey-tipi-select {
    margin-top: 1em; /* + .kk-module-form-grid row-gap 0.5em */
}

/* Yüzey Tipi → Yüzey: match Cam Panel surfaceContainer inner gap (.glass-panel-design [data-group] { gap: 0.5em }) — only grid row-gap, no extra margin */
.kk-module-form-grid > .kk-yuzey-main-row:not([hidden]) > .col1,
.kk-module-form-grid > .kk-yuzey-main-row:not([hidden]) > .kk-yuzey-global-field {
    margin-top: 0;
}

.kk-yuzey-global-field {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Lookup-only: options still built by _kkFillGlobalYuzeySelect */
.kk-yuzey-global-field .kk-yuzey-global {
    display: none;
}

.kk-module-form-grid .kk-kategori-select,
.kk-module-form-grid .kk-yuzey-tipi-select,
.kk-module-form-grid .kk-yuzey-global-input,
.kk-module-form-grid .kk-yuzey-manual-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Boş Satır / Satır Seç: same horizontal start as other module actions (no extra offset) */
.kk-module-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Match spacing between Boş Satır Ekle / Satır Seç elsewhere (.add-row-btn margin-left: 1em each) */
    column-gap: 1.3em;
    row-gap: 0.5em;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

.kk-module-actions .add-row-btn {
    margin-left: 0.5em;
}

.kk-table-block {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
}

/* Table stays full width; spacing below actions without double global table margin */
.kk-table-block table {
    margin: 0.5em 1em 1em 1em;
}

.kk-notlar-input {
    min-width: 12em;
    width: 100%;
    max-width: 22em;
    box-sizing: border-box;
}

/* Fills fixed Çıkışlar column; long labels (System - KK Abbv) stay in dropdown without widening the cell */
.kk-cikislar-select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Cam Glass: longer line between thickness groups; shorter indented line before - Özel rows */
select[name="Glass"] option.glass-select-sep-between-groups {
    color: rgba(0, 0, 0, 0.24);
    font-size: 0.72em;
    line-height: 1;
}

select[name="Glass"] option.glass-select-sep-within-group {
    color: rgba(0, 0, 0, 0.14);
    font-size: 0.62em;
    line-height: 1;
}

.kk-yuzey-manual-input {
    max-width: 100%;
    box-sizing: border-box;
}

.kk-select {
    min-width: 10em;
}

.kk-select.kk-cikislar-select {
    min-width: 0;
}

.kk-boy-select {
    min-width: 7em;
}

.kk-dim-input {
    width: 8.5em;
    -moz-appearance: textfield;
    appearance: textfield;
}

.kk-dim-input::-webkit-outer-spin-button,
.kk-dim-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.kk-en-input {
    width: 5em;
}

.kk-en-col {
    width: 5em;
}

/*
 * KK table: intrinsic total width (like Cam glassTable) — avoids huge gaps when the card is wide.
 * Fixed column widths + fixed layout keep Çıkışlar from growing when a long option is selected.
 * Row control height: same as Cam (no extra min-height/padding — those made KK boxes too tall).
 */
[data-id="kkTable"] {
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0.5em;
    width: max-content;
    max-width: 100%;
    table-layout: fixed;
}

[data-id="kkTable"] th:nth-child(1),
[data-id="kkTable"] td:nth-child(1) {
    width: 2.25rem;
    vertical-align: middle;
}

/* Stok Kodu — Cam Panel style narrow column */
[data-id="kkTable"] th:nth-child(2),
[data-id="kkTable"] td:nth-child(2) {
    width: 10em;
    min-width: 10em;
    max-width: 10em;
    box-sizing: border-box;
    vertical-align: middle;
}

[data-id="kkTable"] td:nth-child(2) input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Stok Kodu — same 10em as KK above; Cam / Ahşap / Jaluzi tables (Jaluzi has fewer cols so this cell was stretching wide). */
[data-id="glassTable"] th:nth-child(2),
[data-id="glassTable"] td:nth-child(2),
[data-id="venetianBlindTable"] th:nth-child(2),
[data-id="venetianBlindTable"] td:nth-child(2),
[data-id="woodTable"] th:nth-child(2),
[data-id="woodTable"] td:nth-child(2) {
    width: 10em;
    min-width: 10em;
    max-width: 10em;
    box-sizing: border-box;
    vertical-align: middle;
}

[data-id="glassTable"] td:nth-child(2) input,
[data-id="venetianBlindTable"] td:nth-child(2) input,
[data-id="woodTable"] td:nth-child(2) input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

[data-id="kkTable"] th:nth-child(3),
[data-id="kkTable"] td:nth-child(3) {
    width: 32rem;
    min-width: 32rem;
    vertical-align: middle;
}

/* Col 4 = En (narrow); col 5 = Boy (dropdown min-width 7em needs more room). Widths were swapped with column order. */
[data-id="kkTable"] th:nth-child(4),
[data-id="kkTable"] td:nth-child(4) {
    width: 4.5rem;
    vertical-align: middle;
}

[data-id="kkTable"] th:nth-child(5),
[data-id="kkTable"] td:nth-child(5) {
    width: 6.5rem;
    vertical-align: middle;
}

[data-id="kkTable"] th:nth-child(6),
[data-id="kkTable"] td:nth-child(6) {
    width: 1.5rem;
    vertical-align: middle;
}

[data-id="kkTable"] th:nth-child(7),
[data-id="kkTable"] td:nth-child(7) {
    width: 18rem;
    vertical-align: middle;
}

[data-id="kkTable"] th:nth-child(8),
[data-id="kkTable"] td:nth-child(8) {
    width: 4.5rem;
    vertical-align: middle;
}