/* Medicine Care Pharmacy — Theme: Sky Blue Supports Light / Dark / System mode via [data-theme] on Mobile-first responsive layout: bottom-nav + drawer on mobile, sidebar on desktop */ :root{ --primary:#0284c7; --primary-dark:#0369a1; --primary-light:#e0f2fe; --success:#10b981; --danger:#f43f5e; --warning:#f59e0b; --bg:#f8fafc; --surface:#ffffff; --border:#e2e8f0; --text:#0f172a; --text-muted:#64748b; --radius:14px; --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --shadow-lg:0 10px 30px rgba(15,23,42,.12); } [data-theme="dark"]{ --primary:#38bdf8; --primary-dark:#0ea5e9; --primary-light:#0c2b3d; --bg:#0f172a; --surface:#1e293b; --border:#334155; --text:#f1f5f9; --text-muted:#94a3b8; --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 10px 30px rgba(0,0,0,.5); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:'Hind Siliguri','Inter',ui-sans-serif,system-ui,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; transition:background .2s ease,color .2s ease; } .mono, .price, .qty, input[type=number]{font-family:'Inter','Hind Siliguri',sans-serif} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0 0 8px} p{margin:0 0 8px} /* ---------- Layout ---------- */ .app{display:flex;min-height:100vh} .sidebar{ width:250px;flex-shrink:0;background:var(--surface); border-right:1px solid var(--border); display:flex;flex-direction:column; position:fixed;top:0;left:0;bottom:0;z-index:40; transition:transform .25s ease; } .sidebar .brand{ display:flex;align-items:center;gap:10px;padding:20px 18px; border-bottom:1px solid var(--border); } .sidebar .brand .logo{ width:38px;height:38px;border-radius:10px;background:var(--primary); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700; } .sidebar .brand-name{font-weight:700;font-size:15px;line-height:1.2} .sidebar .brand-name small{display:block;font-weight:400;color:var(--text-muted);font-size:11px} .nav-group{padding:10px} .nav-item{ display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px; color:var(--text-muted);font-size:14px;font-weight:500;margin-bottom:2px;cursor:pointer; } .nav-item svg{width:19px;height:19px;flex-shrink:0} .nav-item:hover{background:var(--primary-light);color:var(--primary-dark)} .nav-item.active{background:var(--primary);color:#fff} .main{flex:1;margin-left:250px;min-height:100vh;display:flex;flex-direction:column} .topbar{ display:flex;align-items:center;justify-content:space-between; padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border); position:sticky;top:0;z-index:30; } .topbar .search{ display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border); border-radius:10px;padding:8px 12px;min-width:260px; } .topbar .search input{border:none;background:transparent;outline:none;color:var(--text);width:100%;font-size:14px} .topbar-actions{display:flex;align-items:center;gap:14px} .icon-btn{ width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface); display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--text); } .icon-btn:hover{background:var(--primary-light)} .badge-dot{ position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;font-size:10px; min-width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px; } .avatar{ width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px; } .content{padding:22px;flex:1} /* ---------- Cards & grids ---------- */ .grid{display:grid;gap:16px} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} @media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}} .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:18px;box-shadow:var(--shadow); } .stat-card{cursor:pointer;transition:transform .15s ease, box-shadow .15s ease} .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .stat-card .stat-icon{ width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:10px; } .stat-card .stat-label{color:var(--text-muted);font-size:13px;font-weight:500} .stat-card .stat-value{font-size:24px;font-weight:700;margin-top:2px} .stat-sky .stat-icon{background:var(--primary-light);color:var(--primary)} .stat-green .stat-icon{background:#d1fae5;color:var(--success)} .stat-rose .stat-icon{background:#ffe4e6;color:var(--danger)} .stat-amber .stat-icon{background:#fef3c7;color:var(--warning)} [data-theme="dark"] .stat-green .stat-icon{background:#064e3b} [data-theme="dark"] .stat-rose .stat-icon{background:#4c0519} [data-theme="dark"] .stat-amber .stat-icon{background:#451a03} /* ---------- Tables ---------- */ .table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)} table{width:100%;border-collapse:collapse;background:var(--surface);min-width:640px} th,td{padding:12px 14px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--border);white-space:nowrap} th{color:var(--text-muted);font-weight:600;background:var(--bg)} tbody tr:hover{background:var(--primary-light)} tbody tr:last-child td{border-bottom:none} /* ---------- Buttons & forms ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:10px 18px; border-radius:10px;border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer; } .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-dark)} .btn-outline{background:transparent;border-color:var(--border);color:var(--text)} .btn-outline:hover{background:var(--primary-light)} .btn-danger{background:var(--danger);color:#fff} .btn-success{background:var(--success);color:#fff} .btn-sm{padding:6px 12px;font-size:12.5px} .btn:disabled{opacity:.5;cursor:not-allowed} label{font-size:13px;font-weight:600;color:var(--text-muted);display:block;margin-bottom:6px} .input, input[type=text], input[type=password], input[type=number], input[type=date], input[type=tel], select, textarea{ width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border); background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;outline:none; } .input:focus, input:focus, select:focus, textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)} .form-row{margin-bottom:14px} .badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600} .badge-green{background:#d1fae5;color:#047857} .badge-rose{background:#ffe4e6;color:#be123c} .badge-amber{background:#fef3c7;color:#b45309} .badge-slate{background:var(--border);color:var(--text-muted)} /* ---------- Modal ---------- */ .modal-overlay{ position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center; z-index:100;padding:16px; } .modal-overlay.open{display:flex} .modal{ background:var(--surface);border-radius:var(--radius);width:100%;max-width:520px; max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg); } .modal.modal-lg{max-width:820px} .modal-header{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .modal-body{padding:20px} .modal-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px} /* ---------- Auth / Install pages ---------- */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--primary) 0%,var(--primary-dark) 100%);padding:20px} .auth-card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:420px;padding:34px 30px} .auth-card.wide{max-width:640px} .auth-logo{width:56px;height:56px;border-radius:16px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 14px} .steps{display:flex;justify-content:center;gap:8px;margin-bottom:22px} .step-dot{width:34px;height:6px;border-radius:99px;background:var(--border)} .step-dot.active{background:var(--primary)} .alert{padding:12px 14px;border-radius:10px;font-size:13.5px;margin-bottom:14px} .alert-error{background:#ffe4e6;color:#be123c} .alert-success{background:#d1fae5;color:#047857} .alert-info{background:var(--primary-light);color:var(--primary-dark)} /* ---------- Mobile ---------- */ .hamburger, .bottom-nav{display:none} @media(max-width:900px){ .sidebar{transform:translateX(-100%)} .sidebar.open{transform:translateX(0)} .main{margin-left:0} .hamburger{display:flex} .topbar .search{display:none} .content{padding:14px 14px 84px} .bottom-nav{ display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--surface); border-top:1px solid var(--border);z-index:35;padding:6px 4px calc(6px + env(safe-area-inset-bottom)); } .bottom-nav a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px; color:var(--text-muted);font-size:10.5px;font-weight:600;border-radius:10px; } .bottom-nav a.active{color:var(--primary)} .bottom-nav svg{width:20px;height:20px} .grid-4 .stat-card .stat-value{font-size:20px} .sidebar-backdrop{ display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:39; } .sidebar-backdrop.open{display:block} } .text-muted{color:var(--text-muted)} .text-success{color:var(--success)} .text-danger{color:var(--danger)} .flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .gap-2{gap:8px} .gap-3{gap:12px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mb-3{margin-bottom:12px} .w-full{width:100%}