/* ========= GLOBAL ========= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Inter:wght@400;500;600&display=swap'); :root { --bg-body: #f7f8fb; --bg-white: #ffffff; --text-main: #1e293b; --text-muted: #94a3b8; --accent: #1e293b; --accent-hover: #334155; --border: #e2e8f0; --radius: 12px; --shadow: 0 2px 8px rgba(0,0,0,0.04); /* Bootstrap på varumärkets färger/typsnitt via dess egna CSS-variabler, istället för att skriva om Bootstraps komponenter för hand - sidor som använder Bootstrap direkt (se .sub40-modern nedan) får automatiskt samma navy/Inter-känsla som resten av sidan, gratis. */ --bs-body-font-family: 'Inter', system-ui, sans-serif; --bs-primary: #1e293b; --bs-primary-rgb: 30, 41, 59; --bs-primary-text-emphasis: #1e293b; --bs-link-color: #1e293b; --bs-link-hover-color: #334155; --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 12px; } body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: var(--bg-body); color: var(--text-main); display: flex; min-height: 100vh; } /* ========= SIDEBAR ========= */ .sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 95vh; background: var(--bg-white); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); padding: 25px 0; } .sidebar-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 35px; padding: 0 25px; } .sidebar-logo img { width: 100%; max-width: 190px; height: auto; transition: opacity 0.2s ease; } .sidebar-logo img:hover { opacity: 0.85; } /* ===== NAVIGATION ===== Nav-länkarna i sidomenyn är nu Bootstraps egna .nav/.nav-pills/.nav-link/ .collapse-komponenter (se includes/header.php) - ingen egen CSS behövs för dem längre, bara boxen runt hela menyn. */ .nav-footer { border-top: 1px solid var(--border); padding: 20px 25px; font-size: 14px; color: var(--text-muted); } /* Roterar chevron-ikonen när en menygrupp är öppen (Bootstraps collapse sköter själva visa/dölj, det här är bara den lilla pilanimationen). */ .sub40-caret { transition: transform 0.2s ease; } .nav-link[aria-expanded="true"] .sub40-caret { transform: rotate(90deg); } /* ========= MAIN ========= */ .main { flex: 1; padding: 40px; margin-left: 250px; } /* ========= CARD / TABLE ========= Scopat till body:not(.sub40-modern) .main: sidor som byggts om med Bootstrap sätter (se includes/header.php) och använder Bootstraps egna .card - äldre, ännu inte ombyggda sidors INNEHÅLL fortsätter se exakt likadant ut som innan. Kräver också .main som förälder så att sidomenyn (som ligger utanför .main och alltid är ombyggd, oavsett vilken sida som visas) aldrig råkar träffas av den här äldre regeln bara för att den återanvänder samma klassnamn (.btn m.fl.). */ body:not(.sub40-modern) .main .card { background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; } body:not(.sub40-modern) .main .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } body:not(.sub40-modern) .main .card-header h2 { font-size: 22px; font-weight: 600; color: var(--accent); margin: 0; } /* ========= TABLE ========= */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; border-radius: 8px; overflow: hidden; } .data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; } .data-table th { background: #f8fafc; color: var(--text-muted); font-weight: 500; cursor: pointer; position: relative; user-select: none; transition: background 0.2s ease; } .data-table th:hover { background: #f1f3f8; } .data-table th.sorted { color: #2f6fed; } .data-table th::after { content: "⇅"; font-size: 12px; opacity: 0.3; margin-left: 6px; } .data-table th.sorted.asc::after { content: "▲"; opacity: 0.6; } .data-table th.sorted:not(.asc)::after { content: "▼"; opacity: 0.6; } .data-table tr:hover td { background: #f9fafb; } /* ========= BUTTONS ========= Samma .main-scopning som .card ovan - Bootstrap sköter knappar överallt i sidomenyn (utanför .main, alltid ombyggd) och på ombyggda sidor, den här gäller bara knappar inuti äldre, ännu inte ombyggda sidors innehåll. */ body:not(.sub40-modern) .main button, body:not(.sub40-modern) .main .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; } body:not(.sub40-modern) .main .btn-primary { background: #4c5a77; /* sober blågrå ton */ color: #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } body:not(.sub40-modern) .main .btn-primary:hover { background: #3e4b64; box-shadow: 0 3px 8px rgba(0,0,0,0.12); } .btn-gray { background: #e9edf3; color: #2f3847 !important; padding: 7px 14px; border-radius: 6px; text-decoration: none; font-weight: 500; transition: background 0.2s; } .btn-gray:hover { background: #d6dbe4; } /* ========= STATUS TAGS ========= */ .status { display: inline-block; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; } .status.green { background: #dcfce7; color: #166534; } .status.yellow { background: #fef9c3; color: #854d0e; } .status.gray { background: #f1f5f9; color: #475569; } .status.red { background: #fee2e2; color: #991b1b; } /* ========= FOOTER ========= */ footer { text-align: center; padding: 25px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); background: var(--bg-white); } /* ========= FORM ELEMENTS (select, input etc) ========= */ select, input, textarea { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--text-main); background: #f9fafb; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; outline: none; transition: all 0.15s ease; box-sizing: border-box; width: 100%; appearance: none; /* tar bort systempilen */ -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; } select:hover, input:hover, textarea:hover { border-color: #cbd5e1; background-color: #ffffff; } select:focus, input:focus, textarea:focus { border-color: #64748b; box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.15); background-color: #fff; } /* Gör så att celler med select inte spricker */ .data-table select { max-width: 95%; } /* Markerar sparade och ofullständiga rader */ .saved-row select { background-color: #ecfdf5; border-color: #86efac; } .incomplete select { background-color: #fef2f2; border-color: #fca5a5; } /* ========= FILE UPLOAD / DRAG & DROP ========= */ .upload-zone { background: #f9fafb; border: 2px dashed #cbd5e1; border-radius: 12px; text-align: center; padding: 40px; cursor: pointer; transition: all 0.2s ease; color: #64748b; font-size: 15px; margin-bottom: 20px; } .upload-zone:hover { background: #f1f5f9; border-color: #94a3b8; } .upload-zone.dragover { background: #e0f2fe; border-color: #0284c7; color: #0c4a6e; } .upload-zone .browse { color: #334155; text-decoration: underline; cursor: pointer; } #fileInfo { margin-top: 10px; color: #475569; font-size: 14px; } /* Gör så uppladdningsytan passar card-layouten */ .card .upload-zone { margin-top: 15px; } /* Responsiv anpassning */ @media (max-width: 600px) { .upload-zone { padding: 30px 20px; font-size: 14px; } } /* ========= REVIEW PAGE ========= */ .review-section { border: 1px solid var(--border); border-radius: var(--radius); background: #fafbfc; padding: 1rem 1.2rem; margin-bottom: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .review-section h3 { color: var(--accent); font-size: 1.1rem; margin-bottom: 0.3rem; } .review-section small { color: var(--text-muted); font-size: 0.9rem; display: block; margin-bottom: 0.8rem; } .table-wrapper { overflow-x: auto; } .review-section table { width: 100%; border-collapse: collapse; } .review-section th, .review-section td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; } .review-section th { background: #f8fafc; font-weight: 600; color: var(--text-muted); } .review-section input[type="text"], .input-text { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 13px; background: #fff; text-align: right; transition: all 0.15s ease; } .input-text.left { text-align: left; } .input-text:focus { outline: none; border-color: #64748b; box-shadow: 0 0 0 2px rgba(100,116,139,0.1); } .input-text[readonly] { background: #f3f4f6!important; color: #6b7280; } /* ========= DRAFT VIEW ========= */ .batch-info { background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem; } .batch-info strong { color: var(--accent); } .review-section { border: 1px solid var(--border); border-radius: var(--radius); background: #fafbfc; padding: 1rem 1.2rem; margin-bottom: 1.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.02); } .review-section h3 { color: var(--accent); font-size: 1.1rem; margin-bottom: 0.3rem; } .review-section small { color: var(--text-muted); font-size: 0.9rem; display: block; margin-bottom: 0.8rem; } .table-wrapper { overflow-x: auto; } .review-section table { width: 100%; border-collapse: collapse; } .review-section th, .review-section td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; } .review-section th { background: #f8fafc; font-weight: 600; color: var(--text-muted); } .input-text { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 13px; background: #fff; text-align: right; } .input-text.left { text-align: left; } .input-text[readonly] { background: #f3f4f6; color: #6b7280; } .status-ok td { background: #e9fbe7; } .status-pending td { background: #fff9e6; } .link-btn { display: inline-block; margin-top: 8px; padding: 6px 12px; background: #e9edf3; border-radius: 6px; color: #2f3847; font-weight: 500; text-decoration: none; transition: background 0.2s; } .link-btn:hover { background: #dce3ef; } .excluded { opacity: 0.6; background: #fff0f0; } .btn-exclude { border: none; background: transparent; font-size: 18px; cursor: pointer; color: #dc2626; } .btn-exclude:hover { color: #b91c1c; } .row-excluded td { background: #fff1f0 !important; } .exclude-cell .is-excluded { background: #fee2e2; color:#991b1b !important; } .btn-xs { padding: 6px 10px; font-size: 12px; border-radius: 6px; } /* ========= DRAFT VIEW ENHANCEMENTS ========= */ /* Status-taggar i tabell */ .status-tag { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; } .status-tag.gray { background: #f1f5f9; color: #475569; } .status-tag.yellow { background: #fff7e0; color: #854d0e; } .status-tag.green { background: #dcfce7; color: #166534; } .status-tag.red { background: #fee2e2; color: #991b1b; } .status-cell { text-align: center; } .note-btn { padding: 3px 7px; font-size: 13px; } .exclude-toggle.is-excluded { background: #fee2e2 !important; color: #991b1b !important; } .row-excluded { background-color: #fff3f3; opacity: 0.85; } /* Inline-info till höger om "Öppna i Blikk" */ .cf-info-inline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); } .cf-info-inline strong { color: var(--accent); } .cf-info-inline .sep { color: #cbd5e1; } /* ===== TOAST NOTIS ===== */ .toast { position: fixed; bottom: 25px; right: 25px; background: #1e293b; color: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.4s ease; font-size: 14px; z-index: 9999; } .toast.ok { background: #166534; } .toast.error { background: #b91c1c; } /* ====== Snabb och snygg tooltip för 💬 och 🚫 ====== */ .tooltip { position: absolute; background: rgba(30,41,59,0.9); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4; max-width: 280px; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity 0.1s ease, transform 0.1s ease; z-index: 9999; white-space: pre-line; } .tooltip.show { opacity: 1; transform: translateY(-4px); } /* ===== Justering av Uteslut-kolumn och radutseende ===== */ /* Bara för draft_view */ .exclude-cell button.is-excluded { background: #fee2e2; border: 1px solid #fca5a5; } /* Gör så att hela raden känns i nivå även med status-taggen */ .status-cell { padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle !important; } .exclude-cell span[title] { cursor: help; } /* 4. Tooltip snabbare och närmare ikonen */ .tooltip { transition: opacity 0.05s ease, transform 0.05s ease; transform: translateY(-2px); } /* ===== Modal-bakgrund ===== Scopat till body:not(.sub40-modern) - Bootstrap använder SAMMA klassnamn (.modal, .modal-content) för sin egen modal-komponent, och den här gamla regeln laddas efter Bootstraps CSS i . Utan scopning vinner den i kaskaden och lägger en halvtransparent bakgrund direkt på Bootstraps .modal-element (inte bara backdropen) samt sänker dess z-index under Bootstraps egen .modal-backdrop - resultatet blev att HELA popupen, inklusive innehållet, såg gråtonad/urtvättad ut istället för att bara bakgrunden bakom skulle mörkas. */ body:not(.sub40-modern) .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); /* halvtransparent mörk bakgrund */ display: none; align-items: center; justify-content: center; z-index: 1000; } /* ===== Själva popup-rutan ===== */ body:not(.sub40-modern) .modal-content { background: #fff; border-radius: 10px; padding: 25px 30px; max-width: 600px; width: 90%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); max-height: 80vh; overflow-y: auto; animation: popIn 0.25s ease-out; position: relative; /* ⬅️ viktig för att kunna placera krysset inuti */ } /* ===== Rubrik och stängknapp ===== */ body:not(.sub40-modern) .modal-content h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.3rem; color: #333; } body:not(.sub40-modern) .close-btn { position: absolute; top: 15px; right: 20px; font-size: 22px; color: #777; cursor: pointer; transition: color 0.2s ease; } body:not(.sub40-modern) .close-btn:hover { color: #000; } /* ===== Anteckningstexten ===== */ body:not(.sub40-modern) #notesContent { font-size: 15px; color: #444; line-height: 1.5; white-space: pre-wrap; } /* ===== Liten öppningsanimation ===== */ @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Gör checkboxen synlig och visa korrekt markering */ input[type="checkbox"] { appearance: auto !important; -webkit-appearance: auto !important; width: auto !important; height: auto !important; opacity: 1 !important; position: static !important; }