/* =========================================================
   MOTYW JASNY / CIEMNY
   Plik: theme.css
   Ciemne warianty sa zapiete pod html[data-bs-theme="dark"],
   dzieki czemu razem z nimi przelacza sie tez ciemny tryb
   komponentow Bootstrapa 5.3 (tabele, modale, formularze).
========================================================= */

/* =========================
   PRZELACZNIK W PASKU GORNYM
========================= */

.theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d9e2ef;
    border-radius: 10px;
    background: #f4f7fb;
    color: #33475b;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.theme-switch:hover,
.theme-switch:focus {
    background: #e8f0fe;
    border-color: #3473BA;
    color: #3473BA;
}

.theme-switch:focus-visible {
    outline: 2px solid #3473BA;
    outline-offset: 2px;
}

/* ikona zalezna od aktywnego trybu - w jasnym pokazujemy ksiezyc
   (klikniecie wlaczy ciemny), w ciemnym slonce */
.theme-switch .theme-switch-dark { display: none; }
.theme-switch .theme-switch-light { display: block; }

html[data-bs-theme="dark"] .theme-switch .theme-switch-dark { display: block; }
html[data-bs-theme="dark"] .theme-switch .theme-switch-light { display: none; }

/* w pasku gornym przycisk stoi przy hamburgerze, po lewej stronie -
   kolorowe pigulki modulow zostaja nieprzerwana grupa po prawej */
.theme-switch-top {
    margin-left: 8px;
}

/* na mobile przelacznik siedzi w pierwszym rzedzie paska, przy prawej
   krawedzi - rowno z hamburgerem, dlatego jest nieco mniejszy */
@media (max-width: 1099.98px) {
    .theme-switch-top {
        width: 34px;
        height: 34px;
        margin-left: auto;
        border-radius: 9px;
        font-size: .95rem;
    }
}

html[data-bs-theme="dark"] .theme-switch {
    background: #1b2740;
    border-color: #2c3a54;
    color: #e6edf7;
}

html[data-bs-theme="dark"] .theme-switch:hover,
html[data-bs-theme="dark"] .theme-switch:focus {
    background: #22304d;
    border-color: #5b9bea;
    color: #7fb4f2;
}

/* =========================
   PALETA CIEMNA
========================= */

html[data-bs-theme="dark"] {
    --app-bg: #0b1220;
    --app-surface: #131c2e;
    --app-surface-2: #182338;
    --app-surface-3: #1d2a42;
    --app-border: #26334a;
    --app-ink: #e6edf7;
    --app-muted: #94a4bb;
    --app-accent: #5b9bea;

    /* zmienne dashboardu przedefiniowane na ciemne */
    --dash-border: #26334a;
    --dash-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    --dash-ink: #e6edf7;
    --dash-muted: #94a4bb;

    color-scheme: dark;
}

/* =========================
   SZKIELET STRONY
========================= */

html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .main,
html[data-bs-theme="dark"] .content {
    background: var(--app-bg);
    color: var(--app-ink);
}

html[data-bs-theme="dark"] #sidebar,
html[data-bs-theme="dark"] .js-sidebar,
html[data-bs-theme="dark"] .sidebar-inner {
    background: #0a1424;
    border-right-color: rgba(255, 255, 255, .05);
}

html[data-bs-theme="dark"] .sidebar-link {
    color: #9fb0c8;
}

html[data-bs-theme="dark"] .sidebar-link:hover,
html[data-bs-theme="dark"] .sidebar-link:focus {
    background-color: rgba(255, 255, 255, .07);
    color: #fff;
}

html[data-bs-theme="dark"] nav.navbar {
    background: var(--app-surface);
    border-bottom-color: var(--app-border) !important;
}

html[data-bs-theme="dark"] #sidebar-toggle,
html[data-bs-theme="dark"] .navbar .btn {
    color: var(--app-ink);
}

html[data-bs-theme="dark"] .context-bar {
    background: var(--app-surface);
    border-bottom-color: var(--app-border);
}

html[data-bs-theme="dark"] .context-chip {
    background: #2b3f5c;
    border-color: #2b3f5c;
}

html[data-bs-theme="dark"] .context-chip:hover {
    background: #35506f;
    border-color: #35506f;
}

html[data-bs-theme="dark"] footer,
html[data-bs-theme="dark"] .footer {
    background: var(--app-surface);
    color: var(--app-muted);
    border-top-color: var(--app-border);
}

/* =========================
   POWIERZCHNIE - KARTY, PANELE, MODALE
========================= */

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .dash-date,
html[data-bs-theme="dark"] .dash-card,
html[data-bs-theme="dark"] .stat-card,
html[data-bs-theme="dark"] .billing-panel,
html[data-bs-theme="dark"] .issue-list,
html[data-bs-theme="dark"] .quick-card,
html[data-bs-theme="dark"] .filters-card,
html[data-bs-theme="dark"] .task-filter-card,
html[data-bs-theme="dark"] .task-table-card,
html[data-bs-theme="dark"] .tasks-card,
html[data-bs-theme="dark"] .roles-card,
html[data-bs-theme="dark"] .hourly-card,
html[data-bs-theme="dark"] .calendar-card,
html[data-bs-theme="dark"] .summary-card,
html[data-bs-theme="dark"] .employee-work-card,
html[data-bs-theme="dark"] .permissions-grid,
html[data-bs-theme="dark"] .premium-section-card,
html[data-bs-theme="dark"] .premium-task-modal .modal-content,
html[data-bs-theme="dark"] .premium-info-modal .modal-content,
html[data-bs-theme="dark"] .order-details-modal .modal-content {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-ink);
}

html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer,
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer,
html[data-bs-theme="dark"] .billing-panel-head,
html[data-bs-theme="dark"] .issue-list-head,
html[data-bs-theme="dark"] .dash-card-head,
html[data-bs-theme="dark"] .dash-card-foot,
html[data-bs-theme="dark"] .tasks-card .card-header,
html[data-bs-theme="dark"] .roles-card .card-header,
html[data-bs-theme="dark"] .hourly-card .card-header,
html[data-bs-theme="dark"] .premium-task-body,
html[data-bs-theme="dark"] .premium-task-footer {
    background: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-ink);
}

/* drugorzedne, delikatnie odcinajace sie tla wierszy */
html[data-bs-theme="dark"] .billing-single,
html[data-bs-theme="dark"] .summary-item,
html[data-bs-theme="dark"] .terms-item,
html[data-bs-theme="dark"] .notice-items,
html[data-bs-theme="dark"] .notice-row,
html[data-bs-theme="dark"] .billing-help,
html[data-bs-theme="dark"] .quick-item,
html[data-bs-theme="dark"] .task-status-box,
html[data-bs-theme="dark"] .premium-status-box,
html[data-bs-theme="dark"] .premium-message-box,
html[data-bs-theme="dark"] .info-box,
html[data-bs-theme="dark"] .today-info,
html[data-bs-theme="dark"] .work-row,
html[data-bs-theme="dark"] .total-row,
html[data-bs-theme="dark"] .task-fact,
html[data-bs-theme="dark"] .task-note {
    background: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-ink);
}

/* wiersze z pastelowym tlem trzymaja swoj odcien - tlo ustawiamy nizej */
html[data-bs-theme="dark"] .tint-blue,
html[data-bs-theme="dark"] .tint-green,
html[data-bs-theme="dark"] .tint-orange,
html[data-bs-theme="dark"] .tint-purple,
html[data-bs-theme="dark"] .tint-red {
    border-color: var(--app-border);
    color: var(--app-ink);
}

/* pastelowe tla wierszy zachowuja swoj odcien, tylko ciemniejszy */
html[data-bs-theme="dark"] .tint-blue   { background: #16233a; }
html[data-bs-theme="dark"] .tint-green  { background: #15291f; }
html[data-bs-theme="dark"] .tint-orange { background: #2b2317; }
html[data-bs-theme="dark"] .tint-purple { background: #201c33; }
html[data-bs-theme="dark"] .tint-red    { background: #2d1a1e; }

html[data-bs-theme="dark"] .notice-icon,
html[data-bs-theme="dark"] .quick-icon,
html[data-bs-theme="dark"] .notice-count {
    background: var(--app-surface-3);
    color: var(--app-ink);
}

/* kolorowe kafelki ikon - te same barwy, ciemniejsze tla */
html[data-bs-theme="dark"] .ico-blue   { background: rgba(52, 115, 186, .18);  color: #7fb4f2; }
html[data-bs-theme="dark"] .ico-green  { background: rgba(47, 158, 91, .18);   color: #5fd08c; }
html[data-bs-theme="dark"] .ico-orange { background: rgba(224, 145, 47, .18);  color: #f0b464; }
html[data-bs-theme="dark"] .ico-purple { background: rgba(124, 92, 214, .18);  color: #a78bfa; }
html[data-bs-theme="dark"] .ico-red    { background: rgba(220, 63, 74, .18);   color: #f28b93; }

/* =========================
   TYPOGRAFIA I LINKI
========================= */

html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] label,
html[data-bs-theme="dark"] .card-title {
    color: var(--app-ink);
}

html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary {
    color: var(--app-muted) !important;
}

html[data-bs-theme="dark"] .dash-link,
html[data-bs-theme="dark"] .custom-link,
html[data-bs-theme="dark"] .page-link {
    color: var(--app-accent);
}

html[data-bs-theme="dark"] .order-number-link {
    color: #f28b93;
}

/* =========================
   TABELE
========================= */

html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] .issue-table,
html[data-bs-theme="dark"] .premium-task-table,
html[data-bs-theme="dark"] .tasks-table,
html[data-bs-theme="dark"] .roles-table,
html[data-bs-theme="dark"] .hourly-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-ink);
    color: var(--app-ink);
    background: transparent;
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .issue-table thead th,
html[data-bs-theme="dark"] .premium-task-table thead th,
html[data-bs-theme="dark"] .tasks-table thead th,
html[data-bs-theme="dark"] .roles-table thead th,
html[data-bs-theme="dark"] .hourly-table thead th {
    background: var(--app-surface-2);
    color: var(--app-muted);
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .issue-table td,
html[data-bs-theme="dark"] .issue-table th,
html[data-bs-theme="dark"] .tasks-table td,
html[data-bs-theme="dark"] .tasks-table th,
html[data-bs-theme="dark"] .roles-table td,
html[data-bs-theme="dark"] .roles-table th,
html[data-bs-theme="dark"] .hourly-table td,
html[data-bs-theme="dark"] .hourly-table th {
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .issue-table tbody tr:hover,
html[data-bs-theme="dark"] .tasks-table tbody tr:hover,
html[data-bs-theme="dark"] .roles-table tbody tr:hover,
html[data-bs-theme="dark"] .hourly-table tbody tr:hover,
html[data-bs-theme="dark"] .premium-task-table tbody tr:hover {
    background: var(--app-surface-3);
}

html[data-bs-theme="dark"] .tasks-table tbody tr,
html[data-bs-theme="dark"] .roles-table tbody tr {
    background: transparent;
}

/* =========================
   FORMULARZE I PRZYCISKI
========================= */

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text,
html[data-bs-theme="dark"] .premium-input,
html[data-bs-theme="dark"] .premium-filter-input,
html[data-bs-theme="dark"] .task-filter-input,
html[data-bs-theme="dark"] .task-filter-select,
html[data-bs-theme="dark"] .employee-search-input,
html[data-bs-theme="dark"] .list-pagination-size select {
    background: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-ink);
}

html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] .premium-input::placeholder,
html[data-bs-theme="dark"] .task-filter-input::placeholder {
    color: #6f7f96;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .premium-input:focus,
html[data-bs-theme="dark"] .employee-search-input:focus {
    background: var(--app-surface-2);
    border-color: var(--app-accent);
    color: var(--app-ink);
    box-shadow: 0 0 0 .2rem rgba(91, 155, 234, .2);
}

html[data-bs-theme="dark"] .btn-light,
html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-light-premium,
html[data-bs-theme="dark"] .billing-btn,
html[data-bs-theme="dark"] .billing-help-btn,
html[data-bs-theme="dark"] .billing-help-more,
html[data-bs-theme="dark"] .list-pagination-btn,
html[data-bs-theme="dark"] .premium-ghost-btn,
html[data-bs-theme="dark"] .date-nav-btn,
html[data-bs-theme="dark"] .btn-task-clear,
html[data-bs-theme="dark"] .clear-filter-btn {
    background: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-ink);
}

html[data-bs-theme="dark"] .btn-light:hover,
html[data-bs-theme="dark"] .billing-btn:hover,
html[data-bs-theme="dark"] .list-pagination-btn:hover:not(:disabled):not(.is-active),
html[data-bs-theme="dark"] .premium-ghost-btn:hover {
    background: var(--app-surface-3);
    border-color: var(--app-accent);
    color: #7fb4f2;
}

html[data-bs-theme="dark"] .btn-check:not(:checked) + .btn {
    color: var(--app-ink);
    border-color: var(--app-border);
}

/* =========================
   DROBIAZGI
========================= */

html[data-bs-theme="dark"] hr,
html[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--app-border);
}

html[data-bs-theme="dark"] .dropdown-item {
    color: var(--app-ink);
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus,
html[data-bs-theme="dark"] .billing-help-menu a:hover {
    background: var(--app-surface-3);
    color: #7fb4f2;
}

html[data-bs-theme="dark"] .modal-backdrop.show {
    opacity: .7;
}

html[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-bs-theme="dark"] .search-progress {
    background: var(--app-surface-3);
}

html[data-bs-theme="dark"] .terms-tag,
html[data-bs-theme="dark"] .notice-item-client,
html[data-bs-theme="dark"] .terms-date {
    background: var(--app-surface-3);
    color: var(--app-ink);
}