/* ------------------------- VoIPSetu Theme (Light + Dark) - default: light - dark: [data-theme="dark"] on ------------------------- */ /* Variables */ :root { --appbar-bg: #363535; /* as requested */ --appbar-text: #ffffff !important; /* <-- FIX */ --primary: #00719E; /* primary buttons */ --text: #111; --muted: #6b6b6b; --card-bg: #ffffff; --page-bg: #f5f6f7; --sidebar-bg: #ffffff; --table-header-bg: var(--appbar-bg); --card-border: #e5e5e5; --text-color: #111; --muted-text: #6b6b6b; --input-bg: #ffffff; --input-border: #dcdcdc; --hover-bg: rgba(0,0,0,0.03); } [data-theme="dark"] { --appbar-bg: #363535; /* keep same for dark as requested */ --primary: #00719E; --text: #f5f5f5; --muted: #9a9a9a; --card-bg: #121318; --page-bg: #0f1012; --sidebar-bg: #161616; --table-header-bg: #2e2d2d; --card-border: #2a2a2a; --text-color: #f5f5f5; --muted-text: #9a9a9a; --input-bg: #1c1c1c; --input-border: #333; --hover-bg: rgba(255,255,255,0.06); } /* Global reset */ body { margin: 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--page-bg); } /* Topbar */ .vf-topbar { background: var(--appbar-bg) !important; color: #fff; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); } .vf-topbar-inner { width: 100%; max-width: 1200px; margin: auto; } /* app title center */ .vf-topbar-title { color: #fff; } .vf-topbar-actions .vf-user-email { color: #fff; } /* Shell */ .vf-shell { display: flex; min-height: calc(100vh - 72px); } /* Sidebar */ .vf-sidebar { width: 220px !important; min-width: 220px !important; flex-shrink: 0 !important; background: var(--sidebar-bg); border-right: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; } .vf-sidebar-header { background: transparent; } .vf-sidebar-header h5 { color: var(--text); margin-bottom: 0; } .vf-sidebar-header small { color: var(--muted); } /* Nav links */ .vf-nav { display: flex; flex-direction: column; padding: 12px; gap: 6px; } .vf-nav-link { color: var(--text); display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; transition: background .12s; } .vf-nav-link:hover { background: rgba(0,0,0,0.03); color: var(--text); } .vf-nav-link.active { background: var(--primary); color: #fff; } /* Logout */ .vf-logout { background: transparent; color: #d9534f; border: 1px solid rgba(0,0,0,0.03); } /* Main content */ .vf-main { background: transparent; min-height: calc(100vh - 72px); } /* Buttons: primary (global) */ .btn-theme { background: var(--primary) !important; color: white !important; border: 0; padding: 8px 12px; border-radius: 8px; font-weight: 600; } .btn-theme:hover { opacity: .95; } /* Outline style for tabs */ .btn-theme-outline { background: transparent; color: var(--text); border: 1px solid rgba(0,0,0,0.08); padding: 6px 12px; border-radius: 8px; } .btn-theme-outline.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* Cards */ .card, .atlas-box, .auth-card, .vf-card { background: var(--card-bg); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); padding: 18px; } /* Login small centered card specifics */ /*.auth-page { min-height: calc(100vh - 20px); padding: 40px 12px; display: flex; align-items: center; justify-content: center; background: var(--page-bg); } .auth-card { width: 750px; max-width: 94%; border-radius: 12px; padding: 22px; background: var(--card-bg); box-shadow: 0 12px 35px rgba(15,15,15,0.08); }*/ .auth-card-top img { display: block; margin: auto; } .auth-tabs .btn { min-width: 110px; } /* Login form elements */ .vf-input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08); background: transparent; color: var(--text); } .vf-error { color: #d9534f; margin-top: 8px; font-size: 0.9rem; } /* Misc */ .vf-link { color: var(--primary); cursor: pointer; text-decoration: underline; } .vf-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,113,158,0.12); border-color: var(--primary); } /* small responsive */ @media (max-width: 768px) { .vf-sidebar { display: none; } .vf-topbar-title { display: none; } .auth-card { width: 92%; } } .register-wrapper { display: flex; justify-content: center; padding: 40px 12px; } .register-inner { width: 480px; max-width: 95%; background: var(--card-bg); padding: 22px; border-radius: 12px; box-shadow: 0 12px 35px rgba(0,0,0,0.06); } /* === AUTH PAGE FULL CENTER === */ /* === AUTH PAGE FULL CENTER === */ .auth-page { width: 100%; min-height: 100vh; padding: 40px 12px; display: flex; align-items: center; justify-content: center; background: var(--page-bg); } /* === MAIN CARD === */ .auth-card { width: 760px; max-width: 95%; background: var(--card-bg); border-radius: 20px; padding: 28px 32px; box-shadow: 0 12px 32px rgba(0,0,0,0.08); transition: height .25s ease-in-out; } /* === TABS === */ .btn-theme-outline { border: 1px solid #d4d4d4; background: #fff; padding: 7px 28px; border-radius: 10px; font-weight: 500; } .btn-theme-outline.active { background: #00719E !important; border-color: #00719E !important; color: #fff !important; } /* === AUTH BODY (Critical Fix!) === */ /* --- SHARED AUTH BODY --- */ .auth-body { width: 100%; padding-right: 6px; min-height: 440px; /* Provides stable fixed height */ transition: min-height .25s ease-in-out; } /* --- LOGIN: No scroll, fixed height, perfectly centered --- */ .auth-body.login-mode { min-height: auto; /* prevents forced height */ max-height: none; overflow: visible !important; /* no scroll bar */ } /* --- REGISTER: Scroll only inside form --- */ .auth-body.register-mode { min-height: 420px; /* same visual height as login */ max-height: 650px; /* doesn't exceed card */ overflow-y: auto; /* ONLY register scrolls */ } /* === FORM INPUTS === */ .auth-input, input.form-control { width: 100% !important; padding: 12px 15px !important; border: 1px solid #dcdcdc !important; border-radius: 10px !important; font-size: 15px !important; background: #fff !important; } /* === TWO COLUMN FORM ROWS === */ .form-2col { display: flex; gap: 18px; width: 100%; } .form-2col > div { flex: 1; } /* === VERIFY BUTTON FIX === */ .verify-btn { background: #00719E; border: none; padding: 9px 18px; border-radius: 10px; color: #fff; font-size: 14px; white-space: nowrap; margin-left: 10px; } /* === TERMS & CONDITIONS FIX === */ .terms-line { margin-top: 6px; display: flex; align-items: center; gap: 10px; font-size: 14px; } .terms-line input[type="checkbox"] { transform: scale(1.2); } /* === AUTH BUTTON === */ .btn-primary-auth { width: 100%; padding: 14px; background: #00719E !important; border-radius: 10px; color: white; border: none; font-size: 17px; margin-top: 10px; } /* Page alignment */ .profile-page { padding-top: 30px; } /* Main card */ .profile-card { width: 100%; max-width: 95%; background: var(--card-bg); border-radius: 18px; padding: 28px; border: 1px solid var(--card-border); box-shadow: 0 10px 28px rgba(0,0,0,0.08); } /* Title */ .profile-title { font-size: 22px; font-weight: 700; color: var(--text-color); margin-bottom: 18px; } /* Section container */ .profile-details { margin-top: 10px; } /* Label */ .profile-label { display: block; font-size: 14px; font-weight: 600; color: var(--muted-text); margin-bottom: 4px; } /* Value */ .profile-value { background: var(--input-bg); border: 1px solid var(--input-border); padding: 12px 14px; border-radius: 10px; color: var(--text-color); font-size: 15px; } /* Page wrapper */ .orders-page { padding-top: 20px; } /* Main card */ .orders-card { width: 100%; max-width: 95%; background: var(--card-bg); border-radius: 18px; padding: 25px; border: 1px solid var(--card-border); margin-bottom: 20px; } /* Title */ .orders-title { font-size: 22px; font-weight: 700; color: var(--text-color); margin-bottom: 16px; } /* Table */ .vs-table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--text-color); } /* Table header */ .vs-table thead tr { background: var(--appbar-bg) !important; color: var(--appbar-text) !important; } .vs-table thead th { padding: 12px; font-weight: 600; border-bottom: 1px solid var(--card-border); } /* Table rows */ .vs-table tbody tr { border-bottom: 1px solid var(--card-border); } .vs-table tbody td { padding: 12px; } /* Row hover */ .vs-table tbody tr:hover { background: var(--hover-bg); cursor: pointer; } /* Dark mode support */ :root.dark-mode .vs-table tbody tr:hover { background: rgba(255,255,255,0.06); } .input-group, .phone-wrapper { display: flex; align-items: center; gap: 12px; /* NEW */ } .input-group input, .phone-wrapper input { width: 100%; flex: 1; } /* Licenses page wrapper */ /* Wrapper same as Orders */ .licenses-page { padding-top: 10px; max-width: 900px; margin: auto; } /* Title aligned same as Orders */ .page-title { font-size: 22px; font-weight: 700; color: var(--text-color); margin-bottom: 10px; } /* Main card layout same as Orders */ .licenses-card { width: 100%; background: var(--card-bg); border-radius: 18px; padding: 22px; border: 1px solid var(--card-border); } .vs-page-wrapper { padding-top: 20px; } .vs-page-title { color: var(--text); font-size: 28px; font-weight: 700; margin-bottom: 10px; } .vs-form-card { width: 600px; max-width: 95%; margin: auto; background: var(--card-bg); border-radius: 16px; padding: 25px; box-shadow: 0 12px 35px rgba(0,0,0,0.06); } .vs-form-body { padding: 5px; } .vs-label { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 5px; display: block; } .vs-input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: var(--input-bg, var(--card-bg)); color: var(--text); font-size: 15px; } .vs-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,113,158,0.18); } .vs-value-box { padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--input-border, #ddd); border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--text); } .vs-subtitle-text { color: orange !important; }