/* app.css -- SVG option panel, cards, dropzone and floor chips.

   Three rules that used to live here were removed rather than tokenised:
     - .main-content, which redefined main.css's rule with no margin-left. The
       two disagreed and which one won depended on the conditional main.css link.
     - .btn-primary and a bare `a` colour, both duplicating main.css. Button and
       link theming now lives once, in tokens.css.
     - A second grey palette (#111827 / #6b7280 / #d1d5db) that redefined
       .btn-primary again as near-black, directly contradicting the brand colour. */

.login-title {
    font-size: var(--tibi-fs-heading);
    font-weight: 600;
    color: var(--tibi-brand);
}

/*SVG STYLE*/
.svg-options .svg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--tibi-sp-4)}
/* Layout / Typography / Colors (hex): the BBMI sheet stacks these as plain
   labelled groups (H8, H15, H21 -- 8pt bold #383838), with no panel around
   them. */
.svg-options .opt-group{background:transparent;border:0;padding:0}
.svg-options .opt-title{font-weight:700;color:var(--tibi-ink-muted);margin-bottom:var(--tibi-sp-2)}
.svg-options .opt-subtitle{font-size:var(--tibi-fs-base);color:var(--tibi-ink-muted);margin-top:var(--tibi-sp-2);margin-bottom:var(--tibi-sp-1)}
.svg-options label{display:flex;flex-direction:column;gap:var(--tibi-sp-1);margin-bottom:var(--tibi-sp-2)}
.svg-options .w-100{width:100%}

/* switches simple (checkbox + text) */
.svg-options .switch{flex-direction:row;align-items:center;gap:var(--tibi-sp-2);margin-bottom:var(--tibi-sp-1)}
.svg-options .switch input{transform:scale(1.1)}

/* orientation pills */
.svg-options .orientation{display:flex;flex-wrap:wrap;gap:var(--tibi-sp-2);margin:var(--tibi-sp-1) 0 var(--tibi-sp-3)}
.svg-options .pill{border:1px solid var(--tibi-rule);border-radius:var(--tibi-radius);padding:var(--tibi-sp-1) var(--tibi-sp-3);cursor:pointer;user-select:none;white-space:nowrap}
.svg-options .pill.active{background:var(--tibi-rule-light);border-color:var(--tibi-rule-strong)}
.svg-options .pill input{display:none}
.svg-options .style-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--tibi-sp-1);margin:var(--tibi-sp-1) 0 var(--tibi-sp-1)}
.svg-options .style-grid .pill{display:block;text-align:center;padding:var(--tibi-sp-1) var(--tibi-sp-1);font-size:var(--tibi-fs-base);border-radius:var(--tibi-radius)}

/* color swatches */
.svg-options .colors-group .swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--tibi-sp-2)}
.svg-options .colors-group label{flex-direction:row;align-items:center;justify-content:space-between;border:1px dashed var(--tibi-rule);border-radius:var(--tibi-radius);padding:var(--tibi-sp-1) var(--tibi-sp-2);background:var(--tibi-surface)}
.svg-options .btn-reset{margin-top:var(--tibi-sp-2);border:1px solid var(--tibi-rule);background:var(--tibi-surface);border-radius:var(--tibi-radius);padding:var(--tibi-sp-1) var(--tibi-sp-2);cursor:pointer}
.svg-options .btn-reset:hover{background:var(--tibi-rule-light)}
.svg-options .colors-group{position:relative}
.svg-options .color-loader{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(250,250,250,.6);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);border-radius:var(--tibi-radius);z-index:5}
.svg-options .color-loader.is-loading{display:flex}
.svg-options .color-loader .spinner{width:26px;height:26px;border:2.5px solid rgba(126,16,44,.22);border-top-color:var(--tibi-brand);border-radius:50%;animation:svg-spin .7s linear infinite}
@keyframes svg-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.svg-options .color-loader .spinner{animation-duration:1.6s}}

/* font preview */
.svg-options .font-preview{margin-top:var(--tibi-sp-2);border:1px dashed var(--tibi-rule);border-radius:var(--tibi-radius);padding:var(--tibi-sp-2);background:var(--tibi-surface);color:var(--tibi-ink)}
.svg-options select,.svg-options input[type=number],.svg-options input[type=text]{border:1px solid var(--tibi-rule);border-radius:var(--tibi-radius);padding:var(--tibi-sp-1) var(--tibi-sp-2);background:var(--tibi-surface);font-size:var(--tibi-fs-base);line-height:1.2}
.svg-options select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/></svg>");background-repeat:no-repeat;background-position:right .65rem center}

/* The workbook draws no boxes anywhere: a section is a bold label over a rule,
   its content flush to the left margin. .card stays as the markup hook so the
   eleven views that use it need no class changes. */
.card{border:0;border-radius:var(--tibi-radius);box-shadow:none;margin:0 0 var(--tibi-sp-4);background:transparent}
.card-header{padding:0 0 var(--tibi-sp-1);border-bottom:2px solid var(--tibi-rule);background:transparent;font-weight:700;font-size:var(--tibi-fs-panel);color:var(--tibi-ink)}
.card-body{padding:var(--tibi-sp-3) 0}

.stack{display:flex;flex-direction:column;gap:var(--tibi-sp-1);min-width:240px}
.label{font-size:var(--tibi-fs-base);color:var(--tibi-ink-muted)}
.muted{color:var(--tibi-ink-muted);font-size:var(--tibi-fs-base)}
.mt-2{margin-top:var(--tibi-sp-2)}
.actions{margin-top:var(--tibi-sp-4);display:flex;gap:var(--tibi-sp-2)}

/* Dropzone */
.dropzone{position:relative;border:2px dashed var(--tibi-rule);border-radius:var(--tibi-radius);padding:var(--tibi-sp-4);text-align:center;transition:.2s;background:var(--tibi-surface-alt)}
.dropzone:hover{background:var(--tibi-rule-light)}
.dropzone.is-dragover{background:var(--tibi-rule-light);border-color:var(--tibi-brand)}
.dropzone .dz-title{font-weight:700}
.dropzone .dz-sub{font-size:var(--tibi-fs-base);color:var(--tibi-ink-muted)}

/* Chips for floors */
.chips{display:flex;gap:var(--tibi-sp-2);flex-wrap:wrap;margin-top:var(--tibi-sp-2)}
.chip{border:1px solid var(--tibi-rule);border-radius:var(--tibi-radius);padding:var(--tibi-sp-1) var(--tibi-sp-2);background:var(--tibi-surface);font-weight:600;cursor:pointer}
.chip.active{background:var(--tibi-brand);color:var(--tibi-on-brand);border-color:var(--tibi-brand)}
.badge{margin-left:var(--tibi-sp-1);padding:var(--tibi-sp-1) var(--tibi-sp-1);border-radius:var(--tibi-radius);font-size:var(--tibi-fs-small);font-weight:700}
.badge.unknown{background:var(--tibi-badge-unknown-bg);color:var(--tibi-badge-unknown-fg)}
.badge.main{background:var(--tibi-badge-main-bg);color:var(--tibi-badge-main-fg)}
.badge.attic{background:var(--tibi-badge-attic-bg);color:var(--tibi-badge-attic-fg)}
.badge.basement{background:var(--tibi-badge-basement-bg);color:var(--tibi-badge-basement-fg)}