/* ========================================================== Bilti Sathi — in-app pages (branch setup, masters, etc.) Reference this once in your _Layout along with the Google Fonts link, then use these classes in content views. ========================================================== */ :root { --ink: #0E1636; --blue-deep: #122064; --blue: #2340C4; --blue-soft: #eaefff; --gold: #F5B01E; --gold-soft: #FCD34D; --paper: #F4F6FC; --paper-2: #EEF2FB; --line: #D9DFEF; --line-2: #C7CFE6; --muted: #5A6484; --danger: #D64545; --ok: #1a7a3c; --display: 'Space Grotesk',sans-serif; --body: 'Inter',sans-serif; --mono: 'Space Mono',monospace; --shadow-sm: 0 10px 26px -16px rgba(12,24,80,.4); } .bs-app { font-family: var(--body); color: var(--ink); } /* The page wrap for every screen in the app (87 views use it). It was capped at 1080px with 24px of its own side padding, sitting inside _AdminLayout's .content which adds its own — so on an office monitor a wide list was squeezed into the middle third of the screen with several hundred pixels of empty gutter either side, and columns that had room to breathe were wrapping instead. The cap is now off entirely — a screen belongs to the screen — and the gutters are down to 10px, because .content supplies its own alongside these. */ .bs-wrap { max-width: none; margin: 0 auto; /* Top padding cut from 28px: stacked with .content's own it put ~54px of empty above every hero on every page before a single word was shown. */ padding: 10px 10px 64px; } /* page header */ .bs-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .bs-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); font-weight: 700; margin-bottom: 6px; } .bs-pagehead h1 { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; margin: 0; } .bs-pagehead p { color: var(--muted); font-size: 14px; margin: 6px 0 0; } /* buttons */ .bs-btn { font-family: var(--body); font-weight: 600; font-size: 14px; border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease; text-decoration: none; } .bs-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .bs-btn-primary { background: linear-gradient(180deg,var(--blue),var(--blue-deep)); color: #fff; box-shadow: var(--shadow-sm); } .bs-btn-primary:hover { transform: translateY(-1px); color: #fff; } .bs-btn-ghost { background: #fff; border: 1.5px solid var(--line-2); color: var(--ink); } .bs-btn-ghost:hover { border-color: var(--blue); color: var(--blue); } .bs-btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; } .bs-btn-link { background: none; border: none; color: var(--blue); font-weight: 600; cursor: pointer; padding: 0; font-size: 13px; } .bs-btn-link.danger { color: var(--danger); } .bs-btn-link:hover { text-decoration: underline; } /* flash */ .bs-flash { border-radius: 10px; padding: 11px 14px; font-size: 13.5px; font-weight: 500; margin-bottom: 18px; } .bs-flash.ok { background: #eaf7ee; border: 1px solid #bfe3c9; color: #1a6b36; } .bs-flash.err { background: #fdecec; border: 1px solid #f3c0c0; color: #a12626; } /* card */ .bs-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); } .bs-card-pad { padding: 26px 26px; } /* table */ .bs-table { width: 100%; border-collapse: collapse; } .bs-table thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 700; } .bs-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--paper-2); font-size: 13px; vertical-align: middle; } .bs-table tbody tr:last-child td { border-bottom: none; } .bs-table tbody tr:hover { background: var(--paper); } .bs-table .code { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink); } .bs-name { font-weight: 600; } .bs-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .bs-actions { display: flex; gap: 14px; align-items: center; justify-content: flex-end; } .bs-right { text-align: right; } /* badges / tags */ .bs-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; display: inline-block; } .bs-badge.on { background: #e7f6ec; color: #1a7a3c; } .bs-badge.off { background: #f0f1f6; color: #8a93ad; } .bs-tag-ho { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #8a6300; background: rgba(245,176,30,.16); border: 1px solid rgba(245,176,30,.5); padding: 2px 8px; border-radius: 6px; margin-left: 8px; } /* empty */ .bs-empty { text-align: center; padding: 56px 20px; color: var(--muted); } .bs-empty h3 { font-family: var(--display); color: var(--ink); font-size: 18px; margin: 0 0 6px; } .bs-empty p { font-size: 14px; margin: 0 0 20px; } /* form */ .bs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .bs-field { display: flex; flex-direction: column; } .bs-field.full { grid-column: 1 / -1; } .bs-field label { font-size: 12px; font-weight: 600; letter-spacing: .02em; margin-bottom: 7px; } .bs-field input[type=text], .bs-field input[type=email], .bs-field input[type=tel], .bs-field textarea { font-family: var(--body); font-size: 15px; padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; transition: border .15s ease,box-shadow .15s ease; } .bs-field input::placeholder, .bs-field textarea::placeholder { color: #9aa3bf; text-transform: none; } .bs-field input:focus, .bs-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,64,196,.12); } .bs-field input.input-validation-error { border-color: var(--danger); background: #fff7f7; } .bs-field .field-error { color: var(--danger); font-size: 12px; font-weight: 500; margin-top: 6px; display: block; } .bs-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); cursor: pointer; padding-top: 4px; } .bs-check input { width: 17px; height: 17px; accent-color: var(--blue); } .bs-form-actions { display: flex; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .bs-hint { font-size: 12px; color: var(--muted); margin-top: 5px; } .validation-summary-valid { display: none; } .bs-summary-error { background: #fdecec; border: 1px solid #f3c0c0; color: #a12626; border-radius: 10px; padding: 11px 14px; margin-bottom: 18px; font-size: 13.5px; } .bs-summary-error ul { margin: 0; padding-left: 18px; } /* "this GSTIN is already on file" in the quick-add popup. Amber, not red: at the moment it appears nothing has gone wrong - the clerk is mid-typing and is being told who holds the number. It turns into a red error only if they save anyway. */ .bs-gstin-hit { background: #FFF7E6; border: 1px solid #F5DFA8; color: #6B4E00; border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; } .bs-gstin-hit .nm { display: block; font-weight: 700; font-size: 14px; color: #4A3600; } .bs-gstin-hit .dt { color: #7A5C10; } .bs-gstin-hit .use { display: inline-block; margin-top: 9px; height: 30px; padding: 0 14px; border: none; border-radius: 8px; background: #2340C4; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .bs-gstin-hit .use:hover { filter: brightness(1.08); } @media (max-width:680px) { .bs-form-grid { grid-template-columns: 1fr; } .bs-table thead { display: none; } .bs-table tbody td { display: block; border: none; padding: 4px 18px; } .bs-table tbody tr { display: block; border-bottom: 1px solid var(--line); padding: 12px 0; } .bs-actions { justify-content: flex-start; padding-top: 8px; } /* form selects — match bs text inputs */ .bs-field select { width: 100%; font-family: 'Inter', sans-serif; font-size: 15px; color: #0E1636; padding: 11px 38px 11px 13px; /* right padding for the arrow */ border: 1.5px solid #C7CFE6; border-radius: 10px; background-color: #fff; cursor: pointer; appearance: none; /* hide native arrow so ours shows */ -webkit-appearance: none; -moz-appearance: none; /* custom chevron */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6484' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .bs-field select:focus { outline: none; border-color: #2340C4; box-shadow: 0 0 0 3px rgba(35, 64, 196, 0.15); } .bs-field select:disabled { background-color: #EEF2FB; color: #5A6484; cursor: not-allowed; } .bs-select { box-sizing: border-box; /* critical: include border+padding in height */ width: 100%; height: 46px; /* match your inputs' rendered height */ line-height: 1.2; font-family: 'Inter', sans-serif; font-size: 15px; color: #0E1636; padding: 0 38px 0 13px; /* vertical padding 0 since height is fixed */ border: 1.5px solid #C7CFE6; border-radius: 10px; background-color: #fff; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6484' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .bs-select:focus { outline: none; border-color: #2340C4; box-shadow: 0 0 0 3px rgba(35, 64, 196, 0.15); } .bs-field input[type=text], .bs-field input[type=tel], .bs-field input[type=email], .bs-select { box-sizing: border-box; height: 46px; } } /* ===================================================================== Entry bar — the header for screens where the user's job is to type. List and report pages open with the blue-gradient .cg-hero. Data-entry screens do not: a hero is ~120px of decoration above the first field, and booking staff open these pages to key in a challan, not to read a subtitle. This is the slim replacement — title, shortcut legend, state, and the way back, on one row. ===================================================================== */ /* ===== bs-doctype-switch ===== The GST <-> Non-GST jump (_DocTypeSwitch). Sits in the topbar on list screens and in the entry bar on the full-screen forms, so it is sized for the shorter of the two. Deliberately quiet: it is a way across, not an action. */ .bs-doctype-switch { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-right: 10px; border-radius: 8px; border: 1px solid #D4DAEC; background: #fff; color: #2340C4; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } .bs-doctype-switch:hover { background: #F4F6FC; color: #2340C4; } .bs-doctype-switch kbd { font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #5A6484; background: #F4F6FC; border: 1px solid #D4DAEC; border-bottom-width: 2px; border-radius: 4px; padding: 2px 4px; } /* On a narrow bar the label and the key hint go; the arrows still say what it does. */ @media (max-width: 1100px) { .bs-doctype-switch .txt, .bs-doctype-switch kbd { display: none; } .bs-doctype-switch { padding: 0 8px; } } /* ===== bs-strip ===== The thin gradient hero. One line: title on the left, actions on the right, and no more height than the controls need. Shared rather than copied into each view because the party Add and Edit screens all want it and the two party lists already grew their own equivalent (.cg-hero, page-local). New screens should use this one; those two can be folded in whenever they are next touched. */ .bs-strip { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; background: linear-gradient(135deg,#2340C4 0%,#122064 100%); color: #fff; box-shadow: 0 6px 16px rgba(18,32,100,.22); } /* one small gold glow, sized for a strip rather than a full-height hero */ .bs-strip::after { content: ""; position: absolute; right: -30px; top: -60px; width: 140px; height: 140px; pointer-events: none; background: radial-gradient(circle, rgba(245,176,30,.30), transparent 70%); } .bs-strip h1 { margin: 0; font-size: 16px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; position: relative; z-index: 1; } .bs-strip h1 .bi { font-size: 17px; color: #F5B01E; } .bs-strip-spacer { flex: 1 1 auto; } /* Sits on the gradient, so it is outlined rather than filled — a white button here would read as the primary action on a bar whose job is only to say where you are. */ .bs-strip-btn { position: relative; z-index: 1; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.3); transition: background .15s; } .bs-strip-btn:hover { background: rgba(255,255,255,.22); color: #fff; } /* A thin strip: title on the left, the way out on the right, and as little height as the controls need. It was 24px of vertical padding plus a 16px margin above a form that is the actual reason for the page. Used by the party Add/Edit screens only — the full-screen entry layout hides this class in the body, because there the layout IS the bar. */ .bs-entrybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 2px 8px; border-bottom: 1px solid #E3E8F5; margin-bottom: 10px; } /* Scoped to the bar: .bs-barbtn is also the bilti restore bar's button, which is not part of this and keeps its own size. */ .bs-entrybar .bs-barbtn { height: 30px; padding: 0 12px; font-size: 12.5px; } .bs-entrybar h1 { margin: 0; font-size: 15px; font-weight: 700; color: #122064; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .bs-entrybar h1 .bi { color: #2340C4; } .bs-entryspacer { flex: 1 1 auto; } /* keyboard legend */ .bs-keys { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #5A6484; } .bs-keys kbd { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #122064; background: #F4F6FC; border: 1px solid #D4DAEC; border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; } /* "kept on this device" indicator */ .bs-draft { font-size: 12px; font-weight: 600; color: #5A6484; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .bs-draft.on { color: #1B7A45; } .bs-draft .dot { width: 7px; height: 7px; border-radius: 50%; background: #C3CADB; } .bs-draft.on .dot { background: #24A35C; } /* "Not saved yet" is the badge saying nothing has happened yet, on a bar that is already short of room. Where this class is set the badge appears only once there IS something to report - .on, "Draft kept on this device" - and is invisible the rest of the time. No JS involved: mark() already toggles .on, so the badge is hidden before any script runs and needs nothing to stay that way. */ .bs-draft.idle-hidden:not(.on) { display: none; } /* "we found an unsaved entry" prompt */ .bs-restore { display: none; align-items: center; gap: 12px; flex-wrap: wrap; background: #FFF7E4; border: 1px solid #F5B01E; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; color: #122064; } /* quiet button for the entry bar; also the non-hero form of .cg-hbtn */ .bs-barbtn { height: 36px; padding: 0 14px; border-radius: 9px; /* A