/* ── Approval status banner (shared across all entry pages) ── */ .approval-banner { border-radius: 8px; padding: 12px 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; font-family: 'Segoe UI', sans-serif; } .approval-banner.triggered { background: #eaf7ee; border: 1px solid #a9d9b4; } .approval-banner.triggered > i { color: #27ae60; font-size: 22px; flex-shrink: 0; } .approval-banner .ab-title { font-weight: 700; font-size: 14px; color: #1e8449; line-height: 1.3; } .approval-banner .ab-sub { font-size: 12px; color: #555; margin-top: 2px; line-height: 1.5; } .approval-banner .ab-action { margin-left: auto; flex-shrink: 0; } /* ─────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ ERP ENTRY PAGE DESIGN SYSTEM v2 Activated by adding class "erp-entry-design" to . Transforms the existing AdminLTE .box structure into PRS/PO-style section cards without touching form HTML. ═══════════════════════════════════════════════════════════════ */ /* ── CSS variables ───────────────────────────────────────────── */ body.erp-entry-design { --eed-blue: #2980b9; --eed-teal: #16a085; --eed-green: #27ae60; --eed-dark: #2c3e50; --eed-orange: #d35400; --eed-purple: #7d3c98; --eed-red: #c0392b; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ── Page wrapper ────────────────────────────────────────────── */ body.erp-entry-design .erp-page-wrapper { padding: 0 15px 60px; } /* ── Content header (breadcrumb bar) ────────────────────────── */ body.erp-entry-design .erp-content-header { padding: 8px 15px 4px; margin-bottom: 10px; } body.erp-entry-design .erp-content-header h1 { font-size: 19px; font-weight: 700; color: var(--eed-dark); margin: 0 0 4px; } body.erp-entry-design .erp-content-header h1 small { font-size: 12px; color: #7f8c8d; font-weight: 400; } body.erp-entry-design .erp-content-header .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 12px; } /* ── Top info bar ────────────────────────────────────────────── */ body.erp-entry-design .erp-topbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #dde3e9; border-radius: 6px; padding: 10px 16px; margin-bottom: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.05); flex-wrap: wrap; } body.erp-entry-design .erp-badge { display: flex; align-items: center; gap: 6px; background: #f0f4f8; border: 1px solid #d0dae4; border-radius: 20px; padding: 5px 14px; font-size: 13px; font-weight: 700; color: var(--eed-dark); } body.erp-entry-design .erp-badge .badge-label { font-size: 10px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-right: 2px; } body.erp-entry-design .erp-topbar .erp-topbar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* ── Box → PRS-section transformation ───────────────────────── */ body.erp-entry-design .box { border-radius: 6px !important; border: 1px solid #e0e6ed !important; box-shadow: 0 2px 6px rgba(0,0,0,.05) !important; overflow: hidden; margin-bottom: 18px; } /* Default box-header color */ body.erp-entry-design .box-header.with-border { background: linear-gradient(135deg, var(--eed-blue), #1f6fa6) !important; padding: 10px 16px !important; border-bottom: none !important; display: flex; align-items: center; gap: 10px; } /* Colour variants — add these classes to .box-header */ body.erp-entry-design .box-header.eed-blue { background: linear-gradient(135deg,#2980b9,#1f6fa6) !important; } body.erp-entry-design .box-header.eed-teal { background: linear-gradient(135deg,#16a085,#0d7a67) !important; } body.erp-entry-design .box-header.eed-orange { background: linear-gradient(135deg,#d35400,#a84300) !important; } body.erp-entry-design .box-header.eed-dark { background: linear-gradient(135deg,#2c3e50,#1a252f) !important; } body.erp-entry-design .box-header.eed-purple { background: linear-gradient(135deg,#7d3c98,#6c3483) !important; } body.erp-entry-design .box-header.eed-red { background: linear-gradient(135deg,#c0392b,#922b21) !important; } body.erp-entry-design .box-header.eed-green { background: linear-gradient(135deg,#27ae60,#1e8449) !important; } /* Icon wrapper inside header */ body.erp-entry-design .box-header .bh-icon { width: 24px; height: 24px; background: rgba(255,255,255,.2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } body.erp-entry-design .box-header .box-title, body.erp-entry-design .box-header .box-title b { color: #fff !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .4px; text-transform: uppercase; } /* Hide the box tool buttons (collapse/remove) */ body.erp-entry-design .box-header .box-tools { display: none; } /* "Add" button in header */ body.erp-entry-design .box-header .btn-add-header { margin-left: auto; background: rgba(255,255,255,.18); color: #fff !important; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 4px 14px; font-size: 12px; font-weight: 600; } body.erp-entry-design .box-header .btn-add-header:hover { background: rgba(255,255,255,.3); } body.erp-entry-design .box-body { padding: 16px 18px !important; background: #fff; } /* ── Form labels ─────────────────────────────────────────────── */ body.erp-entry-design .control-label, body.erp-entry-design .box-body label:not(.btn):not(.checkbox-inline):not(.radio-inline):not(.icheck) { font-size: 11px !important; font-weight: 700 !important; color: #546e7a !important; text-transform: uppercase !important; letter-spacing: .4px; margin-bottom: 4px; display: block; } body.erp-entry-design .box-body .form-group { margin-bottom: 14px; } /* ── Form controls ───────────────────────────────────────────── */ body.erp-entry-design .box-body .form-control, body.erp-entry-design .erp-topbar .form-control { height: 34px !important; font-size: 13px !important; border-radius: 4px !important; border: 1px solid #cfd8dc !important; background: #fff; color: #2c3e50; } body.erp-entry-design .box-body .form-control:focus, body.erp-entry-design .erp-topbar .form-control:focus { border-color: var(--eed-blue) !important; box-shadow: 0 0 0 2px rgba(41,128,185,.15) !important; outline: none; } body.erp-entry-design textarea.form-control { height: auto !important; } /* Select2 height fix */ body.erp-entry-design .select2-container .select2-selection--single { height: 34px !important; border: 1px solid #cfd8dc !important; border-radius: 4px !important; } body.erp-entry-design .select2-container .select2-selection--single .select2-selection__rendered { line-height: 32px !important; font-size: 13px !important; color: #2c3e50 !important; } body.erp-entry-design .select2-container .select2-selection--single .select2-selection__arrow { height: 32px !important; } /* ── Tables inside box-body ──────────────────────────────────── */ body.erp-entry-design .box-body .table thead th, body.erp-entry-design .box-body table thead th { background: var(--eed-dark) !important; color: #fff !important; font-size: 12px; font-weight: 600; border: 1px solid #1a252f !important; padding: 9px 10px; white-space: nowrap; } body.erp-entry-design .box-body .table tbody td { padding: 8px 10px; border: 1px solid #ecf0f1; vertical-align: middle; font-size: 13px; } body.erp-entry-design .box-body .table tbody tr:nth-child(even) { background: #f8fafc; } body.erp-entry-design .box-body .table tbody tr:hover { background: #eef5fc; } /* ── Box footer → save strip ─────────────────────────────────── */ body.erp-entry-design .box-footer { background: linear-gradient(to right,#f8f9fa,#edf2f7) !important; border-top: 1px solid #dde3e9 !important; padding: 14px 18px !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } body.erp-entry-design .box-footer .btn { font-size: 13px; font-weight: 600; padding: 8px 20px; border-radius: 4px; } body.erp-entry-design .box-footer .btn-primary, body.erp-entry-design .box-footer .btn-success { background: linear-gradient(135deg,#27ae60,#1e8449) !important; border: none !important; color: #fff !important; } body.erp-entry-design .box-footer .btn-default { background: #fff; border: 1px solid #bdc3c7; color: #555 !important; } body.erp-entry-design .box-footer .btn-default:hover { background: #ecf0f1; } /* ── Running total row ───────────────────────────────────────── */ body.erp-entry-design .erp-total-row { background: linear-gradient(to right,#ecf0f1,#e8f4fd); border-top: 2px solid var(--eed-dark); padding: 12px 18px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 13px; } body.erp-entry-design .erp-total-row .tl-label { color: #7f8c8d; font-weight: 600; font-size: 12px; text-transform: uppercase; } body.erp-entry-design .erp-total-row .tl-value { color: var(--eed-green); font-size: 20px; font-weight: 800; min-width: 160px; text-align: right; } /* ── Modal header ─────────────────────────────────────────────── */ body.erp-entry-design .modal-header { background: linear-gradient(135deg, var(--eed-blue), #1a5276); padding: 14px 20px; border-radius: 6px 6px 0 0; } body.erp-entry-design .modal-title, body.erp-entry-design .modal-header .close { color: #fff !important; opacity: 1; } body.erp-entry-design .modal-content { border-radius: 6px; } /* ── Page-level badge (inline pill) ─────────────────────────── */ body.erp-entry-design .eed-page-badge { display: inline-flex; align-items: center; gap: 5px; background: #eaf4ff; border: 1px solid #b3d4f0; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 700; color: var(--eed-blue); } /* ═══════════════════════════════════════════════════════════════ */ .normal-color-label{ padding-top:10px ; font-weight: normal; font-size: 16px; color: #3c8dbc; } .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { height: 32px !important; background-color: #fff; border: 1px solid #cfcfcf; border-radius: 1px; } .custom-btn-group{ display: flex; justify-content: center; } .fc-sunday-highlight { background-color: #fff5f5 !important; } .fc-sunday-highlight .fc-daygrid-day-number { color: #e74c3c !important; /* Redis-style red */ font-weight: bold; } /* Change DataTables header background and text color */ table.dataTable thead tr { background-color: #0073b7; /* Change this to your desired color */ color: white; /* Change text color */ text-align: center; /* Optional: center align header text */ } table.dataTable thead th { font-weight: normal !important; }