/* 🌙 Global dark mode */

 body {
     background-color: #121212;
     color: #f8f9fa;
     font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     height: 100vh;
     margin: 0;

 }

 .login-container {
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Filter bar at top */
 .filter-bar {
     width: 100%;
     padding: 15px 20px;
     background-color: #1e1e1e;
     border-bottom: 1px solid #333;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     position: sticky;
     top: 0;
     z-index: 100;
 }

 /* Adjust main container: remove vertical centering */
 .main-container {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
     height: calc(100vh - 60px);
     /* adjust for filter bar height */
     overflow-y: auto;
     gap: 20px;
     padding: 20px;
     box-sizing: border-box;
     align-items: flex-start;
     /* align columns to top */
 }

 /* Left column (Client Info) */
 .left-column {
     flex: 1;
     width: 50%;
     overflow-y: auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Right column (Accounting Form) */
 .right-column {
     flex: 1;
     width: 50%;
     overflow-y: auto;
     padding-left: 20px;
     border-left: 1px solid #ddd;
 }

 /* Scrollbars for overflow */
 .left-column,
 .right-column {
     padding: 10px;
 }


 /* 🧱 Card layout (floating centered box) */

 .card {
     background: #1e1e1e;
     color: #f8f9fa;
     padding: 30px;
     border-radius: 20px;
     width: 450px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
     animation: fadeIn 0.4s ease-in-out;

 }


 /* ✨ Login box (shared style) */

 .login-box {

     background: #1e1e1e;

     color: #f8f9fa;

     border-radius: 20px;

     padding: 40px;

     width: 350px;

     box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);

 }


 /* Spacing for login fields */

 .login-box input.form-control {

     margin-top: 15px;

 }


 /* 📱 Inputs, dropdowns, and buttons in dark mode */

 input.form-control,

 select.form-select {

     background-color: #2a2a2a !important;

     color: #f8f9fa !important;

     border: 1px solid #444 !important;

 }


 input.form-control:focus,

 select.form-select:focus {

     background-color: #333 !important;

     color: #fff !important;

     border-color: #00bcd4 !important;

     box-shadow: none !important;

 }


 /* Lighter placeholder text */

 ::placeholder {

     color: #bbb !important;

     opacity: 1 !important;

 }


 /* Buttons */

 button.btn {

     margin-top: 10px;

     border-radius: 10px;

     transition: background-color 0.2s;

 }


 button.btn-primary {

     color: #fff !important;

     background-color: #00bcd4;

     border: none;

 }


 button.btn-primary:hover {

     background-color: #00a6bb;

 }


 button.btn-success {

     color: #fff !important;

     background-color: #009688;

     border: none;

 }


 button.btn-success:hover {

     background-color: #00897b;

 }


 /* 📞 Contact info */

 .number {

     font-size: 1.8em;

     font-weight: bold;

     color: #00bcd4;

     margin-bottom: 10px;

 }


 /* Text colors for better contrast */

 .text-muted {

     color: #d0d0d0 !important;

 }


 .text-secondary {

     color: #c0c0c0 !important;

 }


 /* 🪩 Toast notification */

 .toast {

     position: fixed;

     top: 10px;

     right: 10px;

     background: #222;

     color: #fff;

     padding: 10px 20px;

     border-radius: 10px;

     display: none;

     box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);

 }


 /* Divider */

 hr {

     border-color: #444;

     margin-top: 20px;

 }


 /* Auto message box */

 .bg-dark {

     background-color: #2a2a2a !important;

     color: #f5f5f5 !important;

 }


 /* 🪶 Fade-in animation */

 @keyframes fadeIn {

     from {

         opacity: 0;

         transform: translateY(10px);

     }


     to {

         opacity: 1;

         transform: translateY(0);

     }

 }

 label {
     display: block;
     margin-top: 12px;
     font-size: 14px;
 }

 input[type="text"],
 input[type="number"],
 textarea {
     width: 100%;
     padding: 8px;
     margin-top: 4px;
     background: #2a2a2a;
     border: 1px solid #444;
     border-radius: 4px;
     color: white;
 }

 input[type="checkbox"] {
     transform: scale(1.2);
     margin-right: 8px;
 }

 .section {
     margin-top: 30px;
     padding: 15px;
     background: #181818;
     border-radius: 6px;
     border: 1px solid #333;
 }

 button {
     margin-top: 25px;
     padding: 12px 20px;
     background: #0d6efd;
     border: none;
     color: white;
     font-size: 16px;
     border-radius: 6px;
     cursor: pointer;
 }

 button:hover {
     background: #0b5ed7;
 }

 .link-box {
     margin-top: 20px;
     padding: 15px;
     background: #222;
     border-left: 4px solid #0d6efd;
     border-radius: 4px;
 }

 a {
     color: #58a6ff;
 }