/* ===== Compact Light Pastel UI – Maksutin-violetti ===== */

/* 1) Design tokens */
:root {
    /* Colors */
    --bg:            #f7f8fb;      /* app tausta */
    --surface:       #ffffff;      /* kortit, paneelit */
    --surface-2:     #fcfcfe;      /* vaihtoehtoinen pinta */
    --text:          #1f2430;      /* pääteksti */
    --text-muted:    #6b7280;      /* toissijainen teksti */
    --border:        #e6e8ee;      /* hienovarainen rajaus */

    /* Brand (Maksutin-tyylinen violetti, pastelli korostukset) */
    --brand-700:     #5f53e6;
    --brand-600:     #6f5ef2;
    --brand:         #7c6ef6;
    --brand-400:     #9e97fa;
    --brand-200:     #e6e4ff;
    --brand-100:     #f1efff;
    --brand-50:      #f9f8ff;

    /* States */
    --success:       #2ea44f;
    --warning:       #f59e0b;
    --danger:        #ef4444;

    /* Effects */
    --radius-lg:     12px;
    --radius-md:     10px;
    --radius-sm:     8px;

    --shadow-1:      0 1px 1px rgba(17, 24, 39, 0.04);
    --shadow-2:      0 2px 6px rgba(17, 24, 39, 0.06);

    /* Compact spacing scale (tiiviimpi kuin default) */
    --sp-1: 2px;
    --sp-2: 4px;
    --sp-3: 6px;
    --sp-4: 8px;
    --sp-5: 12px;
    --sp-6: 16px;

    /* Typography */
    --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;

    /* Focus */
    --focus-ring: 2px solid var(--brand-400);
}

/* 2) Base */
html, body {
        height: 100%;
        /* Page-wide animated gradient background (keeps earlier app styles aligned) */
        background: linear-gradient(120deg,
            rgba(196,181,253,0.55) 0%,
            rgba(251,207,232,0.55) 33%,
            rgba(191,219,254,0.55) 66%,
            rgba(199,210,254,0.55) 100%
        );
        background-size: 300% 300%;
        animation: ticketsGradientMove 12s ease-in-out infinite;
        color: var(--text);
        font-family: var(--font-ui);
        font-size: var(--fs-md);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: none; }

/* 3) Layout: header + sidebar + content */
.app {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 52px 1fr;
    grid-template-areas:
    "sidebar header"
    "sidebar content";
    height: 100dvh;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-areas:
        "header"
        "content";
    }
    .app__sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 80%; max-width: 280px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 50;
    }
    body.sidebar-open .app__sidebar { transform: translateX(0); }
    /* Show header toggle button */
    #sidebarToggleBtn { display: inline-flex !important; }
    /* When sidebar open, darken background clickable overlay via body pseudo not possible: create overlay element in layout? Use box-shadow trick */
}

/* Header */
.app__header {
    grid-area: header;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.12);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: 0 var(--sp-6);
}

/* Sidebar */
.app__sidebar {
    grid-area: sidebar;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.10);
    padding: var(--sp-5) var(--sp-4);
}

.sidebar__section {
    margin-bottom: var(--sp-5);
}
.sidebar__title {
    font-size: var(--fs-xs);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--sp-3);
}
.sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text);
}
.sidebar__item:hover { background: var(--brand-50); }
.sidebar__item--active {
    background: var(--brand-100);
    color: var(--text);
    border: 1px solid var(--brand-200);
}

/* Content area */
.app__content {
    grid-area: content;
    padding: var(--sp-6);
}

/* 4) Cards & panels */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}
.card--padded { padding: var(--sp-6); }
.card__title {
    font-size: var(--fs-lg);
    margin: 0 0 var(--sp-4);
}

/* 5) Buttons */
.btn {
    --_bg: var(--surface);
    --_fg: var(--text);
    --_bd: var(--border);

    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px 10px;                /* compact */
    border-radius: 999px;             /* pillish */
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1;
    box-shadow: none;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .02s;
}

.btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }

/* Primary (solid violet) */
.btn--primary {
    --_bg: var(--brand);
    --_fg: #fff;
    --_bd: var(--brand);
}
.btn--primary:hover { --_bg: var(--brand-600); --_bd: var(--brand-600); }
.btn--primary:disabled { opacity: .6; cursor: not-allowed; }

/* Outline (violetti reuna, pastelli hover) */
.btn--outline {
    --_bg: transparent;
    --_fg: var(--brand-700);
    --_bd: var(--brand-200);
}
.btn--outline:hover {
    --_bg: var(--brand-50);
    --_bd: var(--brand-400);
}

/* Subtle (ghost/pastelli) */
.btn--subtle {
    --_bg: var(--brand-50);
    --_fg: var(--brand-700);
    --_bd: var(--brand-50);
}
.btn--subtle:hover {
    --_bg: var(--brand-100);
    --_bd: var(--brand-200);
}

/* Sizes */
.btn--sm { padding: 4px 8px; font-size: var(--fs-xs); }
.btn--lg { padding: 8px 14px; font-size: var(--fs-md); }

/* 6) Inputs */
.input, .select, .textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
}
.input::placeholder { color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus {
    outline: var(--focus-ring);
    border-color: var(--brand-400);
    background: var(--surface-2);
}

/* 7) Tags / pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: var(--fs-xs);
    border-radius: 999px;
    background: var(--brand-50);
    color: var(--brand-700);
    border: 1px solid var(--brand-100);
}

/* 8) Tables (tiiviit) */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.table th, .table td {
    padding: 8px 10px;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--border);
}
.table thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    text-align: left;
}
.table tr:hover td { background: var(--brand-50); }

/* 9) Utility spacing (compact) */
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-4 { margin-top: var(--sp-4); }
.mb-4 { margin-bottom: var(--sp-4); }
.p-4  { padding: var(--sp-4); }
.p-5  { padding: var(--sp-5); }

/* 10) Task list responsive row */
.task-row {
  display: grid;
  grid-template-columns: 1fr 220px 360px; /* left grows, middle fixed, right fixed */
  align-items: center;
  gap: 10px;
}

/* Subtask row styling */
.subtask-row {
  background-color: #f8fafc;
}
.subtask-row:hover {
  background-color: #f1f5f9 !important;
}

.task-row__left, .task-row__middle, .task-row__right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* allow truncation */
}
.task-row__middle {
  justify-content: flex-start;
}
.task-row__right {
    justify-content: space-between;
}
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1024px) {
  .task-row { grid-template-columns: 1fr 200px 300px; }
}
@media (max-width: 768px) {
  .task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .task-row__left { flex: 1 1 100%; }
  .task-row__middle { flex: 1 1 auto; }
  .task-row__right { flex: 1 1 100%; justify-content: flex-start; gap: 8px; }
}

/* Task list right-side columns (guest | priority | due_date | assignee) */
.task-right-grid {
    display: grid;
    grid-template-columns: 24px 120px 120px 1fr;
    align-items: center;
    gap: 12px;
}
.task-right-grid--no-guest {
    grid-template-columns: 120px 120px 1fr;
}

/* Add a touch more space after the guest icon column */
.task-right-grid .guest-cell {
    margin-right: 6px;
}

/* KPI pastel variants */
.kpi { position: relative; }
.kpi__value { font-size: 20px; font-weight: 700; }
.kpi--danger { background: #fff5f5; border-color: #ffe3e3; }
.kpi--danger .kpi__value { color: #b42318; }
.kpi--info { background: #f5f7ff; border-color: #e6e9ff; }
.kpi--info .kpi__value { color: #3346d3; }
.kpi--queue { background: #f6fff5; border-color: #e3ffe3; }
.kpi--queue .kpi__value { color: #1a7f33; }
.kpi--warning { background: #fffaf0; border-color: #ffefd6; }
.kpi--neutral { background: var(--surface); border-color: var(--border); }

/* Status indicators (ensure subtle pastel) */
.status-indicator { width: 10px; height: 10px; border-radius: 999px; }
.status-queue { background: #898989; }
.status-in-progress { background: #08ed95; }
.status-completed { background: #46ff5e; }

/* Due date colors */
.due-date-overdue { color: #b42318; font-weight: 600; }
.due-date-today { color: #9a3412; font-weight: 600; }
.due-date-upcoming { color: var(--text-muted); }