/* ============================================================================= Two Friends ERP - Global stylesheet (construction theme) ============================================================================= PURPOSE Project-wide design tokens and component styles layered ON TOP of the locally bundled Bootstrap 5 build. Bootstrap provides the grid, spacing and components; this file provides the brand: dark gray / steel / orange with blue accents, per the design brief. STRUCTURE 1. Design tokens (CSS custom properties) 2. Base / typography (incl. Urdu RTL font stack) 3. Header & footer 4. Hero 5. Cards & status page components 6. Motion & accessibility RTL NOTES Layout mirroring is handled by the Bootstrap RTL build selected in the layout. Custom rules below use LOGICAL properties (margin-inline-start, text-align: start) wherever direction matters, so ONE stylesheet serves both directions - never write left/right physical values here. ========================================================================== */ /* --- 1. Design tokens ------------------------------------------------------ */ :root { /* Brand palette (design brief: dark gray, steel, orange, white, blue) */ --tf-dark: #1f2937; /* dark gray - headers, footer, headings */ --tf-dark-2: #111827; /* deeper gray - navbar gradient end */ --tf-steel: #64748b; /* steel - secondary text, borders */ --tf-steel-light: #e2e8f0; /* light steel - card borders, dividers */ --tf-orange: #f97316; /* primary accent - actions, highlights */ --tf-orange-dark: #ea580c; /* hover state for orange */ --tf-blue: #2563eb; /* accent - links, info */ --tf-bg: #f8fafc; /* page background */ --tf-white: #ffffff; /* Rhythm */ --tf-radius: 0.75rem; --tf-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 16px rgba(15, 23, 42, .06); } /* --- 2. Base / typography --------------------------------------------------- */ .tf-body { background: var(--tf-bg); color: var(--tf-dark); } /* Urdu needs a Nastaliq-capable stack with generous line height; applied automatically whenever the layout sets dir="rtl" on . */ [dir="rtl"] body, [dir="rtl"] .tf-body { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Segoe UI", Tahoma, sans-serif; line-height: 2; } /* --- 3. Header & footer ------------------------------------------------------ */ .tf-navbar { background: linear-gradient(180deg, var(--tf-dark) 0%, var(--tf-dark-2) 100%); border-bottom: 3px solid var(--tf-orange); padding-block: .65rem; } /* Brand logo is an SVG with transparent background; give it room. */ .tf-navbar .navbar-brand { padding-block: 0; } .tf-lang-select { min-width: 7.5rem; background-color: rgba(255, 255, 255, .08); border-color: var(--tf-steel); color: var(--tf-white); } .tf-lang-select:focus { border-color: var(--tf-orange); box-shadow: 0 0 0 .25rem rgba(249, 115, 22, .25); } /* Options render on the OS widget with dark text; keep them readable. */ .tf-lang-select option { color: var(--tf-dark); } .tf-footer { background: var(--tf-dark); color: var(--tf-white); border-top: 3px solid var(--tf-orange); font-size: .925rem; } .tf-footer-muted { color: var(--tf-steel-light); } /* --- 4. Hero ------------------------------------------------------------------ */ .tf-hero { background: linear-gradient(135deg, rgba(31, 41, 55, .96) 0%, rgba(17, 24, 39, .92) 100%); color: var(--tf-white); border-inline-start: 6px solid var(--tf-orange); /* logical: flips in RTL */ box-shadow: var(--tf-shadow); } .tf-hero-title { font-weight: 800; letter-spacing: -.01em; } .tf-hero-tagline { color: var(--tf-orange); font-weight: 600; } .tf-hero-intro { color: var(--tf-steel-light); max-width: 60ch; } .tf-badge-phase { background: var(--tf-orange); color: var(--tf-white); font-weight: 600; } /* --- 5. Cards & status page components ----------------------------------------- */ .tf-card { border: 1px solid var(--tf-steel-light); border-radius: var(--tf-radius); box-shadow: var(--tf-shadow); overflow: hidden; /* keep list-group corners inside the radius */ } .tf-card-header { background: var(--tf-dark); color: var(--tf-white); font-weight: 600; padding: .75rem 1rem; } /* Inline help note under a failing check. */ .tf-note { color: var(--tf-blue); } /* "Next phase" info card gets the blue accent. */ .tf-card-next { border-inline-start: 4px solid var(--tf-blue); /* logical property */ } .tf-next-icon { font-size: 1.75rem; color: var(--tf-blue); } /* --- 6. Motion & accessibility ---------------------------------------------------- */ .tf-card { transition: transform .15s ease, box-shadow .15s ease; } .tf-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15, 23, 42, .10); } /* Respect users who ask the OS to reduce motion (accessibility requirement). */ @media (prefers-reduced-motion: reduce) { .tf-card, .tf-card:hover { transition: none; transform: none; } } /* ============================================================================= 7. Shared controls (Phase 3) ========================================================================== */ /* Primary action button - brand orange, consistent everywhere. */ .tf-btn-primary { background: var(--tf-orange); border: 1px solid var(--tf-orange-dark); color: var(--tf-white); font-weight: 600; } .tf-btn-primary:hover, .tf-btn-primary:focus { background: var(--tf-orange-dark); color: var(--tf-white); } /* Directional icons (arrows, sign-in/out) must mirror in RTL. */ [dir="rtl"] .rtl-flip { transform: scaleX(-1); display: inline-block; } /* ============================================================================= 8. Auth pages (login) - Phase 3 ========================================================================== */ .tf-auth-page { /* Subtle construction-dark backdrop keeps focus on the card. */ background: linear-gradient(160deg, var(--tf-dark) 0%, var(--tf-dark-2) 60%, #0b1220 100%); } .tf-auth-wrap { max-width: 26rem; padding-inline: 1rem; } .tf-auth-card { border-top: 4px solid var(--tf-orange); } .tf-auth-link { color: var(--tf-steel-light); text-decoration: none; font-size: .9rem; } .tf-auth-link:hover { color: var(--tf-orange); } .tf-auth-footer { color: var(--tf-steel); font-size: .85rem; } /* Compact light select used on the dark auth backdrop. */ .tf-lang-select-light { min-width: 6.5rem; } /* ============================================================================= 9. Admin shell (topbar + sidebar) - Phase 3 ========================================================================== */ .tf-admin-body { background: var(--tf-bg); } /* --- Topbar ---------------------------------------------------------------- */ .tf-topbar { height: 3.5rem; background: linear-gradient(180deg, var(--tf-dark) 0%, var(--tf-dark-2) 100%); border-bottom: 3px solid var(--tf-orange); position: sticky; top: 0; z-index: 1030; } .tf-topbar-title { color: var(--tf-white); font-weight: 600; } .tf-topbar-btn { color: var(--tf-steel-light); border: 1px solid transparent; } .tf-topbar-btn:hover, .tf-topbar-btn:focus, .tf-topbar-btn[aria-expanded="true"] { color: var(--tf-white); border-color: var(--tf-steel); } /* --- Sidebar ---------------------------------------------------------------- */ /* Desktop: fixed 15rem column; mobile: Bootstrap offcanvas drawer. All spacing uses logical properties so the RTL build mirrors it free. */ .tf-sidebar { /* !important is required: Bootstrap's responsive offcanvas applies "background-color: transparent !important" above the lg breakpoint, which would wash out the dark sidebar on desktop. */ --bs-offcanvas-bg: var(--tf-dark-2); background-color: var(--tf-dark-2) !important; width: 15rem; flex-shrink: 0; } @media (min-width: 992px) { .tf-sidebar { min-height: calc(100vh - 3.5rem); position: sticky; top: 3.5rem; } } .tf-sidebar-brand { height: 4rem; border-bottom: 1px solid rgba(255, 255, 255, .08); } .tf-sidebar .offcanvas-header { background: var(--tf-dark); } .tf-sidebar-link { display: flex; align-items: center; gap: .65rem; color: var(--tf-steel-light); border-radius: .5rem; padding: .6rem .85rem; font-weight: 500; border-inline-start: 3px solid transparent; /* logical: flips in RTL */ } .tf-sidebar-link:hover { background: rgba(255, 255, 255, .06); color: var(--tf-white); } .tf-sidebar-link.active { background: rgba(249, 115, 22, .14); color: var(--tf-orange); border-inline-start-color: var(--tf-orange); } .tf-sidebar-link .bi { font-size: 1.1rem; } .tf-sidebar-note { color: var(--tf-steel); font-size: .8rem; line-height: 1.6; } /* --- Content area ------------------------------------------------------------ */ .tf-admin-main { min-width: 0; } /* stop wide tables blowing out the flex row */ /* --- Dashboard stat cards ----------------------------------------------------- */ .tf-stat-card { border-inline-start: 4px solid var(--tf-orange); } .tf-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .75rem; background: rgba(249, 115, 22, .12); color: var(--tf-orange); font-size: 1.4rem; } .tf-stat-value { font-size: 1.15rem; font-weight: 800; color: var(--tf-dark); line-height: 1.2; /* Long currency amounts wrap rather than clip; keeps every rupee visible. */ overflow-wrap: anywhere; } @media (min-width: 1400px) { .tf-stat-value { font-size: 1.25rem; } } .tf-stat-label { color: var(--tf-steel); font-size: .85rem; } /* --- Tables & badges ----------------------------------------------------------- */ .tf-table thead { background: var(--tf-dark); color: var(--tf-white); } .tf-table thead th { font-weight: 600; white-space: nowrap; } .tf-row-inactive { opacity: .55; } .tf-badge-role { background: rgba(37, 99, 235, .12); color: var(--tf-blue); font-weight: 600; } /* Form card width cap - long full-width inputs are hard to scan. */ .tf-form-card { max-width: 56rem; } /* ============================================================================= 10. Dashboard KPI board, settings, role matrix (Phase 4) ========================================================================== */ /* Utility: let flex children truncate instead of overflowing. */ .min-w-0 { min-width: 0; } /* Stat-tile colour accents - border + icon tint keyed by role of the number. */ .tf-stat-card { border-inline-start: 4px solid var(--tf-steel); } .tf-stat-sub { color: var(--tf-steel); font-size: .75rem; margin-top: .1rem; } .tf-accent-orange { border-inline-start-color: var(--tf-orange); } .tf-accent-orange .tf-stat-icon { background: rgba(249,115,22,.12); color: var(--tf-orange); } .tf-accent-blue { border-inline-start-color: var(--tf-blue); } .tf-accent-blue .tf-stat-icon { background: rgba(37,99,235,.12); color: var(--tf-blue); } .tf-accent-green { border-inline-start-color: #16a34a; } .tf-accent-green .tf-stat-icon { background: rgba(22,163,74,.12); color: #16a34a; } .tf-accent-red { border-inline-start-color: #dc2626; } .tf-accent-red .tf-stat-icon { background: rgba(220,38,38,.12); color: #dc2626; } .tf-accent-dark { border-inline-start-color: var(--tf-dark); } .tf-accent-dark .tf-stat-icon { background: rgba(31,41,55,.10); color: var(--tf-dark); } /* Low-stock reorder list */ .tf-lowstock .list-group-item { padding: .55rem .9rem; } /* Settings tabs (pills) */ .tf-settings-tabs .nav-link { color: var(--tf-steel); border-radius: .5rem; font-weight: 600; } .tf-settings-tabs .nav-link.active { background: var(--tf-dark); color: #fff; } /* Toggle switches: brand-orange when on */ .form-check-input:checked { background-color: var(--tf-orange); border-color: var(--tf-orange); } .form-check-input:focus { border-color: var(--tf-orange); box-shadow: 0 0 0 .2rem rgba(249,115,22,.2); } /* Role permission matrix rows */ .tf-perm-check { padding-block: .2rem; } .tf-perm-slug { color: var(--tf-steel); font-size: .72rem; margin-inline-start: .35rem; }