/** * css/theme.css * * Gemensamma dark-mode-regler för hela appen (class-strategi på ). * Länkas efter tailwind.css på alla sidor. */ html.dark { color-scheme: dark; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } html.dark body { background-color: #0f172a; color: #e2e8f0; } /* Ytor */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-slate-50 { background-color: #0f172a !important; } html.dark .bg-slate-100 { background-color: #0f172a !important; } html.dark .hover\:bg-slate-50:hover { background-color: #334155 !important; } html.dark .hover\:bg-indigo-50:hover { background-color: #312e81 !important; } html.dark .hover\:bg-indigo-100:hover { background-color: #3730a3 !important; } html.dark .hover\:bg-red-50:hover { background-color: #7f1d1d !important; } /* Text */ html.dark .text-slate-900, html.dark .text-slate-800 { color: #f1f5f9 !important; } html.dark .text-slate-700 { color: #e2e8f0 !important; } html.dark .text-slate-600 { color: #cbd5e1 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #94a3b8 !important; } html.dark .text-slate-300 { color: #64748b !important; } /* Kanter */ html.dark .border-slate-200, html.dark .border-slate-100, html.dark .border-slate-300 { border-color: #334155 !important; } html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; } /* Inputs */ html.dark input, html.dark select, html.dark textarea { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #475569 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } /* Badge / soft fills */ html.dark .bg-indigo-50 { background-color: #312e81 !important; } html.dark .text-indigo-700, html.dark .text-indigo-600 { color: #a5b4fc !important; } html.dark .bg-emerald-50 { background-color: #064e3b !important; } html.dark .text-emerald-600 { color: #6ee7b7 !important; } html.dark .bg-red-50 { background-color: #7f1d1d !important; } html.dark .border-red-200 { border-color: #991b1b !important; } html.dark .bg-green-50 { background-color: #064e3b !important; } html.dark .text-green-700 { color: #6ee7b7 !important; } html.dark .border-green-200 { border-color: #065f46 !important; } /* Tema-knapp */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem; border-radius: 0.5rem; border: 1px solid #cbd5e1; background: #ffffff; color: #334155; font-size: 1.5rem; font-weight: 700; cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; } .theme-toggle-btn:hover { background: #f8fafc; } html.dark .theme-toggle-btn { background: #1e293b; border-color: #475569; color: #e2e8f0; } html.dark .theme-toggle-btn:hover { background: #334155; } /* Auth-sidor: språkflaggor + tema i dashboard-stil (utan app.css) */ .auth-island-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 20; pointer-events: none; } .auth-island { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem; border-radius: 9999px; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset; } .dash-island__langs { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem; border-radius: 9999px; background: #f8fafc; border: 1px solid #e2e8f0; } .dash-island__lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 1.7rem; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 9999px; background: transparent; cursor: pointer; opacity: 0.72; transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .dash-island__lang-btn:hover { opacity: 1; background: rgba(15, 23, 42, 0.05); } .dash-island__lang-btn.is-active { opacity: 1; background: #ffffff; border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .dash-island__flag { display: block; width: 1.25rem; height: 0.85rem; border-radius: 0.15rem; overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1); } .dash-island__theme.theme-toggle-btn, .auth-island__theme.theme-toggle-btn { height: 2rem; min-width: 2rem; padding: 0; border-radius: 9999px; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; box-sizing: border-box; } .auth-brand-mark { width: 3.5rem; height: 3.5rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(145deg, #4f46e5, #312e81); color: #fff; font-weight: 800; font-size: 1.35rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); } html.dark .auth-island { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset; } /* Språk-väljare (äldre select — behålls för bakåtkompatibilitet) */ .lang-select { appearance: none; -webkit-appearance: none; height: 2.25rem; padding: 0 1.6rem 0 0.55rem; border-radius: 0.5rem; border: 1px solid #cbd5e1; background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 0.9rem; color: #334155; font-size: 0.75rem; font-weight: 700; cursor: pointer; } html.dark .lang-select { background-color: #1e293b; border-color: #475569; color: #e2e8f0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); } /* Island i mörkt tema: yta #1e293b (som övriga paneler) */ html.dark .dash-island { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset; } html.dark .dash-island__title { color: #f1f5f9 !important; } html.dark .dash-island__subtitle, html.dark .dash-island__link { color: #94a3b8 !important; } html.dark .dash-island__link:hover { color: #f8fafc !important; background: rgba(255, 255, 255, 0.06) !important; } html.dark .dash-island__langs { background: #0f172a !important; border-color: #334155 !important; } html.dark .dash-island__lang-btn:hover { background: rgba(255, 255, 255, 0.06) !important; } html.dark .dash-island__lang-btn.is-active { background: #334155 !important; border-color: #475569 !important; box-shadow: none; } html.dark .dash-island__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); } html.dark .dash-island__theme.theme-toggle-btn { background-color: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; } html.dark .dash-island__theme.theme-toggle-btn:hover { background-color: #334155 !important; } html.dark .dash-island__cta { background: #ffffff !important; color: #0f172a !important; } html.dark .dash-island__cta:hover { background: #f1f5f9 !important; } html.dark .dash-island__cta-mark { background: #0f172a !important; color: #ffffff !important; } html.dark .dash-island__nav { border-top-color: #334155 !important; } /* Mechanic island — samma yta #1e293b som dashboard */ html.dark .mech-island, html.dark .mech-tabbar-island { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset; } html.dark .mech-island__title { color: #f1f5f9 !important; } html.dark .mech-island__subtitle { color: #94a3b8 !important; } html.dark .mech-island__langs { background: #0f172a !important; border-color: #334155 !important; } html.dark .mech-island__lang-btn:hover { background: rgba(255, 255, 255, 0.06) !important; } html.dark .mech-island__lang-btn.is-active { background: #334155 !important; border-color: #475569 !important; box-shadow: none; } html.dark .mech-island__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); } html.dark .mech-island__theme.theme-toggle-btn { background-color: #0f172a !important; border: 1px solid #475569 !important; color: #e2e8f0 !important; } html.dark .mech-island__cta { background: transparent !important; color: #e2e8f0 !important; } html.dark .mech-island__cta-mark { background: #0f172a !important; border: 1px solid #475569 !important; color: #e2e8f0 !important; } html.dark .mech-tab { color: #94a3b8 !important; } html.dark .mech-tab.is-active { color: #f8fafc !important; background: #475569 !important; border-color: #64748b !important; box-shadow: none; } /* FullCalendar mörkt läge */ html.dark .fc { --fc-border-color: #334155; --fc-page-bg-color: #1e293b; --fc-neutral-bg-color: #0f172a; --fc-today-bg-color: #1e1b4b; --fc-button-bg-color: #1e293b; --fc-button-border-color: #475569; --fc-button-text-color: #e2e8f0; --fc-button-hover-bg-color: #334155; --fc-button-hover-border-color: #64748b; color: #e2e8f0; } html.dark .fc .fc-toolbar-title { color: #f1f5f9 !important; } html.dark .fc .fc-col-header-cell-cushion, html.dark .fc .fc-timegrid-slot-label-cushion, html.dark .fc .fc-daygrid-day-number, html.dark .fc .fc-multimonth-title { color: #cbd5e1 !important; } html.dark .fc .fc-daygrid-day:hover { background-color: #334155; } /* Toast i mörkt läge */ html.dark #toast { background-color: #f1f5f9 !important; color: #0f172a !important; } /* Job-card worked text */ html.dark .job-card-worked { color: #94a3b8; } /* Sidfot: Designed and powered by Nixmax */ .site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 1rem; padding: 1.25rem 1rem 1.5rem; text-align: center; } .site-footer__credit { margin: 0; font-size: 0.75rem; line-height: 1.4; color: #94a3b8; } .site-footer__credit a { color: #64748b; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .site-footer__credit a:hover { color: #334155; } .site-footer__support { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.75rem; border-radius: 9999px; border: 1px solid #cbd5e1; background: #ffffff; color: #334155; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .site-footer__support:hover { background: #f8fafc; border-color: #94a3b8; } html.dark .site-footer__credit { color: #94a3b8; } html.dark .site-footer__credit a { color: #cbd5e1; } html.dark .site-footer__credit a:hover { color: #f1f5f9; } html.dark .site-footer__support { background: #1e293b; border-color: #475569; color: #e2e8f0; } html.dark .site-footer__support:hover { background: #334155; border-color: #64748b; } /* Dashboard calendar sidebar — mörkare strip som sträcker sig i full höjd */ html.dark .calendar-sidebar { background: #0f172a; border-color: #334155; } /* Arbetad tid: Plan / Extra / Totalt (gemensam för dashboard + mekaniker) */ .time-sheet { display: flex; flex-direction: column; gap: 0; width: max-content; max-width: 100%; } .time-sheet__row { display: grid; grid-template-columns: minmax(3.75rem, auto) minmax(1.35rem, auto) auto minmax(1.5rem, auto) auto; column-gap: 0.4rem; align-items: baseline; padding: 0.28rem 0; font-size: 0.875rem; font-weight: 600; line-height: 1.3; } .time-sheet__row + .time-sheet__row { border-top: 1px solid rgba(148, 163, 184, 0.35); } .time-sheet__label { text-align: left; white-space: nowrap; } .time-sheet__num { text-align: right; font-variant-numeric: tabular-nums; min-width: 1.25rem; } .time-sheet__unit { white-space: nowrap; } .time-sheet__row.time-within { color: #16a34a; } .time-sheet__row.time-extra { color: #f97316; } .time-sheet__row.time-total { color: #0f172a; } html.dark .time-sheet__row.time-within { color: #4ade80; } html.dark .time-sheet__row.time-extra { color: #fb923c; } html.dark .time-sheet__row.time-total { color: #f1f5f9; } html.dark .time-sheet__row + .time-sheet__row { border-top-color: rgba(148, 163, 184, 0.28); } .time-sheet--compact .time-sheet__row { font-size: 0.72rem; padding: 0.12rem 0; grid-template-columns: minmax(3rem, auto) minmax(1rem, auto) auto minmax(1.15rem, auto) auto; column-gap: 0.25rem; } .mechanic-stats-card .time-sheet, #mechanicStatsValue .time-sheet { margin-top: 0.35rem; } html.dark .calendar-sidebar__statuses-title { color: #e2e8f0; } html.dark .status-legend--sidebar .status-legend__item { color: #cbd5e1; } html.dark .calendar-sidebar__new-job { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }