/* =============================================================================
   style-worklog.css — WorkLog specifika stilar
   Ladda EFTER tailwind-style.css och style.css från Åkerikontroll CDN
   <link rel="stylesheet" href="https://akerikontroll.se/css/tailwind-style.css?v=10">
   <link rel="stylesheet" href="https://akerikontroll.se/css/style.css?v=10">
   <link rel="stylesheet" href="css/style-worklog.css">
============================================================================= */

/* ============================================================================
   JOBBSTATUS-BLOCK (Startsidan — Inkomna / Pågående / Slutförda)
============================================================================ */
.status-blue {
    background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.08) 100%);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    transition: all 0.2s ease;
}
.status-blue:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.22) 0%, rgba(37,99,235,0.12) 100%);
    border-color: rgba(59,130,246,0.4);
    transform: translateY(-1px);
}

.status-green {
    background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(22,163,74,0.08) 100%);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    transition: all 0.2s ease;
}
.status-green:hover {
    background: linear-gradient(135deg, rgba(34,197,94,0.22) 0%, rgba(22,163,74,0.12) 100%);
    border-color: rgba(34,197,94,0.4);
    transform: translateY(-1px);
}

.status-orange {
    background: linear-gradient(135deg, rgba(249,115,22,0.15) 0%, rgba(234,88,12,0.08) 100%);
    border: 1px solid rgba(249,115,22,0.25);
    border-radius: 24px;
    padding: 1.5rem 2rem;
    transition: all 0.2s ease;
}
.status-orange:hover {
    background: linear-gradient(135deg, rgba(249,115,22,0.22) 0%, rgba(234,88,12,0.12) 100%);
    border-color: rgba(249,115,22,0.4);
    transform: translateY(-1px);
}

/* ============================================================================
   JOBBTABS (Jobbdetalj — Information / Tidsrapporteringar / Material osv)
============================================================================ */
.job-tab {
    padding: 0.625rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0.75rem 0.75rem 0 0;
    border-bottom: 2px solid transparent;
    color: rgb(161,161,170);
    background: transparent;
    transition: all 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
}
.job-tab:hover {
    color: #fff;
    background: rgba(255,255,255,0.03);
}
.job-tab-active {
    color: rgb(245,158,11);
    border-bottom-color: rgb(245,158,11);
    background: rgba(245,158,11,0.05);
}

/* ============================================================================
   KPI-MINI (Mindre KPI-kort för sammanställningar och filter-sektioner)
============================================================================ */
.kpi-mini {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s;
}
.kpi-mini:hover {
    border-color: rgba(255,255,255,0.1);
}
.kpi-mini-label {
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgb(113,113,122);
    margin-bottom: 0.375rem;
}
.kpi-mini-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    font-style: italic;
    letter-spacing: -0.02em;
}

/* ============================================================================
   TILLBAKA-KNAPP (Dev-portal och formulär)
============================================================================ */
.nav-item-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgb(113,113,122);
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}
.nav-item-back:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
}

/* ============================================================================
   AURORA DÄMPAD (dashboard — lite svagare än login-sidan)
============================================================================ */
.aurora-dim {
    opacity: 0.35;
}

/* ============================================================================
   PILL EXTRA FÄRGER
============================================================================ */
.pill-purple {
    background: rgba(168,85,247,0.1);
    color: rgb(192,132,252);
    border-color: rgba(168,85,247,0.2);
}
.pill-red {
    background: rgba(239,68,68,0.1);
    color: rgb(252,165,165);
    border-color: rgba(239,68,68,0.2);
}
.pill-blue {
    background: rgba(59,130,246,0.1);
    color: rgb(147,197,253);
    border-color: rgba(59,130,246,0.2);
}

/* ============================================================================
   LOGO FONT (Om inte redan i Åkerikontroll style.css)
============================================================================ */
.logo-font {
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* ============================================================================
   SUPPORT-CHATT SCROLLBAR
============================================================================ */
#ticketMessages::-webkit-scrollbar {
    width: 4px;
}
#ticketMessages::-webkit-scrollbar-track {
    background: transparent;
}
#ticketMessages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}
#ticketMessages::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

/* ============================================================================
   KALENDER — dag-hover
============================================================================ */
.cal-job {
    transition: opacity 0.15s ease, transform 0.1s ease;
}
.cal-job:hover {
    transform: scale(1.02);
}

/* ============================================================================
   ARTIKEL-TABELL — tidstyp-rad markering
============================================================================ */
tr:has(.time-type-indicator) {
    background: rgba(245,158,11,0.03);
}

/* ============================================================================
   FRÅNVARO — typ-indikator färger
============================================================================ */
.absence-sick      { border-left-color: rgb(239,68,68) !important; }
.absence-vab       { border-left-color: rgb(249,115,22) !important; }
.absence-vacation  { border-left-color: rgb(34,197,94) !important; }
.absence-parental  { border-left-color: rgb(168,85,247) !important; }
.absence-other     { border-left-color: rgb(113,113,122) !important; }

/* ============================================================================
   RESPONSIVT — jobbkort på mobil
============================================================================ */
@media (max-width: 640px) {
    .job-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.6rem;
    }

    .status-blue,
    .status-green,
    .status-orange {
        padding: 1rem 1.25rem;
    }

    .kpi-mini-value {
        font-size: 1rem;
    }
}

/* ============================================================================
   PRINT — tidsrapporter
============================================================================ */
@media print {
    .sidebar,
    header,
    .nav-item,
    .btn-primary,
    .btn-secondary,
    .nav-btn-danger {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .card {
        border: 1px solid #ddd !important;
        background: white !important;
        box-shadow: none !important;
    }

    table th,
    table td {
        color: black !important;
        border-color: #ddd !important;
    }
}