/* ============================================================ Registros Manditur — Main Stylesheet Mobile-first, professional hotel operational records UI ============================================================ */ /* ── Google Font import (fallback: served via in ) ─ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Outfit:wght@300;400;500;600;700;800&display=swap'); /* ── CSS Custom Properties ─────────────────────────────────── */ :root { --primary: #1d3d2f; /* Verde Palma Profundo (Garden) */ --primary-light: #3a5f4d; /* Verde Salvia */ --primary-dark: #0f2219; /* Verde Bosque Oscuro */ --secondary: #c5a880; /* Oro Vainilla (Vanilla) */ --secondary-light: #dec8ab; /* Oro Vainilla Pálido */ --secondary-dark: #98805f; /* Oro Bronce */ --accent: #e07a5f; /* Naranja Coral Cálido */ --success: #2d6a4f; /* Verde de Éxito Elegante */ --success-bg: #e8f5e9; --danger: #b02a37; /* Rojo Burdeos Profundo */ --danger-bg: #fdf2f2; --warning: #d4a373; /* Ámbar Arena */ --warning-bg: #fefae0; --info: #4a7c59; /* Verde Salvia Suave */ --info-bg: #edf4f0; --bg: #fcfaf7; /* Blanco Alabastro Cálido / Crema */ --surface: #ffffff; --border: #eae3db; /* Gris Crema Cálido */ --border-focus: #1d3d2f; --text: #2c2623; /* Espresso / Antracita Cálido */ --text-muted: #7d746d; /* Muted Taupe */ --text-light: #afa79f; --shadow: 0 1px 3px rgba(44,38,35,0.06), 0 1px 2px rgba(44,38,35,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --shadow-lg: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05); --radius: 0.75rem; --radius-sm: 0.5rem; --radius-lg: 1rem; --radius-full: 9999px; --nav-height-bottom: 64px; --sidebar-width: 260px; --topbar-height: 60px; --transition: 0.2s ease; /* Status colors */ --status-pending: #f59e0b; --status-completed: #22c55e; --status-completed-incident: #f97316; --status-out-of-range: #ef4444; --status-not-done-justified: #94a3b8; --status-overdue: #dc2626; --status-reviewed: #3b82f6; --status-blocked: #475569; } /* ── CSS Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: var(--secondary); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font-family: inherit; font-size: inherit; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } /* ── Typography ────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, serif; color: var(--primary); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.15rem; } h4 { font-size: 1rem; } h5 { font-size: 0.9rem; } h6 { font-size: 0.8rem; } p { margin-bottom: 0.75rem; } p:last-child { margin-bottom: 0; } small { font-size: 0.8125rem; color: var(--text-muted); } strong { font-weight: 600; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary); } .text-secondary{ color: var(--secondary); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-info { color: var(--info); } .text-center { text-align: center; } .text-right { text-align: right; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .text-lg { font-size: 1.125rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* ── Layout Utilities ──────────────────────────────────────── */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between{ justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1 1 0%; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .grid { display: grid; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .w-full { width: 100%; } .h-full { height: 100%; } /* Spacing */ .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* ── App Shell Layout ──────────────────────────────────────── */ .app-body { background: var(--bg); min-height: 100vh; } .app-wrapper { display: flex; min-height: 100vh; } .main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; padding-bottom: var(--nav-height-bottom); } @media (min-width: 769px) { .main-content { margin-left: var(--sidebar-width); padding-bottom: 0; } } .page-content { flex: 1; padding: 1.25rem 1rem; } @media (min-width: 769px) { .page-content { padding: 2rem 1.75rem; } } /* ── Topbar ────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 100; background: var(--primary); color: #fff; height: var(--topbar-height); display: flex; align-items: center; padding: 0 1rem; gap: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .topbar-brand { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-brand span { color: var(--secondary-light); } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .topbar-user { display: flex; align-items: center; gap: 0.5rem; } .topbar-user-name { font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.85); display: none; } @media (min-width: 769px) { .topbar { display: none; } } /* Hamburger toggle */ .hamburger { background: none; border: none; color: #fff; cursor: pointer; padding: 0.5rem; border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 4px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; transition: background var(--transition); } .hamburger:hover { background: rgba(255,255,255,0.1); } .hamburger-bar { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; display: block; } .hamburger.is-active .hamburger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.is-active .hamburger-bar:nth-child(2) { opacity: 0; } .hamburger.is-active .hamburger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── Sidebar ───────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-width); background: var(--primary); display: flex; flex-direction: column; z-index: 200; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; overflow-x: hidden; } .sidebar.is-open, .sidebar:focus-within { transform: translateX(0); } @media (min-width: 769px) { .sidebar { transform: translateX(0); box-shadow: 2px 0 12px rgba(0,0,0,0.15); } } /* Sidebar overlay (mobile) */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; backdrop-filter: blur(2px); } .sidebar-overlay.is-active { display: block; } .sidebar-header { padding: 1.5rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .sidebar-logo { display: flex; align-items: center; gap: 0.625rem; } .sidebar-logo-icon { font-size: 1.75rem; line-height: 1; } .sidebar-logo-text { font-size: 0.9rem; font-weight: 700; color: #fff; line-height: 1.25; } .sidebar-logo-sub { font-size: 0.7rem; color: rgba(255,255,255,0.55); font-weight: 400; display: block; margin-top: 2px; } /* Sidebar navigation */ .sidebar-nav { flex: 1; padding: 0.75rem 0; } .sidebar-section-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); padding: 0.75rem 1.25rem 0.25rem; } .sidebar-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; color: rgba(255,255,255,0.75); font-size: 0.9rem; font-weight: 500; border-radius: 0; cursor: pointer; text-decoration: none; transition: background var(--transition), color var(--transition); position: relative; min-height: 48px; } .sidebar-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; } .sidebar-nav-item.active { background: rgba(13,148,136,0.25); color: var(--secondary-light); font-weight: 600; } .sidebar-nav-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--secondary-light); border-radius: 0 2px 2px 0; } .sidebar-nav-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.8; } .sidebar-nav-item.active .sidebar-nav-icon, .sidebar-nav-item:hover .sidebar-nav-icon { opacity: 1; } .sidebar-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: var(--radius-full); min-width: 20px; text-align: center; } /* Sidebar user section */ .sidebar-user { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 0.75rem; } .sidebar-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--secondary); color: #fff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-transform: uppercase; } .sidebar-user-info { flex: 1; min-width: 0; } .sidebar-user-name { font-size: 0.825rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 0.7rem; color: rgba(255,255,255,0.5); } .sidebar-logout { color: rgba(255,255,255,0.5); transition: color var(--transition); display: flex; padding: 0.25rem; border-radius: var(--radius-sm); } .sidebar-logout:hover { color: var(--danger); text-decoration: none; } /* ── Bottom Navigation (Mobile) ────────────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-height-bottom); background: var(--surface); border-top: 1px solid var(--border); display: flex; align-items: stretch; z-index: 150; box-shadow: 0 -2px 12px rgba(0,0,0,0.08); } @media (min-width: 769px) { .bottom-nav { display: none; } } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); font-size: 0.625rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: color var(--transition), background var(--transition); -webkit-tap-highlight-color: transparent; position: relative; min-height: 48px; } .bottom-nav-item:hover { color: var(--secondary); text-decoration: none; background: rgba(13,148,136,0.05); } .bottom-nav-item.active { color: var(--secondary); } .bottom-nav-item.active::after { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: var(--secondary); border-radius: 0 0 2px 2px; } .bottom-nav-icon { font-size: 1.35rem; line-height: 1; position: relative; } .bottom-nav-label { font-size: 0.6rem; letter-spacing: 0.01em; } .bottom-nav-badge { position: absolute; top: -4px; right: -8px; background: var(--danger); color: #fff; font-size: 0.55rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* ── Cards ─────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; } .card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .card-title { font-size: 1rem; font-weight: 600; color: var(--primary); margin: 0; } .card-body { padding: 1.25rem; } .card-footer { padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); background: rgba(241,245,249,0.5); } /* Card grid */ .card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(4, 1fr); } } /* Stats cards */ .stat-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; } .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .stat-icon.primary { background: rgba(30,58,95,0.1); } .stat-icon.secondary { background: rgba(13,148,136,0.1); } .stat-icon.success { background: var(--success-bg); } .stat-icon.danger { background: var(--danger-bg); } .stat-icon.warning { background: var(--warning-bg); } .stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1.1; color: var(--primary); } .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .stat-change { font-size: 0.75rem; font-weight: 600; margin-top: 4px; } .stat-change.up { color: var(--success); } .stat-change.down { color: var(--danger); } /* ── Task Cards ────────────────────────────────────────────── */ .task-list { display: flex; flex-direction: column; gap: 0.625rem; } .task-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); position: relative; } .task-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .task-card-status-bar { width: 5px; flex-shrink: 0; background: var(--text-light); border-radius: var(--radius) 0 0 var(--radius); } .task-card[data-status="pending"] .task-card-status-bar { background: var(--status-pending); } .task-card[data-status="completed"] .task-card-status-bar { background: var(--status-completed); } .task-card[data-status="completed_incident"] .task-card-status-bar { background: var(--status-completed-incident); } .task-card[data-status="out_of_range"] .task-card-status-bar { background: var(--status-out-of-range); } .task-card[data-status="not_done_justified"] .task-card-status-bar { background: var(--status-not-done-justified); } .task-card[data-status="overdue"] .task-card-status-bar { background: var(--status-overdue); } .task-card[data-status="reviewed"] .task-card-status-bar { background: var(--status-reviewed); } .task-card[data-status="blocked"] .task-card-status-bar { background: var(--status-blocked); } .task-card-body { flex: 1; padding: 0.875rem 1rem; display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .task-card-info { flex: 1; min-width: 0; } .task-card-name { font-size: 0.9rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.2rem; } .task-card-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .task-card-shift { font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.25rem; } .task-card-dept { font-size: 0.7rem; color: var(--text-muted); } .task-card-time { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .task-card-action { flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; } /* Overdue pulsing indicator */ .overdue-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--status-overdue); flex-shrink: 0; position: relative; } .overdue-indicator::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--status-overdue); animation: pulse-ring 1.5s ease-out infinite; opacity: 0; } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .task-card[data-status="overdue"] .task-card-name { color: var(--status-overdue); } /* ── Buttons ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid transparent; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); text-decoration: none; white-space: nowrap; min-height: 40px; line-height: 1; -webkit-tap-highlight-color: transparent; user-select: none; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; min-height: 34px; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; min-height: 48px; } .btn-block { width: 100%; } .btn-icon { padding: 0.5rem; min-width: 40px; } .btn-icon-sm { padding: 0.35rem; min-width: 32px; } .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); color: #fff; } .btn-secondary { background: var(--secondary); color: #fff; border-color: var(--secondary); } .btn-secondary:hover { background: var(--secondary-light); border-color: var(--secondary-light); color: #fff; } .btn-success { background: var(--success); color: #fff; border-color: var(--success); } .btn-success:hover { filter: brightness(1.1); color: #fff; } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { filter: brightness(1.1); color: #fff; } .btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); } .btn-warning:hover { filter: brightness(1.1); color: #fff; } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: #fff; } .btn-outline-secondary { background: transparent; color: var(--secondary); border-color: var(--secondary); } .btn-outline-secondary:hover { background: var(--secondary); color: #fff; } .btn-outline-danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn-outline-danger:hover { background: var(--danger); color: #fff; } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--bg); color: var(--text); } .btn-light { background: var(--bg); color: var(--text); border-color: var(--border); } .btn-light:hover { background: var(--border); color: var(--text); } /* ── OK/MAL Toggle Buttons ─────────────────────────────────── */ .btn-toggle-group { display: flex; gap: 0.5rem; flex-wrap: wrap; } .btn-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.625rem 1.25rem; border-radius: var(--radius-full); border: 2px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--transition); min-height: 48px; min-width: 80px; text-transform: uppercase; letter-spacing: 0.03em; -webkit-tap-highlight-color: transparent; } .btn-toggle:hover { border-color: var(--secondary); color: var(--secondary); } .btn-toggle.active-ok, .btn-toggle[data-value="realizado"].active { background: var(--success); border-color: var(--success); color: #fff; } .btn-toggle.active-mal, .btn-toggle[data-value="no_realizado"].active { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-toggle.active-na, .btn-toggle[data-value="na"].active { background: var(--text-light); border-color: var(--text-light); color: #fff; } .btn-toggle-label { font-size: 0.8rem; font-weight: 600; } /* ── Forms ─────────────────────────────────────────────────── */ .form-group { margin-bottom: 1.125rem; } .form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .form-row.cols-2 { grid-template-columns: repeat(2, 1fr); } .form-row.cols-3 { grid-template-columns: repeat(3, 1fr); } } label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; } label .required { color: var(--danger); margin-left: 2px; } .form-control { display: block; width: 100%; padding: 0.625rem 0.875rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 1rem; line-height: 1.5; transition: border-color var(--transition), box-shadow var(--transition); min-height: 48px; -webkit-appearance: none; appearance: none; } .form-control:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(13,148,136,0.15); } .form-control::placeholder { color: var(--text-light); } .form-control-lg { padding: 0.875rem 1rem; font-size: 1.0625rem; min-height: 56px; } .form-control-sm { padding: 0.375rem 0.625rem; font-size: 0.875rem; min-height: 36px; } .form-control:disabled, .form-control[readonly] { background: var(--bg); color: var(--text-muted); cursor: not-allowed; } .form-control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); } .form-control.is-valid { border-color: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.1); } select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; cursor: pointer; } textarea.form-control { resize: vertical; min-height: 100px; } .form-help { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; } .form-error { font-size: 0.78rem; color: var(--danger); margin-top: 0.3rem; display: flex; align-items: center; gap: 0.25rem; } .form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.75rem; } /* Input with icon */ .input-group { position: relative; display: flex; } .input-group .form-control { flex: 1; } .input-group-text { display: flex; align-items: center; padding: 0 0.875rem; background: var(--bg); border: 1.5px solid var(--border); color: var(--text-muted); font-size: 0.875rem; white-space: nowrap; } .input-group-text:first-child { border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .input-group-text:last-child { border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .input-group .form-control:not(:first-child) { border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .input-group .form-control:not(:last-child) { border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); } /* Checkbox & Radio */ .form-check { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0; cursor: pointer; min-height: 44px; } .form-check-input { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 4px; flex-shrink: 0; cursor: pointer; accent-color: var(--secondary); } .form-check-label { font-size: 0.9rem; font-weight: 400; cursor: pointer; margin: 0; } /* ── Temperature Field ──────────────────────────────────────── */ .temp-field-wrapper { position: relative; } .temp-field-wrapper .temp-unit { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.875rem; pointer-events: none; } .temp-field-wrapper .form-control { padding-right: 2.5rem; } .temp-field-wrapper.out-of-range .form-control { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); background: rgba(239,68,68,0.03); } .temp-range-indicator { display: none; align-items: center; gap: 0.375rem; margin-top: 0.4rem; padding: 0.375rem 0.625rem; background: var(--danger-bg); border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--danger); font-weight: 500; } .temp-field-wrapper.out-of-range .temp-range-indicator { display: flex; } .corrective-action-field { display: none; margin-top: 0.75rem; padding: 0.75rem; background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius-sm); } .corrective-action-field.visible { display: block; } /* Cloro field */ .cloro-field-wrapper { position: relative; } .cloro-field-wrapper .cloro-unit { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.75rem; pointer-events: none; white-space: nowrap; } .cloro-field-wrapper.out-of-range .form-control { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); } /* ── Status Badges ──────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.625rem; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; line-height: 1.4; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge-pending { background: rgba(245,158,11,0.15); color: #92400e; } .badge-completed { background: rgba(34,197,94,0.15); color: #15803d; } .badge-completed-incident { background: rgba(249,115,22,0.15); color: #c2410c; } .badge-out-of-range { background: rgba(239,68,68,0.15); color: #b91c1c; } .badge-not-done-justified { background: rgba(148,163,184,0.2); color: #475569; } .badge-overdue { background: rgba(220,38,38,0.15); color: #991b1b; animation: pulse-dot 2s ease-in-out infinite; } .badge-reviewed { background: rgba(59,130,246,0.15); color: #1d4ed8; } .badge-blocked { background: rgba(71,85,105,0.15); color: #334155; } .badge-primary { background: rgba(30,58,95,0.12); color: var(--primary); } .badge-secondary { background: rgba(13,148,136,0.12); color: var(--secondary-dark); } .badge-sm { font-size: 0.6rem; padding: 0.15rem 0.45rem; } .badge-lg { font-size: 0.8rem; padding: 0.35rem 0.875rem; } /* ── Signature Field ────────────────────────────────────────── */ .signature-field { display: flex; align-items: center; gap: 0.625rem; } .signature-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; text-transform: uppercase; border: 2px solid var(--border); } .signature-input { flex: 1; } .signature-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; } /* ── Alerts / Flash Messages ────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--radius-sm); font-size: 0.9rem; border: 1px solid transparent; position: relative; } .alert-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .alert-content { flex: 1; } .alert-close { background: none; border: none; cursor: pointer; padding: 0.25rem; color: inherit; opacity: 0.6; font-size: 1.1rem; line-height: 1; flex-shrink: 0; } .alert-close:hover { opacity: 1; } .alert-success { background: var(--success-bg); color: #15803d; border-color: rgba(34,197,94,0.3); } .alert-danger { background: var(--danger-bg); color: #b91c1c; border-color: rgba(239,68,68,0.3); } .alert-warning { background: var(--warning-bg); color: #92400e; border-color: rgba(245,158,11,0.3); } .alert-info { background: var(--info-bg); color: #1d4ed8; border-color: rgba(59,130,246,0.3); } .flash-messages { padding: 0.75rem 1rem 0; display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 769px) { .flash-messages { padding: 1rem 1.75rem 0; } } /* ── Modal ──────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.6); z-index: 500; display: flex; align-items: flex-end; justify-content: center; padding: 0; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; backdrop-filter: blur(3px); } .modal-overlay.is-open { opacity: 1; visibility: visible; } @media (min-width: 540px) { .modal-overlay { align-items: center; padding: 1rem; } } .modal { background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; transform: translateY(20px); transition: transform 0.25s ease; box-shadow: var(--shadow-lg); } .modal-overlay.is-open .modal { transform: translateY(0); } @media (min-width: 540px) { .modal { border-radius: var(--radius-lg); } } .modal-header { padding: 1.25rem 1.25rem 0.875rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .modal-title { font-size: 1rem; font-weight: 700; color: var(--primary); margin: 0; } .modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.25rem; line-height: 1; padding: 0.25rem; border-radius: var(--radius-sm); min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); } .modal-close:hover { background: var(--bg); color: var(--text); } .modal-body { padding: 1.25rem; } .modal-footer { padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: 0.625rem; justify-content: flex-end; } /* Modal drag handle (mobile sheet) */ .modal-drag-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0.5rem auto -0.25rem; } /* ── Loading Spinner ────────────────────────────────────────── */ .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(13,148,136,0.2); border-top-color: var(--secondary); border-radius: 50%; animation: spin 0.7s linear infinite; } .spinner-sm { width: 16px; height: 16px; border-width: 2px; } .spinner-lg { width: 40px; height: 40px; border-width: 4px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.75); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: inherit; } /* ── Tables ─────────────────────────────────────────────────── */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); } .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table th { background: var(--bg); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .table th.sortable { cursor: pointer; user-select: none; } .table th.sortable:hover { color: var(--text); } .table th .sort-icon { display: inline-block; margin-left: 4px; opacity: 0.4; } .table th.sort-asc .sort-icon, .table th.sort-desc .sort-icon { opacity: 1; color: var(--secondary); } .table td { padding: 0.75rem 1rem; border-bottom: 1px solid rgba(226,232,240,0.7); color: var(--text); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { background: rgba(241,245,249,0.7); } .table-striped tbody tr:nth-child(even) td { background: rgba(241,245,249,0.4); } /* ── Pagination ─────────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 0.375rem; flex-wrap: wrap; padding: 1rem 0; } .pagination-info { font-size: 0.825rem; color: var(--text-muted); text-align: center; padding: 0.5rem 0; } .page-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all var(--transition); } .page-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); text-decoration: none; } .page-link.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; } .page-link.disabled { opacity: 0.4; pointer-events: none; } /* ── Empty State ────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; } .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; } .empty-state-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 0.375rem; } .empty-state-text { font-size: 0.875rem; color: var(--text-muted); max-width: 360px; margin-bottom: 1.25rem; } /* ── Calendar ───────────────────────────────────────────────── */ .calendar-wrapper { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; } .calendar-nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .calendar-title { font-size: 1.05rem; font-weight: 700; color: var(--primary); text-transform: capitalize; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .calendar-weekday { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 0.25rem; background: var(--bg); border-bottom: 1px solid var(--border); } .calendar-day { aspect-ratio: 1; padding: 4px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background var(--transition); min-height: 52px; } .calendar-day:hover { background: var(--bg); } .calendar-day:nth-child(7n) { border-right: none; } .calendar-day.other-month { background: rgba(241,245,249,0.5); } .calendar-day.other-month .calendar-day-num { color: var(--text-light); } .calendar-day.today { background: rgba(13,148,136,0.07); } .calendar-day.today .calendar-day-num { color: var(--secondary); font-weight: 800; } .calendar-day.selected { background: rgba(30,58,95,0.08); outline: 2px solid var(--primary); outline-offset: -2px; } .calendar-day-num { font-size: 0.8rem; font-weight: 600; color: var(--text); line-height: 1; text-align: right; padding-right: 2px; } .calendar-dots { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 2px; } .calendar-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .calendar-dot.pending { background: var(--status-pending); } .calendar-dot.completed { background: var(--status-completed); } .calendar-dot.completed-incident { background: var(--status-completed-incident); } .calendar-dot.out-of-range { background: var(--status-out-of-range); } .calendar-dot.overdue { background: var(--status-overdue); } .calendar-dot.not-done-justified { background: var(--status-not-done-justified); } .calendar-dot.reviewed { background: var(--status-reviewed); } .calendar-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--border); } .legend-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.7rem; color: var(--text-muted); } .legend-dot { width: 8px; height: 8px; border-radius: 50%; } /* ── Checklist Items ────────────────────────────────────────── */ .checklist { display: flex; flex-direction: column; } .checklist-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); transition: background var(--transition); } .checklist-item:last-child { border-bottom: none; } .checklist-item:hover { background: rgba(241,245,249,0.5); } .checklist-item-checkbox { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all var(--transition); cursor: pointer; } .checklist-item.done .checklist-item-checkbox { background: var(--success); border-color: var(--success); color: #fff; } .checklist-item-text { flex: 1; font-size: 0.9rem; } .checklist-item.done .checklist-item-text { text-decoration: line-through; color: var(--text-muted); } /* ── Section / Page Header ──────────────────────────────────── */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .page-header-title { font-size: 1.35rem; font-weight: 800; color: var(--primary); margin: 0; line-height: 1.2; } .page-header-sub { font-size: 0.825rem; color: var(--text-muted); margin-top: 0.25rem; } .page-header-actions { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; } /* Section divider */ .section-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--border); } /* ── Tabs ───────────────────────────────────────────────────── */ .tabs { display: flex; border-bottom: 2px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; margin-bottom: 1.25rem; } .tabs::-webkit-scrollbar { display: none; } .tab-item { display: flex; align-items: center; gap: 0.375rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--transition), border-color var(--transition); text-decoration: none; min-height: 48px; } .tab-item:hover { color: var(--text); text-decoration: none; } .tab-item.active { color: var(--secondary); border-bottom-color: var(--secondary); } /* ── Accordion ──────────────────────────────────────────────── */ .accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .accordion-item { border-bottom: 1px solid var(--border); } .accordion-item:last-child { border-bottom: none; } .accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.125rem; cursor: pointer; background: var(--surface); transition: background var(--transition); min-height: 52px; user-select: none; -webkit-tap-highlight-color: transparent; } .accordion-header:hover { background: var(--bg); } .accordion-title { font-size: 0.9rem; font-weight: 600; color: var(--text); } .accordion-icon { transition: transform 0.2s ease; color: var(--text-muted); font-size: 1rem; } .accordion-item.is-open .accordion-icon { transform: rotate(180deg); } .accordion-body { display: none; padding: 0.875rem 1.125rem; border-top: 1px solid var(--border); background: rgba(241,245,249,0.4); } .accordion-item.is-open .accordion-body { display: block; } /* ── Repeater (Dynamic Rows) ────────────────────────────────── */ .repeater-row { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 0.5rem; } .repeater-fields { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 480px) { .repeater-fields { flex-direction: row; } } .repeater-remove { flex-shrink: 0; margin-top: 0; } @media (min-width: 480px) { .repeater-remove { margin-top: 28px; } } .repeater-add-btn { margin-top: 0.5rem; } /* ── Draft Banner ───────────────────────────────────────────── */ .draft-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; background: var(--warning-bg); border: 1px solid rgba(245,158,11,0.3); border-radius: var(--radius-sm); font-size: 0.8rem; color: #92400e; margin-bottom: 0.75rem; } /* ── Form multi-section (mobile accordion) ──────────────────── */ .form-section { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); margin-bottom: 0.875rem; overflow: hidden; } .form-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.125rem; background: rgba(30,58,95,0.04); border-bottom: 1px solid var(--border); cursor: pointer; min-height: 52px; } .form-section-title { font-size: 0.9rem; font-weight: 700; color: var(--primary); } .form-section-body { padding: 1.125rem; } /* ── Auth Layout ────────────────────────────────────────────── */ .auth-body { min-height: 100vh; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 40%, var(--secondary-dark) 100%); display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; } .auth-container { width: 100%; max-width: 420px; } .auth-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; } .auth-header { padding: 2rem 2rem 1.5rem; text-align: center; background: linear-gradient(180deg, rgba(30,58,95,0.06) 0%, transparent 100%); border-bottom: 1px solid var(--border); } .auth-logo { font-size: 2.75rem; margin-bottom: 0.75rem; } .auth-header h1 { font-size: 1.35rem; color: var(--primary); margin-bottom: 0.25rem; } .auth-header p { font-size: 0.825rem; color: var(--text-muted); margin: 0; } .auth-body-inner { padding: 1.75rem 2rem; } .auth-footer { padding: 0.875rem 2rem; background: var(--bg); border-top: 1px solid var(--border); text-align: center; font-size: 0.75rem; color: var(--text-muted); } /* ── Divider ────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--border); margin: 1.25rem 0; } .divider-text { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.8rem; margin: 1rem 0; } .divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Tooltip ────────────────────────────────────────────────── */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--primary-dark); color: #fff; font-size: 0.72rem; padding: 0.3rem 0.6rem; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 400; } [data-tooltip]:hover::after { opacity: 1; } /* ── Print utilities ────────────────────────────────────────── */ @media print { .sidebar, .bottom-nav, .topbar, .btn, .flash-messages { display: none !important; } .main-content { margin-left: 0; padding-bottom: 0; } .page-content { padding: 0; } .card { box-shadow: none; border: 1px solid #ccc; } } /* ── Responsive Utilities ───────────────────────────────────── */ .mobile-only { display: block; } .desktop-only { display: none; } @media (min-width: 769px) { .mobile-only { display: none !important; } .desktop-only { display: block !important; } } .flex-mobile-only { display: flex; } @media (min-width: 769px) { .flex-mobile-only { display: none !important; } } /* Scrollbar styling (Webkit) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.5); }