﻿/* =======================================================================
   Globální styly aplikace SBS-NET.cz Servisní Evidence (Responzivní)
   ======================================================================= */

/* Téma – CSS proměnné */
:root {
    --color-bg-page: #f4f6f9;
    --color-bg-page-overlay: rgba(244, 246, 249, 0.25);
    --color-bg-surface: #ffffff;
    --color-bg-surface-alt: #f8f9fa;
    --color-bg-surface-muted: #f8fafc;
    --color-bg-header: #f1f5f9;
    --color-bg-hover: #f8f9fa;
    --color-bg-hover-row: #f1f5f9;
    --color-bg-input: #ffffff;
    --color-bg-filter-accent: #e8f4fd;
    --color-bg-zebra: #f8fafc;
    --color-bg-table-head: #2c3e50;
    --color-text-primary: #333333;
    --color-text-heading: #2c3e50;
    --color-text-secondary: #666666;
    --color-text-muted: #7f8c8d;
    --color-text-subtle: #64748b;
    --color-text-strong: #0f172a;
    --color-text-table-header: #475569;
    --color-text-on-dark: #ffffff;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-input: #ccd1d9;
    --color-border-input-alt: #cccccc;
    --color-border-table: #dddddd;
    --color-border-table-strong: #cbd5e1;
    --color-border-separator: #eef2f6;
    --color-shadow-sm: rgba(0, 0, 0, 0.05);
    --color-shadow-md: rgba(0, 0, 0, 0.1);
    --color-shadow-card: rgba(15, 23, 42, 0.05);
    --color-overlay: rgba(15, 23, 42, 0.45);
    --color-brand: #e67e22;
    --color-brand-hover: #d35400;
    --color-brand-shadow: rgba(230, 126, 34, 0.22);
    --color-link: var(--color-brand);
    --color-link-hover: var(--color-brand-hover);
    --color-watermark-opacity: 0.38;
    --color-focus-ring: #e67e22;
    --color-focus-ring-shadow: rgba(230, 126, 34, 0.22);
    --color-alert-error-bg: #f8d7da;
    --color-alert-error-text: #721c24;
    --color-alert-error-border: #f5c6cb;
    --color-alert-success-bg: #d4edda;
    --color-alert-success-text: #155724;
    --color-alert-success-border: #c3e6cb;
    --color-alert-warning-bg: #fffbeb;
    --color-alert-warning-text: #92400e;
    --color-alert-warning-border: #fcd34d;
    --color-bulk-bar-bg: #e3f2fd;
    --color-bulk-bar-border: #90caf9;
    --color-bulk-bar-text: #1e88e5;
    --color-bulk-badge-bg: #1e88e5;
    --color-bulk-hint-text: #5c6bc0;
}

[data-theme="dark"] {
    color-scheme: dark;
    --color-bg-page: #0f172a;
    --color-bg-page-overlay: rgba(15, 23, 42, 0.55);
    --color-bg-surface: #1e293b;
    --color-bg-surface-alt: #1a2332;
    --color-bg-surface-muted: #162032;
    --color-bg-header: #334155;
    --color-bg-hover: #334155;
    --color-bg-hover-row: #2d3a4f;
    --color-bg-input: #0f172a;
    --color-bg-filter-accent: #1e3a5f;
    --color-bg-zebra: #1a2332;
    --color-bg-table-head: #334155;
    --color-text-primary: #e2e8f0;
    --color-text-heading: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-subtle: #94a3b8;
    --color-text-strong: #f8fafc;
    --color-text-table-header: #cbd5e1;
    --color-text-on-dark: #f1f5f9;
    --color-border: #334155;
    --color-border-light: #2d3a4f;
    --color-border-input: #475569;
    --color-border-input-alt: #475569;
    --color-border-table: #334155;
    --color-border-table-strong: #475569;
    --color-border-separator: #334155;
    --color-shadow-sm: rgba(0, 0, 0, 0.3);
    --color-shadow-md: rgba(0, 0, 0, 0.4);
    --color-shadow-card: rgba(0, 0, 0, 0.25);
    --color-overlay: rgba(0, 0, 0, 0.65);
    --color-brand: #f39c12;
    --color-brand-hover: #e67e22;
    --color-brand-shadow: rgba(243, 156, 18, 0.32);
    --color-link: var(--color-brand);
    --color-link-hover: var(--color-brand-hover);
    --color-watermark-opacity: 0.1;
    --color-focus-ring: #f39c12;
    --color-focus-ring-shadow: rgba(243, 156, 18, 0.32);
    --color-alert-error-bg: #3f1d24;
    --color-alert-error-text: #fecaca;
    --color-alert-error-border: #7f1d1d;
    --color-alert-success-bg: #14291f;
    --color-alert-success-text: #bbf7d0;
    --color-alert-success-border: #166534;
    --color-alert-warning-bg: #422006;
    --color-alert-warning-text: #fde68a;
    --color-alert-warning-border: #854d0e;
    --color-bulk-bar-bg: #172554;
    --color-bulk-bar-border: #1d4ed8;
    --color-bulk-bar-text: #93c5fd;
    --color-bulk-badge-bg: #2563eb;
    --color-bulk-hint-text: #a5b4fc;
}

/* 1. Reset a základní nastavení */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--color-bg-page);
    color: var(--color-text-primary);
    line-height: 1.6;
    padding-top: var(--app-header-height, 60px);
}

body:has(.login-page-wrapper) {
    padding-top: 0;
}

/* Jemný IT podkres na běžných stránkách (ne na dokumentech k tisku) */
body:not(.servisni-list-page):not(.bg-preview-picker-page) {
    position: relative;
    isolation: isolate;
}
body:not(.servisni-list-page):not(.bg-preview-picker-page)::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--color-bg-page);
    background-image: url('../images/bg-it-watermark.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: var(--color-watermark-opacity);
}
body:not(.servisni-list-page):not(.bg-preview-picker-page)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--color-bg-page-overlay);
}

/* 2. Typografie a odkazy */
h1, h2, h3 {
    color: var(--color-text-heading);
    margin-bottom: 20px;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-link-hover);
}

/* Viditelný focus při navigaci klávesnicí (ne při kliknutí myší) */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px var(--color-focus-ring-shadow);
}

button:focus-visible,
a:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

