/*
 * CruisingSuomi UI 1.1.1
 * Yhteiset komponentit kaikille CruisingSuomi-moduuleille.
 */

.cs-app,
.cs-ui-scope {
    color: var(--cs-text);
}

.cs-container {
    width: min(100%, var(--cs-content-width));
    margin-inline: auto;
}

.cs-stack {
    display: grid;
    gap: 1rem;
}

.cs-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.cs-text-muted {
    color: var(--cs-text-muted);
}

.cs-button {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--cs-radius-sm);
    padding: .72rem 1rem;
    min-height: 44px;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}

.cs-button:hover {
    transform: translateY(-1px);
}

.cs-button:focus-visible,
.cs-input:focus-visible,
.cs-select:focus-visible,
.cs-textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cs-primary) 35%, transparent);
    outline-offset: 2px;
}

.cs-button[disabled],
.cs-button.is-loading {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
}

.cs-button--primary {
    background: var(--cs-primary);
    color: #fff;
}

.cs-button--primary:hover {
    background: var(--cs-primary-hover);
}

.cs-button--secondary {
    background: var(--cs-surface-alt);
    border-color: var(--cs-border);
    color: var(--cs-text);
}

.cs-button--ghost {
    background: transparent;
    border-color: var(--cs-border);
    color: var(--cs-text);
}

.cs-button--danger {
    background: var(--cs-danger);
    color: #fff;
}

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

.cs-card__body {
    padding: 1.25rem;
}

.cs-card__header,
.cs-card__footer {
    padding: 1rem 1.25rem;
    background: var(--cs-surface-alt);
}

.cs-card__header {
    border-bottom: 1px solid var(--cs-border);
}

.cs-card__footer {
    border-top: 1px solid var(--cs-border);
}

.cs-card__title {
    margin: 0 0 .5rem;
    color: var(--cs-text);
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--cs-border);
    background: var(--cs-surface-alt);
    color: var(--cs-text);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
}

.cs-badge--free { color: var(--cs-text-muted); }
.cs-badge--pro { color: var(--cs-primary); border-color: var(--cs-primary); }
.cs-badge--ultimate { color: #d6b4ff; border-color: #8f5ed7; }
.cs-badge--success { color: var(--cs-success); border-color: var(--cs-success); }
.cs-badge--warning { color: var(--cs-warning); border-color: var(--cs-warning); }
.cs-badge--danger { color: var(--cs-danger); border-color: var(--cs-danger); }

.cs-alert {
    padding: .85rem 1rem;
    border: 1px solid var(--cs-border);
    border-left-width: 4px;
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface-alt);
    color: var(--cs-text);
}

.cs-alert--info { border-left-color: var(--cs-primary); }
.cs-alert--success { border-left-color: var(--cs-success); }
.cs-alert--warning { border-left-color: var(--cs-warning); }
.cs-alert--danger { border-left-color: var(--cs-danger); }

.cs-field {
    display: grid;
    gap: .4rem;
}

.cs-field__label {
    color: var(--cs-text);
    font-size: .9rem;
    font-weight: 700;
}

.cs-field__help {
    color: var(--cs-text-muted);
    font-size: .82rem;
}

.cs-input,
.cs-select,
.cs-textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface-alt);
    color: var(--cs-text);
    padding: .7rem .8rem;
    font: inherit;
}

.cs-textarea {
    min-height: 120px;
    resize: vertical;
}

.cs-input::placeholder,
.cs-textarea::placeholder {
    color: var(--cs-text-muted);
    opacity: .8;
}

.cs-loader {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--cs-text-muted);
}

.cs-loader__spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--cs-border);
    border-top-color: var(--cs-primary);
    border-radius: 50%;
    animation: cs-spin .8s linear infinite;
}

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

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

.cs-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.cs-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
}

.cs-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 680px);
    max-height: min(88vh, 900px);
    overflow: auto;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    background: var(--cs-surface);
    color: var(--cs-text);
    box-shadow: var(--cs-shadow);
}

.cs-toast-region {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 100000;
    display: grid;
    gap: .7rem;
    width: min(calc(100vw - 2rem), 380px);
    pointer-events: none;
}

.cs-toast {
    padding: .85rem 1rem;
    border: 1px solid var(--cs-border);
    border-left: 4px solid var(--cs-primary);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface);
    color: var(--cs-text);
    box-shadow: var(--cs-shadow);
    pointer-events: auto;
}

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

.cs-skeleton {
    min-height: 1em;
    border-radius: var(--cs-radius-sm);
    background: linear-gradient(90deg, var(--cs-surface-alt), var(--cs-border), var(--cs-surface-alt));
    background-size: 200% 100%;
    animation: cs-skeleton 1.4s ease infinite;
}

@keyframes cs-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-button,
    .cs-loader__spinner,
    .cs-skeleton {
        animation: none;
        transition: none;
    }
}


/* UI 1.1.0 */
.cs-app, .cs-ui-scope { font-family: var(--cs-font-family); font-size: var(--cs-font-size-base); line-height: var(--cs-line-height); }
.cs-grid { display:grid; gap:calc(var(--cs-space-unit) * 4); grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.cs-icon { display:inline-block; flex:none; vertical-align:-.15em; color:currentColor; }
.cs-card--raised { background:var(--cs-surface-raised); }
.cs-checkbox,.cs-radio,.cs-toggle { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; color:var(--cs-text); }
.cs-checkbox input,.cs-radio input { width:1.15rem; height:1.15rem; accent-color:var(--cs-primary); }
.cs-toggle input { position:absolute; opacity:0; pointer-events:none; }
.cs-toggle__track { width:46px; height:26px; border-radius:999px; background:var(--cs-border); padding:3px; transition:background var(--cs-motion-fast) ease; }
.cs-toggle__thumb { display:block; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform var(--cs-motion-fast) ease; }
.cs-toggle input:checked + .cs-toggle__track { background:var(--cs-primary); }
.cs-toggle input:checked + .cs-toggle__track .cs-toggle__thumb { transform:translateX(20px); }
.cs-file { border:1px dashed var(--cs-border); border-radius:var(--cs-radius-md); padding:1rem; background:var(--cs-surface-alt); }
.cs-field.is-invalid .cs-input,.cs-field.is-invalid .cs-select,.cs-field.is-invalid .cs-textarea { border-color:var(--cs-danger); }
.cs-field__error { color:var(--cs-danger); font-size:.82rem; }
.cs-tabs__list { display:flex; gap:.35rem; overflow:auto; border-bottom:1px solid var(--cs-border); }
.cs-tabs__tab { border:0; border-bottom:3px solid transparent; background:transparent; color:var(--cs-text-muted); padding:.75rem 1rem; cursor:pointer; font-weight:700; white-space:nowrap; }
.cs-tabs__tab[aria-selected="true"] { color:var(--cs-primary); border-bottom-color:var(--cs-primary); }
.cs-tabs__panel { padding:1rem 0; }
.cs-accordion { border:1px solid var(--cs-border); border-radius:var(--cs-radius-md); overflow:hidden; }
.cs-accordion__item + .cs-accordion__item { border-top:1px solid var(--cs-border); }
.cs-accordion__button { width:100%; display:flex; justify-content:space-between; gap:1rem; padding:1rem; border:0; background:var(--cs-surface-alt); color:var(--cs-text); font:inherit; font-weight:700; cursor:pointer; text-align:left; }
.cs-accordion__panel { padding:1rem; background:var(--cs-surface); }
.cs-empty-state { display:grid; justify-items:center; gap:.6rem; padding:2rem; text-align:center; border:1px dashed var(--cs-border); border-radius:var(--cs-radius-md); color:var(--cs-text-muted); }
.cs-empty-state h3 { margin:0; color:var(--cs-text); }
.cs-progress { display:grid; gap:.45rem; }
.cs-progress__track { display:block; height:10px; overflow:hidden; border-radius:999px; background:var(--cs-border); }
.cs-progress__bar { display:block; height:100%; border-radius:inherit; background:var(--cs-primary); transition:width var(--cs-motion-normal) ease; }
.cs-progress__label { color:var(--cs-text-muted); font-size:.85rem; }
.cs-breadcrumbs { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; color:var(--cs-text-muted); font-size:.9rem; }
.cs-breadcrumbs a { color:var(--cs-primary); text-decoration:none; }
.cs-table-wrap { overflow:auto; border:1px solid var(--cs-border); border-radius:var(--cs-radius-md); }
.cs-table { width:100%; border-collapse:collapse; color:var(--cs-text); }
.cs-table th,.cs-table td { padding:.8rem 1rem; border-bottom:1px solid var(--cs-border); text-align:left; }
.cs-table th { background:var(--cs-surface-alt); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.cs-notification-center { width:min(100%,420px); border:1px solid var(--cs-border); border-radius:var(--cs-radius-md); background:var(--cs-surface); box-shadow:var(--cs-shadow); }
.cs-notification { display:grid; grid-template-columns:auto 1fr auto; gap:.75rem; padding:1rem; border-bottom:1px solid var(--cs-border); }
.cs-notification:last-child { border-bottom:0; }
.cs-notification.is-unread { background:color-mix(in srgb,var(--cs-primary) 8%,var(--cs-surface)); }
.cs-confirm__actions { display:flex; justify-content:flex-end; gap:.75rem; padding:1rem 1.25rem; border-top:1px solid var(--cs-border); }
.cs-skeleton--line { height:1rem; margin:.45rem 0; }
.cs-skeleton--avatar { width:52px; height:52px; border-radius:50%; }
.cs-skeleton--card { height:180px; border-radius:var(--cs-radius-md); }
.cs-skeleton--list { height:64px; margin:.5rem 0; border-radius:var(--cs-radius-sm); }
.cs-skeleton--chat { height:42px; width:72%; margin:.5rem 0; border-radius:18px; }
.cs-skeleton--table { height:240px; border-radius:var(--cs-radius-md); }
.cs-fade-in { animation:cs-fade-in var(--cs-motion-normal) ease both; }
.cs-slide-up { animation:cs-slide-up var(--cs-motion-normal) ease both; }
@keyframes cs-fade-in { from{opacity:0} to{opacity:1} }
@keyframes cs-slide-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@media (max-width:767px){ .cs-card__body{padding:1rem}.cs-modal{padding:.5rem}.cs-modal__dialog{max-height:94vh;border-radius:var(--cs-radius-md)}.cs-button{width:100%}.cs-inline .cs-button{width:auto}.cs-notification-center{width:100%} }