/* WoodMaster365 Design System: semantic tokens and shared component primitives. */
:root {
    --wm-color-primary: #0f766e;
    --wm-color-primary-rgb: 15, 118, 110;
    --wm-color-secondary: #334155;
    --wm-color-secondary-rgb: 51, 65, 85;
    --wm-color-surface: #ffffff;
    --wm-color-background: #f4f6fa;
    --wm-color-success: #16a34a;
    --wm-color-warning: #d97706;
    --wm-color-danger: #dc2626;
    --wm-color-info: #2563eb;
    --wm-color-text: #0f172a;
    --wm-color-muted: #64748b;
    --wm-color-border: rgba(15, 23, 42, .11);
    --wm-radius: 14px;
    --wm-shadow-1: 0 10px 24px rgba(15, 23, 42, .07);
    --wm-shadow-2: 0 18px 40px rgba(15, 23, 42, .12);
    --wm-shadow-3: 0 26px 64px rgba(15, 23, 42, .18);
    --wm-space-1: 4px;
    --wm-space-2: 8px;
    --wm-space-3: 16px;
    --wm-space-4: 24px;
    --wm-space-5: 32px;
    --wm-space-6: 48px;
    --wm-space-7: 64px;
    --wm-duration-fast: 150ms;
    --wm-duration-base: 200ms;
    --wm-duration-slow: 300ms;
}

html[data-theme="dark"],
html[data-bs-theme="dark"] {
    --wm-color-surface: #111827;
    --wm-color-background: #0b1220;
    --wm-color-text: #e5edf8;
    --wm-color-muted: #94a3b8;
    --wm-color-border: rgba(226, 232, 240, .12);
    --wm-shadow-1: 0 10px 24px rgba(0, 0, 0, .24);
    --wm-shadow-2: 0 18px 40px rgba(0, 0, 0, .34);
    --wm-shadow-3: 0 26px 64px rgba(0, 0, 0, .44);
}

.wm-text-h1 {
    margin: 0;
    color: var(--wm-color-text);
    font-size: clamp(1.75rem, 2vw, 2.35rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -.035em;
}

.wm-text-h2 {
    margin: 0;
    color: var(--wm-color-text);
    font-size: clamp(1.25rem, 1.4vw, 1.65rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
}

.wm-text-h3 {
    margin: 0;
    color: var(--wm-color-text);
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 750;
}

.wm-text-body {
    color: var(--wm-color-text);
    font-size: .95rem;
    line-height: 1.55;
}

.wm-text-caption {
    color: var(--wm-color-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.wm-text-small {
    color: var(--wm-color-muted);
    font-size: .72rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .02em;
}

.wm-stack {
    display: grid;
    gap: var(--wm-space-3);
}

.wm-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-2);
}

.wm-design-swatch {
    width: 7rem;
    height: 2rem;
    border: 1px solid var(--wm-color-border);
    border-radius: var(--wm-radius);
}

.wm-design-swatch-primary { background: var(--wm-color-primary); }
.wm-design-swatch-secondary { background: var(--wm-color-secondary); }
.wm-design-swatch-surface { background: var(--wm-color-surface); }
.wm-design-swatch-background { background: var(--wm-color-background); }
.wm-design-swatch-success { background: var(--wm-color-success); }
.wm-design-swatch-warning { background: var(--wm-color-warning); }
.wm-design-swatch-danger { background: var(--wm-color-danger); }
.wm-design-swatch-info { background: var(--wm-color-info); }

.wm-button {
    --wm-button-bg: var(--wm-color-primary);
    --wm-button-color: #fff;
    --wm-button-border: transparent;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .62rem 1rem;
    border: 1px solid var(--wm-button-border);
    border-radius: calc(var(--wm-radius) - 4px);
    background: var(--wm-button-bg);
    color: var(--wm-button-color);
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(var(--wm-color-primary-rgb), .16);
    transition: transform var(--wm-duration-fast) ease, box-shadow var(--wm-duration-fast) ease, background var(--wm-duration-fast) ease;
    cursor: pointer;
}

.wm-button:hover {
    color: var(--wm-button-color);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--wm-shadow-1);
}

.wm-button:focus-visible,
.wm-input:focus,
.wm-select:focus,
.wm-textarea:focus {
    outline: 3px solid rgba(var(--wm-color-primary-rgb), .24);
    outline-offset: 2px;
}

.wm-button:disabled,
.wm-button.is-disabled {
    opacity: .58;
    pointer-events: none;
    transform: none;
}

.wm-button-secondary {
    --wm-button-bg: rgba(var(--wm-color-secondary-rgb), .08);
    --wm-button-color: var(--wm-color-secondary);
    --wm-button-border: rgba(var(--wm-color-secondary-rgb), .13);
    box-shadow: none;
}

.wm-button-ghost {
    --wm-button-bg: transparent;
    --wm-button-color: var(--wm-color-secondary);
    --wm-button-border: transparent;
    box-shadow: none;
}

.wm-button-danger {
    --wm-button-bg: var(--wm-color-danger);
    --wm-button-color: #fff;
    box-shadow: 0 8px 20px rgba(220, 38, 38, .16);
}

.wm-button-icon {
    width: 2.5rem;
    padding: 0;
}

.wm-button-sm {
    min-height: 2rem;
    padding: .42rem .7rem;
    font-size: .82rem;
}

.wm-button-lg {
    min-height: 3rem;
    padding: .82rem 1.25rem;
    font-size: 1rem;
}

.wm-button-loading {
    position: relative;
    color: transparent;
}

.wm-button-loading::after {
    content: "";
    width: 1rem;
    height: 1rem;
    position: absolute;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 999px;
    color: #fff;
    animation: wm-spin var(--wm-duration-slow) linear infinite;
}

.wm-field {
    display: grid;
    gap: .45rem;
}

.wm-label {
    color: var(--wm-color-text);
    font-size: .82rem;
    font-weight: 760;
}

.wm-input-wrap {
    position: relative;
}

.wm-input,
.wm-select,
.wm-textarea {
    width: 100%;
    min-height: 2.65rem;
    border: 1px solid var(--wm-color-border);
    border-radius: calc(var(--wm-radius) - 4px);
    background: var(--wm-color-surface);
    color: var(--wm-color-text);
    padding: .62rem .82rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: border-color var(--wm-duration-fast) ease, box-shadow var(--wm-duration-fast) ease;
}

.wm-textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.wm-input-unit {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--wm-color-muted);
    font-size: .78rem;
    font-weight: 750;
}

.wm-input.has-unit {
    padding-right: 3rem;
}

.wm-help {
    color: var(--wm-color-muted);
    font-size: .78rem;
}

.wm-error {
    color: var(--wm-color-danger);
    font-size: .78rem;
    font-weight: 700;
}

.wm-card {
    border: 1px solid var(--wm-color-border);
    border-radius: var(--wm-radius);
    background: var(--wm-color-surface);
    color: var(--wm-color-text);
    box-shadow: var(--wm-shadow-1);
    overflow: hidden;
}

.wm-card-header,
.wm-card-body,
.wm-card-footer {
    padding: var(--wm-space-3);
}

.wm-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wm-space-3);
    border-bottom: 1px solid var(--wm-color-border);
}

.wm-card-dashboard {
    background: linear-gradient(145deg, rgba(var(--wm-color-primary-rgb), .08), transparent 42%), var(--wm-color-surface);
}

.wm-card-info { border-color: rgba(37, 99, 235, .24); }
.wm-card-warning { border-color: rgba(217, 119, 6, .28); }
.wm-card-danger { border-color: rgba(220, 38, 38, .24); }
.wm-card-success { border-color: rgba(22, 163, 74, .24); }

.wm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wm-space-3);
    padding: var(--wm-space-3);
    border: 1px solid var(--wm-color-border);
    border-radius: var(--wm-radius);
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--wm-shadow-1);
    backdrop-filter: blur(16px);
}

.wm-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-2);
}

.wm-table-wrap {
    overflow: auto;
    border: 1px solid var(--wm-color-border);
    border-radius: var(--wm-radius);
    background: var(--wm-color-surface);
    box-shadow: var(--wm-shadow-1);
}

.wm-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.wm-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--wm-color-surface) 94%, var(--wm-color-background));
    color: var(--wm-color-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.wm-table th,
.wm-table td {
    padding: .82rem 1rem;
    border-bottom: 1px solid var(--wm-color-border);
    vertical-align: middle;
}

.wm-tabs {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--wm-color-border);
}

.wm-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--wm-color-muted);
    padding: .78rem 1rem;
    font-weight: 760;
    text-decoration: none;
    white-space: nowrap;
}

.wm-tab:hover,
.wm-tab.is-active {
    color: var(--wm-color-primary);
    border-bottom-color: var(--wm-color-primary);
    text-decoration: none;
}

.wm-property-card,
.wm-inspector-section {
    border: 1px solid var(--wm-color-border);
    border-radius: var(--wm-radius);
    background: var(--wm-color-surface);
    box-shadow: var(--wm-shadow-1);
}

.wm-property-card-header,
.wm-inspector-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wm-space-2);
    padding: var(--wm-space-3);
    border-bottom: 1px solid var(--wm-color-border);
}

.wm-property-card-body,
.wm-inspector-section-body {
    padding: var(--wm-space-3);
}

.wm-toast {
    display: grid;
    gap: .2rem;
    min-width: min(100%, 22rem);
    padding: var(--wm-space-3);
    border: 1px solid var(--wm-color-border);
    border-left: 4px solid var(--wm-color-info);
    border-radius: var(--wm-radius);
    background: var(--wm-color-surface);
    box-shadow: var(--wm-shadow-2);
}

.wm-toast-success { border-left-color: var(--wm-color-success); }
.wm-toast-warning { border-left-color: var(--wm-color-warning); }
.wm-toast-error { border-left-color: var(--wm-color-danger); }
.wm-toast-info { border-left-color: var(--wm-color-info); }

.wm-dialog {
    width: min(100%, 42rem);
    border: 1px solid var(--wm-color-border);
    border-radius: var(--wm-radius);
    background: var(--wm-color-surface);
    box-shadow: var(--wm-shadow-3);
}

.wm-dialog-fullscreen {
    width: min(100%, 92rem);
    min-height: min(80vh, 56rem);
}

.wm-empty {
    display: grid;
    place-items: center;
    gap: var(--wm-space-3);
    padding: var(--wm-space-6) var(--wm-space-4);
    border: 1px dashed var(--wm-color-border);
    border-radius: var(--wm-radius);
    background: color-mix(in srgb, var(--wm-color-surface) 82%, var(--wm-color-background));
    text-align: center;
}

.wm-empty-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--wm-radius);
    color: var(--wm-color-primary);
    background: rgba(var(--wm-color-primary-rgb), .1);
}

.wm-skeleton {
    display: block;
    min-height: 1rem;
    border-radius: calc(var(--wm-radius) - 6px);
    background: linear-gradient(90deg, rgba(148, 163, 184, .14), rgba(148, 163, 184, .28), rgba(148, 163, 184, .14));
    background-size: 220% 100%;
    animation: wm-shimmer 1.2s ease-in-out infinite;
}

.wm-skeleton-card {
    min-height: 9rem;
}

.wm-skeleton-table {
    min-height: 16rem;
}

.wm-skeleton-form {
    min-height: 13rem;
}

.wm-skeleton-designer {
    min-height: 26rem;
}

.wm-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid rgba(var(--wm-color-primary-rgb), .18);
    border-top-color: var(--wm-color-primary);
    border-radius: 999px;
    animation: wm-spin var(--wm-duration-slow) linear infinite;
}

.wm-linear-progress {
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--wm-color-primary-rgb), .12);
}

.wm-linear-progress > span {
    display: block;
    height: 100%;
    width: var(--wm-progress, 42%);
    border-radius: inherit;
    background: var(--wm-color-primary);
}

@keyframes wm-spin {
    to { transform: rotate(360deg); }
}

@keyframes wm-shimmer {
    to { background-position: -220% 0; }
}

@media (max-width: 768px) {
    .wm-toolbar,
    .wm-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .wm-button {
        width: 100%;
    }
}