/* DELAD UR style.css (KAN-388 CSS-3): rad 4539-4825, byte-exakt; Placeholders, pills och global slutkaskad. Laddas direkt efter föregående del i index.html. */

/* =============================================================================
PLACEHOLDER / HERO-SURFACES (tema-agnostisk — använder --accent-primary)
Tidigare dupliceringar i atlas-navigator, sunset-horizon, atlas-nebula och
standard-theme — flyttades hit eftersom color-mix-formlerna redan följer
aktivt tema via --accent-primary / --text-primary.
============================================================================= */
#view-inbox.templates-view .template-editor-container,
#view-my-tickets.templates-view .template-editor-container,
#view-templates.templates-view .template-editor-container {
border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent) !important;
border-radius: var(--border-radius-lg) !important;
overflow: hidden !important;
}

/* Generell för ALLA vyers hero-placeholder (samma grepp som carbon-theme) —
   den tidigare 4-vyerslistan missade #view-customers/#view-admin, som då föll
   på basregelns dämpade var(--text-secondary)/0.6 (Patrik-fynd 2026-07-21). */
.hero-placeholder .hero-subtitle {
color: color-mix(in srgb, var(--text-primary) 82%, var(--accent-primary) 18%) !important;
opacity: 0.88 !important;
}

#view-inbox .hero-placeholder .hero-bg-icon,
#view-my-tickets .hero-placeholder .hero-bg-icon,
#view-archive .hero-placeholder .hero-bg-icon,
#view-templates .hero-placeholder .hero-bg-icon,
#view-customers .hero-placeholder .hero-bg-icon,
#view-admin .hero-placeholder .hero-bg-icon {
opacity: 0.10 !important;
}

#view-inbox .hero-placeholder .hero-fg-icon,
#view-my-tickets .hero-placeholder .hero-fg-icon,
#view-archive .hero-placeholder .hero-fg-icon,
#view-templates .hero-placeholder .hero-fg-icon {
opacity: 1 !important;
}

#view-inbox .hero-placeholder .help-trigger,
#view-my-tickets .hero-placeholder .help-trigger,
#view-archive .hero-placeholder .help-trigger,
#view-templates .hero-placeholder .help-trigger {
background: color-mix(in srgb, var(--accent-primary) 8%, transparent) !important;
border-color: color-mix(in srgb, var(--accent-primary) 34%, transparent) !important;
color: color-mix(in srgb, var(--text-primary) 76%, var(--accent-primary) 24%) !important;
}

#view-inbox .filter-input::placeholder,
#view-my-tickets .filter-input::placeholder,
#view-customers .filter-input::placeholder,
#view-archive .filter-input::placeholder,
#view-templates #template-search-input::placeholder,
#view-templates #template-title-input::placeholder,
#view-templates #template-subgroup-input::placeholder,
#view-templates .ql-editor.ql-blank::before {
color: var(--text-secondary) !important;
opacity: 0.72 !important;
font-style: italic;
}

#view-admin .ctpl-surface #ctpl-title::placeholder,
#view-admin .ctpl-surface #ctpl-subgroup::placeholder,
#view-admin .ctpl-surface .ql-editor.ql-blank::before {
color: var(--ctpl-muted-affordance, color-mix(in srgb, var(--text-secondary) 85%, var(--bg-dark-secondary) 15%)) !important;
opacity: 1 !important;
font-style: italic;
}

/* =============================================================================
STATUS-PILLS (standard — används av admin-drift, admin-config, etc.)
============================================================================= */
.status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.status-pill.is-active {
background: color-mix(in srgb, var(--status-success, #00C851) 12%, transparent);
color: var(--status-success, #00C851);
border: 1px solid color-mix(in srgb, var(--status-success, #00C851) 35%, transparent);
}
.status-pill.is-inactive {
background: color-mix(in srgb, var(--status-danger, #ff4444) 12%, transparent);
color: var(--status-danger, #ff4444);
border: 1px solid color-mix(in srgb, var(--status-danger, #ff4444) 35%, transparent);
}
.status-pill.is-warning {
background: color-mix(in srgb, var(--status-warning, #ff9f0a) 12%, transparent);
color: var(--status-warning, #ff9f0a);
border: 1px solid color-mix(in srgb, var(--status-warning, #ff9f0a) 35%, transparent);
}

/* Tomt-tillstånd i listor (inkorg, sökresultat, etc.) */
.empty-state {
padding: 30px;
text-align: center;
opacity: 0.5;
font-style: italic;
font-size: 13px;
color: var(--text-secondary, rgba(255,255,255,0.5));
}

/* Focus-stil på Kunder-sökfältet (inline-style har ingen :focus) */
#customer-search-main:focus {
border-color: var(--accent-primary);
box-shadow: var(--glow-soft);
}

/* =============================================================================
CLOSE-REASON PILL (Avslutad av X / Kunden avslutade / Inaktivitet)
============================================================================= */
/* Headers (detail-view / customers-view / admin-reader) använder ren .pill från
regeln ovan. Garaget-kort använder .close-pill.pill-mini för att passa
ticket-footer-bar (32px hög). */
.close-pill.pill-mini {
font-size: var(--text-badge-min-size) !important;
padding: 2px 7px !important;
border-radius: 10px !important;
gap: 3px !important;
font-weight: 600 !important;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
}

/* Footer-bar layout: gruppera tid + pill till vänster, tag stannar till höger. */
.ticket-footer-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 0 0 auto;
overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL PREMIUM FIXES — 2026-06-07
   Gäller alla teman. Ökar elegans, tar bort visuellt brus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Notes-ikonen: ta bort drop-shadow på hover/aktiv (subtil opacity istället) */
.notes-trigger-btn:hover {
filter: none !important;
}
.notes-trigger-btn.has-notes-active svg {
filter: none !important;
opacity: 1 !important;
}

/* 2. Om-vy UTSEENDE & SYSTEM — info-rader utan enskilda ramar, bara subtil separator */
body #view-about .about-cell .info-item,
body #view-about .about-cell .setting-item {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(128, 128, 128, 0.12) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body #view-about .about-cell .info-item:last-child,
body #view-about .about-cell .setting-item:last-child {
border-bottom: none !important;
}

/* 3. Sidebar footer — ta bort synlig ruta runt admin-profilen */
.sidebar-footer {
border-top: 1px solid rgba(128, 128, 128, 0.14) !important;
background: transparent !important;
}
.sidebar-footer .user-profile,
#user-profile-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}

/* 4. Logo och headertext — inga synliga skuggor på logga och sidtitlar */
.sidebar-logo img,
.brand-logo img,
.tenant-logo,
.atlas-logo,
.sidebar img {
filter: none !important;
box-shadow: none !important;
text-shadow: none !important;
drop-shadow: none !important;
}
.app-name,
.view-title,
h1 {
text-shadow: none !important;
}

/* 5. Bakgrundsbild ENBART i HEM och OM — alla övriga vyer blockerar bilden */
#view-inbox,
#view-my-tickets,
#view-archive,
#view-customers,
#view-templates,
#view-admin {
background-color: var(--bg-color) !important;
background-image: none !important;
}

/* 6. OM-vy: visa bakgrundsbilden (samma --bg-image som HEM/kroppen) */
#view-about {
background-image: var(--bg-image) !important;
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}

/* 7. Mailmall-lista: blockera horisontell overflow av kort */
.layout-split .template-list-container {
overflow-x: hidden !important;
}

/* 8. Flyout-menyn alltid mörk — synlig på alla temabakgrunder */
.card-action-flyout {
background: rgba(20, 20, 26, 0.96) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
.flyout-action-btn {
color: rgba(220, 220, 228, 0.85) !important;
}
.flyout-action-btn:hover {
color: rgba(255, 255, 255, 1) !important;
filter: none !important;
transform: none !important;
}

/* 9. Färgpicker — ta bort OS/browser-default vit ram */
input[type="color"] {
-webkit-appearance: none !important;
appearance: none !important;
border: none !important;
outline: none !important;
background: transparent !important;
padding: 1px !important;
overflow: hidden !important;
cursor: pointer !important;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0 !important;
border: none !important;
background: transparent !important;
}
input[type="color"]::-webkit-color-swatch {
border: none !important;
border-radius: 5px !important;
}
input[type="color"]::-moz-color-swatch {
border: none !important;
border-radius: 5px !important;
}

/* =============================================================================
TILLGÄNGLIGHET — respektera OS-inställningen "minska rörelse" globalt.
Gäller alla animationer och transitions i hela appen (även Electron följer OS).
============================================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

/* =============================================================================
MOBILKNAPPAR — dolda på desktop (Electron + webbläsare).
mobile.css laddas ENBART via <link media="max-width: 768px"> och kan därför
aldrig dölja något ovanför 768px — döljningen MÅSTE ligga här i basen.
Visas på mobil av mobile.css (display: flex !important / .active-regler).
============================================================================= */
#mobile-hamburger,
#mobile-back-btn,
#mobile-overlay {
display: none;
}