/* ========================================================= CashGuard Theme (LIGHT/DARK) Controlled by: ========================================================= */ html[data-theme="light"] { --bg: #f6f7f9; --panel: #ffffff; --text: #1f2937; --muted: #6b7280; --border: #e5e7eb; --primary: #2563eb; --danger: #dc2626; --success: #16a34a; --soft: #f9fafb; --shadow: 0 10px 25px rgba(0, 0, 0, 0.06); } html[data-theme="dark"] { --bg: #0b0f14; --panel: #121826; --text: #e6edf3; --muted: #9aa4b2; --border: rgba(255, 255, 255, 0.12); --primary: #2f81f7; --danger: #ff5a5f; --success: #34d399; --soft: rgba(255, 255, 255, 0.04); --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* Base */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1100px; margin: 0 auto; padding: 16px; } /* Topbar */ .topbar { background: var(--panel); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; } .logo { font-size: 20px; } .name { font-weight: 800; } .nav { display: flex; align-items: center; gap: 14px; } .user-pill { margin-right: 8px; white-space: nowrap; } /* Cards */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); } /* Typography */ h1 { margin: 0 0 10px; font-size: 22px; } h2 { margin: 18px 0 10px; font-size: 16px; color: var(--muted); font-weight: 700; } .muted { color: var(--muted); font-size: 14px; } .hint { color: var(--muted); font-size: 13px; margin-top: 14px; line-height: 1.4; } /* Forms */ .form { display: grid; gap: 14px; margin-top: 16px; } label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } input, select, textarea { width: 100%; padding: 12px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); outline: none; font-size: 15px; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.18); } /* Grids */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .row { display: flex; align-items: center; } .row.gap { gap: 12px; } .between { justify-content: space-between; } /* Buttons */ .btn { border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 800; } .btn:hover { filter: brightness(0.97); } .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); } /* Denominations (legacy grid - kept) */ .denoms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .denom { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--soft); } .denom-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .denom-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .denom-img { width: 44px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); object-fit: cover; } .denom-label { font-weight: 900; white-space: nowrap; } .qty { text-align: right; } /* ========================================================= NEW: Better layout for "Coupures & Monnaies" Use with: - .grid-denoms (2 columns blocks) - .denom-group (one block) - label.denom-row > span + input ========================================================= */ .grid-denoms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .grid-denoms { grid-template-columns: 1fr; } } .denom-group { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--soft); } .denom-title { font-weight: 800; margin: 0 0 10px; } /* each denom line: label left / input right */ label.denom-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; margin: 10px 0; } label.denom-row > span { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); opacity: 0.9; } /* make sure inputs don't create weird blocks */ label.denom-row input { width: 100%; margin: 0; } /* Totals */ .totals .kpi { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--soft); } .kpi-label { color: var(--muted); font-size: 12px; font-weight: 800; } .kpi-value { font-size: 22px; font-weight: 900; margin-top: 6px; } /* Alerts */ .alert { border: 1px solid var(--border); padding: 12px 14px; border-radius: 12px; background: var(--soft); margin-top: 10px; font-size: 14px; } .alert-error { border-color: rgba(255, 90, 95, 0.5); color: var(--danger); } .alert-success { border-color: rgba(52, 211, 153, 0.5); color: var(--success); } .sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .mt { margin-top: 12px; } .footer { color: var(--muted); font-size: 13px; margin-top: 20px; } /* Tables (manager list) */ .table td, .table th { padding: 10px 12px; vertical-align: middle; white-space: nowrap; } .table input, .table select { width: 110px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; font-size: 0.95rem; background: var(--panel); color: var(--text); } .table .comment-input { width: 260px; } .actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; } .btn-save { border-color: var(--border); } .btn-trash { border-color: var(--border); opacity: 0.75; background: transparent; } .btn-trash:hover { opacity: 1; transform: translateY(-1px); } .inline-form { display: flex; gap: 4px; align-items: center; justify-content: flex-end; } .inline-form input { padding: 4px 6px; font-size: 0.85rem; } .row-form { display: inline; /* garde le form “normal”, évite les bugs Safari/Chrome */ } /* Responsive */ @media (max-width: 760px) { .grid2, .grid3 { grid-template-columns: 1fr; } .denoms { grid-template-columns: repeat(2, 1fr); } } /* ========================= Fix layout "Coupures & Monnaies" ========================= */ .grid-denoms{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; } .denom-group{ border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--soft); overflow: hidden; /* évite le chevauchement visuel */ } .denom-title{ font-weight: 900; margin-bottom: 10px; } .denom-row{ display:grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; margin-top: 10px; } .denom-row span{ color: var(--muted); font-weight: 800; white-space: nowrap; } .denom-row input{ width: 100%; } /* Mobile */ @media (max-width: 760px){ .grid-denoms{ grid-template-columns: 1fr; } } /* Optionnel (recommandé Mac/Safari): enlève les steppers qui peuvent "doubler" visuellement */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } input[type="number"]{ -moz-appearance: textfield; } /* ========================= FIX: Coupures & Monnaies (overlap droite) ========================= */ /* Le container 2 colonnes */ .grid-denoms { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Chaque colonne (Billets / Monnaies) */ .denom-group { width: 100%; min-width: 0; overflow: hidden; /* stoppe les débordements visuels */ } /* Chaque ligne "500€ + input" */ .denom-group label.denom { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center; width: 100%; min-width: 0; margin-top: 10px; /* On neutralise le style "card" précédent de .denom (c’est lui qui crée les rectangles arrondis bizarres) */ border: none; background: transparent; padding: 0; border-radius: 0; } /* Texte à gauche */ .denom-group label.denom > span { white-space: nowrap; color: var(--muted); font-weight: 800; } /* Input à droite : empêche le dépassement */ .denom-group label.denom input { width: 100%; min-width: 0; } /* Mobile: 1 seule colonne */ @media (max-width: 760px) { .grid-denoms { grid-template-columns: 1fr; } } .toast{ position: fixed; right: 16px; bottom: 16px; max-width: 520px; z-index: 9999; box-shadow: 0 10px 30px rgba(0,0,0,.2); border-radius: 10px; overflow: hidden; } .toast.show { animation: cgFadeIn .15s ease-out; } @keyframes cgFadeIn { from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }