/* Navbar and Header */ .navbar { background-color: #838B35; } .custom-sidebar { width: 250px !important; } .page-title { justify-content: flex-start; padding-left: 30px; font-size: 40px; color:#E6EDB5; } .sidebar-header { width: 170px; height: 70px; } .nav-link { padding-left: 20px; } nav button:hover { border: none; } /* ----------------------------------------------------------------------------------- */ /* Forms */ /* The tag in the header file now is class "app", changed styling below to customize all forms across app*/ .app form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 100px; max-width: 800px; margin: 2rem auto; padding: 2rem; background: #f7f7f7; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); font-family: Arial, sans-serif; } .app form input, .app form textarea, .app form select { width: 100%; height: 40px; padding: 10px 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; } .app form button { display: inline-flex; align-items: center; justify-content: center; height: 40px; line-height: normal; margin-top: 40px; background-color: #0d6efd; color: white; padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer; } .app form button:hover { background-color: #0b5ed7; } /* .custom-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 100px; max-width: 800px; margin: 2rem auto; padding: 2rem; background: #f7f7f7; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); font-family: Arial, sans-serif; } .custom-form input, .custom-form textarea, .custom-form select { width: 100%; height: 40px; padding: 10px 12px; margin-bottom: 15px; } .custom-form button { height: 40px; margin-top: 40px; } */ /* form { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 20px 50px 20px 50px 20px 50px 50px 30px; column-gap: 70px; } */ /* ----------------------------------------------------------------------------------- */ /* Tables */ table { border-collapse: separate; border-spacing: 0; margin: 80px auto; border-radius: 10px; table-layout: auto; } th, td { /* border: 1px solid black; */ padding: 10px; text-align: center; } thead th { position: sticky; top: 0; z-index: 2; } th { background: #f8f8f8; font-size: 20px; } .too-big-header th { font-size: 0.8em; } .table-title { background: #f5f5f5; } .hover-table:hover { border: 5px solid rgb(83, 157, 255); } .hover-table { max-width: 200px; } /* .super-user-table { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 50px; padding-left: 40px; max-height: 600px; overflow-y: auto; } */ /* .super-user-table h2 { justify-self: center; } */ .superUserTable { display: flex; flex-direction: column; max-height: 600px; overflow-y: auto; } .super-user-table tr { font-size: 20px; } .saveBtn, .editBtn, .cancelBtn { font-size: 20px; border-radius: 8px; } .deleteBtn { font-size: 20px; border-radius: 8px; background-color: rgb(248, 152, 152); } #incomeTable th, tr{ font-size: 15px; } /* ----------------------------------------------------------------------------------- */ /* Containers */ #test-container { display: grid; height: 100vh; grid-template-rows: 1fr 7fr; place-items: center; align-content: center; } #sandbox-container { display: grid; height: 800px; gap: 2rem; column-gap: 40px; row-gap: 40px; grid-template-columns: 1fr 1fr; grid-template-rows: 120px 120px 120px 120px; /* grid-template-rows: 100px 400px 400px; */ } #labor-container { display: flex; flex-direction: column; /* height: 100vh; */ place-items: center; } .first-card { /* grid-column: span 2; */ display: flex; background-color: #838B35; width: 100%; height: 100px; align-items: center; justify-content: center; } .card { display: flex; background-color: rgb(255, 249, 239); height: 400px; width: 600px; justify-content: center; align-items: center; border: solid; border-color: black; } /* ----------------------------------------------------------------------------------- */ /* Misc. */ .app button { width: 100px; height: 30px; } .submitty { display: inline-flex; align-items: center; justify-content: center; height: 40px; line-height: normal; margin-top: 40px; background-color: #0d6efd; color: white; padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer; } select { width: 175px; } .logo { border-radius: 50%; width: 50px; height: 50px; } /* ----------------------------------------------------------------------------------- */ /* Filtering Tool */ .filter-bar { display: flex; justify-content: center; align-items: flex-end; gap: 50px; margin: 20px auto; padding: 15px 20px; max-width: 900px; background: #f9f9f9; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .filter-group { display: flex; flex-direction: column; font-size: 14px; } .filter-group label { margin-bottom: 4px; color: #555; font-weight: 500; } .filter-group input, .filter-group select { padding: 6px 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 14px; } .button-group { justify-content: flex-end; } .button-group button { padding: 8px 16px; border-radius: 8px; border: none; background: #2c7be5; color: white; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; } .button-group button:hover { background: #1a68d1; } /* ----------------------------------------------------------------------------------- */ /* Next/Prev Page Tool */ /* Pagination container */ .pagination-container { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 15px 0; font-family: Arial, sans-serif; } /* Buttons */ .pagination-container button { background-color: white; color: blue; border: 1px; border-radius: 5px; padding: 6px 12px; cursor: pointer; font-size: 18px; transition: background-color 0.2s, transform 0.1s; display: flex; align-items: center; justify-content: center; } .pagination-container button:hover { background-color: #c9c9c9; transform: scale(1.05); } /* Disabled state */ .pagination-container button:disabled { background-color: #ccc; color: #666; cursor: default; transform: none; } /* Page label */ .pagination-container span { font-weight: bold; font-size: 20px; } /* ----------------------------------------------------------------------------------- */ /* Switch Entry Modal */ /* Overlay */ .switchModalOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 1000; } /* Show the modal */ .switchModalOverlay.active { opacity: 1; visibility: visible; } /* Modal box */ .switchModalBox { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); max-width: 400px; width: 90%; text-align: center; transition: transform 0.3s ease; transform: translateY(-20px); display: flex; flex-direction: column; align-items: center; } .switchModalOverlay.active .switchModalBox { transform: translateY(0); } /* Message text */ #confirmMessage { font-size: 1.2rem; margin-bottom: 1.5rem; color: #333; } /* Buttons */ .switchModalBox button { padding: 0.6rem 1.5rem; margin: 0 0.5rem; height: 40px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .switchModalBox .buttonRow { display: flex; justify-content: center; gap: 1rem; /* spacing between buttons */ width: 100%; } #confirmYes { background-color: #cfe4d0; color: black; } #confirmYes:hover { background-color: #45a049; transform: scale(1.05); } #confirmNo { background-color: #e9bcb9; color: black; } #confirmNo:hover { background-color: #e53935; transform: scale(1.05); } /* ----------------------------------------------------------------------------------- */ /* Modals (Popouts) */ .modalOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 1000; } .modalOverlay.active { opacity: 1; pointer-events: auto; } .modalBox { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); max-width: 800px; width: 90%; text-align: center; } .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; } #myChart { width: 80%; /* Adjust width as needed */ max-width: 600px; /* Set a maximum width */ height: auto; /* Maintain aspect ratio */ margin: 20px auto; /* Center the chart */ border: 1px solid #ccc; /* Add a border for visual separation */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add a subtle shadow */ } /* Test paste */ .page { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #f4f6f8; font-family: system-ui, -apple-system, sans-serif; } .dashboard { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); grid-auto-rows: 140px; gap: 1.25rem; background: white; padding: 2rem; border-radius: 14px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); width: min(900px, 95%); } .dashboard h1 { grid-column: span 2; margin: 0 0 0.5rem; font-size: 1.8rem; font-weight: 600; color: #1f2933; text-align: center; } .card { background: #f9fafb; border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; border: 1px solid #e5e7eb; transition: transform 0.15s ease, box-shadow 0.15s ease; } .card.wide { grid-column: span 2; } .card.clickable { text-decoration: none; color: inherit; cursor: pointer; } .card.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } .label { font-size: 0.9rem; color: #6b7280; letter-spacing: 0.02em; text-transform: uppercase; } .value { font-size: 1.8rem; font-weight: 600; color: #111827; } /* ANIMATIONS */ .loading-cell { text-align: center; font-weight: bold; animation: flash 1s infinite; } @keyframes flash { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .edit-input { width: 100%; box-sizing: border-box; font: inherit; padding: 2px 4px; border: 1px solid black; border-radius: 4px; background: white; } .bossPayCell { width: 100px; } .switchCell { width: 80px; } .divider:after, .divider:before { content: ""; flex: 1; height: 1px; background: #eee; } .h-custom { height: calc(100% - 73px); } @media (max-width: 450px) { .h-custom { height: 100%; } } .invoice-linked { /* color: green; */ background-color: rgb(207, 235, 255); } /* #laborAllocateTable { table-layout: fixed; width: 100%; } */ /* input[type="time"] { height: 36px; padding: 4px 6px; font-size: 14px; line-height: 1; box-sizing: border-box; } */