html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Root theme variables (shared across auth views) */ :root { --tekmetric-blue: #1e5b93; --nardo-grey: #666; --shade-900: #2b2b2b; --light-grey: #f3f3f3; --white: #fff; --neutral-darker: #222; --success-green: #10b981; --success-green-dark: #059669; --danger-red: #ef4444; } /* Sidebar toggle styles */ .sidebar-toggle { /* position absolute removed to live in its own controls section */ position: relative; top: auto; right: auto; background: rgba(255, 255, 255, 0.1); border: none; color: #fff; padding: 6px; border-radius: 6px; cursor: pointer; z-index: 10; transition: all 0.3s; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } .sidebar .sidebar-controls { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; padding: .25rem .25rem .5rem .25rem; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: .5rem; } /* Collapsed aligns control centered */ .sidebar.collapsed .sidebar-controls, html.sidebar-collapsed .sidebar .sidebar-controls, html.sidebar-collapsed .col .sidebar .sidebar-controls { justify-content: center; } /* Collapsed state (applied either via .collapsed on sidebar or early html.sidebar-collapsed on first paint) */ .sidebar.collapsed, html.sidebar-collapsed .sidebar, html.sidebar-collapsed .col .sidebar { width: 60px; } /* Hide profile block entirely when collapsed */ .sidebar.collapsed .user-panel, html.sidebar-collapsed .sidebar .user-panel, html.sidebar-collapsed .col .sidebar .user-panel { display: none !important; } /* Icon-only navigation when collapsed */ .sidebar.collapsed .sidebar-link span, .sidebar.collapsed .sidebar-sublink, .sidebar.collapsed .badge, html.sidebar-collapsed .sidebar .sidebar-link span, html.sidebar-collapsed .sidebar .sidebar-sublink, html.sidebar-collapsed .sidebar .badge, html.sidebar-collapsed .col .sidebar .sidebar-link span, html.sidebar-collapsed .col .sidebar .sidebar-sublink, html.sidebar-collapsed .col .sidebar .badge { display: none !important; } /* Center icons and remove extra spacing when collapsed */ .sidebar.collapsed .sidebar-link, html.sidebar-collapsed .sidebar .sidebar-link, html.sidebar-collapsed .col .sidebar .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar.collapsed .sidebar-link i, html.sidebar-collapsed .sidebar .sidebar-link i, html.sidebar-collapsed .col .sidebar .sidebar-link i { margin: 0 !important; } /* Logout button: show icon only when collapsed */ .sidebar.collapsed .mt-auto button, html.sidebar-collapsed .sidebar .mt-auto button, html.sidebar-collapsed .col .sidebar .mt-auto button { font-size: 0; display: flex; align-items: center; justify-content: center; } .sidebar.collapsed .mt-auto button i, html.sidebar-collapsed .sidebar .mt-auto button i, html.sidebar-collapsed .col .sidebar .mt-auto button i { font-size: 1.1rem; margin: 0; } /* Rotate chevron when collapsed */ .sidebar.collapsed .sidebar-toggle i, html.sidebar-collapsed .sidebar .sidebar-toggle i, html.sidebar-collapsed .col .sidebar .sidebar-toggle i { transform: rotate(180deg); } /* Adjust main content when sidebar is collapsed */ .main-with-sidebar.collapsed, html.sidebar-collapsed .main-with-sidebar { margin-left: 60px; } /* ================= GLOBAL APP TYPOGRAPHY & COLOR (Unified with Account Views) ================= */ /* Apply shared palette and typography to all application (non-auth) pages */ body, .dashboard-page, .container-fluid:not(.auth-page) { color: var(--shade-900); font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .dashboard-page h1,.dashboard-page h2,.dashboard-page h3,.dashboard-page h4,.dashboard-page h5,.dashboard-page h6, .container-fluid:not(.auth-page) h1,.container-fluid:not(.auth-page) h2 { color: var(--shade-900); font-weight:600; letter-spacing:.5px; } .dashboard-page .card-title, .dashboard-card h5, .dashboard-card h6 { color: var(--tekmetric-blue); } /* Standard link styling across dashboards */ .dashboard-page a:not(.btn), .container-fluid:not(.auth-page) a:not(.btn) { color: var(--tekmetric-blue); text-decoration:none; transition:color .25s; font-weight:500; } .dashboard-page a:not(.btn):hover, .container-fluid:not(.auth-page) a:not(.btn):hover { color: var(--shade-900); text-decoration:underline; } /* Tables inherit unified text color */ .dashboard-page table, .dashboard-page table td, .dashboard-page table th, .container-fluid:not(.auth-page) table td, .container-fluid:not(.auth-page) table th { color: var(--shade-900); } /* Muted / secondary */ .dashboard-page .text-muted, .container-fluid:not(.auth-page) .text-muted { color: var(--nardo-grey)!important; } /* Legacy gray utility mapping to unified palette (for older inline classes still present in some views) */ .text-gray-300 { color:#cbd5e1 !important; } .text-gray-800 { color:var(--shade-900)!important; } /* Badges keep clear contrast */ .badge.bg-success, .badge.bg-danger, .badge.bg-warning, .badge.bg-secondary, .badge.bg-info, .badge.bg-primary { font-weight:600; } /* Normalize button outline styles to current palette */ .btn-outline-secondary, .btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger { font-weight:600; } /* Notification pages consistency */ .notifications-page .card-header { background:linear-gradient(135deg,#f8fafc,#eef2f7); color:var(--tekmetric-blue); font-weight:600; } /* Remove conflicting custom text colors inside dashboard cards */ .dashboard-page .card p, .dashboard-page .card span, .dashboard-page .card li { color:inherit; } /* ================= END GLOBAL APP TYPOGRAPHY & COLOR ================= */ /* ====== SHARED AUTH LAYOUT (Login.cshtml, Register.cshtml, CustomerRegister.cshtml, CompanyOwnerRegister.cshtml, AcceptInvitation.cshtml, ForgotPassword*.cshtml, ResetPassword*.cshtml, ExternalLoginConfirmation.cshtml, RegistrationSuccess.cshtml, ConfirmEmail.cshtml) ====== */ .auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); } .auth-page::before { content:""; position:absolute; inset:0; background:url('data:image/svg+xml,'); opacity:.3; pointer-events:none; } /* Restore original default ROW layout (was column) */ .auth-card { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border-radius:24px; box-shadow:0 25px 50px rgba(0,0,0,0.15); overflow:hidden; width:100%; max-width:1000px; display:flex; border:1px solid rgba(255,255,255,0.2); min-height:600px; position:relative; } /* Collapse to column ONLY on small screens (match original per-view inline styles) */ @media (max-width: 768px){ .auth-card { flex-direction:column; min-height:auto; } } .auth-illustration { flex:1; background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); position:relative; display:flex; align-items:center; justify-content:center; padding:3rem 2rem; overflow:hidden; color:var(--white); } /* On large screens keep a consistent visual width ratio only when illustration exists */ @media (min-width: 992px){ .auth-card > .auth-illustration { flex:0 0 50%; max-width:50%; } .auth-card > .auth-illustration + .auth-form-wrapper { flex:0 0 50%; max-width:50%; } /* Stand‑alone form (no illustration) stays full width */ .auth-card > .auth-form-wrapper:first-child { flex:1 1 auto; max-width:100%; } } .auth-illustration::before, .auth-illustration::after { content:""; position:absolute; width:200%; height:200%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%); animation:auth-float 8s ease-in-out infinite; } .auth-illustration::before { top:-55%; left:-55%; animation-duration:6s; } .auth-illustration::after { bottom:-55%; right:-55%; animation-direction:reverse; animation-duration:9s; background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%); } @keyframes auth-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-18px) rotate(180deg); } } .illustration-inner, .illustration-content { position:relative; z-index:2; text-align:center; } .device-mockup { width:140px; height:140px; margin:0 auto 1rem; position:relative; background:#fff; border-radius:26px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; } .device-screen { width:100%; height:100%; border-radius:20px; background:linear-gradient(45deg,var(--tekmetric-blue),var(--shade-900)); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .4s; transform:perspective(1000px) rotateY(-12deg) rotateX(5deg); } .device-screen:hover { transform:perspective(1000px) rotateY(-6deg) rotateX(2deg); } .quick-links .btn { border-radius:12px; font-weight:600; transition:all .3s; border:2px solid transparent; } .quick-links .btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.2); } /* Form wrapper */ .auth-form-wrapper { flex:1; padding:3rem 2.5rem; display:flex; flex-direction:column; justify-content:center; } .auth-form-header h2 { font-size:2.2rem; font-weight:700; } .text-gradient { background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .auth-form { width:100%; max-width:100%; margin:0 auto; } /* ===== Shared form elements (all account views) ===== */ .form-group { margin-bottom:1.25rem; } .form-label { font-weight:600; margin-bottom:.55rem; color:var(--shade-900); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; display:inline-flex; align-items:center; gap:2px; } /* Inline existing required indicator that may be rendered as immediate sibling */ .form-group > .form-label + .text-danger { display:inline; margin:0; padding:0; position:static; line-height:1; } /* Prevent duplicate stacked stars (hide duplicates if any appear on separate lines) */ .form-group > .form-label + .text-danger + .text-danger { display:none; } .input-wrapper { position:relative; display:flex; align-items:center; } .input-icon { position:absolute; left:16px; color:var(--nardo-grey); z-index:2; font-size:.95rem; pointer-events:none; } /* Simplified input styling */ .form-control { border:1px solid #d1d5db; border-radius:6px; padding:10px 14px; font-size:.95rem; background:#f3f3f3; transition:border-color .2s, background .2s; box-shadow:none; } .input-wrapper .form-control { padding-left:44px; } /* keep space for left icon when present */ .form-control:focus { border-color:var(--tekmetric-blue); background:#fff; box-shadow:0 0 0 1px var(--tekmetric-blue); transform:none; } .form-control.is-invalid { border-color:var(--danger-red); background:#fef2f2; } .form-control.is-invalid:focus { box-shadow:0 0 0 1px var(--danger-red); } .form-text.text-muted { font-size:.7rem; } /* Select (dropdown) styling aligned with text inputs */ .form-select, select.form-control, select { background:#f3f3f3; border:1px solid #d1d5db; border-radius:6px; padding:10px 38px 10px 14px; font-size:.95rem; line-height:1.4; box-shadow:none; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px 14px; cursor:pointer; } .form-select:focus, select.form-control:focus, select:focus { border-color:var(--tekmetric-blue); background:#fff; box-shadow:0 0 0 1px var(--tekmetric-blue); outline:none; } .form-select.is-invalid, select.form-control.is-invalid, select.is-invalid { border-color:var(--danger-red); background:#fef2f2; } .form-select.is-invalid:focus, select.form-control.is-invalid:focus, select.is-invalid:focus { box-shadow:0 0 0 1px var(--danger-red); } /* When select placed inside input-wrapper that has an icon */ .input-wrapper select.form-select, .input-wrapper select.form-control, .input-wrapper select { padding-left:44px; } /* ===== Buttons (variants shared site-wide) ===== */ .btn-primary { background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); border:none; color:var(--white); box-shadow:0 10px 25px -8px rgba(30,91,147,0.5); transition:all .3s; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(30,91,147,0.55); } .btn-primary:active { transform:translateY(0); } .btn-success { background:linear-gradient(135deg,var(--success-green) 0%,var(--success-green-dark) 100%); border:none; color:#fff; transition:all .3s; } .btn-success:hover { transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(16,185,129,.55); } .btn-outline-secondary { border:2px solid #d1d5db; color:var(--nardo-grey); background:transparent; transition:all .3s; } .btn-outline-secondary:hover { background:#6b7280; border-color:#6b7280; color:#fff; } .btn-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; border:2px solid #e5e7eb; background:var(--white); color:var(--nardo-grey); transition:all .3s; } .btn-icon:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,.12); border-color:var(--tekmetric-blue); color:var(--tekmetric-blue); } /* ===== Buttons (shared - scoped SIZE to account/auth pages only) ===== */ .auth-page .btn { border-radius:12px; font-weight:600; border:2px solid transparent; padding:10px 20px; } .auth-page .btn-lg { padding:14px 28px; font-size:1rem; } /* ===== Links & text utilities ===== */ .link-primary { color:var(--tekmetric-blue); text-decoration:none; font-weight:600; transition:color .3s; } .link-primary:hover { color:var(--shade-900); text-decoration:underline; } .login-link { color:var(--nardo-grey); font-size:.95rem; } .text-danger { color:var(--danger-red)!important; font-size:.8rem; margin-top:.35rem; display:block; } .text-muted { color:var(--nardo-grey)!important; } .fw-semibold { font-weight:600; } .tracking-1 { letter-spacing:.5px; } /* ===== Divider (Login social) ===== */ .divider-text { position:relative; text-align:center; font-size:.7rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; color:#6d7c90; margin:2rem 0; } .divider-text::before, .divider-text::after { content:""; position:absolute; top:50%; width:38%; height:1px; background:linear-gradient(90deg,rgba(0,0,0,.15),transparent); } .divider-text::after { right:0; background:linear-gradient(270deg,rgba(0,0,0,.15),transparent); } .divider-text::before { left:0; } /* ===== CompanyOwnerRegister.cshtml (step indicators, progress, step visibility) ===== */ .step-indicator { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; margin-bottom:2rem; } .step-indicator:not(:last-child)::after { content:""; position:absolute; top:25px; left:50%; width:100%; height:3px; background:linear-gradient(90deg,#e5e7eb,#e5e7eb); z-index:1; } .step-indicator.active:not(:last-child)::after { background:linear-gradient(90deg,var(--tekmetric-blue),var(--shade-900)); } .step-number { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,#e5e7eb,#d1d5db); color:var(--nardo-grey); display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px; position:relative; z-index:2; transition:all .3s; font-size:1.05rem; } .step-indicator.active .step-number { background:linear-gradient(135deg,var(--tekmetric-blue),var(--shade-900)); color:#fff; transform:scale(1.08); box-shadow:0 8px 25px rgba(30,91,147,.35); } .step-text { font-size:.85rem; color:var(--nardo-grey); font-weight:500; } .step-indicator.active .step-text { color:var(--tekmetric-blue); } .auth-card .progress { height:8px; border-radius:10px; background:#e5e7eb; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.1); } .auth-card .progress-bar { background:linear-gradient(90deg,var(--tekmetric-blue),var(--shade-900)); transition:width .5s; } .step-content { display:none; animation:fadeInUp .5s ease forwards; } .step-content.active { display:block; } @keyframes fadeInUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0);} } .review-section { background:linear-gradient(135deg,#f8fafc,#f1f5f9); padding:20px; border-radius:12px; margin-bottom:20px; border:1px solid #e2e8f0; font-size:.9rem; } /* ===== CustomerRegister.cshtml (location section) ===== */ .location-section { background:linear-gradient(135deg,var(--light-grey) 0%,#e2e8f0 100%); padding:24px; border-radius:16px; border:1px solid #e2e8f0; margin-bottom:2rem; } .section-header { text-align:center; margin-bottom:1.5rem; } .section-title { font-size:1.25rem; font-weight:600; color:var(--shade-900); margin-bottom:.4rem; } .section-description { color:var(--nardo-grey); font-size:.85rem; } /* ===== Register.cshtml (registration options) ===== */ .registration-options { max-width:600px; margin:0 auto; } .option-card { background:var(--white); border:2px solid #f8f9fa; border-radius:15px; padding:2rem; text-align:center; height:100%; transition:all .3s ease; box-shadow:0 5px 15px rgba(0,0,0,0.08); } .option-card:hover { transform:translateY(-5px); border-color:var(--tekmetric-blue); box-shadow:0 10px 25px rgba(30,91,147,0.15); } .option-icon { margin-bottom:1.5rem; } .option-title { color:var(--shade-900); font-weight:600; margin-bottom:1rem; } .option-description { color:var(--nardo-grey); margin-bottom:1.5rem; line-height:1.6; font-size:.9rem; } /* ===== Success / confirmation pages (RegistrationSuccess.cshtml, ConfirmEmail.cshtml, ResetPasswordConfirmation.cshtml) ===== */ .success-icon i { font-size:4rem; color:var(--tekmetric-blue); } /* ===== Alerts (shared) ===== */ .alert { border-radius:12px; border:none; padding:16px 20px; box-shadow:0 4px 15px rgba(0,0,0,0.08); } .alert-success { background:linear-gradient(135deg,#d4edda,#c3e6cb); color:var(--tekmetric-blue); border-left:4px solid var(--tekmetric-blue); } .alert-info { background:linear-gradient(135deg,#d1ecf1,#bee5eb); color:var(--tekmetric-blue); border-left:4px solid var(--tekmetric-blue); } .alert-warning { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border-left:4px solid #f59e0b; } /* ===== Animations (Login form groups / subtle entrance) ===== */ .form-group.anim-enter { opacity:0; transform:translateY(20px); animation:slideInUp .6s ease forwards; } @keyframes slideInUp { to { opacity:1; transform:translateY(0); } } /* ===== Responsive adjustments (shared across auth pages) ===== */ @media (max-width: 991.98px){ .auth-card { flex-direction:column; max-width:580px; min-height:auto; } .auth-illustration { padding:2.2rem 1.4rem; } .auth-form-wrapper { padding:2.2rem 1.5rem; } .auth-form-header h2 { font-size:1.95rem; } .device-mockup { width:100px; height:100px; } .location-section { padding:20px; } .option-card { padding:1.75rem; } } @media (max-width: 575.98px){ .auth-page { padding:1.2rem .65rem; } .auth-card { border-radius:18px; } .auth-form-wrapper { padding:1.75rem 1rem; } .location-section { padding:18px; } .btn-lg { padding:14px 24px; font-size:1rem; } .step-number { width:42px; height:42px; font-size:.95rem; } .device-mockup { width:82px; height:82px; } .option-card { padding:1.5rem; } } /* ===== End account view styling ===== */ /* ================= PROFILE / ACCOUNT SETTINGS PAGE ================= */ .profile-settings-page { background:linear-gradient(180deg,#f5f7fa 0%,#ffffff 60%); min-height:100vh; } .profile-settings-card { border:1px solid #e5e7eb; border-radius:18px; box-shadow:0 10px 28px -8px rgba(24,39,75,.12),0 6px 12px -6px rgba(24,39,75,.08); } .profile-settings-card .card-body { position:relative; } .settings-header { border-bottom:1px solid #e5e7eb; } .settings-title { color:var(--shade-900); } .profile-grid { display:grid; grid-template-columns:1fr; gap:2rem; } @media (min-width: 992px){ .profile-grid { grid-template-columns:1fr 260px; align-items:start; } } .profile-avatar-fallback { width:160px; height:160px; background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); color:#fff; font-size:3.5rem; box-shadow:0 6px 18px -6px rgba(0,0,0,.35); } .profile-avatar-img { box-shadow:0 6px 18px -6px rgba(0,0,0,.25); object-fit:cover; border:4px solid #fff; } .profile-settings-form .form-label { font-size:.72rem; letter-spacing:.08em; font-weight:600; color:#374151; display:flex; align-items:center; gap:4px; } .profile-settings-form .form-control, .profile-settings-form .form-select { background:#f3f3f3; } .profile-settings-form .form-control:read-only { background:#f3f3f3; opacity:.9; } .profile-actions { border-top:1px solid #e5e7eb; padding-top:1rem; } /* =================================================================== */ /* ================= UNIFIED DASHBOARD STYLES (All roles) ================= */ .dashboard-page { background:linear-gradient(180deg,#f5f7fa 0%,#ffffff 70%); min-height:100vh; } .dashboard-header { border-bottom:1px solid #e5e7eb; padding-top:1.25rem; padding-bottom:1rem; margin-bottom:1.75rem; } .dashboard-header h1,.dashboard-header .h2 { font-weight:700; letter-spacing:.5px; color:var(--shade-900); } .dashboard-toolbar .btn { border-radius:10px; } .stat-tiles { --gap:1.25rem; display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-bottom:2rem; } .stat-tile { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:1.15rem 1.25rem; box-shadow:0 6px 20px -6px rgba(30,91,147,.12); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; } .stat-tile::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(30,91,147,.12),rgba(43,43,43,.05)); opacity:0; transition:.4s; } .stat-tile:hover::before { opacity:1; } .stat-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:#64748b; margin-bottom:.35rem; } .stat-value { font-size:1.55rem; font-weight:700; color:var(--shade-900); line-height:1.1; } .stat-icon { position:absolute; right:14px; top:14px; font-size:1.75rem; color:rgba(0,0,0,.15); } /* Border accent utilities (replaces inline styles) */ .border-accent-primary { border-left:6px solid var(--tekmetric-blue); } .border-accent-success { border-left:6px solid var(--success-green); } .border-accent-warning { border-left:6px solid #f59e0b; } .border-accent-info { border-left:6px solid #0ea5e9; } /* Tables within dashboard cards */ .dashboard-card { border:1px solid #e5e7eb; border-radius:18px; box-shadow:0 8px 24px -8px rgba(30,91,147,.10); overflow:hidden; background:#fff; } .dashboard-card + .dashboard-card { margin-top:1.75rem; } .dashboard-card .card-header, .dashboard-card-header { background:linear-gradient(135deg,#f8fafc,#eef2f7); padding:.9rem 1.25rem; border-bottom:1px solid #e2e8f0; } .dashboard-card .card-header h5, .dashboard-card-header h5, .dashboard-card .card-header h6 { font-weight:600; margin:0; font-size:.95rem; letter-spacing:.6px; text-transform:uppercase; color:var(--tekmetric-blue); } .dashboard-table thead th { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:#6b7280; background:#f1f5f9; border-bottom:2px solid #e2e8f0; } .dashboard-table tbody td { vertical-align:middle; } .dashboard-table .badge { font-size:.65rem; letter-spacing:.05em; padding:.35rem .55rem; border-radius:30px; } /* Breadcrumb / subheading spacing for dash simple pages */ .simple-metrics { display:flex; gap:1rem; flex-wrap:wrap; } .simple-metrics .metric { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:.85rem 1rem; min-width:160px; box-shadow:0 4px 14px -6px rgba(0,0,0,.08); } .simple-metrics .metric .label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:#64748b; display:block; margin-bottom:.25rem; } .simple-metrics .metric .value { font-weight:700; font-size:1.1rem; color:var(--shade-900); } /* Alerts within dashboards refined */ .dashboard-page .alert { border-radius:14px; border:none; box-shadow:0 4px 14px -6px rgba(0,0,0,.12); } /* Reusable spacing helpers */ .gap-1 { gap:.25rem; } .gap-2 { gap:.5rem; } .gap-3 { gap:1rem; } /* ================= SERVICE TICKET DASHBOARD SPECIFIC STYLES ================= */ /* Enhanced readability for Service Tickets Dashboard only - maintains existing dashboard-table consistency */ .dashboard-page .table-responsive { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Only apply enhanced table styles to tables with table-hover class (Service Tickets Dashboard) */ .dashboard-page .table.table-hover { margin-bottom: 0; font-size: 0.9rem; } .dashboard-page .table.table-hover thead th { background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%); color: var(--tekmetric-blue); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 0.75rem; border-bottom: 2px solid #e2e8f0; white-space: nowrap; vertical-align: middle; } .dashboard-page .table.table-hover tbody td { padding: 1rem 0.75rem; vertical-align: middle; border-bottom: 1px solid #f1f5f9; color: var(--shade-900); font-size: 0.9rem; line-height: 1.4; } .dashboard-page .table.table-hover tbody tr:hover { background-color: #f8fafc; transition: background-color 0.2s ease; } .dashboard-page .table.table-hover tbody tr.ticket-row:hover { background-color: #e3f2fd; cursor: pointer; } /* Enhanced badge styling for Service Tickets Dashboard only */ .dashboard-page .table.table-hover .badge { font-size: 0.75rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 20px; letter-spacing: 0.02em; text-transform: uppercase; } /* Customer and Vehicle links in Service Tickets Dashboard */ .dashboard-page .table.table-hover tbody td a { color: var(--tekmetric-blue); font-weight: 500; text-decoration: none; transition: color 0.2s ease; } .dashboard-page .table.table-hover tbody td a:hover { color: var(--shade-900); text-decoration: underline; } /* Sortable links styling */ .dashboard-page .sortable-link { color: var(--tekmetric-blue) !important; font-weight: 600; transition: color 0.2s ease; } .dashboard-page .sortable-link:hover { color: var(--shade-900) !important; text-decoration: underline !important; } /* Text alignment improvements for Service Tickets Dashboard */ .dashboard-page .table.table-hover tbody td:first-child { font-weight: 600; color: var(--tekmetric-blue); } .dashboard-page .table.table-hover tbody td .text-muted { color: #6b7280 !important; font-style: italic; } /* Responsive improvements for Service Tickets Dashboard */ @media (max-width: 1200px) { .dashboard-page .table.table-hover { font-size: 0.85rem; } .dashboard-page .table.table-hover thead th, .dashboard-page .table.table-hover tbody td { padding: 0.8rem 0.6rem; } } @media (max-width: 768px) { .dashboard-page .table-responsive { border-radius: 8px; } .dashboard-page .table.table-hover { font-size: 0.8rem; } .dashboard-page .table.table-hover thead th, .dashboard-page .table.table-hover tbody td { padding: 0.6rem 0.4rem; } .dashboard-page .table.table-hover .badge { font-size: 0.7rem; padding: 0.3rem 0.6rem; } } /* ================= MODAL WITH SIDEBAR POSITIONING ================= */ /* Ensure modals appear beside the sidebar, not overlaying it */ .modal-with-sidebar { margin-left: 250px !important; margin-right: 0 !important; max-width: calc(100vw - 250px) !important; } @media (max-width: 768px) { .modal-with-sidebar { margin-left: 0 !important; max-width: 100vw !important; } } /* ================= END MODAL WITH SIDEBAR POSITIONING ================= */ /* ===== Existing application styles retained below (sidebar, pagination, etc.) ===== */ /* === Unified Sidebar Styling (force consistent white text) === */ .sidebar { width:250px; height:100vh; position:fixed; left:0; top:0; z-index:100; overflow-y:auto; transition:all .3s; background:linear-gradient(180deg,#0f2436 0%,#0b1825 55%,#081019 100%) !important; box-shadow:2px 0 12px -3px rgba(0,0,0,.6); color:#fff !important; display:flex; flex-direction:column; } /* Ensure all descendants default to white unless explicitly re-colored (e.g., badges) */ .sidebar, .sidebar *:not(.badge):not(.text-danger):not(.bg-warning):not(.bg-success):not(.bg-danger) { color:#ffffff !important; } .sidebar .sidebar-link { background:transparent; border:none; padding:.55rem .75rem; width:100%; text-align:left; text-decoration:none; display:flex; align-items:center; border-radius:4px; font-weight:500; } .sidebar .sidebar-link i { color:#ffffff !important; } .sidebar .sidebar-link:hover, .sidebar .sidebar-link:focus { background:rgba(255,255,255,.12); text-decoration:none; } .sidebar .sidebar-item.active > .sidebar-link, .sidebar .sidebar-link.active { background:rgba(255,255,255,.18); font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } .sidebar .user-name strong { color:#fff !important; } .sidebar .user-role { opacity:.85; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; } .sidebar .logout-btn, .sidebar .btn { color:#fff !important; } .sidebar .logout-btn:hover { background:rgba(255,255,255,.15); } /* Remove obsolete duplicate/typo rule */ /* (Previous '.sidebar { display:flex; flex-direction:acolumn; }' removed) */ /* Pagination */ .pagination-container { display:flex; justify-content:space-between; align-items:center; margin-top:1rem; padding:.5rem 0; border-top:1px solid #dee2e6; } .pagination-display { display:flex; gap:1rem; align-items:center; } .pagination-range { font-weight:500; margin-right:auto; } .pagination-nav { display:flex; gap:.5rem; } .pagination-link, .pagination-action { padding:.25rem .75rem; border:1px solid #dee2e6; border-radius:4px; text-decoration:none; color:#007bff; white-space:nowrap; } .pagination-link:hover, .pagination-action:hover { background-color:#f8f9fa; } .pagination-action { background-color:#f1f8ff; } /*picture format Admin/userDetails.cshtml*/ .profile-picture { width:150px; height:150px; object-fit:cover; border-radius:12px; border:2px solid #e0e0e0; box-shadow:0 2px 12px rgba(0,0,0,0.08); background:#fafbfc; } .profile-picture-fallback { color:#b0b0b0; background:#fafbfc; border-radius:12px; width:150px; height:150px; display:inline-flex; align-items:center; justify-content:center; border:2px solid #e0e0e0; box-shadow:0 2px 12px rgba(0,0,0,0.08); } .gap-2 { gap:.5rem; } /* Layout with fixed left sidebar */ .main-with-sidebar { margin-left:250px; } @media (max-width: 768px) { .main-with-sidebar { margin-left:0; } } .main-with-sidebar .row > .sidebar + .col, .main-with-sidebar .row > .sidebar + [class*="col-"] { flex:1 1 auto; max-width:100%; padding-left:0 !important; } .main-with-sidebar .ms-sm-auto { margin-left:0 !important; } .main-with-sidebar .px-md-4 { padding-left:1rem !important; padding-right:1rem !important; } @supports selector(.row:has(.sidebar)) { .main-with-sidebar .row:has(.sidebar) { --bs-gutter-x:0; } } .main-with-sidebar .notifications-list { max-height:calc(100vh - 200px); overflow-y:auto; } .main-with-sidebar .notification-item { transition:all .2s ease-in-out; } .main-with-sidebar .notification-item:hover { transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1); } .main-with-sidebar .card { max-width:100%; overflow:hidden; } @media (max-width: 768px) { .main-with-sidebar .notifications-list { max-height:400px; } .main-with-sidebar .notification-item .col-md-4 { margin-top:1rem; text-align:left !important; } } /* When the sidebar is collapsed, ensure Bootstrap grid columns shrink/grow appropriately */ @supports selector(.row:has(.sidebar)) { html.sidebar-collapsed .main-with-sidebar .row:has(.sidebar) > [class*="col-"]:has(.sidebar) { flex: 0 0 60px; max-width: 60px; } html.sidebar-collapsed .main-with-sidebar .row:has(.sidebar) > [class*="col-"]:has(.sidebar) + [class*="col-"] { flex: 1 1 auto; max-width: calc(100% - 60px); } } /*BranchDetails*/ .employee-list-scroll.collapsed { max-height:360px; overflow-y:auto; } .employee-list-scroll table thead th { position:sticky; top:0; background:#fff; z-index:1; } /* ===== Unified Sidebar (shared across all roles) ===== */ .sidebar { display:flex; flex-direction:column; } .sidebar .sidebar-link { color:#ffffff; background:transparent; border:none; padding:.55rem .75rem; width:100%; text-align:left; text-decoration:none; display:flex; align-items:center; border-radius:4px; } .sidebar .sidebar-link:hover, .sidebar .sidebar-link:focus { background:rgba(255,255,255,.1); color:#fff; } .sidebar .active > a.sidebar-link, .sidebar .sidebar-link.active { background:rgba(255,255,255,.15); font-weight:600; } .sidebar-sublink { padding:.4rem 0; display:block; color:rgba(255,255,255,.55); } .sidebar-sublink:hover { color:#fff !important; } .btn-toggle { font-weight:500; } .btn-toggle.collapsed .fa-angle-down { transform:rotate(-90deg); transition:transform .2s; } .btn-toggle .fa-angle-down { transition:transform .2s; } .user-panel { font-size:.95rem; margin-bottom:1.25rem; } .avatar-wrapper { width:72px; height:72px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.08); } .avatar-img { width:100%; height:100%; object-fit:cover; display:block; } .avatar-fallback { width:100%; height:100%; color:rgba(255,255,255,.6); font-size:2rem; } .user-name { font-size:1.1rem; line-height:1.2; margin-bottom:3px; } .user-role { font-size:.7rem; color:rgba(255,255,255,.55); letter-spacing:.55px; text-transform:uppercase; } .btn-toggle-nav { margin-top:.25rem; } /* Registration Wizard (legacy retained) */ .registration-hero { background:radial-gradient(circle at 20% 20%, #6a87ff 0%, #635bff 35%, #4c46d7 70%, #3a2ea3 100%); padding:60px 20px 100px; text-align:center; color:#fff; position:relative; overflow:hidden; } .registration-hero h1 { font-weight:600; letter-spacing:.5px; font-size:2rem; margin:0; } @media (min-width:992px){ .registration-hero h1 { font-size:2.35rem; } } .wizard-wrapper { margin-top:-80px; margin-bottom:40px; } .wizard-card { background:#fff; border-radius:18px; box-shadow:0 10px 35px -8px rgba(46,40,130,.35),0 4px 18px -6px rgba(46,40,130,.25); overflow:hidden; } /* ... existing wizard styles retained ... */ /* Utility */ .text-muted-small { font-size:.8rem; color:#8a94a6; } /* Hover / subtle transitions */ .auth-card, .device-mockup, .btn, .form-control { transition:all .25s ease; } .auth-card:hover .device-mockup { transform:translateY(-4px); } .auth-card:hover { box-shadow:0 30px 60px rgba(0,0,0,.20); } /* Dashboard shape adjustments: only statistic tiles rounded */ .dashboard-card { border-radius:0 !important; } .dashboard-card .card-header { border-radius:0 !important; } .stat-tile { border-radius:18px !important; } .dashboard-header h1,.dashboard-header .h2 { margin-bottom:.75rem; line-height:1.15; } .stat-tiles { margin-top:.25rem; } /* Company owner dashboard company-info alignment */ .company-info p { display:flex; gap:.5rem; margin-bottom:.65rem; font-size:.9rem; } .company-info p strong { width:170px; flex-shrink:0; font-weight:600; color:#1f2937; } @media (max-width: 575.98px){ .company-info p { flex-direction:column; gap:.15rem; } .company-info p strong { width:auto; } } /* Info table - remove vertical column lines (company / branch summary) */ .info-table { border-collapse:separate; border-spacing:0; } .info-table th, .info-table td { border-right:none !important; border-left:none !important; } .info-table tr td + th, .info-table tr th + td, .info-table tr td + td, .info-table tr th + th { border-left:none !important; } /* Aligned info tables (company / branch detail summary) */ .info-table th { width:190px; font-weight:600; color:#1f2937; background:#f8fafc; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; } .info-table th, .info-table td { padding:.85rem 1.1rem; vertical-align:middle; border-top:1px solid #e5e7eb; border-left:none !important; border-right:none !important; } .info-table tbody tr:first-child th, .info-table tbody tr:first-child td { border-top:none; } .info-table td { font-size:.9rem; color:#1f2937; } @media (max-width: 767.98px){ .info-table th { width:140px; font-size:.7rem; } .info-table td { font-size:.85rem; } } /* Unified text accent & neutral colors (account palette reuse */ .text-accent { color:var(--tekmetric-blue)!important; } body, .card, .dashboard-card, .dashboard-page { color:var(--shade-900); } .card-title, h1,h2,h3,h4,h5,h6 { color:var(--shade-900); } .table thead th.text-muted, .text-muted { color:var(--nardo-grey)!important; } /* ================= MARKETING / HOME PAGES (migrated from former customer.css) ================= */ /* Navbar sizing */ .navbar { height:64px; padding-top:0; padding-bottom:0; } .navbar-brand img { height:90px; width:auto; max-height:none; margin-top:-13px; margin-bottom:-13px; image-rendering:-webkit-optimize-contrast; } @media (max-width:575.98px){ .navbar-brand img { height:72px; margin-top:-8px; margin-bottom:-8px; } } /* Hero sections */ #hero, .hero-section { background:linear-gradient(120deg,#1e5b93 0%, #2566ad 100%); color:#fff; min-height:480px; padding:80px 0; position:relative; overflow:hidden; } .hero-title { font-size:2.8rem; font-weight:800; line-height:1.1; margin-bottom:18px; color:#fff; text-shadow:0 2px 8px rgba(30,91,147,.18),0 1px 0 #1e5b93; } .hero-subtitle { font-size:1.25rem; font-weight:400; margin-bottom:32px; color:#eaf6ff; text-shadow:0 1px 4px rgba(30,91,147,.18); } .btn-hero, .btn-hero-accent { font-weight:700; border-radius:10px; padding:.8rem 2.2rem; font-size:1.1rem; box-shadow:0 2px 12px rgba(30,91,147,.10); transition:background .25s,color .25s,transform .25s; } .btn-hero { background:#fff; color:var(--tekmetric-blue); } .btn-hero:hover { background:var(--tekmetric-blue); color:#fff; } .btn-hero-accent { background:#f0572a; color:#fff; border:none; } .btn-hero-accent:hover, .btn-hero-accent:focus { background:#d94e25; color:#fff; } .hero-img { max-width:100%; height:320px; object-fit:contain; filter:drop-shadow(0 8px 32px rgba(30,91,147,.18)); } @media (max-width:991px){ .hero-title { font-size:2.1rem; } .hero-img { height:180px; margin-top:2rem; } #hero, .hero-section { padding:60px 0 40px; min-height:380px; } } /* Features */ .features-section { background:var(--light-grey); padding:60px 0; } .feature-card { background:#fff; border-radius:18px; box-shadow:0 4px 24px rgba(30,91,147,.07); padding:36px 24px 28px; transition:.25s; border:1.5px solid #e6e8ec; min-height:320px; display:flex; flex-direction:column; align-items:center; } .feature-card:hover { box-shadow:0 8px 32px rgba(30,91,147,.13); transform:translateY(-6px) scale(1.03); border-color:var(--tekmetric-blue); } .feature-icon { font-size:1.8rem; color:#fff; background:linear-gradient(135deg,#1e5b93 60%,#2566ad 100%); border-radius:50%; height:72px; width:72px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 8px 32px rgba(30,91,147,.18),0 2px 8px rgba(30,91,147,.10); } @media (max-width:767px){ .feature-card { min-height:0; padding:28px 12px 20px; } .feature-icon { height:44px; width:44px; font-size:1.1rem; } } /* Timeline (How it works) */ #how-it-works { position:relative; padding:80px 0; overflow-x:auto; } #how-it-works .timeline-container { display:flex; justify-content:space-between; align-items:flex-start; position:relative; padding:50px 0; } #how-it-works .timeline-container::before { content:""; position:absolute; top:80px; left:5%; right:5%; height:4px; background:#007bff; } #how-it-works .timeline-step { flex:1; min-width:180px; max-width:250px; text-align:center; position:relative; z-index:2; padding:0 10px; } #how-it-works .step-circle { width:40px; height:40px; background:#007bff; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.1rem; margin:0 auto 20px; position:absolute; top:60px; left:50%; transform:translateX(-50%); box-shadow:0 0 0 5px #f8f9fa; } #how-it-works .step-content { margin-top:90px; background:#fff; border-radius:8px; padding:20px; box-shadow:0 4px 15px rgba(0,0,0,.1); text-align:left; min-height:180px; display:flex; flex-direction:column; transition:.3s; } #how-it-works .timeline-step:hover .step-content { transform:translateY(-5px); box-shadow:0 6px 20px rgba(0,123,255,.2); } #how-it-works .step-content h5 { color:#007bff; margin-bottom:10px; } @media (max-width:768px){ #how-it-works .timeline-container { flex-direction:column; align-items:center; padding:20px 0; } #how-it-works .timeline-container::before { left:50%; transform:translateX(-50%); width:4px; height:calc(100% - 40px); top:20px; bottom:20px; } #how-it-works .timeline-step { width:90%; max-width:400px; margin-bottom:40px; } #how-it-works .step-circle { position:relative; top:auto; left:auto; transform:none; margin:0 auto 20px; } #how-it-works .step-content { margin-top:0; min-height:auto; } } /* Service cards & progress */ .service-card, .service-progress-card { background:#fff; border-radius:22px; box-shadow:0 8px 32px rgba(30,91,147,.18),0 2px 8px rgba(30,91,147,.10); padding:32px 28px 18px; border:1.5px solid #e6e8ec; } .service-card { max-width:410px; min-height:420px; } .service-card .badge.bg-success { font-size:1rem; font-weight:600; border-radius:8px; padding:.4em 1em; background:#1ec773 !important; color:#fff !important; } .timeline li { display:flex; align-items:flex-start; margin-bottom:14px; font-size:1.05rem; color:#1e5b93; gap:10px; } .timeline li i { font-size:1.1rem; margin-top:2px; min-width:22px; } .timeline li.completed i { color:#1ec773; } .timeline li.in-progress i { color:#f0572a; animation:spin 1.2s linear infinite; } .timeline li span { font-weight:600; margin-right:8px; color:#1e5b93; } .timeline li.in-progress span { color:#f0572a; } .timeline li small { color:#888; font-size:.85rem; margin-left:auto; } @keyframes spin { to { transform:rotate(360deg); } } /* FAQ / Privacy / Contact sections */ .faq-section, .contact-section, .privacy-section { background:#fff; position:relative; overflow:hidden; min-height:100vh; padding-top:120px; } .faq-section::before, .contact-section::before, .privacy-section::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.02) 1px,transparent 1px); background-size:20px 20px; z-index:1; } .faq-title, .contact-title, .privacy-title { font-weight:700; letter-spacing:.5px; } .faq-title { font-size:2.5rem; } .contact-title, .privacy-title { font-size:3rem; } @media (max-width:991px){ .contact-title, .privacy-title { font-size:2.5rem; } } @media (max-width:768px){ .faq-title { font-size:2rem; } .contact-title, .privacy-title { font-size:2rem; } } .faq-question, .privacy-question { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 0; cursor:pointer; border:none; background:transparent; width:100%; text-align:left; transition:.3s; } .faq-question:hover, .privacy-question:hover { background:rgba(30,91,147,.02); } .faq-answer, .privacy-answer { padding:0 0 1.5rem; color:var(--nardo-grey); font-size:1rem; line-height:1.6; display:none; } .faq-answer.show, .privacy-answer.show { display:block; } /* Footer */ footer { background:var(--shade-900); color:var(--light-grey); padding:48px 0 0; font-size:1rem; border-top:4px solid var(--tekmetric-blue); } footer h6 { color:var(--tekmetric-blue); font-size:1.05rem; font-weight:700; margin-bottom:1rem; letter-spacing:.5px; } footer a { color:var(--light-grey); text-decoration:none; transition:color .25s; } footer a:hover { color:#f0572a; text-decoration:underline; } footer .footer-bottom { border-top:1px solid #333; margin-top:2rem; padding:1.2rem 0 .5rem; text-align:center; color:#888; font-size:.9rem; } footer .social-icons a { font-size:1.3rem; margin-right:16px; color:var(--tekmetric-blue); transition:color .25s; } footer .social-icons a:hover { color:#f0572a; } /* ================= END MARKETING / HOME PAGES ================= */ /* ====== SHARED AUTH LAYOUT (Login.cshtml, Register.cshtml, CustomerRegister.cshtml, CompanyOwnerRegister.cshtml, AcceptInvitation.cshtml, ForgotPassword*.cshtml, ResetPassword*.cshtml, ExternalLoginConfirmation.cshtml, RegistrationSuccess.cshtml, ConfirmEmail.cshtml) ====== */ .auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); } .auth-page::before { content:""; position:absolute; inset:0; background:url('data:image/svg+xml,'); opacity:.3; pointer-events:none; } /* Restore original default ROW layout (was column) */ .auth-card { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border-radius:24px; box-shadow:0 25px 50px rgba(0,0,0,0.15); overflow:hidden; width:100%; max-width:1000px; display:flex; border:1px solid rgba(255,255,255,0.2); min-height:600px; position:relative; } /* Collapse to column ONLY on small screens (match original per-view inline styles) */ @media (max-width: 768px){ .auth-card { flex-direction:column; min-height:auto; } } .auth-illustration { flex:1; background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); position:relative; display:flex; align-items:center; justify-content:center; padding:3rem 2rem; overflow:hidden; color:var(--white); } /* On large screens keep a consistent visual width ratio only when illustration exists */ @media (min-width: 992px){ .auth-card > .auth-illustration { flex:0 0 50%; max-width:50%; } .auth-card > .auth-illustration + .auth-form-wrapper { flex:0 0 50%; max-width:50%; } /* Stand‑alone form (no illustration) stays full width */ .auth-card > .auth-form-wrapper:first-child { flex:1 1 auto; max-width:100%; } } .auth-illustration::before, .auth-illustration::after { content:""; position:absolute; width:200%; height:200%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%); animation:auth-float 8s ease-in-out infinite; } .auth-illustration::before { top:-55%; left:-55%; animation-duration:6s; } .auth-illustration::after { bottom:-55%; right:-55%; animation-direction:reverse; animation-duration:9s; background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%); } @keyframes auth-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-18px) rotate(180deg); } } .illustration-inner, .illustration-content { position:relative; z-index:2; text-align:center; } .device-mockup { width:140px; height:140px; margin:0 auto 1rem; position:relative; background:#fff; border-radius:26px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; } .device-screen { width:100%; height:100%; border-radius:20px; background:linear-gradient(45deg,var(--tekmetric-blue),var(--shade-900)); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .4s; transform:perspective(1000px) rotateY(-12deg) rotateX(5deg); } .device-screen:hover { transform:perspective(1000px) rotateY(-6deg) rotateX(2deg); } .quick-links .btn { border-radius:12px; font-weight:600; transition:all .3s; border:2px solid transparent; } .quick-links .btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.2); } /* Form wrapper */ .auth-form-wrapper { flex:1; padding:3rem 2.5rem; display:flex; flex-direction:column; justify-content:center; } .auth-form-header h2 { font-size:2.2rem; font-weight:700; } .text-gradient { background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .auth-form { width:100%; max-width:100%; margin:0 auto; } /* ===== Shared form elements (all account views) ===== */ .form-group { margin-bottom:1.25rem; } .form-label { font-weight:600; margin-bottom:.55rem; color:var(--shade-900); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; display:inline-flex; align-items:center; gap:2px; } /* Inline existing required indicator that may be rendered as immediate sibling */ .form-group > .form-label + .text-danger { display:inline; margin:0; padding:0; position:static; line-height:1; } /* Prevent duplicate stacked stars (hide duplicates if any appear on separate lines) */ .form-group > .form-label + .text-danger + .text-danger { display:none; } .input-wrapper { position:relative; display:flex; align-items:center; } .input-icon { position:absolute; left:16px; color:var(--nardo-grey); z-index:2; font-size:.95rem; pointer-events:none; } /* Simplified input styling */ .form-control { border:1px solid #d1d5db; border-radius:6px; padding:10px 14px; font-size:.95rem; background:#f3f3f3; transition:border-color .2s, background .2s; box-shadow:none; } .input-wrapper .form-control { padding-left:44px; } /* keep space for left icon when present */ .form-control:focus { border-color:var(--tekmetric-blue); background:#fff; box-shadow:0 0 0 1px var(--tekmetric-blue); transform:none; } .form-control.is-invalid { border-color:var(--danger-red); background:#fef2f2; } .form-control.is-invalid:focus { box-shadow:0 0 0 1px var(--danger-red); } .form-text.text-muted { font-size:.7rem; } /* Select (dropdown) styling aligned with text inputs */ .form-select, select.form-control, select { background:#f3f3f3; border:1px solid #d1d5db; border-radius:6px; padding:10px 38px 10px 14px; font-size:.95rem; line-height:1.4; box-shadow:none; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px 14px; cursor:pointer; } .form-select:focus, select.form-control:focus, select:focus { border-color:var(--tekmetric-blue); background:#fff; box-shadow:0 0 0 1px var(--tekmetric-blue); outline:none; } .form-select.is-invalid, select.form-control.is-invalid, select.is-invalid { border-color:var(--danger-red); background:#fef2f2; } .form-select.is-invalid:focus, select.form-control.is-invalid:focus, select.is-invalid:focus { box-shadow:0 0 0 1px var(--danger-red); } /* When select placed inside input-wrapper that has an icon */ .input-wrapper select.form-select, .input-wrapper select.form-control, .input-wrapper select { padding-left:44px; } /* ===== Buttons (variants shared site-wide) ===== */ .btn-primary { background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); border:none; color:var(--white); box-shadow:0 10px 25px -8px rgba(30,91,147,0.5); transition:all .3s; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(30,91,147,0.55); } .btn-primary:active { transform:translateY(0); } .btn-success { background:linear-gradient(135deg,var(--success-green) 0%,var(--success-green-dark) 100%); border:none; color:#fff; transition:all .3s; } .btn-success:hover { transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(16,185,129,.55); } .btn-outline-secondary { border:2px solid #d1d5db; color:var(--nardo-grey); background:transparent; transition:all .3s; } .btn-outline-secondary:hover { background:#6b7280; border-color:#6b7280; color:#fff; } .btn-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; border:2px solid #e5e7eb; background:var(--white); color:var(--nardo-grey); transition:all .3s; } .btn-icon:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,.12); border-color:var(--tekmetric-blue); color:var(--tekmetric-blue); } /* ===== Buttons (shared - scoped SIZE to account/auth pages only) ===== */ .auth-page .btn { border-radius:12px; font-weight:600; border:2px solid transparent; padding:10px 20px; } .auth-page .btn-lg { padding:14px 28px; font-size:1rem; } /* ===== Links & text utilities ===== */ .link-primary { color:var(--tekmetric-blue); text-decoration:none; font-weight:600; transition:color .3s; } .link-primary:hover { color:var(--shade-900); text-decoration:underline; } .login-link { color:var(--nardo-grey); font-size:.95rem; } .text-danger { color:var(--danger-red)!important; font-size:.8rem; margin-top:.35rem; display:block; } .text-muted { color:var(--nardo-grey)!important; } .fw-semibold { font-weight:600; } .tracking-1 { letter-spacing:.5px; } /* ===== Divider (Login social) ===== */ .divider-text { position:relative; text-align:center; font-size:.7rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; color:#6d7c90; margin:2rem 0; } .divider-text::before, .divider-text::after { content:""; position:absolute; top:50%; width:38%; height:1px; background:linear-gradient(90deg,rgba(0,0,0,.15),transparent); } .divider-text::after { right:0; background:linear-gradient(270deg,rgba(0,0,0,.15),transparent); } .divider-text::before { left:0; } /* ===== CompanyOwnerRegister.cshtml (step indicators, progress, step visibility) ===== */ .step-indicator { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; margin-bottom:2rem; } .step-indicator:not(:last-child)::after { content:""; position:absolute; top:25px; left:50%; width:100%; height:3px; background:linear-gradient(90deg,#e5e7eb,#e5e7eb); z-index:1; } .step-indicator.active:not(:last-child)::after { background:linear-gradient(90deg,var(--tekmetric-blue),var(--shade-900)); } .step-number { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,#e5e7eb,#d1d5db); color:var(--nardo-grey); display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px; position:relative; z-index:2; transition:all .3s; font-size:1.05rem; } .step-indicator.active .step-number { background:linear-gradient(135deg,var(--tekmetric-blue),var(--shade-900)); color:#fff; transform:scale(1.08); box-shadow:0 8px 25px rgba(30,91,147,.35); } .step-text { font-size:.85rem; color:var(--nardo-grey); font-weight:500; } .step-indicator.active .step-text { color:var(--tekmetric-blue); } .auth-card .progress { height:8px; border-radius:10px; background:#e5e7eb; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.1); } .auth-card .progress-bar { background:linear-gradient(90deg,var(--tekmetric-blue),var(--shade-900)); transition:width .5s; } .step-content { display:none; animation:fadeInUp .5s ease forwards; } .step-content.active { display:block; } @keyframes fadeInUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0);} } .review-section { background:linear-gradient(135deg,#f8fafc,#f1f5f9); padding:20px; border-radius:12px; margin-bottom:20px; border:1px solid #e2e8f0; font-size:.9rem; } /* ===== CustomerRegister.cshtml (location section) ===== */ .location-section { background:linear-gradient(135deg,var(--light-grey) 0%,#e2e8f0 100%); padding:24px; border-radius:16px; border:1px solid #e2e8f0; margin-bottom:2rem; } .section-header { text-align:center; margin-bottom:1.5rem; } .section-title { font-size:1.25rem; font-weight:600; color:var(--shade-900); margin-bottom:.4rem; } .section-description { color:var(--nardo-grey); font-size:.85rem; } /* ===== Register.cshtml (registration options) ===== */ .registration-options { max-width:600px; margin:0 auto; } .option-card { background:var(--white); border:2px solid #f8f9fa; border-radius:15px; padding:2rem; text-align:center; height:100%; transition:all .3s ease; box-shadow:0 5px 15px rgba(0,0,0,0.08); } .option-card:hover { transform:translateY(-5px); border-color:var(--tekmetric-blue); box-shadow:0 10px 25px rgba(30,91,147,0.15); } .option-icon { margin-bottom:1.5rem; } .option-title { color:var(--shade-900); font-weight:600; margin-bottom:1rem; } .option-description { color:var(--nardo-grey); margin-bottom:1.5rem; line-height:1.6; font-size:.9rem; } /* ===== Success / confirmation pages (RegistrationSuccess.cshtml, ConfirmEmail.cshtml, ResetPasswordConfirmation.cshtml) ===== */ .success-icon i { font-size:4rem; color:var(--tekmetric-blue); } /* ===== Alerts (shared) ===== */ .alert { border-radius:12px; border:none; padding:16px 20px; box-shadow:0 4px 15px rgba(0,0,0,0.08); } .alert-success { background:linear-gradient(135deg,#d4edda,#c3e6cb); color:var(--tekmetric-blue); border-left:4px solid var(--tekmetric-blue); } .alert-info { background:linear-gradient(135deg,#d1ecf1,#bee5eb); color:var(--tekmetric-blue); border-left:4px solid var(--tekmetric-blue); } .alert-warning { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border-left:4px solid #f59e0b; } /* ===== Animations (Login form groups / subtle entrance) ===== */ .form-group.anim-enter { opacity:0; transform:translateY(20px); animation:slideInUp .6s ease forwards; } @keyframes slideInUp { to { opacity:1; transform:translateY(0); } } /* ===== Responsive adjustments (shared across auth pages) ===== */ @media (max-width: 991.98px){ .auth-card { flex-direction:column; max-width:580px; min-height:auto; } .auth-illustration { padding:2.2rem 1.4rem; } .auth-form-wrapper { padding:2.2rem 1.5rem; } .auth-form-header h2 { font-size:1.95rem; } .device-mockup { width:100px; height:100px; } .location-section { padding:20px; } .option-card { padding:1.75rem; } } @media (max-width: 575.98px){ .auth-page { padding:1.2rem .65rem; } .auth-card { border-radius:18px; } .auth-form-wrapper { padding:1.75rem 1rem; } .location-section { padding:18px; } .btn-lg { padding:14px 24px; font-size:1rem; } .step-number { width:42px; height:42px; font-size:.95rem; } .device-mockup { width:82px; height:82px; } .option-card { padding:1.5rem; } } /* ====== SHARED AUTH LAYOUT (Login.cshtml, Register.cshtml, CustomerRegister.cshtml, CompanyOwnerRegister.cshtml, AcceptInvitation.cshtml, ForgotPassword*.cshtml, ResetPassword*.cshtml, ExternalLoginConfirmation.cshtml, RegistrationSuccess.cshtml, ConfirmEmail.cshtml) ====== */ .auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); } .auth-page::before { content:""; position:absolute; inset:0; background:url('data:image/svg+xml,'); opacity:.3; pointer-events:none; } /* Restore original default ROW layout (was column) */ .auth-card { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border-radius:24px; box-shadow:0 25px 50px rgba(0,0,0,0.15); overflow:hidden; width:100%; max-width:1000px; display:flex; border:1px solid rgba(255,255,255,0.2); min-height:600px; position:relative; } /* Collapse to column ONLY on small screens (match original per-view inline styles) */ @media (max-width: 768px){ .auth-card { flex-direction:column; min-height:auto; } } .auth-illustration { flex:1; background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); position:relative; display:flex; align-items:center; justify-content:center; padding:3rem 2rem; overflow:hidden; color:var(--white); } /* On large screens keep a consistent visual width ratio only when illustration exists */ @media (min-width: 992px){ .auth-card > .auth-illustration { flex:0 0 50%; max-width:50%; } .auth-card > .auth-illustration + .auth-form-wrapper { flex:0 0 50%; max-width:50%; } /* Stand‑alone form (no illustration) stays full width */ .auth-card > .auth-form-wrapper:first-child { flex:1 1 auto; max-width:100%; } } .auth-illustration::before, .auth-illustration::after { content:""; position:absolute; width:200%; height:200%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%); animation:auth-float 8s ease-in-out infinite; } .auth-illustration::before { top:-55%; left:-55%; animation-duration:6s; } .auth-illustration::after { bottom:-55%; right:-55%; animation-direction:reverse; animation-duration:9s; background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%); } @keyframes auth-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-18px) rotate(180deg); } } .illustration-inner, .illustration-content { position:relative; z-index:2; text-align:center; } .device-mockup { width:140px; height:140px; margin:0 auto 1rem; position:relative; background:#fff; border-radius:26px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; } .device-screen { width:100%; height:100%; border-radius:20px; background:linear-gradient(45deg,var(--tekmetric-blue),var(--shade-900)); display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .4s; transform:perspective(1000px) rotateY(-12deg) rotateX(5deg); } .device-screen:hover { transform:perspective(1000px) rotateY(-6deg) rotateX(2deg); } .quick-links .btn { border-radius:12px; font-weight:600; transition:all .3s; border:2px solid transparent; } .quick-links .btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.2); } /* Form wrapper */ .auth-form-wrapper { flex:1; padding:3rem 2.5rem; display:flex; flex-direction:column; justify-content:center; } .auth-form-header h2 { font-size:2.2rem; font-weight:700; } .text-gradient { background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .auth-form { width:100%; max-width:100%; margin:0 auto; } /* ===== Shared form elements (all account views) ===== */ .form-group { margin-bottom:1.25rem; } .form-label { font-weight:600; margin-bottom:.55rem; color:var(--shade-900); font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; display:inline-flex; align-items:center; gap:2px; } /* Inline existing required indicator that may be rendered as immediate sibling */ .form-group > .form-label + .text-danger { display:inline; margin:0; padding:0; position:static; line-height:1; } /* Prevent duplicate stacked stars (hide duplicates if any appear on separate lines) */ .form-group > .form-label + .text-danger + .text-danger { display:none; } .input-wrapper { position:relative; display:flex; align-items:center; } .input-icon { position:absolute; left:16px; color:var(--nardo-grey); z-index:2; font-size:.95rem; pointer-events:none; } /* Simplified input styling */ .form-control { border:1px solid #d1d5db; border-radius:6px; padding:10px 14px; font-size:.95rem; background:#f3f3f3; transition:border-color .2s, background .2s; box-shadow:none; } .input-wrapper .form-control { padding-left:44px; } /* keep space for left icon when present */ .form-control:focus { border-color:var(--tekmetric-blue); background:#fff; box-shadow:0 0 0 1px var(--tekmetric-blue); transform:none; } .form-control.is-invalid { border-color:var(--danger-red); background:#fef2f2; } .form-control.is-invalid:focus { box-shadow:0 0 0 1px var(--danger-red); } .form-text.text-muted { font-size:.7rem; } /* Select (dropdown) styling aligned with text inputs */ .form-select, select.form-control, select { background:#f3f3f3; border:1px solid #d1d5db; border-radius:6px; padding:10px 38px 10px 14px; font-size:.95rem; line-height:1.4; box-shadow:none; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px 14px; cursor:pointer; } .form-select:focus, select.form-control:focus, select:focus { border-color:var(--tekmetric-blue); background:#fff; box-shadow:0 0 0 1px var(--tekmetric-blue); outline:none; } .form-select.is-invalid, select.form-control.is-invalid, select.is-invalid { border-color:var(--danger-red); background:#fef2f2; } .form-select.is-invalid:focus, select.form-control.is-invalid:focus, select.is-invalid:focus { box-shadow:0 0 0 1px var(--danger-red); } /* When select placed inside input-wrapper that has an icon */ .input-wrapper select.form-select, .input-wrapper select.form-control, .input-wrapper select { padding-left:44px; } /* ===== Buttons (variants shared site-wide) ===== */ .btn-primary { background:linear-gradient(135deg,var(--tekmetric-blue) 0%,var(--shade-900) 100%); border:none; color:var(--white); box-shadow:0 10px 25px -8px rgba(30,91,147,0.5); transition:all .3s; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(30,91,147,0.55); } .btn-primary:active { transform:translateY(0); } .btn-success { background:linear-gradient(135deg,var(--success-green) 0%,var(--success-green-dark) 100%); border:none; color:#fff; transition:all .3s; } .btn-success:hover { transform:translateY(-2px); box-shadow:0 18px 38px -10px rgba(16,185,129,.55); } .btn-outline-secondary { border:2px solid #d1d5db; color:var(--nardo-grey); background:transparent; transition:all .3s; } .btn-outline-secondary:hover { background:#6b7280; border-color:#6b7280; color:#fff; } .btn-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; border:2px solid #e5e7eb; background:var(--white); color:var(--nardo-grey); transition:all .3s; } .btn-icon:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,.12); border-color:var(--tekmetric-blue); color:var(--tekmetric-blue); } /* ===== Buttons (shared - scoped SIZE to account/auth pages only) ===== */ .auth-page .btn { border-radius:12px; font-weight:600; border:2px solid transparent; padding:10px 20px; } .auth-page .btn-lg { padding:14px 28px; font-size:1rem; } /* ===== Links & text utilities ===== */ .link-primary { color:var(--tekmetric-blue); text-decoration:none; font-weight:600; transition:color .3s; } .link-primary:hover { color:var(--shade-900); text-decoration:underline; } .login-link { color:var(--nardo-grey); font-size:.95rem; } .text-danger { color:var(--danger-red)!important; font-size:.8rem; margin-top:.35rem; display:block; } .text-muted { color:var(--nardo-grey)!important; } .fw-semibold { font-weight:600; } .tracking-1 { letter-spacing:.5px; } /* ===== Divider (Login social) ===== */ .divider-text { position:relative; text-align:center; font-size:.7rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; color:#6d7c90; margin:2rem 0; } .divider-text::before, .divider-text::after { content:""; position:absolute; top:50%; width:38%; height:1px; background:linear-gradient(90deg,rgba(0,0,0,.15),transparent); } .divider-text::after { right:0; background:linear-gradient(270deg,rgba(0,0,0,.15),transparent); } .divider-text::before { left:0; } /* ===== CompanyOwnerRegister.cshtml (step indicators, progress, step visibility) ===== */ .step-indicator { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; margin-bottom:2rem; } .step-indicator:not(:last-child)::after { content:""; position:absolute; top:25px; left:50%; width:100%; height:3px; background:linear-gradient(90deg,#e5e7eb,#e5e7eb); z-index:1; } .step-indicator.active:not(:last-child)::after { background:linear-gradient(90deg,var(--tekmetric-blue),var(--shade-900)); } .step-number { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,#e5e7eb,#d1d5db); color:var(--nardo-grey); display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px; position:relative; z-index:2; transition:all .3s; font-size:1.05rem; } .step-indicator.active .step-number { background:linear-gradient(135deg,var(--tekmetric-blue),var(--shade-900)); color:#fff; transform:scale(1.08); box-shadow:0 8px 25px rgba(30,91,147,.35); } .step-text { font-size:.85rem; color:var(--nardo-grey); font-weight:500; } .step-indicator.active .step-text { color:var(--tekmetric-blue); } .auth-card .progress { height:8px; border-radius:10px; background:#e5e7eb; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.1); } .auth-card .progress-bar { background:linear-gradient(90deg,var(--tekmetric-blue),var(--shade-900)); transition:width .5s; } .step-content { display:none; animation:fadeInUp .5s ease forwards; } .step-content.active { display:block; } @keyframes fadeInUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0);} } .review-section { background:linear-gradient(135deg,#f8fafc,#f1f5f9); padding:20px; border-radius:12px; margin-bottom:20px; border:1px solid #e2e8f0; font-size:.9rem; } /* ===== Professional Review Cards for Step 3 (compact) ===== */ .review-panels, .review-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; /* tighter spacing */ margin-bottom: 1.5rem; /* less vertical space */ } .review-card { background: #fff; border: 1px solid #dfe7f1; border-radius: 18px; box-shadow: 0 8px 24px -14px rgba(30,91,147,.22), 0 6px 14px -10px rgba(24,39,75,.12); display: flex; flex-direction: column; overflow: hidden; } /* Soft blue header band like screenshot, but shorter */ .review-card-header { display: flex; align-items: center; gap: .55rem; padding: .75rem 1rem; /* shorter header height */ font-weight: 700; font-size: .9rem; letter-spacing: .02em; text-transform: uppercase; color: var(--tekmetric-blue); background: linear-gradient(180deg, #e9f1f8 0%, #e6edf6 100%); border-bottom: 1px solid #d7e2ef; } /* Always use same header tint for both cards */ .personal-info-card .review-card-header, .company-info-card .review-card-header { background: linear-gradient(180deg, #e9f1f8 0%, #e6edf6 100%); color: var(--tekmetric-blue); } /* Body rows – denser */ .review-list, .review-card-body { list-style: none; margin: 0; padding: .9rem 1rem 1rem; /* less padding = shorter card */ display: flex; flex-direction: column; gap: .1rem; /* remove extra gaps between rows */ } .review-item { display: flex; align-items: flex-start; padding: .5rem 0; /* row height reduced */ font-size: .92rem; line-height: 1.35; border-bottom: 1px solid #e9eef5; } .review-item:last-child { border-bottom: none; } /* Label/value columns like screenshot but narrower */ .review-label { width: 150px; /* was 170px */ flex-shrink: 0; font-weight: 600; color: #1f2937; } .review-value { flex: 1; color: #374151; word-break: break-word; } /* Subtle hover */ .review-card:hover { box-shadow: 0 14px 36px -18px rgba(30,91,147,.26), 0 8px 18px -12px rgba(24,39,75,.14); } /* Responsive tweaks */ @media (max-width: 575.98px) { .review-label { width: 110px; } .review-panels { gap: 1rem; } } /* ===== CustomerRegister.cshtml (location section) ===== */ .location-section { background:linear-gradient(135deg,var(--light-grey) 0%,#e2e8f0 100%); padding:24px; border-radius:16px; border:1px solid #e2e8f0; margin-bottom:2rem; } .section-header { text-align:center; margin-bottom:1.5rem; } .section-title { font-size:1.25rem; font-weight:600; color:var(--shade-900); margin-bottom:.4rem; } .section-description { color:var(--nardo-grey); font-size:.85rem; } /* ===== Register.cshtml (registration options) ===== */ .registration-options { max-width:600px; margin:0 auto; } .option-card { background:var(--white); border:2px solid #f8f9fa; border-radius:15px; padding:2rem; text-align:center; height:100%; transition:all .3s ease; box-shadow:0 5px 15px rgba(0,0,0,0.08); } .option-card:hover { transform:translateY(-5px); border-color:var(--tekmetric-blue); box-shadow:0 10px 25px rgba(30,91,147,0.15); } .option-icon { margin-bottom:1.5rem; } .option-title { color:var(--shade-900); font-weight:600; margin-bottom:1rem; } .option-description { color:var(--nardo-grey); margin-bottom:1.5rem; line-height:1.6; font-size:.9rem; } /* ===== Success / confirmation pages (RegistrationSuccess.cshtml, ConfirmEmail.cshtml, ResetPasswordConfirmation.cshtml) ===== */ .success-icon i { font-size:4rem; color:var(--tekmetric-blue); } /* ===== Alerts (shared) ===== */ .alert { border-radius:12px; border:none; padding:16px 20px; box-shadow:0 4px 15px rgba(0,0,0,0.08); } .alert-success { background:linear-gradient(135deg,#d4edda,#c3e6cb); color:var(--tekmetric-blue); border-left:4px solid var(--tekmetric-blue); } .alert-info { background:linear-gradient(135deg,#d1ecf1,#bee5eb); color:var(--tekmetric-blue); border-left:4px solid var(--tekmetric-blue); } .alert-warning { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; border-left:4px solid #f59e0b; } /* ===== Animations (Login form groups / subtle entrance) ===== */ .form-group.anim-enter { opacity:0; transform:translateY(20px); animation:slideInUp .6s ease forwards; } @keyframes slideInUp { to { opacity:1; transform:translateY(0); } } /* ===== Responsive adjustments (shared across auth pages) ===== */ @media (max-width: 991.98px){ .auth-card { flex-direction:column; max-width:580px; min-height:auto; } .auth-illustration { padding:2.2rem 1.4rem; } .auth-form-wrapper { padding:2.2rem 1.5rem; } .auth-form-header h2 { font-size:1.95rem; } .device-mockup { width:100px; height:100px; } .location-section { padding:20px; } .option-card { padding:1.75rem; } } @media (max-width: 575.98px){ .auth-page { padding:1.2rem .65rem; } .auth-card { border-radius:18px; } .auth-form-wrapper { padding:1.75rem 1rem; } .location-section { padding:18px; } .btn-lg { padding:14px 24px; font-size:1rem; } .step-number { width:42px; height:42px; font-size:.95rem; } .device-mockup { width:82px; height:82px; } .option-card { padding:1.5rem; } } .auth-card.contact-card { max-width:860px; } @media (max-width: 992px){ .auth-card.contact-card { max-width:100%; } } /* ================= NOTIFICATIONS PAGES (Index, Details, Settings, Compose) ================= */ /* Shared list layout */ .notifications-list, .main-with-sidebar .notifications-list { max-height: none !important; overflow: visible !important; } .notification-item { padding: 1rem; border: 1px solid #dee2e6; border-radius: .375rem; margin-bottom: 1rem; transition: all .2s ease-in-out; cursor: pointer; } .notification-item:hover { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border-color: #adb5bd; } .notification-item.unread { background-color: rgba(13,110,253,.05); border-left: 4px solid #0d6efd; } .notification-title { font-weight: 600; color: #212529; } .notification-message { color: #6c757d; line-height: 1.5; } .notification-meta { display: flex; align-items: center; flex-wrap: wrap; } .btn-group .btn { margin-left: .25rem; } /* Ensure controls don't change cursor */ .notification-item .btn, .notification-item form { cursor: default; } @media (max-width: 768px) { .notification-item .col-md-4 { margin-top: 1rem; text-align: left !important; } .btn-group { display: flex; flex-direction: column; gap: .25rem; } .btn-group .btn { margin-left: 0; } } /* Details view helpers */ .icon-circle { width: 40px; height: 40px; border-radius: 50%; } .message-box { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.05rem; line-height: 1.7; color: #343a40; background-color: #f8fafc; border: 1px solid #e9ecef; border-left: .3rem solid #0d6efd; border-radius: .5rem; padding: 1rem 1.25rem; } /* Settings view sections */ .settings-section, .quick-actions, .notification-stats, .help-support { background-color: #f8f9fa; padding: 1.5rem; border-radius: .5rem; border: 1px solid #dee2e6; } .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; } .form-check-label { font-weight: 500; color: #212529; } .form-text { font-size: .875rem; color: #6c757d; } .stat-item { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid #dee2e6; } .stat-item:last-child { border-bottom: none; } @media (max-width: 768px) { .settings-section, .quick-actions, .notification-stats, .help-support { padding: 1rem; } } /* ===== Booking and Service Management Forms - Enhanced Spacing ===== */ .dashboard-page .form-label { margin-bottom: 0.75rem !important; } .dashboard-page .form-group { margin-bottom: 1.5rem !important; } /* --- End Custom Themed Toasts --- */ .app-toast { position: relative; display: flex; align-items: flex-start; gap: .9rem; background: linear-gradient(135deg,#1e5b93 0%,#2566ad 100%); color: #fff; padding: .95rem 1rem .95rem 1.05rem; border-radius: 22px; box-shadow: 0 10px 28px -10px rgba(30,91,147,.45),0 4px 14px -6px rgba(0,0,0,.25); overflow: hidden; margin-bottom: 1rem; animation: toastSlideIn .55s cubic-bezier(.16,.8,.24,1); font-size: .9rem; } .app-toast-success { background: linear-gradient(135deg,var(--success-green) 0%,var(--success-green-dark) 100%); } .app-toast-error { background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%); } .app-toast-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-top: 2px; box-shadow: 0 2px 6px -2px rgba(0,0,0,.35); } .app-toast-body { line-height: 1.35; } .app-toast strong { font-weight: 600; letter-spacing: .4px; } .app-toast .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .9; margin-top: 2px; } .app-toast .btn-close:hover { opacity: 1; } @keyframes toastSlideIn { from { transform: translateX(60px) scale(.95); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } .toast-stack { top: 0; right: 0; left: auto; bottom: auto; position: fixed; } @media (max-width:575.98px) { .toast-stack { width: 100% !important; left: 0; right: 0; padding-right: .75rem !important; padding-left: .75rem !important; } .app-toast { border-radius: 18px; } } /* --- End Custom Themed Toasts --- */ /* ================= BOOKING CONFIRMATION PAGE STYLES ================= */ .detail-item { margin-bottom: 1rem; } .detail-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.25rem; display: block; } .detail-value { font-size: 0.95rem; color: #1f2937; line-height: 1.4; } .info-item { padding: 0.75rem 0; border-bottom: 1px solid #f1f5f9; } .info-item:last-child { border-bottom: none; } .info-item strong { font-size: 0.85rem; font-weight: 600; color: #1f2937; display: block; margin-bottom: 0.25rem; } .info-item p { margin: 0; font-size: 0.8rem; line-height: 1.4; } /* ================= END BOOKING CONFIRMATION PAGE STYLES ================= */ /* Ensure modals appear beside the sidebar, not overlaying it */ .modal-with-sidebar { margin-left: 250px !important; margin-right: 0 !important; max-width: calc(100vw - 250px) !important; } /* When sidebar is collapsed, adjust modal positioning */ html.sidebar-collapsed .modal-with-sidebar { margin-left: 60px !important; max-width: calc(100vw - 60px) !important; } @media (max-width: 768px) { .modal-with-sidebar { margin-left: 0 !important; max-width: 100vw !important; } html.sidebar-collapsed .modal-with-sidebar { margin-left: 0 !important; max-width: 100vw !important; } }