/* * style.css — Custom component styles for Indian Automotive Task Manager * Used with Tailwind CDN. Only defines classes NOT covered by Tailwind utilities. * * Primary palette (matches tailwind.config.js): * primary-500: #3A87CC primary-600: #2E72B5 primary-700: #235A91 * Fonts: Inter (loaded via Google Fonts in the HTML ) */ /* ── Base / Body ─────────────────────────────────────────────────── */ html, body { background: radial-gradient(ellipse at 25% 60%, #F5C97A 0%, #FDEBC8 35%, #FDF6ED 65%, #FFFBF5 100%) fixed; color: #1e293b; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 13.5px; -webkit-font-smoothing: antialiased; } /* ── Custom Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ── Keyframe Animations ─────────────────────────────────────────── */ @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-10px) rotate(-1deg); } 66% { transform: translateY(-5px) rotate(1deg); } } @keyframes fadeSlide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes pop-in { 0% { opacity: 0; transform: scale(0.96) translateY(8px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* ── Login Logo ──────────────────────────────────────────────────── */ .login-logo { animation: float 4s ease-in-out infinite; } /* ── Login Card (fade-slide entrance) ───────────────────────────── */ .login-card { animation: fadeSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── Animation utilities (mirrors Tailwind config keyframes) ─────── */ .animate-fade-in { animation: fade-in 200ms ease-out; } .animate-pop-in { animation: pop-in 220ms cubic-bezier(0.16, 1, 0.3, 1); } /* ── Card ────────────────────────────────────────────────────────── */ .card { background-color: #ffffff; border-radius: 0.75rem; /* rounded-xl */ border: 1px solid #e2e8f0; /* border-slate-200 */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */ } .card-hover { transition: box-shadow 200ms, transform 200ms; } .card-hover:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } /* ── Base Button ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; /* gap-1.5 */ padding: 0.375rem 0.75rem; /* py-1.5 px-3 */ border-radius: 0.5rem; /* rounded-lg */ font-size: 12.5px; font-weight: 500; transition: all 150ms; cursor: pointer; border: none; outline: none; text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn:focus { outline: none; } /* ── Button Variants ─────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 12.5px; font-weight: 500; transition: all 150ms; cursor: pointer; border: none; outline: none; background-color: #2E72B5; /* primary-600 */ color: #ffffff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn-primary:hover { background-color: #3A87CC; /* primary-500 */ } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 12.5px; font-weight: 500; transition: all 150ms; cursor: pointer; outline: none; background-color: #ffffff; color: #334155; /* slate-700 */ border: 1px solid #e2e8f0; /* border-slate-200 */ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn-secondary:hover { background-color: #f8fafc; /* slate-50 */ } .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 12.5px; font-weight: 500; transition: all 150ms; cursor: pointer; border: none; outline: none; background-color: transparent; color: #64748b; /* slate-500 */ } .btn-ghost:hover { background-color: #f1f5f9; /* slate-100 */ color: #334155; /* slate-700 */ } .btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; } .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 12.5px; font-weight: 500; transition: all 150ms; cursor: pointer; border: none; outline: none; background-color: #dc2626; /* red-600 */ color: #ffffff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn-danger:hover { background-color: #ef4444; /* red-500 */ } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } .btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 12.5px; font-weight: 500; transition: all 150ms; cursor: pointer; border: none; outline: none; background-color: #059669; /* emerald-600 */ color: #ffffff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn-success:hover { background-color: #10b981; /* emerald-500 */ } .btn-success:disabled { opacity: 0.5; cursor: not-allowed; } .btn-warn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; font-size: 12.5px; font-weight: 500; transition: all 150ms; cursor: pointer; border: none; outline: none; background-color: #f59e0b; /* amber-500 */ color: #ffffff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn-warn:hover { background-color: #fbbf24; /* amber-400 */ } .btn-warn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Small Button Modifier ───────────────────────────────────────── */ .btn-sm { padding: 0.25rem 0.625rem; /* py-1 px-2.5 */ font-size: 11.5px; gap: 0.25rem; } /* ── Form Input ──────────────────────────────────────────────────── */ .input { width: 100%; padding: 0.375rem 0.625rem; /* py-1.5 px-2.5 */ background-color: #ffffff; border: 1px solid #e2e8f0; /* border-slate-200 */ border-radius: 0.5rem; /* rounded-lg */ font-size: 12.5px; color: #1e293b; /* slate-800 */ transition: border-color 150ms, box-shadow 150ms; outline: none; box-sizing: border-box; } .input::placeholder { color: #94a3b8; /* slate-400 */ } .input:focus { outline: none; box-shadow: 0 0 0 3px rgba(46, 114, 181, 0.20); /* ring-2 ring-primary-500/20 */ border-color: #3A87CC; /* primary-500 */ } /* ── Form Label ──────────────────────────────────────────────────── */ .label { display: block; font-size: 10px; font-weight: 600; color: #64748b; /* slate-500 */ text-transform: uppercase; letter-spacing: 0.05em; /* tracking-wide */ margin-bottom: 0.25rem; /* mb-1 */ } /* ── Page Headings ───────────────────────────────────────────────── */ .page-title { font-size: 16px; font-weight: 600; letter-spacing: -0.025em; /* tracking-tight */ color: #1e293b; /* slate-800 */ } .page-sub { font-size: 12px; color: #64748b; /* slate-500 */ margin-top: 0.125rem; /* mt-0.5 */ } /* ── Segmented Control ───────────────────────────────────────────── */ .seg { display: inline-flex; align-items: center; background-color: #f1f5f9; /* slate-100 */ border-radius: 0.5rem; /* rounded-lg */ padding: 0.125rem; /* p-0.5 */ gap: 0.125rem; /* gap-0.5 */ } .seg-btn { padding: 0.25rem 0.75rem; /* px-3 py-1 */ border-radius: 0.375rem; /* rounded-md */ font-size: 11.5px; font-weight: 500; color: #64748b; /* slate-500 */ transition: all 150ms; background: transparent; border: none; cursor: pointer; outline: none; } .seg-btn-active { background-color: #ffffff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */ color: #1e293b; /* slate-800 */ font-weight: 600; } /* ── Table Cells ─────────────────────────────────────────────────── */ .table-th { text-align: left; padding: 0.625rem 0.75rem; /* py-2.5 px-3 */ font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; /* tracking-wider */ font-weight: 600; color: #64748b; /* slate-500 */ } .table-td { padding: 0.625rem 0.75rem; /* py-2.5 px-3 */ font-size: 12.5px; color: #475569; /* slate-600 */ } .table-row { border-top: 1px solid #f1f5f9; /* border-slate-100 */ transition: background-color 150ms; } .table-row:hover { background-color: #f8fafc; /* slate-50 */ } /* ── Pill / Badge ────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 0.25rem; /* gap-1 */ padding: 0.125rem 0.5rem; /* py-0.5 px-2 */ font-size: 10.5px; font-weight: 500; border-radius: 9999px; /* rounded-full */ } /* ── Sidebar Collapsed / Expanded Transitions ────────────────────── */ /* * The sidebar uses Tailwind's group-hover approach with inline styles for * background/border. These rules supplement the transition for width and * opacity of child elements when the sidebar is in a non-JS (CSS-only) * collapsed state. */ /* Sidebar wrapper: collapsed = 4rem wide, expanded (hover) = 230px */ .sidebar { width: 4rem; /* 64px collapsed */ transition: width 200ms ease-out; overflow: hidden; } .sidebar:hover, .sidebar.expanded { width: 230px; } /* Labels and text that fade in when the sidebar expands */ .sidebar-label { opacity: 0; transition: opacity 200ms ease-out; white-space: nowrap; overflow: hidden; } .sidebar:hover .sidebar-label, .sidebar.expanded .sidebar-label { opacity: 1; } /* Nav items: icon is always visible; label fades in */ .sidebar-nav-item { display: flex; align-items: center; gap: 0.75rem; /* gap-3 */ height: 2.25rem; /* h-9 */ padding: 0 0.625rem; /* px-2.5 */ border-radius: 0.5rem; /* rounded-lg */ font-size: 12.5px; font-weight: 500; color: #ffffff; text-decoration: none; position: relative; transition: background-color 150ms; white-space: nowrap; } .sidebar-nav-item:hover { background-color: rgba(255, 255, 255, 0.07); } .sidebar-nav-item.active { background-color: rgba(46, 114, 181, 0.18); font-weight: 700; } /* Active indicator bar on the left edge */ .sidebar-active-bar { position: absolute; left: 0; top: 0.375rem; /* top-1.5 */ bottom: 0.375rem; /* bottom-1.5 */ width: 3px; border-radius: 0 9999px 9999px 0; background-color: #2E72B5; /* primary-600 */ } /* ── Sticky table header backdrop helpers ────────────────────────── */ .bg-slate-50\/95 { background-color: rgba(248, 250, 252, 0.97); } .bg-slate-50\/80 { background-color: rgba(248, 250, 252, 0.80); } /* ── Login Input Focus ───────────────────────────────────────────── */ .login-input:focus { border-color: #C4714A !important; box-shadow: 0 0 0 3px rgba(196, 113, 74, 0.12); }