/* --- Keyframe animation for the background --- */ @keyframes glowing-border { /* MODIFIED: Use new brand colors */ 0% { border-color: var(--iba-secondary-teal); box-shadow: 0 0 2px var(--iba-secondary-teal), 0 0 5px var(--iba-secondary-teal), 0 0 10px var(--iba-secondary-teal), inset 0 0 0 2px rgba(0,0,0,0.5); } 50% { border-color: var(--iba-secondary-gold); box-shadow: 0 0 2px var(--iba-secondary-gold), 0 0 5px var(--iba-secondary-gold), 0 0 10px var(--iba-secondary-gold), inset 0 0 0 2px rgba(0,0,0,0.5); } 100% { border-color: var(--iba-secondary-teal); box-shadow: 0 0 2px var(--iba-secondary-teal), 0 0 5px var(--iba-secondary-teal), 0 0 10px var(--iba-secondary-teal), inset 0 0 0 2px rgba(0,0,0,0.5); } } /* +++ Custom Variables +++ */ :root { /* IBA Brand Palette */ --iba-base-blue: #003A5C; /* Pantone 301C */ --iba-secondary-teal: #00748C; /* Pantone 3145C */ --iba-secondary-periwinkle: #5A87D9; /* Pantone 2718C (from RGB) */ --iba-secondary-terracotta: #C3502F; /* Pantone 7580C */ --iba-secondary-gold: #B59A00; /* Pantone 613C (from RGB) */ /* IBA Tints (for backgrounds/hovers) */ --iba-base-blue-dark: #002a48; /* Darker shade for backgrounds */ --iba-base-blue-light: #004b75; /* Lighter shade for hovers */ --iba-base-tint-light: #d9e2e8; /* Very light blue for rows */ --iba-base-tint-hover: #c4d4df; /* Hover for light rows */ /* Text Colors */ --text-on-base: #FFFFFF; --text-on-light: #333333; /* --- Old Variable Mapping --- */ --invoice-blue: var(--iba-base-tint-light); --invoice2-blue: var(--iba-base-blue); --text-color-light: var(--text-on-base); --text-color-dark: var(--text-on-light); --sidebar-width: 300px; /* Dashboard Theme Colors */ --db-bg: var(--iba-base-blue-dark); --db-card-bg: var(--iba-base-blue); --db-border: var(--iba-secondary-teal); --db-text-primary: var(--text-on-base); --db-text-secondary: #a8c5d9; /* Lightened tint of base */ --db-accent-blue: var(--iba-secondary-periwinkle); --db-accent-purple: var(--iba-secondary-gold); } /* General Body Styles */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; color: var(--text-color-dark); background-color: #f4f7fa; } /* +++ Plain Dark Blue Login Background +++ */ body.login-background { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--db-bg); /* Use dashboard bg for login */ } /* App Container for centered content */ #app-container { width: 100%; max-width: 500px; padding: 20px; box-sizing: border-box; } /* Card Styling */ .form-container { background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); text-align: center; } /* ++ REVERTED: Animated Card Style for Login/Welcome ++ */ .animated-card { background-color: rgba(0, 58, 92, 0.85); /* MODIFIED: Use IBA Base Blue */ border: 2px solid; border-radius: 10px; animation: glowing-border 6s linear infinite; backdrop-filter: blur(5px); } .animated-card h2, .animated-card p, .animated-card strong { color: var(--text-color-light); /* White text for dark background */ } h2 { margin-top: 0; margin-bottom: 10px; color: #1a1a1a; } p { margin-bottom: 20px; color: #555; line-height: 1.5; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="month"], input[type="tel"], select, textarea { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; transition: border-color 0.3s; box-sizing: border-box; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--iba-secondary-teal); } /* MODIFIED: Highlight color */ label { display: block; text-align: left; margin-bottom: 5px; font-weight: 600; color: #444; } button { padding: 10px 20px; background-color: var(--iba-secondary-teal); color: var(--text-color-light); border: none; border-radius: 4px; font-size: 15px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; } /* MODIFIED: Button color */ button:hover { background-color: #005a6e; } /* MODIFIED: Darker teal */ .hidden { display: none !important; } .error-message { color: var(--iba-secondary-terracotta); font-weight: 500; margin-top: 15px; min-height: 20px; } /* MODIFIED: Error color */ .success-message { color: #28a745; font-weight: 500; margin-top: 15px; min-height: 20px; } /* --- ADD THIS NEW RULE --- */ .version-display { font-size: 0.8rem; color: #a0aec0; /* Lighter text */ margin-top: 15px; margin-bottom: -10px; /* Pulls content below it up slightly */ text-align: center; } /* --- END OF ADDITION --- */ /* ++ NEW: Style for input hint text ++ */ .input-note { font-size: 0.8rem; color: #6c757d; text-align: left; margin-top: -10px; margin-bottom: 15px; } /* Main Dashboard Styles */ /* MODIFIED: Changed text color for dark card */ .dashboard-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #4a5568; padding-bottom: 15px; margin-bottom: 30px; } #user-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } #dashboard-username { font-size: 1.1rem; font-weight: 600; color: var(--text-color-light); } /* White text */ #datetime { font-size: 0.85rem; color: #a0aec0; margin-top: 4px; } /* Lighter text */ #logout-button { background-color: var(--iba-secondary-terracotta); color: var(--text-color-light); width: auto; padding: 8px 16px; font-size: 14px; font-weight: normal; } /* MODIFIED: Logout color */ #logout-button:hover { background-color: #a24227; } /* MODIFIED: Darker terracotta */ .dashboard-main { padding: 10px 0; } .button-container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } /* --- MODIFIED: Themed Circle Buttons --- */ .circle-button { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(145deg, var(--iba-secondary-teal), var(--iba-base-blue)); /* MODIFIED: Gradient */ color: var(--text-color-light); border: 4px solid var(--text-color-light); box-shadow: 0 5px 15px rgba(0, 116, 140, 0.4); /* MODIFIED: Teal shadow */ font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; text-align: center; text-decoration: none; box-sizing: border-box; /* To keep buttons in one line */ } .circle-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 116, 140, 0.5); background: linear-gradient(145deg, #008a9f, var(--iba-base-blue-light)); } /* MODIFIED: Hover gradient */ /* --- WORKDESK STYLES --- */ #workdesk-view, #invoice-management-view { display: flex; width: 100vw; height: 100vh; overflow: hidden; } .workdesk-sidebar { width: 260px; background-color: var(--iba-base-blue); color: var(--text-color-light); display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; transition: width 0.3s ease; z-index: 10; } /* MODIFIED: Sidebar color */ .wd-user-profile { text-align: center; padding-bottom: 20px; } .wd-user-avatar { width: 80px; height: 80px; border-radius: 50%; background-color: var(--iba-base-blue-light); display: flex; justify-content: center; align-items: center; margin: 0 auto 15px; font-size: 40px; color: var(--iba-secondary-periwinkle); } /* MODIFIED: Avatar colors */ #wd-username, #im-username { margin: 0 0 5px 0; font-size: 1.1rem; } #wd-user-identifier, #im-user-identifier { margin: 0; font-size: 0.8rem; color: #b0b0b0; } .wd-back-button { display: flex; align-items: center; gap: 15px; padding: 12px 15px; margin-top: 15px; border-top: 1px solid var(--iba-base-blue-light); text-decoration: none; background-color: var(--iba-base-blue-dark); color: var(--text-color-light); border-radius: 6px; font-weight: 600; transition: background-color 0.3s; } /* MODIFIED: Back button colors */ .wd-back-button:hover { background-color: var(--iba-base-blue-light); } /* MODIFIED: Hover color */ .workdesk-navigation { flex-grow: 1; margin-top: 20px; } .workdesk-navigation ul, .workdesk-footer-nav ul { list-style: none; padding: 0; margin: 0; } .workdesk-navigation a, .workdesk-footer-nav a { display: flex; align-items: center; gap: 15px; padding: 12px 15px; margin-bottom: 8px; text-decoration: none; color: #c0c0c0; border-radius: 6px; transition: background-color 0.3s, color 0.3s; } .workdesk-navigation a:hover, .workdesk-footer-nav a:hover { background-color: var(--iba-base-blue-light); color: var(--text-color-light); } /* MODIFIED: Hover color */ .workdesk-navigation a.active { background-color: var(--iba-secondary-teal); color: var(--text-color-light); font-weight: 600; } /* MODIFIED: Active link color */ .workdesk-navigation a i, .workdesk-footer-nav a i { width: 20px; text-align: center; } .workdesk-main { flex-grow: 1; background-color: #f4f7fa; padding: 25px 40px; overflow-y: auto; box-sizing: border-box; } /* ++ MODIFIED (Req 1): Adjust main content when sidebar is present ++ */ .workdesk-main.with-sidebar { /* Make room for the sidebar */ margin-right: var(--sidebar-width); transition: margin-right 0.3s ease; } #workdesk-datetime, #im-datetime { font-size: 0.9rem; color: #555; font-weight: 500; text-align: right; margin-bottom: 15px; } .workdesk-section { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .workdesk-section h1 { margin-top: 0; margin-bottom: 25px; } .workdesk-section h2 { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; } /* ++ NEW: Table Count Display ++ */ .table-count-display { font-size: 1rem; font-weight: 500; color: #555; margin-left: 10px; } h2 .table-count-display { /* For Invoice Entry */ font-size: 0.9em; font-weight: 500; color: #555; margin-left: 8px; } /* ** UPDATED Form & Input Styles ** */ .jobentry-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; } .form-column { display: flex; flex-direction: column; } .form-column .form-group { margin-bottom: 20px; } .form-buttons-container { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; justify-content: flex-end; } .form-buttons-container button, .form-buttons-container a { width: auto; min-width: 100px; padding: 10px 15px; } .secondary-btn { background-color: #6c757d; } .secondary-btn:hover { background-color: #5a6268; } input.highlight-field { border-color: var(--iba-secondary-gold); box-shadow: 0 0 0 0.2rem rgba(181, 154, 0, 0.25); } /* MODIFIED: Highlight color */ .choices { margin-bottom: 0; } .choices__inner { font-size: 16px; border-radius: 4px; border: 1px solid #ccc; padding: 6px 7.5px; min-height: 45px; } .choices.is-focused .choices__inner { border-color: var(--iba-secondary-teal); } /* MODIFIED: Highlight color */ .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: var(--iba-secondary-teal); } /* MODIFIED: Highlight color */ /* ++ Vacation Style for Choices.js ++ */ .choices__item[data-label*="(On Vacation)"] { color: #888; font-style: italic; } .choices__item[data-label*="(On Vacation)"]::after { content: "🏖️"; margin-left: 8px; } /* Dividers & Search Bars */ .section-divider { border: none; border-top: 1px solid #e0e0e0; margin: 40px 0; } .search-bar-local { position: relative; width: 100%; margin-bottom: 20px; } .search-bar-local input { width: 100%; padding: 12px 12px 12px 40px; border-radius: 6px; border: 1px solid #ddd; font-size: 15px; } .search-bar-local i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #999; } /* ++ NEW: Invoice Entry PO Search Container ++ */ #im-po-search-container { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; max-width: 500px; } #im-po-search-container .search-bar-local { margin-bottom: 0; flex-grow: 1; /* Allows input to take available space */ } #im-po-search-container button { flex-shrink: 0; /* Prevents button from shrinking */ } /* ++ NEW (Req 1): Style for Bottom PO Search Container ++ */ #im-po-search-container-bottom { display: flex; align-items: center; gap: 10px; margin-top: 25px; /* Add space above */ padding-top: 20px; /* Add padding above */ border-top: 1px solid #eee; /* Add separator line */ /* max-width: 500px; */ /* REMOVED max-width to allow buttons to spread */ } #im-po-search-container-bottom .search-bar-local { margin-bottom: 0; flex-grow: 1; max-width: 300px; /* Limit input width */ } #im-po-search-container-bottom button { flex-shrink: 0; } /* ++ FIX: Add spacing to buttons within the bottom search container ++ */ #im-po-search-container-bottom .form-buttons-container { display: flex; /* Ensure buttons align horizontally */ gap: 10px; /* Add the same gap as the parent container */ margin-left: 10px; /* Optional: Add space between Search PO btn and Add Invoice btn */ /* Remove inherited styles if they cause issues */ margin-top: 0; padding-top: 0; border-top: none; justify-content: flex-end; /* Align buttons to the right */ flex-grow: 1; /* Allow button container to take remaining space */ } /* Table Styles */ .table-wrapper { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 12px 15px; border-bottom: 1px solid #e0e0e0; text-align: left; vertical-align: middle;} /* ++ Added vertical-align ++ */ thead th { background-color: #f8f9fa; font-weight: 600; color: var(--text-color-dark); } tbody tr:hover { background-color: #f1f1f1; } .respond-btn { background-color: #28a745; color: var(--text-color-light); padding: 5px 10px; font-size: 13px; font-weight: normal; } .respond-btn:hover { background-color: #218838; } .delete-btn { background-color: var(--iba-secondary-terracotta); /* MODIFIED: Delete color */ padding: 5px 10px; font-size: 13px; } .delete-btn:hover { background-color: #a24227; /* MODIFIED: Darker terracotta */ } .download-btn { background-color: #1e7e34; } .download-btn:hover { background-color: #155d27; } .download-btn i { margin-right: 8px; } /* New style for clickable rows */ .clickable-pdf { cursor: pointer; } /* WORKDESK DASHBOARD STYLES */ .dashboard-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .summary-card { display: flex; align-items: center; background-color: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 5px solid var(--iba-secondary-teal); } /* MODIFIED: Border color */ .card-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-color-light); font-size: 24px; margin-right: 15px; } .card-details { text-align: left; } .card-value { font-size: 2rem; font-weight: bold; color: var(--text-color-dark); display: block; } .card-label { font-size: 0.9rem; color: #555; } /* MODIFIED: Changed ID to Class */ .im-po-details-container { background-color: #ffffe0; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 20px; } .im-po-details-container h2 { display: none; } .po-details-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 15px 40px; } .po-details-grid p { margin: 0; font-size: 0.95rem; } /* REPORTING STYLES */ .report-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; } .report-header h1 { margin: 0; } .daily-report-section { display: flex; align-items: center; gap: 10px; } .daily-report-section input[type="date"] { margin-bottom: 0; padding: 7px; width: auto; border-radius: 4px; } .daily-report-section .download-btn { padding: 8px 15px; font-weight: normal; font-size: 14px; } .report-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; } .report-tabs-container { flex-grow: 1; } .report-tabs { display: flex; gap: 5px; border-bottom: 2px solid #e0e0e0; overflow-x: auto; } .report-tabs button { background-color: transparent; border: none; border-bottom: 3px solid transparent; padding: 10px 15px; font-size: 15px; font-weight: 600; color: #555; cursor: pointer; border-radius: 0; margin-bottom: -2px; white-space: nowrap; } .report-tabs button.active { color: var(--iba-secondary-teal); border-bottom-color: var(--iba-secondary-teal); } /* MODIFIED: Active tab color */ .print-btn { background-color: #17a2b8; padding: 8px 15px; } .print-btn:hover { background-color: #138496; } .print-btn i { margin-right: 8px; } /* Legend for Reporting Table */ .reporting-legend { display: flex; gap: 20px; margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 6px; font-size: 0.85rem; } .reporting-legend .legend-item { display: flex; align-items: center; gap: 8px; } .reporting-legend .legend-color { width: 15px; height: 15px; border-radius: 3px; border: 1px solid #ccc; } /* ++ Invoice Reporting Form Layout ++ */ .search-and-filter-group, .report-buttons-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .search-and-filter-group { flex-grow: 1; } .report-buttons-group { flex-shrink: 0; } .search-and-filter-group .search-bar-local { margin-bottom: 0; min-width: 250px; flex-grow: 1; } .search-and-filter-group select, .search-and-filter-group input[type="date"], .search-and-filter-group input[type="month"] { margin-bottom: 0; /* Override default margin */ padding: 11px; } /* Style for disabled navigation links */ .workdesk-navigation a.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .workdesk-navigation a.disabled:hover { background-color: transparent; color: #c0c0c0; } /* --- INVOICE REPORT STYLES --- */ #im-reporting-content table thead th { background-color: var(--iba-base-blue); /* MODIFIED: Header color */ color: var(--text-color-light); } .master-row { cursor: pointer; transition: background-color 0.2s ease; } .master-row:hover { background-color: #f5f5ff; } .master-row td { font-weight: 500; } /* New Highlighting Rules */ .master-row.highlight-partial { background-color: #d9eef2 !important; /* MODIFIED: Light Teal */ } .master-row.highlight-partial:hover { background-color: #bfe5eb !important; } .master-row.highlight-fully-paid { background-color: #f7f3d9 !important; /* MODIFIED: Light Gold */ } .master-row.highlight-fully-paid:hover { background-color: #f2ecc2 !important; } .expand-btn { width: 25px; height: 25px; background-color: var(--iba-base-blue); /* MODIFIED: Button color */ color: var(--text-color-light); border: none; border-radius: 4px; cursor: pointer; font-weight: bold; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s; } .expand-btn:hover { background-color: var(--iba-base-blue-light); /* MODIFIED: Hover color */ } .detail-row td { padding: 0; border: 0; border-bottom: 1px solid #e0e0e0; } .detail-content { padding: 20px; background-color: #fdfdfd; } .detail-content h4 { margin-top: 0; margin-bottom: 15px; color: var(--iba-base-blue); /* MODIFIED: Title color */ } .nested-invoice-table { width: 100%; border: 1px solid #e0e0e0; } .nested-invoice-table thead th { background-color: #555; font-size: 0.9em; } .nested-invoice-table td { padding: 8px 15px; } .nested-invoice-table tfoot td { font-weight: 600; background-color: #ffffe0; font-size: 0.9em; } .nested-invoice-table td, .nested-invoice-table th { border-right: 1px solid #e0e0e0; } .nested-invoice-table td:last-child, .nested-invoice-table th:last-child { border-right: 0; } /* ++ NEW (Req 1): Nested invoice row click style ++ */ .nested-invoice-row { cursor: pointer; } .nested-invoice-row:hover { background-color: var(--iba-base-tint-light) !important; /* MODIFIED: Hover color */ } /* New Action Button Styles */ .action-btn-group { display: flex; gap: 5px; } .action-btn { padding: 4px 8px; font-size: 12px; text-decoration: none; color: var(--text-color-light); border-radius: 4px; display: inline-block; text-align: center; } .invoice-pdf-btn { background-color: var(--iba-secondary-gold); color: #212529; } /* MODIFIED: Button color */ .srv-pdf-btn { background-color: var(--iba-secondary-teal); } /* MODIFIED: Button color */ .invoice-pdf-btn:hover { background-color: #9a8100; } /* MODIFIED: Hover color */ .srv-pdf-btn:hover { background-color: #005a6e; } /* MODIFIED: Hover color */ /* ++ Settings Page Styles ++ */ #settings-form input[readonly] { background-color: #e9ecef; cursor: not-allowed; opacity: 0.7; } .checkbox-group { display: flex; align-items: center; padding: 10px 0; } .checkbox-group input[type="checkbox"] { width: auto; margin: 0 10px 0 0; height: 18px; width: 18px; } .checkbox-group label { margin-bottom: 0; font-weight: normal; } /* --- INVOICE MANAGEMENT DASHBOARD --- */ /* ++ NEW: Dark theme for IM Dashboard ++ */ #im-dashboard { background-color: var(--db-bg); } #im-dashboard h1 { color: var(--db-text-primary); border-bottom: 1px solid var(--db-border); } .im-dashboard-grid { /* Changed from .im-dashboard-full-grid */ display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns */ gap: 20px; } .im-chart-card { background-color: var(--db-card-bg); padding: 20px; border-radius: 8px; border: 1px solid var(--db-border); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .im-chart-card.full-width-card { grid-column: 1 / -1; /* Span all 3 columns */ } .im-chart-card h2 { margin-top: 0; margin-bottom: 20px; font-size: 1.1rem; border-bottom: none; color: var(--db-text-primary); } .im-chart-container-half { height: 300px; } .im-chart-container-full { height: 350px; } /* ++ NEW: Top 5 List Styles ++ */ .dashboard-top5-list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; } .dashboard-top5-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--db-border); color: var(--db-text-secondary); } .dashboard-top5-list li:last-child { border-bottom: none; } .dashboard-top5-list .top5-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 15px; } .dashboard-top5-list .top5-value { color: #ffc107; font-weight: 600; white-space: nowrap; } /* ++ NEW: Chart Header Styles ++ */ .dashboard-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .dashboard-chart-header h2 { margin-bottom: 0; } .dashboard-chart-header select { background-color: var(--db-card-bg); color: var(--db-text-primary); border: 1px solid var(--db-border); padding: 5px 10px; border-radius: 4px; font-size: 0.9rem; width: auto; margin-bottom: 0; } /* -- End IM Dashboard Styles -- */ /* --- BATCH INVOICE ENTRY TABLE STYLES --- */ #im-batch-entry-table { table-layout: auto; /* Allow table to adjust */ } #im-batch-entry-table .batch-input { width: 100%; box-sizing: border-box; padding: 8px; font-size: 14px; margin-bottom: 0; border: 1px solid #ccc; border-radius: 4px; min-width: 120px; /* Ensure inputs are not too small */ } #im-batch-entry-table .batch-remove-btn { padding: 4px 8px; font-size: 1.2rem; line-height: 1; } /* ++ NEW (Req 4): Batch Note Search Styles ++ */ .batch-note-search-wrapper { min-width: 250px; /* Give dropdown some space */ flex-grow: 1; /* Allow it to grow */ } #im-batch-note-search-select { width: 100%; /* Make select fill the wrapper */ } #im-batch-note-search-select + .choices { /* Target Choices.js container */ margin-bottom: 0; } #im-batch-note-search-select + .choices .choices__inner { padding: 11px; /* Match other inputs */ min-height: 46px; /* Match padding */ } /* --- SUMMARY NOTE PRINT STYLES --- */ #summary-note-controls { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px; } #summary-note-controls .form-group { flex: 1; min-width: 250px; } #summary-note-controls label { font-size: 0.9rem; } #summary-note-controls input, #summary-note-controls select { margin-bottom: 0; } /* On-screen appearance */ #summary-note-printable-area { border: 1px solid #ccc; padding: 20px; max-width: 800px; margin: 20px auto; background-color: #fff; } /* Hide print-only header on screen */ .sn-print-header { display: none; } /* MODIFIED: Summary For Vendor Styling (On Screen) */ #summary-note-printable-area .sn-vendor-summary-title { margin: 0 0 15px 0; padding: 10px; text-align: center; font-size: 1.2rem; font-weight: bold; background-color: var(--iba-base-blue); /* MODIFIED: Use new var */ color: var(--text-color-light); /* White font */ border-radius: 5px; /* Slight rounded corners */ } #summary-note-printable-area .sn-vendor-summary-title p { margin: 0; /* Remove default paragraph margin */ color: inherit; /* Inherit white color */ } /* Remove border/margin from parent container */ #summary-note-printable-area .sn-vendor-info { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } .sn-payment-details { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; font-size: 1rem; border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-weight: bold; margin-bottom: 20px; } .sn-payment-details div { flex: 1; padding-left: 10px; } .sn-payment-details div:first-child { padding-left: 0; } .sn-table { width: 100%; margin-top: 15px; border-collapse: collapse; } .sn-table th, .sn-table td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; font-size: 0.9rem; /* Slightly smaller font on screen table */ } /* MODIFIED: Table Header Styling (On Screen) */ .sn-table thead th { /* Targeted thead th specifically */ font-weight: bold; background-color: var(--iba-base-blue); /* MODIFIED: Use new var */ color: var(--text-color-light); /* White font */ } .sn-table input { width: 100%; border: 1px solid #ccc; /* Show border on screen */ padding: 6px; border-radius: 3px; font-family: inherit; font-size: inherit; } .sn-footer { border-top: 2px solid #333; padding: 15px 0; display: flex; justify-content: space-between; font-weight: bold; margin-top: 10px; } /* Hide print-only notes on screen */ .sn-print-notes-section { /* Use the class here */ display: none; } .sn-signatures { margin-top: 40px; /* Less margin on screen */ display: flex; justify-content: space-around; /* Space around on screen */ } .sn-signatures div { flex: 1; text-align: center; border-top: 1px solid #000; padding-top: 10px; margin: 0 20px; max-width: 200px; /* Limit width on screen */ } /* ++ NEW: MODAL STYLES ++ */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; } .modal-container { background-color: #fff; padding: 25px; border-radius: 8px; width: 90%; max-width: 500px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e0e0e0; padding-bottom: 15px; margin-bottom: 15px; } .modal-header h2 { margin: 0; font-size: 1.3rem; } .modal-close-btn { background: none; border: none; font-size: 1.8rem; cursor: pointer; color: #555; padding: 0 10px; } .modal-footer { border-top: 1px solid #e0e0e0; padding-top: 15px; margin-top: 15px; display: flex; justify-content: flex-end; gap: 10px; } /* ++ NEW: Batch Global Controls ++ */ #im-batch-global-controls.search-and-filter-group { background-color: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 20px; align-items: flex-end; /* Align items to bottom for label alignment */ } #im-batch-global-controls .form-group { flex: 1; min-width: 200px; margin: 0; } #im-batch-global-controls .form-group:nth-child(2) { /* Status dropdown */ min-width: 150px; } #im-batch-global-controls .form-group label { font-size: 0.9rem; margin-bottom: 3px; } /* Override default batch-input and select paddings for this section */ #im-batch-global-controls .batch-input, #im-batch-global-controls select, #im-batch-global-controls .choices__inner { padding: 11px; width: 100%; margin-bottom: 0; } #im-batch-global-controls .choices__inner { min-height: 46px; /* Match padding */ } /* ++ NEW: Payment Section Styles ++ */ #im-payments-table .payment-input { width: 100%; box-sizing: border-box; padding: 8px; font-size: 14px; margin-bottom: 0; border: 1px solid #ccc; border-radius: 4px; min-width: 120px; } #im-payments-table .payment-remove-btn { padding: 4px 8px; font-size: 1.2rem; line-height: 1; } #im-add-payment-button i { margin-right: 8px; } #im-save-payments-button i { margin-right: 8px; } /* ++ NEW: Finance Report Section Styles ++ */ #im-finance-results table { margin-bottom: 0; } #im-finance-results table th { white-space: nowrap; } #im-finance-results tbody tr td { vertical-align: middle; } /* Styles from finance report styles.css, adapted */ #im-finance-results .po-summary-table { width: 100%; margin-bottom: 0; border-collapse: collapse; } #im-finance-results .po-summary-table th, #im-finance-results .po-summary-table td { padding: 0.9rem 1rem; vertical-align: middle; } #im-finance-results .po-summary-table thead th { background-color: var(--iba-base-blue); color: var(--text-color-light); font-weight: 600; text-align: left; border: none; font-size: 0.9rem; letter-spacing: 0.5px; } /* MODIFIED: Header color */ #im-finance-results .po-summary-table tbody td { background-color: #f8f9fa; border: 1px solid #dee2e6; border-top: none; font-size: 1rem; } #im-finance-results .payment-details-wrapper { padding: 1rem 1.5rem; border: 1px solid #dee2e6; border-top: none; background-color: #fff; margin-bottom: 1.5rem; } #im-finance-results .payment-details-header { font-weight: bold; margin-bottom: 0.75rem; font-size: 1.1rem; color: #343a40; } #im-finance-results .payment-details-table { width: 100%; border-collapse: collapse; } #im-finance-results .payment-details-table th { text-align: left; background-color: #e9ecef; color: #495057; padding: 0.75rem; border: 1px solid #dee2e6; font-size: 0.85rem; white-space: nowrap; } #im-finance-results .payment-details-table td { padding: 0.75rem; border: 1px solid #dee2e6; vertical-align: middle; } #im-finance-results .payment-details-table tbody tr:nth-of-type(odd) { background-color: #f8f9fa; } #im-finance-results .payment-details-table td:nth-child(4), /* Cert Amount */ #im-finance-results .payment-details-table td:nth-child(5), /* Retention */ #im-finance-results .payment-details-table td:nth-child(6) { /* Payment */ text-align: right; font-family: monospace; } /* ++ NEW: Finance Report TFOOT ++ */ #im-finance-results .payment-details-table tfoot td { font-weight: bold; background-color: #e0e0e0; text-align: right; font-family: monospace; } #im-finance-results .payment-details-table tfoot td:first-child { text-align: left; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ++ END TFOOT ++ */ #im-finance-results .btn-info { /* Report button */ background-color: var(--iba-secondary-teal); border-color: var(--iba-secondary-teal); color: var(--text-color-light); /* MODIFIED: Button color */ } #im-finance-results .btn-info:hover { background-color: #005a6e; border-color: #005a6e; color: var(--text-color-light); /* MODIFIED: Hover color */ } /* Enhanced Report Modal Styles (copied and prefixed where necessary) */ /* Keep the non-print styles for the modal as they were */ #im-finance-report-modal .report-header { border-bottom: 2px solid #000; padding-bottom: 15px; margin-bottom: 20px; text-align: center; /* <<< ADDED THIS */ } #im-finance-report-modal .report-header h3 { font-size: 24px; margin-bottom: 5px; font-weight: bold; } #im-finance-report-modal .report-header h4 { font-size: 18px; margin: 10px 0; } #im-finance-report-modal .report-details { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; } #im-finance-report-modal .report-details-col { width: 48%; } #im-finance-report-modal .report-details p, #im-finance-report-modal .report-summary p { margin-bottom: 8px; font-size: 14px; line-height: 1.4; } #im-finance-report-modal .report-summary { background-color: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 25px; border: 1px solid #dee2e6; display: flex; justify-content: space-between; } #im-finance-report-modal .report-summary-col { width: 48%; } #im-finance-report-modal .report-summary p { font-weight: bold; display: flex; justify-content: space-between; } #im-finance-report-modal .report-summary p span { font-weight: normal; text-align: right; min-width: 150px; display: inline-block; } #im-finance-report-modal table { width: 100%; border-collapse: collapse; margin-bottom: 30px; } #im-finance-report-modal table th, #im-finance-report-modal table td { padding: 12px 10px; border: 1px solid #dee2e6; } #im-finance-report-modal table thead th { background-color: var(--iba-base-blue-dark); color: var(--text-color-light); font-weight: bold; font-size: 14px; text-align: center; } /* MODIFIED: Header color */ #im-finance-report-modal table tfoot th { background-color: #e9ecef; color: #000; font-weight: bold; font-size: 15px; text-align: right; padding-right: 20px; } #im-finance-report-modal table tfoot td { font-weight: bold; text-align: right; padding-right: 20px; font-size: 15px; } #im-finance-report-modal .signatures { display: flex; justify-content: space-between; margin-top: 60px; padding-top: 20px; } #im-finance-report-modal .signature-box { text-align: center; width: 30%; } #im-finance-report-modal .signature-line { border-top: 1px solid #000; margin-top: 40px; padding-top: 10px; display: inline-block; width: 80%; } #im-finance-report-modal #im-reportTableBody td:nth-child(3), /* Cert Amount */ #im-finance-report-modal #im-reportTableBody td:nth-child(4), /* Retention */ #im-finance-report-modal #im-reportTableBody td:nth-child(5) { /* Payment */ text-align: right; font-family: monospace; padding-right: 20px !important; } #im-finance-report-modal #im-reportTotalCertifiedAmount, #im-finance-report-modal #im-reportTotalRetentionAmount, #im-finance-report-modal #im-reportTotalPaymentAmount { text-align: right; font-family: monospace; font-weight: bold; font-size: 15px; padding-right: 20px !important; } #im-finance-report-modal #im-reportNotesSection { margin-top: 40px !important; } #im-finance-report-modal #im-reportNotesSection h5 { font-weight: bold; margin-bottom: 10px !important; } #im-finance-report-modal #im-reportNotesContent { white-space: pre-wrap !important; font-size: 12pt !important; padding: 10px !important; border: 1px solid #ddd !important; background: #f9f9f9 !important; min-height: 50px !important; } /* ++ NEW (Req 1): Active Jobs Sidebar ++ */ #im-show-active-jobs-btn { display: none; /* Hidden on desktop */ float: right; padding: 6px 12px; font-size: 14px; margin-left: 10px; } .im-entry-sidebar { width: var(--sidebar-width); position: fixed; top: 0; right: 0; height: 100vh; background-color: var(--iba-base-blue); /* MODIFIED: Sidebar color */ color: var(--text-color-light); border-left: 1px solid var(--iba-base-blue-light); z-index: 5; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; transition: transform 0.3s ease; } .im-sidebar-title { margin: 0 0 15px 0; padding-bottom: 15px; border-bottom: 1px solid var(--iba-base-blue-light); font-size: 1.2rem; text-align: center; } .im-sidebar-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; } .im-sidebar-item { background-color: var(--iba-base-blue-dark); /* MODIFIED: Item color */ padding: 12px 15px; border-radius: 6px; margin-bottom: 10px; cursor: pointer; transition: background-color 0.2s ease; } .im-sidebar-item:hover { background-color: var(--iba-base-blue-light); /* MODIFIED: Hover color */ } .im-sidebar-item span { display: block; line-height: 1.4; } .im-sidebar-po { font-weight: 600; font-size: 1rem; color: #fff; } .im-sidebar-vendor { font-size: 0.85rem; color: #c0c0c0; margin: 2px 0; } .im-sidebar-amount { font-size: 0.9rem; color: var(--iba-secondary-gold); /* MODIFIED: Amount color */ font-weight: 500; } .im-sidebar-no-jobs { color: #888; text-align: center; padding-top: 20px; } /* =================================== */ /* CORRECTED PRINT STYLES - CONDITIONAL */ /* =================================== */ @media print { /* ++ MODIFIED: Replaced single @page rule with named rules ++ */ @page portrait { size: A4 portrait; margin: 5mm; } @page landscape { size: A4 landscape; margin: 5mm; } body { visibility: hidden; /* Hide everything by default */ margin: 0 !important; padding: 0 !important; background: white !important; font-size: 10pt !important; /* Base print font size */ } /* --- Rule for Printing Summary Note --- */ #summary-note-printable-area:not(.hidden), #summary-note-printable-area:not(.hidden) * { visibility: visible !important; } #summary-note-printable-area:not(.hidden) { page: portrait; /* ++ MODIFIED: Use portrait page ++ */ position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 10mm 5mm !important; /* Add top/bottom padding, keep side margin */ border: none !important; box-shadow: none !important; background: white !important; overflow: visible !important; display: block !important; z-index: 9999 !important; } /* Show and style the print header - REMOVED BORDER-BOTTOM */ #summary-note-printable-area:not(.hidden) .sn-print-header { display: flex !important; justify-content: space-between; align-items: flex-start; /* border-bottom: 2px solid #000 !important; */ /* Removed */ padding-bottom: 10px !important; margin-bottom: 15px !important; } #summary-note-printable-area:not(.hidden) .sn-print-company h2 { margin: 0; font-size: 12pt !important; font-weight: bold; } #summary-note-printable-area:not(.hidden) .sn-print-title { text-align: right; } #summary-note-printable-area:not(.hidden) .sn-print-title h1 { margin: 0 0 5px 0; font-size: 16pt !important; font-weight: bold; } #summary-note-printable-area:not(.hidden) .sn-print-title p { margin: 0; font-size: 10pt !important; } /* MODIFIED: Print Summary For Vendor Styling - INCREASED PADDING */ #summary-note-printable-area:not(.hidden) .sn-vendor-summary-title { margin: 0 0 10px 0 !important; /* Smaller margin for print */ padding: 10px 5px !important; /* Increased top/bottom padding */ text-align: center !important; background-color: var(--iba-base-tint-light) !important; /* MODIFIED: Use new var */ color: var(--text-color-light) !important; /* White font */ border-radius: 0 !important; /* No rounded corners for print */ -webkit-print-color-adjust: exact !important; /* Ensure color prints correctly */ print-color-adjust: exact !important; } #summary-note-printable-area:not(.hidden) .sn-vendor-summary-title p { margin: 0 !important; font-size: 11pt !important; font-weight: bold !important; color: #46474d !important; /* Dark Grey */ } /* Hide parent border/margin */ #summary-note-printable-area:not(.hidden) .sn-vendor-info { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } /* Style Payment Details - REMOVED BORDER-TOP */ #summary-note-printable-area:not(.hidden) .sn-payment-details { font-size: 10pt !important; padding: 10px 0 !important; /* border-top: 1px solid #000 !important; */ /* Removed */ border-bottom: 1px solid #000 !important; margin-bottom: 15px !important; margin-top: 10px !important; /* Added small top margin */ } #summary-note-printable-area:not(.hidden) .sn-payment-details div { border-left: none !important; /* Remove internal border */ padding-left: 0 !important; } /* Style the table for print */ #summary-note-printable-area:not(.hidden) .sn-table { font-size: 9pt !important; page-break-inside: auto; table-layout: fixed !important; /* Ensure fixed layout */ width: 100% !important; /* Ensure table uses full width */ border: 1px solid #333 !important; /* Add outer border */ } #summary-note-printable-area:not(.hidden) .sn-table thead th { background-color: var(--iba-base-blue) !important; /* MODIFIED: Use new var */ color: var(--text-color-light) !important; /* White font */ -webkit-print-color-adjust: exact !important; /* Ensure color prints correctly */ print-color-adjust: exact !important; font-weight: bold !important; border: 1px solid #333 !important; /* Stronger borders */ } #summary-note-printable-area:not(.hidden) .sn-table td { border: 1px solid #333 !important; /* Stronger borders */ } /* Column Width Adjustments (Using Percentages) */ #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(1), /* Inv Count */ #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(1) { width: 8% !important; text-align: center !important; word-break: break-all; } #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(2), /* P.O.No. */ #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(2) { width: 8% !important; text-align: center !important; } #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(3), /* Site */ #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(3) { width: 8% !important; text-align: center !important; } #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(4), /* Bill Desc */ #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(4) { width: 44% !important; /* Largest column */ } #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(5), /* Bill Date */ #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(5) { width: 16% !important; text-align: center !important; } #summary-note-printable-area:not(.hidden) .sn-table th:nth-child(6), /* Payment Amt */ #summary-note-printable-area:not(.hidden) .sn-table td:nth-child(6) { width: 16% !important; text-align: right !important; /* Align numbers to the right */ } /* --- End Column Width Adjustments --- */ #summary-note-printable-area:not(.hidden) .sn-table tr { page-break-inside: avoid; page-break-after: auto; } #summary-note-printable-area:not(.hidden) .sn-table input { border: none !important; background: transparent !important; font-size: inherit !important; padding: 1px !important; /* Further reduce input padding */ } #summary-note-printable-area:not(.hidden) .sn-table th, #summary-note-printable-area:not(.hidden) .sn-table td { padding: 1px 6px !important; /* Reduce top/bottom padding more */ } #summary-note-printable-area:not(.hidden) .sn-footer { font-size: 10pt !important; padding: 8px 0 !important; border-top: 2px solid #000 !important; /* Make top border solid black */ margin-top: 0 !important; /* Remove space before footer */ page-break-before: auto; page-break-inside: avoid; } /* Show and style print-only notes */ #summary-note-printable-area:not(.hidden) .sn-print-notes-section { /* display: block !important; This is handled by JS based on content */ visibility: visible !important; /* Make sure it's visible if display is block */ margin-top: 20px !important; padding-top: 15px !important; border-top: 1px dashed #ccc !important; font-size: 9pt !important; color: #555 !important; page-break-before: auto; page-break-inside: avoid; /* Try to keep notes together */ } #summary-note-printable-area:not(.hidden) .sn-print-notes-section h4 { margin: 0 0 5px 0 !important; font-size: 10pt !important; font-weight: bold !important; color: #333 !important; } #summary-note-printable-area:not(.hidden) #sn-print-notes-content { margin: 0 !important; line-height: 1.4 !important; white-space: pre-wrap !important; /* Respect line breaks */ } #summary-note-printable-area:not(.hidden) .sn-signatures { margin-top: 60px !important; /* Keep reasonable space */ font-size: 10pt !important; page-break-before: auto; page-break-inside: avoid; justify-content: space-between !important; /* Space between for print */ } #summary-note-printable-area:not(.hidden) .sn-signatures div { padding-top: 40px !important; /* More space for signature line */ margin: 0 !important; /* Remove horizontal margin for print */ border-top: 1px solid #000 !important; /* Add line */ width: 30% !important; /* Define width */ text-align: center !important; } /* When printing summary note, HIDE the finance report modal and its overlay */ #summary-note-printable-area:not(.hidden) ~ #im-finance-report-modal { display: none !important; visibility: hidden !important; } /* Also hide other potential print areas if summary is active */ #summary-note-printable-area:not(.hidden) ~ #im-reporting-printable-area { display: none !important; visibility: hidden !important; } /* --- Rule for Printing Finance Report Modal --- */ /* Only apply when finance modal is VISIBLE on screen */ #im-finance-report-modal:not(.hidden), #im-finance-report-modal:not(.hidden) * { visibility: visible !important; } #im-finance-report-modal:not(.hidden) { page: portrait; /* ++ MODIFIED: Use portrait page ++ */ position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; background: white !important; overflow: visible !important; display: block !important; z-index: 9999 !important; font-size: 14pt !important; /* Keep original finance report font size */ } #im-finance-report-modal:not(.hidden) .modal-container { /* Ensure container fills */ width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: none !important; } #im-finance-report-modal:not(.hidden) .modal-header, #im-finance-report-modal:not(.hidden) .modal-footer { display: none !important; } /* Hide modal chrome */ #im-finance-report-modal:not(.hidden) .modal-content, #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area { /* Show content */ display: block !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; max-height: none !important; overflow: visible !important; } /* Apply specific finance report styles when printing it */ #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .report-header { border-bottom: 2px solid #000 !important; margin-bottom: 15px !important; text-align: center !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .report-header h3 { font-size: 28px !important; margin-bottom: 10px !important; font-weight: bold;} #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .report-header h4 { font-size: 22px !important; margin: 8px 0 !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .report-details { margin-bottom: 15px !important; padding-bottom: 10px !important; display: flex !important; justify-content: space-between !important; font-size: 14pt; border-bottom: 1px solid #ddd !important;} #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .report-details-col { width: 48% !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .report-summary { background-color: #f8f9fa !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; padding: 15px !important; border-radius: 5px !important; margin-bottom: 15px !important; display: flex !important; justify-content: space-between !important; border: 1px solid #dee2e6 !important; font-size: 14pt; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .report-summary-col { width: 48% !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 20px !important; font-size: 12pt; page-break-inside: auto !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table tbody tr { page-break-inside: avoid !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table tfoot { display: table-footer-group !important; page-break-inside: auto !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table th, #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table td { border: 1px solid #000 !important; padding: 10px !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table th { background-color: var(--iba-base-blue-dark) !important; color: var(--text-color-light) !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; text-align: center !important; font-size: 13pt; font-weight: bold;} /* MODIFIED: Header color */ #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table tfoot th, #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table tfoot td { background-color: #e9ecef !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color: #000 !important; text-align: right !important; padding-right: 20px !important; font-size: 14pt; font-weight: bold; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .signatures { display: flex !important; justify-content: space-between !important; margin-top: 40px !important; font-size: 14pt; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .signature-box { text-align: center !important; width: 30% !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area .signature-line { border-top: 1px solid #000 !important; margin-top: 60px !important; padding-top: 10px !important; display: inline-block !important; width: 80% !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area #im-reportNotesSection { margin-top: 40px !important; page-break-inside: avoid !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area #im-reportNotesSection h5 { font-size: 14pt !important; font-weight: bold; margin-bottom: 10px !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area #im-reportNotesContent { white-space: pre-wrap !important; font-size: 12pt !important; padding: 10px !important; border: 1px solid #ddd !important; background: #f9f9f9 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; min-height: 50px !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table td:nth-child(3), #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table td:nth-child(4), #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table td:nth-child(5) { text-align: right !important; font-family: monospace !important; padding-right: 15px !important; } #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table td:nth-child(1), #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table td:nth-child(2), #im-finance-report-modal:not(.hidden) #im-finance-report-printable-area table td:nth-child(6) { text-align: center !important; vertical-align: middle !important; } /* When printing finance report, HIDE the summary note area */ #im-finance-report-modal:not(.hidden) ~ #summary-note-printable-area { display: none !important; visibility: hidden !important; } /* Also hide other potential print areas if finance modal is active */ #im-finance-report-modal:not(.hidden) ~ #im-reporting-printable-area { display: none !important; visibility: hidden !important; } /* ++ NEW (Req 2): Rules for printing Invoice Summary Report ++ */ #im-reporting-printable-area:not(.hidden), #im-reporting-printable-area:not(.hidden) * { visibility: visible !important; } #im-reporting-printable-area:not(.hidden) { page: landscape; /* ++ MODIFIED: Use landscape page ++ */ position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 10mm 0mm !important; /* <-- SET SIDE PADDING TO 0 */ border: none !important; box-shadow: none !important; background: white !important; overflow: visible !important; display: block !important; z-index: 9999 !important; font-size: 9pt !important; } .print-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 10px; } .print-logo h1 { font-size: 14pt; margin: 0; } .print-title-section { text-align: right; } .print-title-section h2 { font-size: 16pt; margin: 0 0 5px 0; } .print-title-section p { font-size: 10pt; margin: 0; } .print-summary { margin-top: 20px; background: #f4f7fa; padding: 15px 5px; border: 1px solid #e0e0e0; border-radius: 5px; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .print-summary h3 { margin: 0 0 15px 0; text-align: center; font-size: 12pt; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .print-summary-grid { display: flex; justify-content: space-around; align-items: center; } .print-summary-grid div { text-align: center; } .print-summary-grid span { font-size: 10pt; color: #333; display: block; } .print-summary-grid strong { font-size: 14pt; color: #000; display: block; } #im-print-report-body { margin-top: 25px; } /* --- *** PRINT PAGING FIX (START) *** --- */ .print-po-container { border: 1px solid #aaa; border-radius: 5px; margin-bottom: 15px; page-break-inside: auto; /* <-- Set to auto to allow splitting */ } .print-po-header { page-break-after: avoid; /* Try to keep header with the table */ } /* [ADD this new block inside @media print in style.css] */ .print-po-header { background: var(--iba-base-blue); color: white; padding: 10px 5px; /* --- NEW GRID LAYOUT --- */ display: grid; grid-template-columns: 1fr 1fr 1.5fr; /* 3 columns */ grid-template-rows: auto auto; /* 2 rows */ gap: 5px 20px; /* row-gap, column-gap */ /* --- END NEW --- */ border-radius: 5px 5px 0 0; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .po-header-item { font-size: 10pt; } .po-header-vendor { grid-column: 1 / span 2; /* Make Vendor span 2 columns */ } /* --- *** PRINT PAGING FIX (END) *** --- */ .print-po-header div { font-size: 10pt; } .print-invoice-table { width: 100%; border-collapse: collapse; page-break-inside: auto; /* Allow the table itself to break if needed */ } .print-invoice-table tbody tr { page-break-inside: avoid; /* Do NOT break inside a single row */ } .print-invoice-table tfoot { page-break-inside: auto; /* <-- ALLOW tfoot to break if needed */ display: table-footer-group; /* Reinforce that this is a footer */ } .print-invoice-table th, .print-invoice-table td { border: 1px solid #ccc; padding: 6px 4px; text-align: left; } .print-invoice-table thead th { background: #e9ecef; font-size: 9pt; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .print-invoice-table tbody tr:nth-child(even) { background: #f9f9f9; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .print-invoice-table tfoot td { border-top: 2px solid #000; } .print-number { text-align: right !important; font-family: monospace; } .print-footer-label { text-align: right !important; font-weight: bold; } .print-footer { font-weight: bold; font-size: 10pt; } /* --- *** PRINT SIGNATURE FIX (START) *** --- */ .print-footer-signatures { display: none !important; } /* --- *** PRINT SIGNATURE FIX (END) *** --- */ /* --- Hide elements that should never print --- */ #summary-note-controls, /* Hide the controls on the summary page */ #im-summary-note .form-group.no-print, /* Hide the custom notes input area */ #im-finance-report .search-and-filter-group, /* Hide finance search controls */ .workdesk-sidebar, /* Hide sidebars */ /* ++ MODIFIED (Req 1): Also hide new IM sidebar ++ */ .im-entry-sidebar, .workdesk-main > span, /* Hide datetime spans */ .workdesk-section:not(#im-summary-note):not(#im-finance-report):not(#im-reporting), /* Hide non-active sections */ .modal-overlay:not(#im-finance-report-modal), /* Hide other modals */ button, /* Hide all buttons generally */ .no-print, /* Add class="no-print" to any other element you want hidden */ /* ++ NEW (Req 2): Hide on-screen report content when printing ++ */ #im-reporting-form, #im-reporting-content, .report-header, .reporting-legend { display: none !important; visibility: hidden !important; } /* --- MODIFIED: Ensure notes section IS visible ONLY if JS sets display: block --- */ #summary-note-printable-area:not(.hidden) .sn-print-notes-section { display: none; /* Hide by default in print */ } #summary-note-printable-area:not(.hidden) .sn-print-notes-section[style*="display: block"] { display: block !important; /* ONLY show if JS explicitly sets it */ } /* =================================== */ /* ++ NEW: Rules for printing WorkDesk Report ++ */ /* =================================== */ /* When body has the helper class, hide everything */ body.workdesk-print-active * { visibility: hidden; } /* Then, show ONLY the WorkDesk report section that has the 'printing' class */ body.workdesk-print-active #reporting-printable-area.printing, body.workdesk-print-active #reporting-printable-area.printing * { visibility: visible !important; } /* Style the WorkDesk report section for printing */ body.workdesk-print-active #reporting-printable-area.printing { page: landscape; /* Use landscape page */ position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 10mm 5mm !important; border: none !important; box-shadow: none !important; background: white !important; font-size: 9pt !important; } /* Hide elements inside the WorkDesk section that we don't want */ body.workdesk-print-active #reporting-printable-area.printing .search-bar-local, body.workdesk-print-active #reporting-printable-area.printing .report-controls, body.workdesk-print-active #reporting-printable-area.printing .report-header, body.workdesk-print-active #reporting-printable-area.printing .report-tabs-container, body.workd-e-s-k-print-active #reporting-printable-area.printing .report-buttons-group { display: none !important; visibility: hidden !important; } /* Style the WorkDesk report table */ body.workdesk-print-active #reporting-printable-area.printing table { width: 100% !important; border-collapse: collapse !important; font-size: 8pt !important; /* Smaller font for more data */ } body.workdesk-print-active #reporting-printable-area.printing table th, body.workdesk-print-active #reporting-printable-area.printing table td { border: 1px solid #333 !important; padding: 4px 6px !important; text-align: left !important; } body.workdesk-print-active #reporting-printable-area.printing table thead th { background-color: #f0f0f0 !important; font-weight: bold !important; color: #000 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body.workdesk-print-active #reporting-printable-area.printing table tr { page-break-inside: avoid; page-break-after: auto; } } /* =================================== */ /* END OF PRINT STYLES */ /* =================================== */ /* --- (FIX) Desktop/Mobile Table Column Visibility --- */ .mobile-optimized-table .mobile-only { display: none; /* Hide mobile-only th and td on desktop */ } .mobile-optimized-table .desktop-only { display: table-cell; /* Show desktop-only th and td on desktop */ } /* ++ NEW: Style for admin-clickable rows in Job Records ++ */ #reporting-table-body tr.admin-clickable-row { cursor: pointer; } #reporting-table-body tr.admin-clickable-row:hover { background-color: #f0f8ff; /* A light blue hover */ } /* ++ NEW: Job Entry Navigation ++ */ .jobentry-header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; /* Replaces the h1's margin-bottom */ } .jobentry-header-container h1 { margin: 0; /* Remove margin from h1 */ } #jobentry-nav-controls { display: flex; gap: 10px; align-items: center; } #jobentry-nav-controls button { padding: 8px 12px; font-size: 14px; } #nav-job-counter { font-size: 0.9rem; font-weight: 500; color: #555; white-space: nowrap; } /* === THIS IS THE NEW STYLE === */ #active-task-filters { margin-bottom: 20px; } /* === END OF NEW STYLE === */ /* [Add this block before the @media query, around line 1755] */ /* === NEW: CALENDAR LEGEND STYLES === */ .wd-calendar-legend { display: flex; gap: 20px; margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 6px; font-size: 0.85rem; flex-wrap: wrap; /* Added for mobile */ } .legend-item { display: flex; align-items: center; gap: 8px; color: #333; } .legend-color-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); } .legend-color-dot.status-red { background-color: var(--iba-secondary-terracotta); /* Red */ } .legend-color-dot.status-yellow { background-color: var(--iba-secondary-gold); /* Yellow */ } .legend-color-dot.status-green { background-color: #28a745; /* Green */ } .legend-admin-only { display: none; /* Hidden by default */ } /* Show admin legend item if body has .is-admin class */ body.is-admin .legend-admin-only { display: flex; } /* === END OF LEGEND STYLES === */ /* === NEW: WORKDESK CALENDAR WIDGET === */ #wd-calendar-container { background-color: #fff; border-radius: 8px; border: 1px solid #e0e0e0; overflow: hidden; } #wd-calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: var(--iba-base-blue); color: white; } #wd-calendar-month-year { font-size: 1.3rem; font-weight: 600; } #wd-calendar-nav button { background: var(--iba-base-blue-light); color: white; border: none; font-size: 1rem; padding: 5px 12px; border-radius: 4px; cursor: pointer; } #wd-calendar-nav button:hover { background: var(--iba-secondary-teal); } #wd-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .wd-calendar-day-name { text-align: center; padding: 10px 5px; font-weight: 600; font-size: 0.8rem; color: #555; background-color: #f8f9fa; border-bottom: 1px solid #e0e0e0; } /* This is the CORRECT code */ .wd-calendar-day { min-height: 80px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 8px; font-size: 0.9rem; position: relative; cursor: pointer; transition: background-color 0.2s; } .wd-calendar-day:nth-child(7n) { border-right: none; } .wd-calendar-day.other-month { color: #ccc; background-color: #fdfdfd; cursor: default; } .wd-calendar-day:not(.other-month):hover { background-color: #f0f8ff; } .wd-calendar-day.today { background-color: #fffde7; font-weight: bold; } .wd-calendar-day.selected { background-color: var(--iba-secondary-teal) !important; color: white; font-weight: bold; } /* MODIFIED: Replaced .task-dot with .task-count-badge */ .wd-calendar-day .task-count-badge { position: absolute; top: 4px; right: 4px; background-color: var(--iba-secondary-terracotta); color: white; font-size: 1.0rem; /* <-- Increased font size */ font-weight: bold; border-radius: 50%; width: 30px; /* <-- Increased width */ height: 30px; /* <-- Increased height */ display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 3px rgba(0,0,0,0.3); } .wd-calendar-day .task-count-badge.admin-view-only { background-color: #28a745; /* Green for "view-only" tasks */ } .wd-calendar-day.selected .task-count-badge { background-color: white; color: var(--iba-secondary-terracotta); border: 3px solid var(--iba-secondary-terracotta); /* Thick red line */ box-sizing: border-box; /* Ensures border is inside the 30px circle */ } .wd-calendar-day .task-count-badge.status-pending-signature { background-color: var(--iba-secondary-gold); /* Yellow */ color: #212529; /* Dark text on yellow */ } .wd-calendar-day.selected .task-count-badge.status-pending-signature { background-color: white; color: var(--iba-secondary-gold); border: 3px solid var(--iba-secondary-gold); /* Thick yellow line */ box-sizing: border-box; } .wd-calendar-day.selected .task-count-badge.admin-view-only { background-color: white; color: #28a745; /* Green text */ border: 3px solid #28a745; /* Thick green line */ box-sizing: border-box; } /* === NEW RULE FOR DESKTOP-ONLY 'ENTER/DOUBLE-CLICK' TOOLTIP === */ @media (min-width: 769px) { .wd-calendar-day:hover .task-count-badge::after { content: 'Dbl-click for Day View | Press Enter for Active Tasks'; /* <-- NEW TEXT */ position: absolute; top: 100%; right: 0; margin-top: 5px; background-color: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: normal; white-space: nowrap; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.2); pointer-events: none; } } /* === END OF NEW RULE === */ /* --- FIX FOR DESKTOP VIEW (Hides Mobile Elements) --- */ @media (min-width: 769px) { .dayview-mobile-header-new, .dayview-mobile-titles, .dayview-date-scroller { display: none !important; } /* This rule ensures the DESKTOP header is visible on desktop */ #wd-dayview .dayview-header { display: flex !important; } } #wd-calendar-task-list { margin-top: 20px; display: none; /* <-- ADD THIS LINE */ } #wd-calendar-task-list-ul { list-style: none; padding: 0; margin: 0; max-height: 300px; overflow-y: auto; } #wd-calendar-task-list-ul li { background-color: #f8f9fa; padding: 12px 15px; border-radius: 4px; margin-bottom: 8px; border-left: 4px solid var(--iba-secondary-periwinkle); } #wd-calendar-task-list-ul li.status-pending-signature { border-left-color: var(--iba-secondary-gold); } #wd-calendar-task-list-ul li.status-for-srv { border-left-color: var(--iba-secondary-terracotta); } #wd-calendar-task-list-ul li strong { /* This is now the main line, e.g., "PO: 12345 - QAR 1,000.00" */ font-size: 1rem; color: #333; margin-bottom: 3px; display: block; /* Ensure it's on its own line */ } #wd-calendar-task-list-ul li span { /* This is for sub-info like vendor name or status */ font-size: 0.9rem; color: #555; display: block; /* Make each span its own line */ margin-top: 2px; } /* === END OF CALENDAR WIDGET === */ /* ... (this rule should already be there) ... */ #wd-calendar-task-list-ul li span { font-size: 0.9rem; color: #555; display: block; /* Make each span its own line */ margin-top: 2px; } /* === ADD THIS NEW RULE === */ #wd-calendar-task-list-ul li.clickable-task { cursor: pointer; transition: background-color 0.2s; } #wd-calendar-task-list-ul li.clickable-task:hover { background-color: #e6f7ff; /* Light blue hover */ } /* === END OF NEW RULE === */ /* === NEW: YEAR VIEW CALENDAR STYLES === */ #wd-calendar-toggle-view { background: var(--iba-secondary-gold); color: #212529; border: none; font-size: 0.8rem; /* Make it small */ padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-right: 10px; /* Add spacing */ } #wd-calendar-toggle-view:hover { background: #9a8100; } #wd-calendar-year-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 months per row */ gap: 1px; background-color: #eee; /* Grid lines */ border: 1px solid #eee; } .wd-calendar-month-cell { background-color: #fff; padding: 20px 10px; text-align: center; font-weight: 600; color: #777; position: relative; cursor: pointer; transition: background-color 0.2s; } .wd-calendar-month-cell:hover { background-color: #f0f8ff; } .wd-calendar-month-cell.has-tasks { background-color: #fef5f3; /* <-- NEW LIGHTER RED */ color: #333; font-weight: bold; } .wd-calendar-month-cell.has-tasks .month-task-count { position: absolute; top: 5px; right: 5px; background-color: var(--iba-secondary-terracotta); /* Default: Red */ color: white; font-size: 0.7rem; font-weight: bold; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } /* 1. Makes the month cell background light green */ .wd-calendar-month-cell.has-tasks.admin-view-only { background-color: #f6fcf9; /* <-- NEW LIGHTER GREEN */ } /* 2. Makes the count badge solid green */ .wd-calendar-month-cell .month-task-count.admin-view-only { background-color: #28a745; /* Solid Green */ } /* 4. Makes the month cell background light yellow */ .wd-calendar-month-cell.has-tasks.status-pending-signature { background-color: #fffde7; /* Light Yellow */ } /* 5. Makes the count badge solid yellow */ .wd-calendar-month-cell .month-task-count.status-pending-signature { background-color: var(--iba-secondary-gold); /* Solid Yellow */ color: #212529; /* Dark text */ } /* 3. This is the tooltip rule */ .wd-calendar-month-cell.has-tasks:hover::after { content: 'Double-click to view month'; position: absolute; bottom: 5px; /* Position at the bottom of the cell */ left: 50%; transform: translateX(-50%); /* Center it */ background-color: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: normal; white-space: nowrap; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.2); pointer-events: none; /* Prevents tooltip from blocking clicks */ } /* === END OF YEAR VIEW STYLES === */ /* === NEW: IM Reporting Mobile View Styles === */ #im-reporting-mobile-view { display: none; /* Hidden by default on desktop */ } /* ADD THIS NEW RULE to hide the invoice list */ .hidden-invoice-list { /* We use display: none to completely hide the content and collapse the space */ display: none !important; } /* Optional: Update the PO Card to better look like a button */ .im-po-balance-card { transition: background-color 0.2s; /* Add smooth transition */ } .im-po-balance-card:hover { background-color: #f8f9fa; /* Slightly highlight on hover/tap */ } .im-mobile-report-container { width: 100%; margin-top: 20px; } /* Card style for PO Balance */ .im-po-balance-card { background-color: #fff; border-radius: 12px; padding: 20px; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid #eee; } .im-po-balance-card h3 { margin: 0; font-size: 1.1rem; color: #555; font-weight: 600; } .im-po-balance-card .po-vendor { font-size: 0.9rem; color: #777; margin-bottom: 15px; } .im-po-balance-card .po-value { font-size: 2.2rem; font-weight: 700; color: #111; margin: 5px 0; } .im-po-balance-card .po-site { font-size: 0.9rem; color: #555; margin-top: 5px; } /* Header for Invoice List */ .im-invoice-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 5px; } .im-invoice-list-header h2 { margin: 0; font-size: 1.2rem; color: #333; } /* List for Invoices */ .im-invoice-list { list-style: none; padding: 0; margin: 0; } .im-invoice-item { background-color: #fff; border-radius: 10px; padding: 15px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); border: 1px solid #f0f0f0; display: flex; align-items: center; gap: 15px; } .im-invoice-item .invoice-count { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background-color: var(--iba-base-tint-light); color: var(--iba-base-blue); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.1rem; } .im-invoice-item .invoice-details { flex-grow: 1; display: grid; grid-template-columns: 1fr 1fr; /* 2 columns */ gap: 2px 10px; } .im-invoice-item .invoice-main-info { grid-column: 1 / 2; /* Span 1 column */ font-weight: 600; color: #333; font-size: 0.95rem; } .im-invoice-item .invoice-main-info span { font-weight: 500; color: #666; font-size: 0.85rem; margin-left: 5px; } .im-invoice-item .invoice-amounts { grid-column: 2 / 3; /* Span 1 column */ text-align: right; } .im-invoice-item .invoice-amounts .amount-value { font-size: 1rem; font-weight: 600; color: #111; display: block; } .im-invoice-item .invoice-amounts .amount-paid { font-size: 0.8rem; color: #28a745; font-weight: 500; display: block; } .im-invoice-item .invoice-status { grid-column: 1 / 3; /* Span full width */ margin-top: 5px; font-size: 0.85rem; font-weight: 600; } /* === END OF NEW STYLES === */ /* ... (this rule should already be there) ... */ @media (max-width: 768px) { /* ... (all your existing mobile styles) ... */ /* === ADD THESE RULES INSIDE THE MOBILE MEDIA QUERY === */ #im-reporting #im-reporting-content { display: none !important; /* Hide desktop table on mobile */ } #im-reporting #im-reporting-mobile-view { display: block; /* Show new mobile UI */ } /* === END OF ADDITION === */ /* --- NEW: Datetime and Version on Mobile --- */ #workdesk-view .workdesk-sidebar .sidebar-footer-info { display: flex; flex-direction: column; align-items: flex-end; /* Align text to the right */ } #workdesk-view .workdesk-sidebar #workdesk-datetime { font-size: 0.8rem; color: #a0aec0; /* Match version text color */ font-weight: 500; } #workdesk-view .workdesk-sidebar .sidebar-version-display { margin-top: 2px; /* Small space between */ margin-bottom: 0; text-align: right; } /* --- FIX FOR MOBILE DATE SCROLLER --- */ @media (max-width: 768px) { #wd-dayview-date-scroller-inner { display: flex !important; /* This forces it to be horizontal */ gap: 15px; padding: 0 5px; } } /* MOBILE RESPONSIVE STYLES */ @media (max-width: 768px) { /* *** MODIFICATION: Move IM datetime to sidebar *** */ #im-datetime { text-align: center; font-size: 0.8rem; color: #a0aec0; /* Match version text color */ margin: 10px 0 -5px 0; /* Adjust spacing */ order: 10; /* Move it after footer */ display: block; /* Ensure it's visible */ } .workdesk-main { padding: 15px; padding-bottom: 80px; display: flex; flex-direction: column; } .report-header { flex-direction: column; /* *** MODIFICATION: Align mobile report header left *** */ align-items: flex-start; gap: 5px; /* Reduce gap */ } /* *** MODIFICATION: Align mobile report header left *** */ .report-header h1 { font-size: 1.5rem; margin: 0; } /* --- (NEW) Mobile Reporting Cleanup --- */ #im-reporting .report-header .daily-report-section, #im-reporting .reporting-legend, #im-reporting .report-buttons-group #im-refresh-reporting-button, #im-reporting .report-buttons-group #im-reporting-print-btn, #im-reporting .report-buttons-group #im-reporting-download-csv-button { display: none !important; } /* --- (END NEW) --- */ .report-controls { flex-direction: column; align-items: stretch; } .report-tabs { overflow-x: auto; white-space: nowrap; } #app-container, .form-container, .workdesk-section { padding: 15px; } .circle-button { width: 100px; height: 100px; font-size: 0.9rem; } .dashboard-header { flex-direction: column; align-items: flex-start; gap: 15px; } #workdesk-view, #invoice-management-view { flex-direction: column; } .workdesk-sidebar { width: 100%; height: auto; flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 10; } .wd-user-profile { display: flex; align-items: center; gap: 12px; padding-bottom: 0; border-bottom: none; text-align: left; } .wd-user-avatar { width: 45px; height: 45px; margin: 0; font-size: 24px; } #wd-username, #im-username { font-size: 1rem; margin: 0; } #wd-user-identifier, #im-user-identifier, .workdesk-sidebar .workdesk-navigation, .workdesk-footer-nav .hidden, .workdesk-footer-nav a span { display: none; } /* --- (NEW) Hide elements in IM sidebar on mobile --- */ #invoice-management-view .workdesk-sidebar .mobile-hide { display: none !important; } /* --- (END NEW) --- */ .workdesk-footer-nav { margin: 0; } .workdesk-footer-nav ul { display: flex; } .workdesk-footer-nav a { padding: 8px; font-size: 18px; margin-bottom: 0; background-color: var(--iba-base-blue-light); } /* MODIFIED: Button color */ .workdesk-footer-nav a:hover { background-color: var(--iba-base-blue-light); } /* MODIFIED: Hover color */ .workdesk-section h1 { font-size: 1.5rem; } /* --- (MODIFIED) Mobile WorkDesk Nav --- */ .workdesk-navigation { display: block !important; position: fixed; bottom: 0; left: 0; width: 100%; height: 65px; background-color: #ffffff; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); z-index: 1000; margin-top: 0; flex-grow: 0; } .workdesk-navigation ul { display: flex; justify-content: space-around; align-items: center; height: 100%; } .workdesk-navigation li { flex-grow: 1; } /* Hide all links by default on mobile */ #workdesk-view .workdesk-navigation li { display: none; } /* --- *** MODIFICATION: Show specific mobile links *** --- */ /* 1. Dashboard */ #workdesk-view .workdesk-navigation li.wd-nav-dashboard { display: list-item; } /* 2. Active Task (My Tasks) - ESSENTIAL FOR CEO */ #workdesk-view .workdesk-navigation li.wd-nav-activetask { display: list-item !important; } /* 3. Reporting */ #workdesk-view .workdesk-navigation li.wd-nav-im-reporting-mobile { display: list-item; } /* --- *** END OF MODIFICATION *** --- */ /* Hide the mobile-only reporting link when in IM view */ #invoice-management-view .workdesk-navigation li.wd-nav-im-reporting-mobile { display: none; } /* --- *** START OF MOBILE NAV FIX *** --- */ /* Hide all desktop-only links on mobile */ .desktop-only-li { display: none !important; } /* Show our mobile-only WorkDesk "Task Calendar" link */ #invoice-management-view .workdesk-navigation li.wd-nav-dashboard-mobile { display: list-item; } /* Hide the desktop IM Reporting link on mobile */ #invoice-management-view .workdesk-navigation li.im-nav-reporting { display: none; } /* Show the mobile IM Reporting link */ #invoice-management-view .workdesk-navigation li.wd-nav-im-reporting-mobile { display: list-item; } /* --- *** END OF MOBILE NAV FIX *** --- */ .workdesk-navigation a { flex-direction: column; justify-content: center; gap: 4px; height: 100%; font-size: 0.7rem; color: #555; margin-bottom: 0; padding: 5px 0; border-radius: 0; } .workdesk-navigation a:hover { background-color: #f4f7fa; color: var(--iba-secondary-teal); } /* MODIFIED: Hover color */ .workdesk-navigation a.active { color: var(--iba-secondary-teal); background-color: transparent; font-weight: bold; border-top: 3px solid var(--iba-secondary-teal); border-radius: 0; padding-top: 2px; } /* MODIFIED: Active color */ .workdesk-navigation a.active i { transform: scale(1.1); } .workdesk-navigation a i { font-size: 1.2rem; margin-bottom: 2px; } /* --- (END MODIFIED) Mobile WorkDesk Nav --- */ .jobentry-form-2col { grid-template-columns: 1fr; } .form-buttons-container { justify-content: center; } /* ++ NEW: Dashboard mobile layout ++ */ .im-dashboard-grid { grid-template-columns: 1fr; /* Stack all cards */ } #dashboard-view .button-container .circle-button:not(#invoice-mgmt-button) { display: none; } /* === THIS RULE WAS COMMENTLED OUT / REMOVED === */ /* #invoice-management-view .workdesk-navigation ul li:not(:has(a[data-section="im-reporting"])) { display: none; } */ /* === END OF CHANGE === */ /* --- *** START OF MOBILE NAV FIX *** --- */ /* Hide mobile top bars per user request */ #workdesk-view .workdesk-sidebar .wd-user-profile, #workdesk-view .workdesk-sidebar .wd-back-button, #workdesk-view .workdesk-sidebar .workdesk-footer-nav, #invoice-management-view .workdesk-sidebar .wd-user-profile, #invoice-management-view .workdesk-sidebar .wd-back-button, #invoice-management-view .workdesk-sidebar .workdesk-footer-nav { display: none; } /* --- *** END OF MOBILE NAV FIX *** --- */ /* NEW: Ensure Finance Report specific elements stack correctly */ #im-finance-report .search-and-filter-group { flex-direction: column; align-items: stretch; } /* NEW: Adjust 3-column grid for mobile */ .form-grid-3col { grid-template-columns: 1fr 1fr; } /* Stack into 2 columns */ /* ++ NEW (Req 1): Mobile styles for IM sidebar ++ */ .workdesk-main.with-sidebar { margin-right: 0; /* No margin on mobile */ } #im-show-active-jobs-btn { display: inline-block; /* Show the button */ } .im-entry-sidebar { transform: translateX(100%); /* Hide sidebar off-screen */ z-index: 1500; /* Ensure it's above content */ box-shadow: -5px 0 15px rgba(0,0,0,0.2); } .im-entry-sidebar.visible { transform: translateX(0); /* Slide in */ } /* --- (MODIFIED) Mobile Optimized Table --- */ .mobile-optimized-table thead { display: none; /* Hide desktop header */ } .mobile-optimized-table .desktop-only { display: none !important; /* Hide ALL desktop elements (th and td) */ } .mobile-optimized-table .mobile-only { display: block; /* Show mobile td (as blocks) */ } .mobile-optimized-table tbody, .mobile-optimized-table tr, .mobile-optimized-table td { display: block; width: 100%; } .mobile-optimized-table tr { margin-bottom: 15px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; background: #fff; } .mobile-optimized-table td { padding-left: 50%; /* Make space for the label */ position: relative; text-align: right; border-bottom: 1px solid #f0f0f0; } .mobile-optimized-table tr:hover { background-color: transparent; } .mobile-optimized-table td:last-child { border-bottom: none; } /* This rule is now redundant but we leave it for clarity */ .mobile-optimized-table td.desktop-only { display: none !important; /* Hide all desktop columns */ } .mobile-optimized-table td.mobile-only { display: block; /* Show mobile-specific columns */ font-size: 0.95rem; padding-top: 10px; padding-bottom: 10px; cursor: pointer; } .mobile-optimized-table td.mobile-only:hover { background-color: #f0f8ff; } .mobile-optimized-table td.mobile-only::before { content: attr(data-label); position: absolute; left: 15px; width: 45%; padding-right: 10px; text-align: left; font-weight: bold; color: #555; } /* Style the content inside mobile cells */ .mobile-main-info { display: block; font-weight: 600; color: #333; } .mobile-sub-info { display: block; font-size: 0.9em; color: #666; } /* --- (END MODIFIED) Mobile Optimized Table --- */ } } /* +++ CACHE STATUS INDICATOR +++ */ .cache-status { font-size: 0.8rem; color: #6c757d; text-align: right; margin-bottom: 10px; padding: 5px 10px; background-color: #f8f9fa; border-radius: 4px; border-left: 3px solid #28a745; } .cache-status.stale { border-left-color: #ffc107; } .cache-status.refreshing { border-left-color: #17a2b8; } /* Style for sidebar navigation separator */ /* --- *** START OF 2-REPORTING-LINKS FIX *** --- */ /* Hide mobile-only report link on desktop */ .wd-nav-im-reporting-mobile { display: none; } /* --- *** END OF 2-REPORTING-LINKS FIX *** --- */ .workdesk-navigation li.nav-section-divider { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--iba-base-blue-light); /* MODIFIED: Separator color */ } /* ++ NEW: 3-Column Grid Layout for Invoice Entry Form ++ */ .form-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */ gap: 15px 25px; /* Row gap and Column gap */ align-items: end; /* Align items to the bottom */ } .form-grid-3col .form-group { margin-bottom: 0; /* Remove default bottom margin inside grid */ } /* Optional: Adjust Note textarea position if needed */ #im-new-invoice-form .form-group textarea#im-note { /* Adjustments can go here if needed */ } /* ++ NEW: Modify Task Modal Styles ++ */ #modify-task-modal .choices__inner { /* Ensure modal dropdowns work */ min-height: 45px; font-size: 16px; background-color: #fff; margin-bottom: 15px; /* Add margin to match other inputs */ } /* ++ UPDATED: Action Button Styles in Tables ++ */ /* Remove old .respond-btn rule if it exists */ .table-wrapper .respond-btn { /* This class is no longer used, you can delete its rule */ } .srv-done-btn, .modify-btn { padding: 5px 10px; font-size: 13px; font-weight: normal; margin-right: 5px; /* Add some spacing */ border: none; } .srv-done-btn { background-color: #28a745; /* Green */ color: var(--text-color-light); } .srv-done-btn:hover { background-color: #218838; } .srv-done-btn:disabled { background-color: #aaa; cursor: not-allowed; opacity: 0.7; } .modify-btn { background-color: var(--iba-secondary-gold); /* MODIFIED: Button color */ color: #212529; } .modify-btn:hover { background-color: #9a8100; /* MODIFIED: Hover color */ } /* ++ NEW: Notification Badge for Sidebar ++ */ .notification-badge { background-color: var(--iba-secondary-terracotta); /* MODIFIED: Badge color */ color: white; border-radius: 10px; padding: 2px 6px; font-size: 0.7rem; font-weight: bold; position: relative; top: -2px; margin-left: 6px; display: inline-block; } /* ++ NEW: IM Dashboard Refresh Button ++ */ .dashboard-chart-controls { display: flex; gap: 10px; align-items: center; } #im-dashboard-refresh-btn { padding: 6px 10px; font-size: 14px; line-height: 1; /* Make it blend in with the dark theme */ background-color: var(--iba-base-blue-light); border: 1px solid var(--db-border); } #im-dashboard-refresh-btn:hover { background-color: var(--iba-secondary-teal); } /* Hide mobile-only dashboard link on desktop */ .wd-nav-dashboard-mobile { display: none; } /* === NEW: DAY VIEW STYLES === */ .dayview-header { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 15px; } .dayview-header h1 { margin: 0; } #wd-dayview-back-btn { font-size: 1rem; padding: 8px 12px; } #wd-dayview-back-btn i { margin-right: 8px; } .dayview-task-card { background: #fdfdfd; border: 1px solid #e0e0e0; border-left: 5px solid var(--iba-secondary-teal); border-radius: 6px; padding: 15px 20px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .dayview-task-card strong { font-size: 1.1rem; color: #333; display: block; margin-bottom: 8px; } .dayview-task-card .task-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; font-size: 0.9rem; } .dayview-task-card .task-detail-item { color: #555; } .dayview-task-card .task-detail-item .label { font-weight: 600; color: #000; } .dayview-task-card .task-detail-item.status { font-weight: bold; } .dayview-task-card .task-detail-item.note { grid-column: 1 / -1; /* Make note span full width */ font-style: italic; color: var(--iba-secondary-terracotta); margin-top: 8px; } /* 2. Style for title with tasks (no longer clickable) */ #wd-calendar-task-list h3[data-has-tasks="true"] { background-color: #f8f9fa; color: #333; font-weight: 600; } /* === NEW: Make Day View task cards clickable for admins === */ .dayview-task-card.admin-clickable-task { cursor: pointer; } .dayview-task-card.admin-clickable-task:hover { background-color: #e6f7ff; /* Light blue hover */ border-color: #b3e0ff; } /* === END OF DAY VIEW STYLES === */ .dayview-header { justify-content: space-between; /* Make back button and nav split */ flex-wrap: wrap; /* For mobile */ } .dayview-date-nav { display: flex; align-items: center; gap: 15px; } .dayview-date-nav h1 { margin: 0; font-size: 1.5rem; /* Make it a bit bigger */ white-space: nowrap; } .dayview-date-nav button { font-size: 1.2rem; font-weight: bold; padding: 5px 12px; flex-shrink: 0; } /* === NEW: Mobile Report Card Status Colors === */ .im-po-balance-card.status-pending { background-color: #f7f9ff; /* Very light blue/periwinkle tint */ border-left: 5px solid var(--iba-secondary-periwinkle); } .im-po-balance-card.status-progress { background-color: #e6f7ff; /* Light teal tint */ border-left: 5px solid var(--iba-secondary-teal); } .im-po-balance-card.status-complete { background-color: #fffae0; /* Light gold tint */ border-left: 5px solid var(--iba-secondary-gold); } .im-po-balance-card:hover { background-color: #f0f0f0; /* Default hover to keep it light */ } /* Ensure hover colors respect the status theme */ .im-po-balance-card.status-pending:hover { background-color: #e8ecf4; } .im-po-balance-card.status-progress:hover { background-color: #d8edf7; } .im-po-balance-card.status-complete:hover { background-color: #f7f4d3; } } /* === NEW: MOBILE DAY VIEW STYLES (Header, Title, Scroller) === */ /* --- FIX: Hide new mobile elements on desktop by default --- */ .dayview-mobile-header-new, .dayview-mobile-titles, .dayview-date-scroller { display: none; } /* --- FIX: Hide desktop DayView header on mobile --- */ @media (max-width: 768px) { #wd-dayview .dayview-header { display: none !important; /* <<< --- ADDED !important TO ENSURE IT HIDES */ } /* Show new mobile elements on mobile */ .dayview-mobile-header-new, .dayview-mobile-titles, .dayview-date-scroller { display: block; /* or flex */ } /* 1. Mobile Top Bar */ .dayview-mobile-header-new { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; /* Padding only top/bottom */ margin-bottom: 15px; } .dayview-mobile-icon-btn { background: none; border: none; font-size: 1.5rem; /* Larger icons */ color: #888; cursor: pointer; padding: 5px; position: relative; /* <-- ADD THIS LINE */ } /* --- NEW: Mobile Notification Badge Positioning --- */ #wd-mobile-notify-badge { position: absolute; /* Position the badge relative to the button */ top: 2px; right: 2px; padding: 1px 5px; /* Make it a bit smaller */ font-size: 0.65rem; line-height: 1.2; } .dayview-mobile-icon-btn.dayview-mobile-logout { color: var(--iba-secondary-terracotta); /* Red for logout */ } /* 2. Mobile Title */ .dayview-mobile-titles { margin-bottom: 20px; } .dayview-mobile-titles h1 { font-size: 2rem; font-weight: 700; color: #333; margin: 0 0 5px 0; } .dayview-mobile-titles p { font-size: 1rem; color: #777; margin: 0; } /* 3. Date Scroller */ .dayview-date-scroller { margin-bottom: 25px; overflow-x: auto; /* Hide scrollbar for a cleaner look */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .dayview-date-scroller::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } /* --- THIS IS THE FIX --- */ /* The selector was `.dayview-date-scroller-inner` and should be `#dayview-date-scroller-inner` */ #dayview-date-scroller-inner { display: flex; gap: 15px; padding: 0 5px; /* Small padding so ends don't touch edge */ } /* --- END OF FIX --- */ .day-scroller-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 65px; flex-shrink: 0; border-radius: 12px; background-color: #f0f4f8; color: #888; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .day-scroller-item .day-scroller-num { font-size: 1.2rem; color: #555; } .day-scroller-item .day-scroller-char { font-size: 0.9rem; } .day-scroller-item.active { background-color: var(--iba-base-blue); /* Use brand blue */ color: white; transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0, 58, 92, 0.3); } .day-scroller-item.active .day-scroller-num { color: white; } } /* === NEW: MOBILE DAY VIEW TASK CONTAINER === */ /* --- THIS IS THE FIX --- */ /* The blue container should be visible on desktop, but just be a normal container */ .dayview-task-container-blue { display: block; } /* --- END OF FIX --- */ @media (max-width: 768px) { /* Show the blue container on mobile */ .dayview-task-container-blue { display: block; flex-grow: 1; /* Make it fill the remaining height */ /* This is needed to contain the task cards */ padding-bottom: 80px; /* Space for the bottom nav bar */ } /* Style for the task list inside the blue container */ #wd-dayview-task-list { display: flex; flex-direction: column; gap: 15px; } .dayview-task-container-blue .dayview-task-card strong { font-size: 1.1rem; color: #333; margin-bottom: 10px; } .dayview-task-container-blue .dayview-task-card .task-details-grid { grid-template-columns: 1fr; /* Stack details on mobile */ gap: 5px; font-size: 0.95rem; } .dayview-task-container-blue .dayview-task-card .task-detail-item .label { font-weight: 600; color: #555; /* Darken label slightly */ margin-right: 5px; } .dayview-task-container-blue .dayview-task-card .task-detail-item.status .label { color: #333; } .dayview-task-container-blue .dayview-task-card .task-detail-item.note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee; } /* Make the

tag for "No tasks" white */ .dayview-task-container-blue #wd-dayview-task-list p { text-align: center; padding-top: 20px; } } /* === NEW: IM REPORTING MOBILE SEARCH UI === */ /* 1. Search Button */ .im-mobile-search-btn { display: none; /* Hide on desktop */ background-color: var(--iba-base-blue); color: white; border: none; width: 40px; height: 40px; border-radius: 8px; font-size: 1.1rem; padding: 0; margin-left: auto; /* Push to the right */ } .im-mobile-search-btn:hover { background-color: var(--iba-base-blue-light); } /* 2. Search Modal */ /* *** MODIFICATION: Make modal smaller on mobile *** */ .im-search-modal-container { max-width: 450px; width: 95%; margin: auto; /* Position at the top for an app-like feel */ position: fixed; top: 15px; left: 0; right: 0; } @media (max-width: 768px) { .im-search-modal-container { width: 90%; /* Make it 90% of screen width */ max-width: 400px; /* Set a smaller max-width */ top: 10px; /* Move closer to the top */ } .im-search-modal-container .modal-content { padding-top: 0; } .im-search-modal-container .form-group { margin-bottom: 12px; } .im-search-modal-container .modal-footer button { padding: 8px 16px; font-size: 0.95rem; } } /* *** END OF MODIFICATION *** */ .im-search-modal-container .modal-content { padding-top: 5px; } .im-search-modal-container .form-group { margin-bottom: 15px; } .im-search-modal-container .form-group label { font-weight: 600; font-size: 0.9rem; margin-bottom: 5px; color: #444; } /* Ensure inputs inside modal are correct */ .im-search-modal-container input[type="text"], .im-search-modal-container input[type="month"], .im-search-modal-container select { margin-bottom: 0; font-size: 1rem; padding: 10px; background-color: #f4f7fa; border: 1px solid #ddd; } .im-search-modal-container .modal-footer button { width: auto; padding: 10px 20px; font-size: 1rem; } /* 3. Mobile-specific Overrides */ @media (max-width: 768px) { /* Show the new search button on mobile */ #im-reporting .im-mobile-search-btn { display: block; } /* Hide the old desktop search form on mobile */ #im-reporting #im-reporting-form { display: none !important; } } /* === NEW: IM REPORTING MOBILE CARD VIEW (LAYOUT) === */ /* 1. Empty State (when no results are found) */ .im-mobile-empty-state { text-align: center; padding: 40px 20px; color: #777; } .im-mobile-empty-state i { font-size: 3rem; color: #ccc; margin-bottom: 15px; } .im-mobile-empty-state h3 { font-size: 1.3rem; color: #333; margin: 0 0 5px 0; } /* 2. PO Card (The "Credit Card" style) */ .im-po-balance-card { border-radius: 16px; padding: 20px; margin-bottom: 10px; /* Reduced margin */ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); border: none; color: white; position: relative; overflow: hidden; } /* [REPLACE this entire block around line 2250] */ /* --- PO Card Color Themes (NEW LOGIC) --- */ /* 1. Green ("Close"): All invoices are "With Accounts" or "Paid" */ .im-po-balance-card.status-close { background: linear-gradient(135deg, #28a745, #1e7e34); /* Green */ } /* 2. Light Blue ("Open"): Any invoice is "Under Review" */ .im-po-balance-card.status-open { background: linear-gradient(135deg, var(--iba-secondary-periwinkle), #3b71c4); /* Light Blue */ } /* 3. Yellow ("New"): Any invoice is "For IPC" or "For SRV" */ .im-po-balance-card.status-new { background: linear-gradient(135deg, var(--iba-secondary-gold), #8a7300); /* Yellow/Gold */ } /* 4. Light Red ("Pending"): Any invoice is "Pending" */ .im-po-balance-card.status-pending { background: linear-gradient(135deg, var(--iba-secondary-terracotta), #a24227); /* Light Red/Terracotta */ } /* 5. Default Blue (Other): (e.g., 'CEO Approval', 'Report') */ .im-po-balance-card.status-progress { background: linear-gradient(135deg, var(--iba-secondary-teal), var(--iba-base-blue)); /* Default Blue/Teal */ } .im-po-balance-card .po-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; } .im-po-balance-card .po-card-vendor { font-size: 0.9rem; font-weight: 300; opacity: 0.8; display: block; } .im-po-balance-card .po-card-ponum { font-size: 1.2rem; font-weight: 600; margin: 2px 0 0 0; letter-spacing: 0.5px; } .im-po-balance-card .po-card-chevron { font-size: 1.2rem; opacity: 0.9; transition: transform 0.3s ease; flex-shrink: 0; padding: 5px; } .im-po-balance-card .po-card-body { position: relative; } /* [ADD this new block to style.css around line 2280] */ .im-po-balance-card .po-card-grid { display: grid; grid-template-columns: 1fr 1fr; /* Two equal columns */ gap: 10px; margin-bottom: 10px; /* Space before the site */ } .im-po-balance-card .po-card-grid .po-card-value { font-size: 1.2rem; /* Make font slightly smaller to fit */ } /* [ADD this new block to style.css] */ .im-po-balance-card .po-card-balance { color: #f7cbf7 !important; /* <-- PASTE YOUR HEX CODE HERE (e.g., #FF0000 for bright red) */ font-style: italic; font-size: 0.9rem !important; /* <-- ADD !important HERE TO FIX IT */ } .im-po-balance-card .po-card-label { font-size: 0.85rem; font-weight: 300; opacity: 0.8; display: block; margin-bottom: 2px; } .im-po-balance-card .po-card-value { font-size: 1.9rem; font-weight: 700; display: block; margin: 0; } .im-po-balance-card .po-card-site { font-size: 0.9rem; font-weight: 500; display: block; margin-top: 10px; opacity: 0.9; } /* 3. Transaction List (The white cards) */ .hidden-invoice-list { display: none !important; } .im-invoice-list-header { margin-bottom: 10px; padding: 0 5px; } .im-invoice-list-header h2 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 700; } .im-invoice-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; /* Space before the next PO card */ } .im-invoice-item { display: flex; align-items: center; gap: 15px; background-color: #ffffff; padding: 15px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); border: 1px solid #f0f0f0; } .im-tx-icon { width: 45px; height: 45px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .im-tx-icon.pending { background-color: #fdeeee; color: var(--iba-secondary-terracotta); } .im-tx-icon.paid { background-color: #eaf7f0; color: #28a745; } .im-tx-details { flex-grow: 1; } .im-tx-details .im-tx-title { display: block; font-size: 1rem; font-weight: 600; color: #222; } .im-tx-details .im-tx-subtitle { display: block; font-size: 0.85rem; color: #777; } .im-tx-amount { flex-shrink: 0; text-align: right; } .im-tx-amount .im-tx-value { font-size: 1rem; font-weight: 700; } .im-tx-amount .im-tx-value.pending { color: var(--iba-secondary-terracotta); } .im-tx-amount .im-tx-value.paid { color: #28a745; } .im-invoice-item-empty { font-size: 0.9rem; color: #777; padding: 10px 15px; } /* 4. OLD Mobile Report Styles (to be removed/hidden) */ @media (max-width: 768px) { /* These are the old styles, hide them */ #im-reporting-mobile-view .im-po-balance-card.status-pending, #im-reporting-mobile-view .im-po-balance-card.status-progress, #im-reporting-mobile-view .im-po-balance-card.status-complete { border-left: none; } #im-reporting-mobile-view .im-invoice-item .invoice-count, #im-reporting-mobile-view .im-invoice-item .invoice-details { display: none; } } /* --- FIX: Make Mobile Report PO Number Visible --- */ .im-po-balance-card .po-card-ponum { color: #FFFFFF; /* Makes the text white */ opacity: 0.9; /* Makes it fully visible */ } /* This makes the vendor name white too, just in case */ .im-po-balance-card .po-card-vendor { color: #FFFFFF; opacity: 0.8; } /* --- FIX: Add Release Date to Mobile Transaction Card --- */ .im-tx-details .im-tx-date { display: block; font-size: 0.8rem; /* Smaller font */ color: #888; /* Lighter color */ margin-top: 3px; } /* --- NEW: Mobile Report Legend --- */ .im-mobile-legend { display: none; /* Hidden on desktop */ gap: 15px; margin-bottom: 20px; padding: 0 5px; flex-wrap: wrap; } .im-mobile-legend .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #555; font-weight: 500; } .im-mobile-legend .legend-color-dot { width: 14px; height: 14px; border-radius: 4px; } @media (max-width: 768px) { .im-mobile-legend { display: flex; /* Visible on mobile */ } /* Hide the old desktop legend on mobile */ #im-reporting .reporting-legend { display: none !important; } } /* --- NEW: Mobile PDF Action Buttons --- */ .im-tx-amount { display: flex; flex-direction: column; align-items: flex-end; /* Align to the right */ gap: 5px; } .im-tx-actions { display: flex; gap: 8px; margin-top: 2px; } .im-tx-action-btn { font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; text-decoration: none; color: white; } .im-tx-action-btn.invoice-pdf-btn { background-color: var(--iba-secondary-gold); color: #212529; } .im-tx-action-btn.srv-pdf-btn { background-color: var(--iba-secondary-teal); color: white; } } /* --- NEW: Flip Phone Cover Screen Adjustments --- */ @media (max-width: 400px) { /* Make the modal take up almost the full screen */ #im-mobile-search-modal .modal-container { width: 98%; max-width: 98%; top: 5px; /* Move even closer to the top */ } /* Reduce all padding */ #im-mobile-search-modal .modal-container { padding: 15px; } #im-mobile-search-modal .modal-header { padding-bottom: 10px; margin-bottom: 10px; } #im-mobile-search-modal .modal-header h2 { font-size: 1.1rem; } #im-mobile-search-modal .modal-content { padding-top: 0; } /* Make form elements smaller */ #im-mobile-search-modal .form-group { margin-bottom: 8px; /* Tighter spacing */ } #im-mobile-search-modal .form-group label { font-size: 0.8rem; margin-bottom: 3px; } #im-mobile-search-modal input[type="text"], #im-mobile-search-modal input[type="month"], #im-mobile-search-modal select { font-size: 0.9rem; padding: 8px; /* Smaller padding */ } /* Make footer and buttons smaller */ #im-mobile-search-modal .modal-footer { padding-top: 10px; margin-top: 10px; } #im-mobile-search-modal .modal-footer button { padding: 8px 12px; font-size: 0.9rem; } } /* --- NEW: Flip Phone Cover Screen Height Adjustments --- */ @media (max-height: 450px) { /* Make the modal container take up the full height */ #im-mobile-search-modal .modal-container { top: 0; bottom: 0; height: 100vh; max-height: 100vh; width: 100vw; max-width: 100vw; border-radius: 0; padding: 10px; box-sizing: border-box; /* Include padding in height */ } /* Make the modal content scrollable */ #im-mobile-search-modal .modal-content { overflow-y: auto; /* This is the key fix */ flex-grow: 1; /* Allow content to fill space */ padding-top: 0; } /* Shrink header and footer to save space */ #im-mobile-search-modal .modal-header { padding-bottom: 8px; margin-bottom: 8px; } #im-mobile-search-modal .modal-header h2 { font-size: 1.1rem; } #im-mobile-search-modal .modal-footer { padding-top: 8px; margin-top: 8px; flex-shrink: 0; /* Prevent footer from shrinking */ } /* Make form elements even smaller */ #im-mobile-search-modal .form-group { margin-bottom: 5px; } #im-mobile-search-modal .form-group label { font-size: 0.8rem; margin-bottom: 2px; } #im-mobile-search-modal input[type="text"], #im-mobile-search-modal input[type="month"], #im-mobile-search-modal select { font-size: 0.9rem; padding: 6px; /* Even smaller padding */ } #im-mobile-search-modal .modal-footer button { padding: 6px 10px; font-size: 0.9rem; } } /* --- ADD THIS NEW RULE --- */ .master-row.highlight-open-balance { background-color: #f7f9ff !important; /* Very light blue/periwinkle tint */ } .master-row.highlight-open-balance:hover { background-color: #e8ecf4 !important; /* Darker tint for hover */ } /* --- END OF ADDITION --- */ /* --- END OF Flip Phone Cover Screen Height Adjustments --- */ /* ADD THIS ENTIRE BLOCK TO THE END OF style.css */ /* 1. Hide Group column for CEO */ body.is-ceo .desktop-only.col-group { display: none; } /* 2. Style new WhatsApp button */ #send-ceo-approval-receipt-btn i { margin-right: 8px; } /* 3. Style CEO Approval Modal */ #ceo-modal-details { font-size: 0.95rem; color: #333; } #ceo-modal-details strong { color: #000; } /* 4. Style Receipt Template (when visible for PDF generation) */ #ceo-receipt-template .item { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 5px; } #ceo-receipt-template .item-details { flex-basis: 70%; word-break: break-word; } #ceo-receipt-template .item-status { flex-basis: 30%; text-align: right; font-weight: bold; } #ceo-receipt-template .status-approved { color: #28a745; } #ceo-receipt-template .status-rejected { color: #D32F2F; } /* ADD THIS BLOCK TO THE END OF style.css */ /* 4. Style Receipt Template (when visible for PDF generation) */ #ceo-receipt-template .item { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 5px; } #ceo-receipt-template .item-details { flex-basis: 70%; word-break: break-word; } #ceo-receipt-template .item-status { flex-basis: 30%; text-align: right; font-weight: bold; } #ceo-receipt-template .status-approved { color: #28a745; } #ceo-receipt-template .status-rejected { color: #D32F2F; } /* --- THIS IS THE FIX --- */ /* Add this to prevent the element from visibly "sliding" */ #ceo-receipt-template { transition: none !important; } /* --- END OF Flip Phone Cover Screen Adjustments --- */ /* ADD THIS ENTIRE BLOCK TO THE END OF style.css */ /* --- CEO Mobile UI Simplification (FIXED) --- */ @media (max-width: 768px) { /* 1. Make the sidebar wrapper visible again (so the Nav bar can exist) */ body.is-ceo #workdesk-view .workdesk-sidebar { display: block !important; padding: 0 !important; /* Remove padding so it takes no space at top */ height: 0 !important; /* Collapse height */ min-height: 0 !important; border: none !important; overflow: visible !important; /* Allow the fixed Nav to overflow out */ } /* 2. Hide ALL children of the sidebar by default... */ body.is-ceo #workdesk-view .workdesk-sidebar > * { display: none !important; } /* 3. ...EXCEPT the Navigation Bar, which we force to show */ body.is-ceo #workdesk-view .workdesk-sidebar .workdesk-navigation { display: block !important; /* Ensure it sticks to bottom */ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; } /* 4. Restore padding to main content so it doesn't hide behind the nav */ body.is-ceo .workdesk-main { padding: 15px !important; padding-bottom: 85px !important; height: auto !important; } /* 5. Hide the "Back to Calendar" button in Day View (Optional) */ body.is-ceo #wd-dayview-mobile-menu-btn { display: none !important; } /* 6. Center the remaining Day View header items */ body.is-ceo .dayview-mobile-header-new { justify-content: flex-end; padding: 10px 15px; } /* 7. Center the title */ body.is-ceo .dayview-mobile-titles { text-align: center; padding: 0 15px; } } /* ========================================= */ /* MOBILE LOGIN STYLES */ /* ========================================= */ .mobile-login-container { display: none; /* Hidden on desktop */ } @media (max-width: 768px) { /* Hide desktop login card */ .desktop-only-login { display: none !important; } /* Show mobile login container */ .mobile-login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; background: linear-gradient(135deg, #003A5C 0%, #00748C 100%); padding: 30px; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 2000; } /* Mobile Login Logo */ .iba-logo-anim { font-family: "Bookman Old Style", serif; /* CHANGED */ font-size: 4rem; font-weight: 900; color: white; margin-bottom: 50px; letter-spacing: 5px; display: flex; gap: 10px; } .iba-logo-anim span { opacity: 0; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .iba-logo-anim span:nth-child(1) { animation-delay: 0.2s; } .iba-logo-anim span:nth-child(2) { animation-delay: 0.4s; } .iba-logo-anim span:nth-child(3) { animation-delay: 0.6s; } @keyframes popIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } .mobile-login-form-wrapper { width: 100%; text-align: center; } .input-icon-wrap { position: relative; margin-bottom: 20px; } .input-icon-wrap i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #003A5C; } .mobile-login-form-wrapper input { width: 100%; padding: 15px 15px 15px 45px; /* Space for icon */ border-radius: 30px; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.2); font-size: 1.1rem; } .mobile-login-btn { width: 100%; padding: 15px; border-radius: 30px; background: #C3502F; /* Terracotta */ color: white; font-size: 1.2rem; font-weight: bold; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.3); margin-top: 10px; } .iba-web-link { display: block; margin-top: 40px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.9rem; } } /* ========================================= */ /* MOBILE ACTIVE TASK CARD STYLES */ /* ========================================= */ @media (max-width: 768px) { /* Hide the table structure on mobile */ .hidden-mobile { display: none !important; } .hidden-desktop { display: block !important; } /* Task Card Container */ .mobile-task-card { background: white; border-radius: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 15px; overflow: hidden; border: 1px solid #eee; transition: all 0.3s ease; } .mobile-card-header { padding: 15px; display: flex; justify-content: space-between; align-items: center; background: #fff; cursor: pointer; } .mobile-card-header.active { background: #f9f9f9; border-bottom: 1px solid #eee; } .m-card-main h3 { margin: 0; font-size: 1.1rem; color: #333; } .m-card-sub { font-size: 0.85rem; color: #777; margin-top: 4px; } .m-card-amount { text-align: right; } .m-card-val { display: block; font-size: 1.1rem; font-weight: bold; color: #003A5C; } .m-card-ref { display: block; font-size: 0.8rem; color: #999; } /* Expanded Content */ .mobile-card-body { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease; background-color: #fcfcfc; } .mobile-card-body.open { padding: 20px; max-height: 500px; /* Arbitrary large number for expansion */ } .m-action-group { margin-bottom: 15px; } .m-action-group label { font-size: 0.85rem; color: #555; margin-bottom: 5px; display: block; } .m-action-group input, .m-action-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; margin-bottom: 0; } .m-btn-row { display: flex; gap: 10px; margin-top: 10px; } .m-btn-approve, .m-btn-reject { flex: 1; padding: 12px; border: none; border-radius: 8px; font-weight: bold; font-size: 1rem; cursor: pointer; color: white; } .m-btn-approve { background-color: #28a745; } .m-btn-reject { background-color: #D32F2F; } .m-pdf-btn { display: block; text-align: center; background-color: #f0f0f0; color: #333; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600; margin-bottom: 15px; } /* Floating WhatsApp Button */ #mobile-receipt-action-container { position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px; background: white; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 100; box-sizing: border-box; } .whatsapp-float-btn { width: 100%; background-color: #25D366; color: white; border: none; padding: 15px; border-radius: 30px; font-size: 1.1rem; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; } } /* --- CRITICAL FIX: Hide Mobile Active Task View on Desktop --- */ @media (min-width: 769px) { #active-task-mobile-view, #mobile-receipt-action-container, .mobile-task-card, #active-task-mobile-header { /* <--- ADDED THIS LINE */ display: none !important; } /* Ensure the generic helper class works as intended on desktop */ .hidden-desktop { display: none !important; } } /* --- FIX: Reveal Navigation on Mobile --- */ @media (max-width: 768px) { /* 1. Show the Active Task link in the bottom navigation */ #workdesk-view .workdesk-navigation li.wd-nav-activetask { display: list-item !important; } /* 2. Ensure the header sits correctly at the top */ #active-task-mobile-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; /* Added side padding */ margin: -15px -15px 15px -15px; /* Negative margin to stretch full width */ background-color: #fff; /* White background */ border-bottom: 1px solid #e0e0e0; /* Clean separator line */ /* REMOVED: position: sticky, top: 0, z-index */ position: relative; } #active-task-mobile-header h1 { font-size: 1.3rem; /* Adjusted font size */ font-weight: 700; color: var(--iba-base-blue); margin: 0; } .mobile-header-icon { font-size: 1.2rem; color: #555; background: none; border: none; cursor: pointer; padding: 8px; /* Larger touch target */ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s; } .mobile-header-icon:hover { background-color: #f0f0f0; } .mobile-header-icon.logout-icon { color: var(--iba-secondary-terracotta); } /* Hide the new mobile link on desktop */ .wd-nav-activetask-mobile { display: none; } @media (max-width: 768px) { /* Show the new link on mobile within Invoice Management */ #invoice-management-view .workdesk-navigation li.wd-nav-activetask-mobile { display: list-item !important; } /* Ensure the 3 icons fit nicely */ .workdesk-navigation ul { justify-content: space-between; padding: 0 10px; /* Add small padding to sides */ } /* Optional: Make icons slightly smaller if 3 items feel crowded */ .workdesk-navigation a { font-size: 0.65rem; } .workdesk-navigation a i { font-size: 1.1rem; } } /* --- FIX: Prevent Receipt Button from blocking Card Buttons --- */ /* 1. Add extra scroll space to the bottom of the list */ #active-task-mobile-view { /* This ensures the last card can be scrolled up past the button */ padding-bottom: 160px !important; } /* 2. Move the button up so it sits ABOVE the bottom navigation bar */ #mobile-receipt-action-container { bottom: 70px !important; /* 65px nav bar + 5px spacing */ box-shadow: 0 -4px 15px rgba(0,0,0,0.15); /* Enhanced shadow for visibility */ } /* ========================================= */ /* INVOICE HISTORY MODAL STYLES */ /* ========================================= */ #history-table th { background-color: #e9ecef; font-size: 0.85rem; font-weight: 600; color: #555; } #history-table td { font-size: 0.9rem; padding: 10px; vertical-align: top; } .history-duration { font-weight: bold; color: var(--iba-secondary-teal); font-size: 0.85rem; } .history-btn { background-color: #6c757d; color: white; margin-left: 5px; } .history-btn:hover { background-color: #5a6268; }