/* ===================================================================== ATC design layer for Academy PRO (staff app, layouts/main.php). Palette and component look ported from ATCerp (assets/css/app.css): navy brand, orange accent, slate surfaces, white cards. Loaded LAST in , so it only re-skins; no page markup is touched. Remove the in layouts/main.php to revert instantly. ===================================================================== */ :root { --atc-navy: #0f2942; --atc-navy-dark: #0a1c2e; --atc-navy-light: #16395c; --atc-orange: #f5821f; --atc-orange-dark: #d96c0f; --atc-orange-soft: rgba(245, 130, 31, .10); --atc-bg: #f2f4f7; --atc-border: #e3e7ee; --atc-muted: #6b7280; --atc-text: #1f2937; --atc-shadow: 0 1px 2px rgba(15, 41, 66, .05), 0 1px 3px rgba(15, 41, 66, .04); --atc-shadow-hover: 0 6px 18px rgba(15, 41, 66, .10); /* the layout's own variables (main.php :root) */ --primary-color: var(--atc-navy-light); --primary-dark: var(--atc-navy); --secondary-color: var(--atc-orange); --accent-gold: var(--atc-orange); --bg-color: var(--atc-bg); --text-dark: var(--atc-text); --text-muted: var(--atc-muted); --nav-bg: var(--atc-navy); /* Bootstrap 5.3 tokens */ --bs-primary: #16395c; --bs-primary-rgb: 22, 57, 92; --bs-link-color: #16395c; --bs-link-color-rgb: 22, 57, 92; --bs-link-hover-color: #d96c0f; --bs-link-hover-color-rgb: 217, 108, 15; --bs-body-bg: #f2f4f7; --bs-body-color: #1f2937; --bs-border-color: #e3e7ee; --bs-border-radius: .6rem; --bs-border-radius-lg: .8rem; --bs-focus-ring-color: rgba(245, 130, 31, .25); } body { background-color: var(--atc-bg); background-image: none; color: var(--atc-text); } /* ------------------------------------------------------------- Top bar */ .top-navbar { border-bottom: 3px solid var(--atc-orange); box-shadow: 0 2px 12px rgba(10, 28, 46, .30); } /* ------------------------------------------------------------ Main menu */ .main-menu { border-bottom: 1px solid var(--atc-border); box-shadow: var(--atc-shadow); } .main-menu .nav-link:hover { color: var(--atc-navy) !important; background: var(--atc-orange-soft); border-bottom-color: var(--atc-orange); } .main-menu .nav-item.mm-active > .nav-link, .main-menu .nav-link.mm-active { color: var(--atc-navy) !important; background: var(--atc-orange-soft); border-bottom-color: var(--atc-orange); font-weight: 700; } .main-menu .dropdown-item:hover { background: var(--atc-orange-soft); color: var(--atc-navy); } .main-menu .dropdown-item:hover i { color: var(--atc-orange-dark) !important; } .mega-header { background: linear-gradient(135deg, var(--atc-navy) 0%, var(--atc-navy-light) 100%); } .mega-section-title { color: var(--atc-orange-dark); border-bottom-color: #fde3c8; } .mega-col + .mega-col { border-right-color: var(--atc-border); } .mega-footer .dropdown-item:hover { background: #fff4e8 !important; border-color: #fbd3a6 !important; color: var(--atc-navy); } /* -------------------------------------------------------------- Buttons */ .btn-primary { --bs-btn-bg: #16395c; --bs-btn-border-color: #16395c; --bs-btn-hover-bg: #0f2942; --bs-btn-hover-border-color: #0f2942; --bs-btn-active-bg: #0a1c2e; --bs-btn-active-border-color: #0a1c2e; --bs-btn-disabled-bg: #16395c; --bs-btn-disabled-border-color: #16395c; --bs-btn-focus-shadow-rgb: 22, 57, 92; } .btn-outline-primary { --bs-btn-color: #16395c; --bs-btn-border-color: #16395c; --bs-btn-hover-bg: #16395c; --bs-btn-hover-border-color: #16395c; --bs-btn-active-bg: #0f2942; --bs-btn-active-border-color: #0f2942; --bs-btn-focus-shadow-rgb: 22, 57, 92; } .btn-warning, .btn-orange { --bs-btn-color: #fff; --bs-btn-bg: #f5821f; --bs-btn-border-color: #f5821f; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d96c0f; --bs-btn-hover-border-color: #d96c0f; --bs-btn-active-color: #fff; --bs-btn-active-bg: #c2610d; --bs-btn-active-border-color: #c2610d; --bs-btn-focus-shadow-rgb: 245, 130, 31; } .btn { font-weight: 600; } /* ---------------------------------------------------------------- Cards */ .card { border: 1px solid var(--atc-border); border-radius: .75rem; box-shadow: var(--atc-shadow); transition: box-shadow .15s ease, border-color .15s ease; } .card:hover { box-shadow: var(--atc-shadow-hover); } .card-header { background: #fff; border-bottom: 1px solid var(--atc-border); font-weight: 700; color: var(--atc-navy); } .card-footer { background: #fafbfc; border-top: 1px solid var(--atc-border); } /* --------------------------------------------------------------- Tables */ .table { --bs-table-hover-bg: rgba(245, 130, 31, .06); --bs-table-border-color: var(--atc-border); } .table > thead > tr > th, .table > thead th { background: #eef1f6; color: var(--atc-navy); font-weight: 700; font-size: .8rem; border-bottom: 2px solid var(--atc-border); white-space: nowrap; } .table-responsive { border-radius: .75rem; } /* ---------------------------------------------------------------- Forms */ .form-control, .form-select { border-color: #d5dbe5; border-radius: .55rem; } .form-control:focus, .form-select:focus { border-color: var(--atc-orange); box-shadow: 0 0 0 .2rem rgba(245, 130, 31, .18); } .form-check-input:checked { background-color: var(--atc-navy-light); border-color: var(--atc-navy-light); } .form-check-input:focus { border-color: var(--atc-orange); box-shadow: 0 0 0 .2rem rgba(245, 130, 31, .18); } .form-label { font-weight: 600; color: #374151; } /* ------------------------------------------------------ Tabs / pagination */ .nav-tabs { border-bottom-color: var(--atc-border); } .nav-tabs .nav-link { color: var(--atc-muted); font-weight: 600; } .nav-tabs .nav-link:hover { color: var(--atc-navy); border-color: transparent transparent var(--atc-orange); } .nav-tabs .nav-link.active { color: var(--atc-navy); border-color: var(--atc-border) var(--atc-border) #fff; box-shadow: inset 0 -3px 0 var(--atc-orange); } .nav-pills .nav-link.active { background: var(--atc-navy-light); } .page-link { color: var(--atc-navy-light); } .page-link:hover { color: var(--atc-orange-dark); } .page-item.active .page-link { background: var(--atc-navy-light); border-color: var(--atc-navy-light); } /* -------------------------------------------------- Badges / alerts / misc */ .badge.bg-primary, .text-bg-primary { background-color: var(--atc-navy-light) !important; } .progress-bar { background-color: var(--atc-orange); } .list-group-item.active { background: var(--atc-navy-light); border-color: var(--atc-navy-light); } .dropdown-item.active, .dropdown-item:active { background: var(--atc-navy-light); } .modal-content { border: none; border-radius: .9rem; box-shadow: 0 20px 50px rgba(10, 28, 46, .25); } .modal-header { border-bottom: 1px solid var(--atc-border); } .modal-title { color: var(--atc-navy); font-weight: 700; } .modal-footer { border-top: 1px solid var(--atc-border); } .breadcrumb-item.active { color: var(--atc-muted); } ::selection { background: rgba(245, 130, 31, .25); } /* Standalone auth pages (login-style screens): orange call-to-action like ATCerp */ .atc-auth .btn-primary { --bs-btn-bg: #f5821f; --bs-btn-border-color: #f5821f; --bs-btn-hover-bg: #d96c0f; --bs-btn-hover-border-color: #d96c0f; --bs-btn-active-bg: #c2610d; --bs-btn-active-border-color: #c2610d; --bs-btn-disabled-bg: #f5821f; --bs-btn-disabled-border-color: #f5821f; --bs-btn-focus-shadow-rgb: 245, 130, 31; } .atc-auth a:not(.btn) { color: var(--atc-navy-light); } /* ---- Bilingual labels (assets/js/bilingual.js): small English after the Arabic text ---- */ .bi-en { font-size: .78em; font-weight: 400; opacity: .72; margin-inline-start: .35em; white-space: nowrap; direction: ltr; unicode-bidi: isolate; letter-spacing: 0; text-transform: none; } html.bi-off .bi-en { display: none !important; } th .bi-en, .btn .bi-en { font-size: .72em; } /* top menu bar: English under the Arabic label so the 12 items keep fitting */ .main-menu > .container .nav-link { flex-direction: column; justify-content: center; line-height: 1.2; gap: 0 !important; } .main-menu > .container .nav-link .bi-en { display: block; margin: 0; font-size: .64rem; text-align: center; opacity: .65; } .mob-nav-link .bi-en { display: block; margin: 0; font-size: .7em; }