:root {
    --tk-navy:              #1e3a5f;
    --tk-navy-dk:           #122540;
    --tk-navy-lt:           #264d7e;
    --tk-gold:              #b8860b;
    --tk-gold-lt:           #d4a843;
    --tk-surface:           #f0f4f8;
    
    --statkortti:           #ffffff;
    --statkortti-border:    #e2e8f0;
    --navy-dk:              #111c35;
    --txt-muted:            #64748b;
    --kortti:               #ffffff;
    --kortti-border:        #d1dce8;

/* Ikoniboksien taustat – käytetään CSS-luokista */
    --icon-boksi-bg-blue:   #dbeafe;
    --icon-boksi-fg-blue:   #1e40af;
    --icon-boksi-bg-green:  #d1fae5;
    --icon-boksi-fg-green:  #065f46;
    --icon-boksi-bg-amber:  #fef3c7;
    --icon-boksi-fg-amber:  #92400e;
    --icon-boksi-bg-red:    #fee2e2;
    --icon-boksi-fg-red:    #991b1b;
    --icon-boksi-bg-indigo: #e0e7ff;
    --icon-boksi-fg-indigo: #3730a3;
    --icon-boksi-bg-orange: #ffedd5;
    --icon-boksi-fg-orange: #9a3412;
    --icon-boksi-bg-slate:  #f1f5f9;
    --icon-boksi-fg-slate:  #475569;    
    
}/*END : :root { */

/* main-sivun tyylit */
/* statistiikka kortit valituista parameteristä */
.statistiikka {
    background: var(--statkortti);
    border: 1px solid var(--statkortti-border);
    border-radius: 10px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s;
    }/*END : .statistiikka {*/
    
.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}/*END : .stat-icon { */
/* kortin kpl-määrä */
.stat-value {
    font-family: 'DM Serif Display', serif;
    font-size: 1.75rem;
    color: var(--navy-dk);
    line-height: 1;
    margin-bottom: 0.2rem;
    }/*END : .stat-value { */
/* kortin otsikko */
.stat-label {
    font-size: 0.78rem;
    color: var(--txt-muted);
    font-weight: 500;
    letter-spacing: 0.03em;
    }/*END : .stat-label { */
    
.icon-color-indigo { background: var(--icon-boksi-bg-indigo); color: var(--icon-boksi-fg-indigo); }
.icon-color-green  { background: var(--icon-boksi-bg-green);  color: var(--icon-boksi-fg-green); }
.icon-color-amber  { background: var(--icon-boksi-bg-amber);  color: var(--icon-boksi-fg-amber); }
.icon-color-red    { background: var(--icon-boksi-bg-red);    color: var(--icon-boksi-fg-red); }

.icon-color-blue   { background: var(--icon-boksi-bg-blue);   color: var(--icon-boksi-fg-blue); }
.icon-color-indigo { background: var(--icon-boksi-bg-indigo); color: var(--icon-boksi-fg-indigo); }
.icon-color-orange { background: var(--icon-boksi-bg-orange); color: var(--icon-boksi-fg-orange); }
.icon-color-slate  { background: var(--icon-boksi-bg-slate);  color: var(--icon-boksi-fg-slate); }

.kortti {}

.kortti-header {
    background: var(--kortti);
    border-bottom: 1px solid var(--kortti-border);
    padding: 1rem 0;    
    }/*END : .kortti-header { */
    
.kortti-title {
    font-family: 'DM Serif Display', serif;
    font-size: 1.05rem;
    color: var(--tk-navy-dk);
    margin: 0;        
    }/*END : .kortti-title { */
    
.kortti-body { padding: 1.25rem; }


.tk-table {
    font-size: 0.875rem;
    margin: 0;
}

.tk-table thead th {
    background: var(--tk-surface);
    color: var(--tk-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-top: none;
    padding: 0.65rem 1rem;
    white-space: nowrap;
    }

.tk-table tbody tr {
    transition: background 0.1s;
}

.tk-table tbody tr:hover {
    background: #f8fafd;
}

.tk-table td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
    border-color: var(--tk-border);
}

/* ---- Badges ---- */
.tk-badge {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.28em 0.7em;
    border-radius: 20px;
}

/*******************************************************************************
 * kirjattuna /css/talokirja.css-tiedostoon
 *
.tk-badge-active   { background: #dcfce7; color: #166534; }
.tk-badge-expiring { background: #fef9c3; color: #854d0e; }
.tk-badge-expired  { background: #fee2e2; color: #991b1b; }
.tk-badge-planned  { background: #dbeafe; color: #1e40af; }
.tk-badge-done     { background: #f3f4f6; color: #374151; }
/*******************************************************************************/