/*============================================================================== SWIFT EAGLES UI FRAMEWORK Version : 2.0.0 Build : June 2026 Developed For: SWIFT EAGLES SACCO Motto: "United for Prosperity" ---------------------------------------------------------------------------- TABLE OF CONTENTS 01. Root Variables 02. CSS Reset 03. Base HTML 04. Scrollbar ==============================================================================*/ /*============================================================================== 01. ROOT VARIABLES ==============================================================================*/ :root{ /*==================================================== BRAND COLOURS ====================================================*/ --primary-blue:#1E3A8A; --secondary-purple:#6D28D9; --accent-gold:#FBBF24; --success:#16A34A; --danger:#DC2626; --warning:#F59E0B; --info:#0EA5E9; /*==================================================== BACKGROUNDS ====================================================*/ --background:#F8FAFC; --surface:#FFFFFF; --surface-alt:#F1F5F9; /*==================================================== TEXT ====================================================*/ --text-dark:#1F2937; --text-light:#6B7280; --text-muted:#94A3B8; /*==================================================== BORDERS ====================================================*/ --border:#E5E7EB; /*==================================================== TYPOGRAPHY ====================================================*/ --font-family: "Segoe UI", "Poppins", Arial, sans-serif; --font-size-xs:12px; --font-size-sm:13px; --font-size-md:15px; --font-size-lg:18px; --font-size-xl:22px; --font-size-xxl:30px; /*==================================================== SPACING ====================================================*/ --space-1:5px; --space-2:10px; --space-3:15px; --space-4:20px; --space-5:25px; --space-6:30px; --space-7:40px; /*==================================================== BORDER RADIUS ====================================================*/ --radius-sm:6px; --radius:14px; --radius-lg:20px; --radius-round:50%; /*==================================================== SHADOWS ====================================================*/ --shadow-sm: 0 2px 6px rgba(0,0,0,.05); --shadow: 0 8px 24px rgba(0,0,0,.08); --shadow-lg: 0 15px 35px rgba(0,0,0,.15); /*==================================================== TRANSITIONS ====================================================*/ --transition: all .25s ease; /*==================================================== SIDEBAR ====================================================*/ --sidebar-width:280px; /*==================================================== HEADER ====================================================*/ --header-height:70px; } /*============================================================================== 02. CSS RESET ==============================================================================*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--background); color:var(--text-dark); font-family:var(--font-family); font-size:var(--font-size-md); line-height:1.6; min-height:100vh; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; transition:var(--transition); } ul, ol{ list-style:none; } button, input, select, textarea{ font-family:inherit; font-size:inherit; } button{ cursor:pointer; } table{ border-collapse:collapse; width:100%; } hr{ border:none; border-top:1px solid var(--border); margin:var(--space-4) 0; } /*============================================================================== 03. BASE HTML ==============================================================================*/ h1{ font-size:32px; font-weight:700; color:var(--primary-blue); } h2{ font-size:28px; font-weight:700; } h3{ font-size:24px; font-weight:600; } h4{ font-size:20px; font-weight:600; } h5{ font-size:18px; font-weight:600; } h6{ font-size:16px; font-weight:600; } p{ margin-bottom:var(--space-3); color:var(--text-light); } small{ font-size:var(--font-size-sm); color:var(--text-muted); } strong{ font-weight:600; } /*============================================================================== 04. CUSTOM SCROLLBAR ==============================================================================*/ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:var(--surface-alt); } ::-webkit-scrollbar-thumb{ background:var(--secondary-purple); border-radius:20px; } ::-webkit-scrollbar-thumb:hover{ background:var(--primary-blue); } /*============================================================================== END OF PART 1A NEXT: PART 1B Typography Utilities Layout Helpers Containers Flex/Grid Utilities ==============================================================================*/ /*============================================================================== PART 1B TYPOGRAPHY UTILITIES LAYOUT CONTAINERS FLEX GRID SPACING ==============================================================================*/ /*============================================================================== 05. TYPOGRAPHY UTILITIES ==============================================================================*/ .se-text-primary{color:var(--primary-blue);} .se-text-secondary{color:var(--secondary-purple);} .se-text-gold{color:var(--accent-gold);} .se-text-success{color:var(--success);} .se-text-danger{color:var(--danger);} .se-text-warning{color:var(--warning);} .se-text-info{color:var(--info);} .se-text-dark{color:var(--text-dark);} .se-text-light{color:var(--text-light);} .se-text-muted{color:var(--text-muted);} .se-text-white{color:#fff;} .se-text-left{text-align:left;} .se-text-center{text-align:center;} .se-text-right{text-align:right;} .se-fw-normal{font-weight:400;} .se-fw-medium{font-weight:500;} .se-fw-semibold{font-weight:600;} .se-fw-bold{font-weight:700;} .se-uppercase{text-transform:uppercase;} .se-capitalize{text-transform:capitalize;} .se-lowercase{text-transform:lowercase;} .se-italic{font-style:italic;} .se-small{ font-size:var(--font-size-sm); } .se-large{ font-size:var(--font-size-lg); } /*============================================================================== 06. CONTAINERS ==============================================================================*/ .se-container{ width:100%; max-width:1600px; margin:auto; padding:var(--space-4); } .se-container-fluid{ width:100%; padding:var(--space-4); } .se-page{ padding:var(--space-5); } .se-page-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; } .se-page-title{ color:var(--primary-blue); font-size:30px; font-weight:700; } .se-page-subtitle{ color:var(--text-light); margin-top:5px; } /*============================================================================== 07. DISPLAY ==============================================================================*/ .se-block{display:block;} .se-inline{display:inline;} .se-inline-block{display:inline-block;} .se-hidden{display:none;} .se-visible{display:block;} /*============================================================================== 08. FLEX ==============================================================================*/ .se-flex{ display:flex; } .se-inline-flex{ display:inline-flex; } .se-flex-column{ flex-direction:column; } .se-flex-row{ flex-direction:row; } .se-align-start{ align-items:flex-start; } .se-align-center{ align-items:center; } .se-align-end{ align-items:flex-end; } .se-justify-start{ justify-content:flex-start; } .se-justify-center{ justify-content:center; } .se-justify-between{ justify-content:space-between; } .se-justify-around{ justify-content:space-around; } .se-justify-end{ justify-content:flex-end; } .se-flex-wrap{ flex-wrap:wrap; } .se-flex-grow{ flex:1; } .se-gap-1{ gap:5px; } .se-gap-2{ gap:10px; } .se-gap-3{ gap:15px; } .se-gap-4{ gap:20px; } .se-gap-5{ gap:25px; } .se-gap-6{ gap:30px; } /*============================================================================== 09. GRID ==============================================================================*/ .se-grid{ display:grid; gap:20px; } .se-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .se-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .se-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .se-grid-auto{ display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:20px; } /*============================================================================== 10. WIDTH ==============================================================================*/ .se-w-25{width:25%;} .se-w-50{width:50%;} .se-w-75{width:75%;} .se-w-100{width:100%;} /*============================================================================== 11. HEIGHT ==============================================================================*/ .se-h-100{ height:100%; } .se-vh-100{ min-height:100vh; } /*============================================================================== 12. MARGIN UTILITIES ==============================================================================*/ .se-m-0{margin:0;} .se-mt-1{margin-top:5px;} .se-mt-2{margin-top:10px;} .se-mt-3{margin-top:15px;} .se-mt-4{margin-top:20px;} .se-mt-5{margin-top:25px;} .se-mt-6{margin-top:30px;} .se-mb-1{margin-bottom:5px;} .se-mb-2{margin-bottom:10px;} .se-mb-3{margin-bottom:15px;} .se-mb-4{margin-bottom:20px;} .se-mb-5{margin-bottom:25px;} .se-mb-6{margin-bottom:30px;} .se-ml-auto{ margin-left:auto; } .se-mr-auto{ margin-right:auto; } /*============================================================================== 13. PADDING UTILITIES ==============================================================================*/ .se-p-0{padding:0;} .se-p-1{padding:5px;} .se-p-2{padding:10px;} .se-p-3{padding:15px;} .se-p-4{padding:20px;} .se-p-5{padding:25px;} .se-p-6{padding:30px;} .se-px-3{ padding-left:15px; padding-right:15px; } .se-px-4{ padding-left:20px; padding-right:20px; } .se-py-3{ padding-top:15px; padding-bottom:15px; } .se-py-4{ padding-top:20px; padding-bottom:20px; } /*============================================================================== 14. BORDER RADIUS ==============================================================================*/ .se-radius-sm{ border-radius:var(--radius-sm); } .se-radius{ border-radius:var(--radius); } .se-radius-lg{ border-radius:var(--radius-lg); } .se-round{ border-radius:50%; } /*============================================================================== END OF PART 1B NEXT: PART 1C BUTTONS FORMS INPUTS SELECTS TEXTAREAS ==============================================================================*/ /*============================================================================== PART 1C BUTTONS FORMS INPUTS ==============================================================================*/ /*============================================================================== 15. BUTTONS ==============================================================================*/ .se-btn, .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 24px; border:none; border-radius:var(--radius); font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; transition:var(--transition); white-space:nowrap; } .se-btn:hover, .btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); } .se-btn:disabled, .btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; } /*------------------------------------------------------------------------------ PRIMARY ------------------------------------------------------------------------------*/ .se-btn-primary, .btn-primary{ background:var(--primary-blue); color:#fff; } .se-btn-primary:hover, .btn-primary:hover{ background:#18317a; } /*------------------------------------------------------------------------------ GOLD ------------------------------------------------------------------------------*/ .se-btn-gold{ background:var(--accent-gold); color:#222; } .se-btn-gold:hover{ background:#f4b000; } /*------------------------------------------------------------------------------ SUCCESS ------------------------------------------------------------------------------*/ .se-btn-success, .btn-success{ background:var(--success); color:#fff; } /*------------------------------------------------------------------------------ DANGER ------------------------------------------------------------------------------*/ .se-btn-danger, .btn-danger{ background:var(--danger); color:#fff; } /*------------------------------------------------------------------------------ WARNING ------------------------------------------------------------------------------*/ .se-btn-warning{ background:var(--warning); color:#fff; } /*------------------------------------------------------------------------------ INFO ------------------------------------------------------------------------------*/ .se-btn-info{ background:var(--info); color:#fff; } /*------------------------------------------------------------------------------ SECONDARY ------------------------------------------------------------------------------*/ .se-btn-secondary{ background:var(--secondary-purple); color:#fff; } /*------------------------------------------------------------------------------ LIGHT ------------------------------------------------------------------------------*/ .se-btn-light{ background:#fff; border:1px solid var(--border); color:var(--text-dark); } /*------------------------------------------------------------------------------ OUTLINE ------------------------------------------------------------------------------*/ .se-btn-outline{ background:transparent; border:2px solid var(--primary-blue); color:var(--primary-blue); } .se-btn-outline:hover{ background:var(--primary-blue); color:#fff; } /*------------------------------------------------------------------------------ BUTTON SIZES ------------------------------------------------------------------------------*/ .se-btn-sm{ padding:8px 16px; font-size:13px; } .se-btn-lg{ padding:16px 30px; font-size:17px; } .se-btn-block{ width:100%; } /*============================================================================== 16. FORM CONTAINER ==============================================================================*/ .se-form{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:30px; } .form-section, .se-form-section{ margin-bottom:35px; } .section-title, .se-section-title{ color:var(--primary-blue); font-size:20px; font-weight:600; margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--border); } /*============================================================================== 17. FORM GRID ==============================================================================*/ .form-grid, .se-form-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:20px; } .form-group, .se-form-group{ display:flex; flex-direction:column; } /*============================================================================== 18. LABELS ==============================================================================*/ .form-group label, .se-form-group label{ margin-bottom:8px; font-weight:600; color:var(--text-dark); } .required{ color:var(--danger); margin-left:4px; } /*============================================================================== 19. INPUTS ==============================================================================*/ .form-control, .se-input, .se-select, .se-textarea{ width:100%; padding:12px 15px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; font-size:15px; transition:var(--transition); } .form-control:focus, .se-input:focus, .se-select:focus, .se-textarea:focus{ outline:none; border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(30,58,138,.15); } /*------------------------------------------------------------------------------ READ ONLY ------------------------------------------------------------------------------*/ .se-input:read-only, .se-textarea:read-only{ background:#F9FAFB; } /*------------------------------------------------------------------------------ DISABLED ------------------------------------------------------------------------------*/ .se-input:disabled, .se-select:disabled{ background:#F3F4F6; cursor:not-allowed; } /*------------------------------------------------------------------------------ TEXTAREA ------------------------------------------------------------------------------*/ .se-textarea{ resize:vertical; min-height:120px; } /*------------------------------------------------------------------------------ SELECT ------------------------------------------------------------------------------*/ .se-select{ appearance:none; background-image: linear-gradient(45deg,transparent 50%,gray 50%), linear-gradient(135deg,gray 50%,transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px); background-size:6px 6px; background-repeat:no-repeat; } /*============================================================================== 20. CHECKBOXES & RADIO ==============================================================================*/ .se-check{ display:flex; align-items:center; gap:10px; } .se-check input{ width:18px; height:18px; } /*============================================================================== 21. VALIDATION ==============================================================================*/ .is-valid{ border-color:var(--success)!important; } .is-invalid{ border-color:var(--danger)!important; } .validation-message{ margin-top:6px; font-size:13px; color:var(--danger); } .validation-success{ margin-top:6px; font-size:13px; color:var(--success); } /*============================================================================== 22. FORM ACTIONS ==============================================================================*/ .form-actions, .se-form-actions{ display:flex; justify-content:flex-end; gap:15px; margin-top:30px; flex-wrap:wrap; } /*============================================================================== 23. SEARCH BOX ==============================================================================*/ .se-search{ position:relative; } .se-search input{ width:100%; padding:12px 18px; padding-left:45px; } .se-search-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-muted); } /*============================================================================== END OF PART 1C NEXT: PART 1D Alerts Badges Animations Loading Spinner Utility Components ==============================================================================*/ /*============================================================================== PART 1D ALERTS BADGES LOADING SPINNER ANIMATIONS UTILITIES ==============================================================================*/ /*============================================================================== 24. ALERTS ==============================================================================*/ .se-alert{ padding:15px 20px; border-radius:var(--radius); margin-bottom:20px; display:flex; align-items:center; gap:12px; border-left:5px solid transparent; box-shadow:var(--shadow-sm); } .se-alert-success{ background:#ECFDF5; border-left-color:var(--success); color:#166534; } .se-alert-danger{ background:#FEF2F2; border-left-color:var(--danger); color:#991B1B; } .se-alert-warning{ background:#FFFBEB; border-left-color:var(--warning); color:#92400E; } .se-alert-info{ background:#EFF6FF; border-left-color:var(--info); color:#1E40AF; } /*============================================================================== 25. BADGES ==============================================================================*/ .se-badge{ display:inline-block; padding:6px 12px; border-radius:30px; font-size:12px; font-weight:600; text-transform:uppercase; } .se-badge-success{ background:var(--success); color:#fff; } .se-badge-danger{ background:var(--danger); color:#fff; } .se-badge-warning{ background:var(--warning); color:#fff; } .se-badge-info{ background:var(--info); color:#fff; } .se-badge-primary{ background:var(--primary-blue); color:#fff; } .se-badge-secondary{ background:var(--secondary-purple); color:#fff; } .se-badge-gold{ background:var(--accent-gold); color:#222; } /*============================================================================== 26. LOADING SPINNER ==============================================================================*/ .se-spinner{ width:40px; height:40px; border:4px solid #E5E7EB; border-top:4px solid var(--primary-blue); border-radius:50%; animation:se-spin .8s linear infinite; } .se-spinner-sm{ width:20px; height:20px; border-width:3px; } .se-spinner-lg{ width:60px; height:60px; border-width:5px; } /*============================================================================== 27. LOADER OVERLAY ==============================================================================*/ .se-loader{ position:fixed; inset:0; background:rgba(255,255,255,.75); display:flex; justify-content:center; align-items:center; z-index:9999; } /*============================================================================== 28. ANIMATIONS ==============================================================================*/ @keyframes se-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes se-fadeIn{ from{ opacity:0; } to{ opacity:1; } } @keyframes se-slideUp{ from{ opacity:0; transform:translateY(25px); } to{ opacity:1; transform:translateY(0); } } @keyframes se-slideLeft{ from{ opacity:0; transform:translateX(-25px); } to{ opacity:1; transform:translateX(0); } } @keyframes se-slideRight{ from{ opacity:0; transform:translateX(25px); } to{ opacity:1; transform:translateX(0); } } @keyframes se-pop{ 0%{ transform:scale(.8); opacity:0; } 100%{ transform:scale(1); opacity:1; } } /*============================================================================== 29. ANIMATION CLASSES ==============================================================================*/ .se-fade-in{ animation:se-fadeIn .5s ease; } .se-slide-up{ animation:se-slideUp .5s ease; } .se-slide-left{ animation:se-slideLeft .5s ease; } .se-slide-right{ animation:se-slideRight .5s ease; } .se-pop{ animation:se-pop .35s ease; } /*============================================================================== 30. SHADOW UTILITIES ==============================================================================*/ .se-shadow-sm{ box-shadow:var(--shadow-sm); } .se-shadow{ box-shadow:var(--shadow); } .se-shadow-lg{ box-shadow:var(--shadow-lg); } /*============================================================================== 31. BORDER UTILITIES ==============================================================================*/ .se-border{ border:1px solid var(--border); } .se-border-top{ border-top:1px solid var(--border); } .se-border-bottom{ border-bottom:1px solid var(--border); } .se-border-left{ border-left:1px solid var(--border); } .se-border-right{ border-right:1px solid var(--border); } /*============================================================================== 32. BACKGROUND UTILITIES ==============================================================================*/ .se-bg-white{ background:#fff; } .se-bg-primary{ background:var(--primary-blue); color:#fff; } .se-bg-secondary{ background:var(--secondary-purple); color:#fff; } .se-bg-gold{ background:var(--accent-gold); } .se-bg-success{ background:var(--success); color:#fff; } .se-bg-danger{ background:var(--danger); color:#fff; } .se-bg-warning{ background:var(--warning); color:#fff; } .se-bg-info{ background:var(--info); color:#fff; } /*============================================================================== 33. CURSOR UTILITIES ==============================================================================*/ .se-pointer{ cursor:pointer; } .se-disabled{ pointer-events:none; opacity:.6; } /*============================================================================== 34. PRINT HELPERS ==============================================================================*/ @media print{ .se-no-print{ display:none !important; } } /*============================================================================== END OF PART 1 ==============================================================================*/ /*============================================================================== PART 2A LOGIN PAGE AUTHENTICATION ==============================================================================*/ /*============================================================================== LOGIN PAGE ==============================================================================*/ .se-login-page{ min-height:100vh; display:flex; justify-content:center; align-items:center; padding:40px; background: linear-gradient( 135deg, rgba(30,58,138,.95), rgba(109,40,217,.90) ); } /*============================================================================== LOGIN CARD ==============================================================================*/ .se-login-card{ width:1200px; max-width:100%; min-height:700px; background:#FFFFFF; border-radius:20px; overflow:hidden; display:flex; box-shadow:var(--shadow-lg); } /*============================================================================== LEFT PANEL ==============================================================================*/ .se-login-left{ width:55%; background: linear-gradient( 180deg, var(--primary-blue), var(--secondary-purple) ); color:#FFFFFF; padding:50px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; } .se-login-banner{ width:100%; max-width:420px; margin-bottom:35px; border-radius:18px; box-shadow:0 15px 35px rgba(0,0,0,.25); } .se-login-left h1{ color:#FFFFFF; font-size:36px; margin-bottom:10px; } .se-login-left h3{ color:var(--accent-gold); font-style:italic; font-weight:500; margin-bottom:25px; } .se-login-left p{ color:#F8FAFC; font-size:16px; line-height:1.8; max-width:500px; } /*============================================================================== RIGHT PANEL ==============================================================================*/ .se-login-right{ width:45%; padding:50px; display:flex; flex-direction:column; justify-content:center; } .se-login-logo{ width:110px; margin:auto; margin-bottom:20px; } .se-login-right h2{ color:var(--primary-blue); text-align:center; margin-bottom:30px; } /*============================================================================== INPUT GROUP ==============================================================================*/ .se-input-group{ position:relative; margin-bottom:20px; } .se-input-group i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:16px; } .se-input-group .se-input{ padding-left:48px; padding-right:48px; } /*============================================================================== PASSWORD BUTTON ==============================================================================*/ .se-password-toggle{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); font-size:16px; cursor:pointer; transition:var(--transition); } .se-password-toggle:hover{ color:var(--primary-blue); } /*============================================================================== REMEMBER ME ==============================================================================*/ .se-login-options{ display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; font-size:14px; } .se-login-options label{ display:flex; align-items:center; gap:8px; } .se-login-options a{ color:var(--primary-blue); font-weight:500; } .se-login-options a:hover{ color:var(--secondary-purple); } /*============================================================================== LOGIN BUTTON ==============================================================================*/ .se-login-right .se-btn{ margin-top:10px; height:52px; font-size:16px; } /*============================================================================== LOGIN FOOTER ==============================================================================*/ .se-login-footer{ margin-top:35px; text-align:center; color:var(--text-light); line-height:1.8; } .se-login-footer strong{ color:var(--primary-blue); } /*============================================================================== LOGIN ANIMATION ==============================================================================*/ .se-login-card{ animation:se-pop .45s ease; } /*============================================================================== RESPONSIVE ==============================================================================*/ @media(max-width:992px){ .se-login-card{ flex-direction:column; } .se-login-left{ width:100%; padding:40px; } .se-login-right{ width:100%; } } @media(max-width:768px){ .se-login-page{ padding:20px; } .se-login-left{ display:none; } .se-login-right{ padding:35px; } } @media(max-width:480px){ .se-login-right{ padding:25px; } .se-login-logo{ width:90px; } .se-login-right h2{ font-size:24px; } } /*============================================================================== PART 2B PROFESSIONAL TOP HEADER ==============================================================================*/ /*============================================================================== MAIN HEADER ==============================================================================*/ .se-header{ position:fixed; top:0; left:var(--sidebar-width); right:0; height:var(--header-height); background:#FFFFFF; display:flex; align-items:center; justify-content:space-between; padding:0 30px; box-shadow:var(--shadow-sm); z-index:900; } /*============================================================================== LEFT SIDE ==============================================================================*/ .se-header-left{ display:flex; align-items:center; gap:20px; } .se-menu-toggle{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-alt); cursor:pointer; transition:var(--transition); } .se-menu-toggle:hover{ background:var(--primary-blue); color:#FFFFFF; } .se-page-heading{ display:flex; flex-direction:column; } .se-page-heading h2{ font-size:22px; color:var(--primary-blue); margin:0; } .se-page-heading small{ color:var(--text-light); } /*============================================================================== SEARCH ==============================================================================*/ .se-search-box{ position:relative; width:320px; } .se-search-box input{ width:100%; padding:12px 18px; padding-left:45px; border:1px solid var(--border); border-radius:40px; background:#F8FAFC; } .se-search-box i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); } /*============================================================================== RIGHT SIDE ==============================================================================*/ .se-header-right{ display:flex; align-items:center; gap:20px; } /*============================================================================== NOTIFICATION BUTTON ==============================================================================*/ .se-notification{ position:relative; width:46px; height:46px; border-radius:50%; background:#F3F4F6; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); } .se-notification:hover{ background:var(--primary-blue); color:#FFFFFF; } .se-notification-count{ position:absolute; top:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:var(--danger); color:#FFFFFF; font-size:11px; display:flex; align-items:center; justify-content:center; } /*============================================================================== DATE ==============================================================================*/ .se-header-date{ text-align:right; } .se-header-date strong{ display:block; color:var(--primary-blue); } .se-header-date small{ color:var(--text-light); } /*============================================================================== USER PROFILE ==============================================================================*/ .se-user{ display:flex; align-items:center; gap:15px; cursor:pointer; } .se-user-avatar{ width:50px; height:50px; border-radius:50%; background:linear-gradient( 135deg, var(--primary-blue), var(--secondary-purple) ); color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:bold; } .se-user-info{ display:flex; flex-direction:column; } .se-user-info strong{ color:var(--primary-blue); } .se-user-info small{ color:var(--text-light); } /*============================================================================== DROPDOWN ==============================================================================*/ .se-dropdown{ position:absolute; top:75px; right:30px; width:250px; background:#FFFFFF; border-radius:14px; box-shadow:var(--shadow); display:none; overflow:hidden; z-index:999; } .se-dropdown a{ display:block; padding:14px 20px; transition:var(--transition); } .se-dropdown a:hover{ background:var(--surface-alt); color:var(--primary-blue); } /*============================================================================== BREADCRUMB ==============================================================================*/ .se-breadcrumb{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-light); } .se-breadcrumb a{ color:var(--primary-blue); } /*============================================================================== CONTENT OFFSET ==============================================================================*/ .se-main-content{ margin-left:var(--sidebar-width); margin-top:var(--header-height); padding:30px; } /*============================================================================== MOBILE ==============================================================================*/ @media(max-width:992px){ .se-header{ left:0; } .se-main-content{ margin-left:0; } .se-search-box{ display:none; } } @media(max-width:768px){ .se-header{ padding:0 15px; } .se-header-date{ display:none; } .se-user-info{ display:none; } } /*============================================================================== PART 2C ENTERPRISE SIDEBAR ==============================================================================*/ /*============================================================================== SIDEBAR ==============================================================================*/ .se-sidebar{ position:fixed; left:0; top:0; width:var(--sidebar-width); height:100vh; background:linear-gradient( 180deg, var(--primary-blue), #132d67 ); color:#FFFFFF; overflow-y:auto; overflow-x:hidden; z-index:1000; box-shadow:var(--shadow-lg); } /*============================================================================== BRAND ==============================================================================*/ .se-sidebar-brand{ text-align:center; padding:30px 20px; border-bottom:1px solid rgba(255,255,255,.12); } .se-sidebar-brand img{ width:90px; margin:auto; margin-bottom:15px; } .se-sidebar-brand h2{ color:#FFFFFF; font-size:24px; margin-bottom:5px; } .se-sidebar-brand p{ color:var(--accent-gold); font-style:italic; margin:0; } /*============================================================================== USER PANEL ==============================================================================*/ .se-user-panel{ display:flex; align-items:center; gap:15px; padding:20px; border-bottom:1px solid rgba(255,255,255,.12); } .se-user-photo{ width:60px; height:60px; border-radius:50%; background:var(--accent-gold); color:var(--primary-blue); font-size:26px; font-weight:bold; display:flex; align-items:center; justify-content:center; } .se-user-details{ flex:1; } .se-user-details strong{ display:block; color:#FFFFFF; } .se-user-details small{ color:#D1D5DB; } .se-online{ color:#22C55E; font-size:12px; margin-top:4px; } /*============================================================================== MENU ==============================================================================*/ .se-menu{ padding:15px 0; } .se-menu-heading{ color:var(--accent-gold); font-size:12px; font-weight:700; letter-spacing:1px; padding:18px 25px 8px; text-transform:uppercase; } .se-menu ul{ list-style:none; margin:0; padding:0; } .se-menu li{ margin:2px 0; } /*============================================================================== LINKS ==============================================================================*/ .se-menu a{ display:flex; align-items:center; gap:15px; color:#FFFFFF; text-decoration:none; padding:14px 24px; transition:var(--transition); border-left:4px solid transparent; } .se-menu a i{ width:22px; text-align:center; font-size:16px; } /*============================================================================== HOVER ==============================================================================*/ .se-menu a:hover{ background:rgba(255,255,255,.10); border-left:4px solid var(--accent-gold); padding-left:30px; } /*============================================================================== ACTIVE ==============================================================================*/ .se-menu a.active{ background:#FFFFFF; color:var(--primary-blue); border-left:4px solid var(--accent-gold); font-weight:600; } /*============================================================================== BADGE ==============================================================================*/ .se-menu-badge{ margin-left:auto; background:var(--danger); color:#FFFFFF; font-size:11px; padding:3px 8px; border-radius:20px; } /*============================================================================== SUB MENU ==============================================================================*/ .se-submenu{ display:none; background:rgba(0,0,0,.15); } .se-submenu a{ padding-left:60px; font-size:14px; } .se-submenu a:hover{ padding-left:66px; } /*============================================================================== FOOTER ==============================================================================*/ .se-sidebar-footer{ position:absolute; bottom:0; width:100%; padding:18px; border-top:1px solid rgba(255,255,255,.12); text-align:center; background:rgba(0,0,0,.12); } .se-sidebar-footer small{ color:#E5E7EB; } /*============================================================================== SCROLLBAR ==============================================================================*/ .se-sidebar::-webkit-scrollbar{ width:8px; } .se-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.20); border-radius:20px; } /*============================================================================== COLLAPSED SIDEBAR (Future) ==============================================================================*/ .se-sidebar-collapsed{ width:90px; } .se-sidebar-collapsed .se-sidebar-brand h2, .se-sidebar-collapsed .se-sidebar-brand p, .se-sidebar-collapsed .se-user-details, .se-sidebar-collapsed .se-menu-heading, .se-sidebar-collapsed .se-menu span, .se-sidebar-collapsed .se-menu-badge{ display:none; } .se-sidebar-collapsed .se-menu a{ justify-content:center; padding:18px; } /*============================================================================== MOBILE ==============================================================================*/ @media(max-width:992px){ .se-sidebar{ left:-100%; transition:var(--transition); } .se-sidebar.show{ left:0; } } /*============================================================================== PART 2D DASHBOARD CARDS WIDGETS ==============================================================================*/ /*============================================================================== PAGE CONTENT ==============================================================================*/ .se-page{ padding:30px; animation:se-fadeIn .4s ease; } .se-page-title{ margin-bottom:25px; } .se-page-title h1{ margin-bottom:5px; } .se-page-title p{ color:var(--text-light); } /*============================================================================== DASHBOARD GRID ==============================================================================*/ .se-dashboard{ display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:25px; } /*============================================================================== CARD ==============================================================================*/ .se-card, .card{ background:#FFFFFF; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:var(--transition); } .se-card:hover, .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); } .se-card-header{ padding:20px 25px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; } .se-card-title{ font-size:18px; color:var(--primary-blue); font-weight:600; } .se-card-body{ padding:25px; } .se-card-footer{ padding:18px 25px; background:#F8FAFC; border-top:1px solid var(--border); } /*============================================================================== STATISTIC CARD ==============================================================================*/ .se-stat-card{ background:#FFFFFF; border-radius:18px; padding:25px; box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:center; transition:var(--transition); } .se-stat-card:hover{ transform:translateY(-5px); } .se-stat-info h3{ font-size:32px; margin-bottom:8px; color:var(--primary-blue); } .se-stat-info p{ margin:0; color:var(--text-light); } .se-stat-icon{ width:70px; height:70px; border-radius:18px; display:flex; justify-content:center; align-items:center; font-size:30px; color:#FFFFFF; } /*============================================================================== ICON COLOURS ==============================================================================*/ .se-blue{ background:var(--primary-blue); } .se-purple{ background:var(--secondary-purple); } .se-gold{ background:var(--accent-gold); color:#222; } .se-green{ background:var(--success); } .se-red{ background:var(--danger); } .se-orange{ background:var(--warning); } /*============================================================================== QUICK ACTIONS ==============================================================================*/ .se-quick-actions{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:20px; } .se-action{ background:#FFFFFF; border-radius:16px; padding:25px; text-align:center; box-shadow:var(--shadow); transition:var(--transition); cursor:pointer; } .se-action:hover{ transform:translateY(-4px); } .se-action i{ font-size:38px; color:var(--primary-blue); margin-bottom:15px; } .se-action h4{ margin-bottom:8px; } .se-action p{ font-size:13px; } /*============================================================================== RECENT ACTIVITY ==============================================================================*/ .se-activity{ display:flex; gap:15px; margin-bottom:20px; } .se-activity-icon{ width:45px; height:45px; border-radius:50%; background:var(--primary-blue); color:#FFFFFF; display:flex; justify-content:center; align-items:center; } .se-activity-body{ flex:1; } .se-activity-time{ font-size:12px; color:var(--text-muted); } /*============================================================================== PROGRESS ==============================================================================*/ .se-progress{ width:100%; height:10px; background:#E5E7EB; border-radius:20px; overflow:hidden; } .se-progress-bar{ height:100%; background:var(--primary-blue); } /*============================================================================== TIMELINE ==============================================================================*/ .se-timeline{ position:relative; margin-left:20px; } .se-timeline::before{ content:""; position:absolute; left:9px; top:0; bottom:0; width:2px; background:#D1D5DB; } .se-timeline-item{ position:relative; padding-left:35px; margin-bottom:30px; } .se-timeline-dot{ position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%; background:var(--primary-blue); } .se-timeline-content{ background:#FFFFFF; padding:18px; border-radius:12px; box-shadow:var(--shadow-sm); } /*============================================================================== PROFILE CARD ==============================================================================*/ .se-profile{ text-align:center; } .se-profile-photo{ width:120px; height:120px; margin:auto; border-radius:50%; overflow:hidden; margin-bottom:20px; } .se-profile-photo img{ width:100%; height:100%; object-fit:cover; } .se-profile h3{ color:var(--primary-blue); } .se-profile p{ margin-bottom:5px; } /*============================================================================== EMPTY STATE ==============================================================================*/ .se-empty{ text-align:center; padding:60px 20px; } .se-empty i{ font-size:60px; color:#CBD5E1; margin-bottom:20px; } .se-empty h3{ margin-bottom:10px; } .se-empty p{ color:var(--text-light); } /*============================================================================== RESPONSIVE ==============================================================================*/ @media(max-width:992px){ .se-dashboard{ grid-template-columns:1fr; } .se-quick-actions{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .se-page{ padding:20px; } .se-stat-card{ flex-direction:column; text-align:center; gap:20px; } .se-quick-actions{ grid-template-columns:1fr; } } /*============================================================================== END OF PART 2 ==============================================================================*/ /* ========================================================== NAVIGATION SYSTEM ========================================================== */ /* =========================== SIDEBAR =========================== */ .sidebar{ position:fixed; top:0; left:0; width:280px; height:100vh; background:#0B3B8C; color:#ffffff; display:flex; flex-direction:column; box-shadow:3px 0 15px rgba(0,0,0,.20); z-index:1000; } /* =========================== BRAND =========================== */ .sidebar-brand{ text-align:center; padding:18px 18px 16px; border-bottom:1px solid rgba(255,255,255,.15); } .sidebar-logo{ width:72px; height:72px; margin-bottom:10px; border-radius:50%; object-fit:contain; background:#ffffff; padding:7px; box-shadow:0 8px 20px rgba(0,0,0,.18); } .sidebar-brand h2{ margin:0; font-size:19px; font-weight:700; } .sidebar-brand p{ margin:5px 0 0; color:#f1c40f; font-size:13px; } /* =========================== USER PANEL =========================== */ .sidebar-user{ display:flex; align-items:center; gap:12px; padding:14px; background:rgba(255,255,255,.08); margin:14px 18px; border-radius:10px; } .avatar{ width:48px; height:48px; border-radius:50%; background:#ffffff; color:#0B3B8C; display:flex; justify-content:center; align-items:center; font-size:22px; font-weight:bold; } .online{ color:#7CFC00; font-size:12px; } /* =========================== MENU =========================== */ .sidebar-menu{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; } .sidebar-menu li{ margin:2px 0; } .menu-heading{ padding:18px 25px 8px; font-size:11px; font-weight:bold; color:#f1c40f; letter-spacing:2px; text-transform:uppercase; } .sidebar-menu a{ display:flex; align-items:center; gap:15px; padding:13px 25px; color:#ffffff; text-decoration:none; transition:.30s; border-left:4px solid transparent; } .sidebar-menu a i{ width:22px; text-align:center; font-size:16px; } .sidebar-menu a:hover{ background:rgba(255,255,255,.12); border-left:4px solid #f1c40f; padding-left:30px; } .sidebar-menu a.active{ background:#144da8; border-left:4px solid #f1c40f; color:#ffffff; font-weight:bold; } .sidebar-menu .sidebar-toggle{appearance:none!important;-webkit-appearance:none!important;width:100%!important;border:0!important;border-left:4px solid transparent!important;background:transparent!important;color:#fff!important;display:flex!important;align-items:center;gap:15px;padding:13px 25px!important;text-align:left;cursor:pointer;font:inherit!important;line-height:normal}.sidebar-menu .sidebar-toggle:hover{background:rgba(255,255,255,.12)!important;border-left-color:#f1c40f!important;padding-left:30px!important}.sidebar-toggle .submenu-arrow{margin-left:auto;transition:transform .2s}.sidebar-parent.is-open .submenu-arrow{transform:rotate(180deg)}.sidebar-toggle.is-active{background:#144da8!important;border-left:4px solid #f1c40f!important}.sidebar-submenu{display:none!important;list-style:none;margin:0;padding:0}.sidebar-parent.is-open .sidebar-submenu{display:block!important}.sidebar-submenu[hidden]{display:none!important}.sidebar-submenu a{padding:9px 25px 9px 60px;font-size:13px}.sidebar-submenu a.active{background:#144da8;border-left:4px solid #f1c40f;color:#fff;font-weight:bold} .sidebar-footer{ text-align:center; padding:20px; border-top:1px solid rgba(255,255,255,.15); font-size:12px; color:#dddddd; } .footer{margin-left:280px;padding:18px 30px;background:linear-gradient(135deg,#f8faff,#eef4ff);color:#516078;border-top:1px solid #dbe5f5;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px}.se-main-content+.footer{margin-top:0}.footer-system,.footer-developer,.footer-built-by{display:flex;align-items:center;gap:8px}.footer-system>i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#144da8;color:#fff;box-shadow:0 4px 10px rgba(20,77,168,.2)}.footer-developer{gap:14px;flex-wrap:wrap}.footer-built-by>i{color:#144da8}.footer a{display:inline-flex;align-items:center;gap:6px;color:#144da8;text-decoration:none;font-weight:600}.footer a:hover{color:#0b3b8c;text-decoration:underline}.footer a i{color:#f2a900}@media(max-width:992px){.footer{margin-left:0}}@media(max-width:700px){.footer{justify-content:center;text-align:center}.footer-system,.footer-developer{justify-content:center}.footer-developer{flex-direction:column;gap:8px}} /* ========================================================== REPORTS CENTRE ========================================================== */ .se-reports-centre{ display:flex; flex-direction:column; gap:22px; } .se-report-centre-hero{ min-height:250px; border-radius:22px; background: linear-gradient(135deg,rgba(11,59,140,.96),rgba(20,77,168,.94)), #0B3B8C; color:#fff; padding:34px; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:center; box-shadow:0 18px 38px rgba(11,59,140,.24); } .se-report-eyebrow{ display:inline-flex; margin-bottom:12px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.14); color:#FBBF24; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .se-report-centre-hero h1{ font-size:34px; line-height:1.15; margin-bottom:10px; } .se-report-centre-hero p{ max-width:720px; color:#E8EEF8; margin:0; } .se-report-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; } .se-report-summary-panel{ display:grid; gap:12px; } .se-report-summary-panel div{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:18px; } .se-report-summary-panel small{ display:block; color:#D8E5F8; margin-bottom:5px; } .se-report-summary-panel strong{ display:block; font-size:30px; color:#fff; } .se-report-toolbar-card{ background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:18px; display:flex; gap:16px; align-items:center; justify-content:space-between; box-shadow:0 8px 24px rgba(15,23,42,.07); } .se-report-search{ flex:1; min-width:260px; display:flex; align-items:center; gap:12px; background:#F8FAFC; border:1px solid #E5E7EB; border-radius:14px; padding:0 14px; } .se-report-search i{ color:#64748B; } .se-report-search input{ width:100%; min-height:46px; border:0; outline:0; background:transparent; color:#1F2937; } .se-report-filter-pills{ display:flex; flex-wrap:wrap; gap:8px; } .se-report-filter-pills a{ display:inline-flex; align-items:center; min-height:38px; padding:0 13px; border-radius:999px; background:#EEF4FF; color:#0B3B8C; font-size:13px; font-weight:700; } .se-report-filter-pills a:hover{ background:#0B3B8C; color:#fff; } .se-report-group{ background:#fff; border:1px solid #E5E7EB; border-radius:20px; overflow:hidden; box-shadow:0 8px 24px rgba(15,23,42,.07); } .se-report-group-header{ padding:22px 24px; display:flex; align-items:center; gap:16px; border-bottom:1px solid #E5E7EB; background:#F8FAFC; } .se-report-group-icon{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff; font-size:23px; flex:0 0 auto; } .se-report-group-header h2{ margin:0 0 4px; font-size:20px; color:#111827; } .se-report-group-header p{ margin:0; color:#64748B; } .se-report-tone-blue .se-report-group-icon{background:#0B3B8C;} .se-report-tone-green .se-report-group-icon{background:#16A34A;} .se-report-tone-gold .se-report-group-icon{background:#B7791F;} .se-report-tone-navy .se-report-group-icon{background:#183153;} .se-report-tone-purple .se-report-group-icon{background:#6D28D9;} .se-report-tone-red .se-report-group-icon{background:#B91C1C;} .se-report-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; padding:18px; } .se-report-tile{ min-height:230px; border:1px solid #E5E7EB; border-radius:16px; padding:18px; display:flex; flex-direction:column; background:#fff; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .se-report-tile:hover{ transform:translateY(-3px); border-color:#CBD5E1; box-shadow:0 12px 26px rgba(15,23,42,.09); } .se-report-tile.is-planned{ background:#FAFAFA; } .se-report-tile-top, .se-report-tile-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .se-report-tile-icon{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#EEF4FF; color:#0B3B8C; font-size:20px; } .se-report-status{ display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:800; } .se-report-status.is-ready{ background:#DCFCE7; color:#166534; } .se-report-status.is-muted{ background:#F1F5F9; color:#64748B; } .se-report-tile h3{ margin:18px 0 8px; font-size:18px; color:#111827; } .se-report-tile p{ margin:0; color:#64748B; font-size:14px; } .se-report-tile-footer{ margin-top:auto; padding-top:18px; } .se-report-tile-footer small{ color:#94A3B8; font-weight:700; } .se-report-open{ min-height:38px; border:0; border-radius:999px; background:#0B3B8C; color:#fff; padding:0 14px; display:inline-flex; align-items:center; gap:8px; font-weight:800; } .se-report-open:hover{ background:#144DA8; color:#fff; } .se-report-open:disabled{ background:#E5E7EB; color:#64748B; cursor:not-allowed; } .se-report-empty{ padding:40px; text-align:center; background:#fff; border:1px dashed #CBD5E1; border-radius:18px; color:#64748B; } .se-report-empty i{ font-size:38px; color:#94A3B8; margin-bottom:10px; } .se-report-empty h2{ color:#111827; margin-bottom:5px; } @media(max-width:900px){ .se-report-centre-hero{ grid-template-columns:1fr; padding:24px; } .se-report-toolbar-card{ align-items:stretch; flex-direction:column; } } .se-main-content{ margin-left:280px; margin-top:75px; padding:30px; min-height:100vh; background:#f5f7fb; } /* ========================================================== TOP NAVIGATION ========================================================== */ .topbar{ position:fixed; top:0; left:280px; right:0; height:75px; background:#ffffff; display:flex; justify-content:space-between; align-items:center; padding:0 30px; box-shadow:0 2px 12px rgba(0,0,0,.08); z-index:900; } .topbar-left{ display:flex; align-items:center; gap:20px; } .page-title{ margin:0; color:#0B3B8C; } .menu-toggle{ border:none; background:none; font-size:22px; cursor:pointer; color:#0B3B8C; } .topbar-right{ display:flex; align-items:center; gap:25px; } .top-icon{ position:relative; font-size:20px; cursor:pointer; color:#555; } .badge{ position:absolute; top:-8px; right:-10px; background:#dc3545; color:white; border-radius:50%; width:18px; height:18px; font-size:10px; display:flex; justify-content:center; align-items:center; } .user-dropdown{ display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; } /*========================================================== REGISTER TOOLBAR ==========================================================*/ .register-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px; background:white; border-radius:12px; margin-bottom:20px; box-shadow:0 3px 10px rgba(0,0,0,.08); } .toolbar-left{ flex:1; } .toolbar-left input{ width:100%; max-width:420px; } .toolbar-right{ display:flex; gap:10px; } /*==================================================== EMPTY STATE ====================================================*/ .empty-state{ padding:60px; text-align:center; color:#777; } .empty-state i{ font-size:70px; color:#cfcfcf; margin-bottom:20px; } .empty-state h3{ margin-bottom:10px; } /*========================================================== DATA TABLE ==========================================================*/ .table-responsive{ overflow-x:auto; } .se-table{ width:100%; border-collapse:collapse; } .se-table thead{ background:#0B3B8C; color:white; } .se-table th{ padding:14px; text-align:left; font-weight:600; } .se-table td{ padding:13px; border-bottom:1px solid #ececec; } .se-table tbody tr:nth-child(even){ background:#fafafa; } .se-table tbody tr:hover{ background:#eef5ff; transition:.25s; } /*========================================================= RECEIPT =========================================================*/ .receipt{ max-width:800px; margin:auto; background:white; padding:40px; border:1px solid #ddd; } .receipt-header{ text-align:center; } .receipt-logo{ width:90px; margin-bottom:10px; } .receipt-table{ width:100%; border-collapse:collapse; } .receipt-table td{ padding:8px; } .no-print{ display:flex; gap:10px; } @media print{ .no-print{ display:none; } body{ background:white; } .receipt{ border:none; box-shadow:none; width:100%; max-width:100%; margin:0; padding:10px; } } .settlement-section { margin-top: 1rem; } .loan-search-form { align-items: end; margin-bottom: 1rem; } .loan-search-actions { align-self: end; padding-bottom: 0.1rem; } .loan-summary-card .se-card-header span { display:inline-flex;align-items:center;gap:.55rem; } .loan-summary-identity { display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1.15rem; } .loan-summary-identity > div { display:grid;gap:.15rem; } .loan-summary-label,.loan-visual-card span,.loan-period-grid span { color:#64748b;font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase; } .loan-summary-identity strong { color:#123c78;font-size:1.45rem; } .loan-summary-identity small,.loan-visual-card small { color:#64748b; } .loan-visual-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem; } .loan-visual-card { display:grid;gap:.35rem;min-height:126px;padding:1rem;border:1px solid #dbe6f3;border-radius:14px;background:linear-gradient(145deg,#fff,#f7faff); } .loan-visual-card > i { width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#1d5fa7; } .loan-visual-card strong { color:#17324d;font-size:1.05rem; } .loan-visual-danger > i { background:#c2413b; } .loan-visual-success > i { background:#198754; } .loan-visual-gold > i { background:#c58b16; } .loan-progress-panel { margin-top:1rem;padding:1rem;border-radius:12px;background:#f5f9ff; } .loan-progress-heading { display:flex;justify-content:space-between;margin-bottom:.55rem;color:#29445f; } .loan-progress-meter { width:100%;height:12px;overflow:hidden;border:0;border-radius:999px;background:#dce8f5;accent-color:#198754; } .loan-progress-meter::-webkit-progress-bar { border-radius:999px;background:#dce8f5; } .loan-progress-meter::-webkit-progress-value { border-radius:999px;background:linear-gradient(90deg,#1d5fa7,#198754); } .loan-progress-meter::-moz-progress-bar { border-radius:999px;background:linear-gradient(90deg,#1d5fa7,#198754); } .loan-period-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:1rem; } .loan-period-grid > div { display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.65rem;row-gap:.15rem;padding:.85rem;border-left:3px solid #1d5fa7;border-radius:8px;background:#f8fafc; } .loan-period-grid i { grid-row:1 / span 2;color:#1d5fa7;font-size:1.15rem; } .loan-period-grid strong { color:#243b53; } @media (max-width:1000px) { .loan-visual-grid,.loan-period-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:620px) { .loan-summary-identity { align-items:flex-start;flex-direction:column; } .loan-visual-grid,.loan-period-grid { grid-template-columns:1fr; } } .loan-approval-member{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(220px,auto);align-items:center;gap:1.25rem;padding:1.15rem;margin-bottom:1rem;border:1px solid #dbe6f3;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#fff)} .loan-approval-member>img{width:92px;height:92px;object-fit:cover;border:4px solid #fff;border-radius:50%;box-shadow:0 5px 18px rgba(20,50,80,.16)} .loan-approval-member h2{margin:.15rem 0;color:#123c78;font-size:1.35rem}.loan-approval-member p{margin:.35rem 0;color:#64748b} .loan-approval-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;color:#64748b;font-size:.82rem} .loan-approval-request{display:grid;gap:.25rem;padding:1rem 1.2rem;border-radius:14px;color:#fff;background:linear-gradient(135deg,#163f82,#285fb5);text-align:right} .loan-approval-request span{font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.8}.loan-approval-request strong{font-size:1.45rem}.loan-approval-request small{opacity:.85} .loan-approval-metrics{margin-bottom:1rem}.loan-approval-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid #dbe6f3;border-radius:12px;background:#dbe6f3} .loan-approval-details>div{display:grid;gap:.25rem;padding:.9rem;background:#fff}.loan-approval-details span{color:#64748b;font-size:.75rem;font-weight:800;text-transform:uppercase}.loan-approval-details strong{color:#17324d} .loan-approval-purpose{margin-top:1rem;padding:1rem;border-left:4px solid #1d5fa7;border-radius:8px;background:#f5f9ff}.loan-approval-purpose p{margin:.35rem 0 0;color:#42566b} @media(max-width:900px){.loan-approval-member{grid-template-columns:72px 1fr}.loan-approval-member>img{width:72px;height:72px}.loan-approval-request{grid-column:1/-1;text-align:left}.loan-approval-details{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.loan-approval-member{grid-template-columns:1fr;text-align:center}.loan-approval-member>img{margin:auto}.loan-approval-badges{justify-content:center}.loan-approval-details{grid-template-columns:1fr}} /* Mobile and tablet application shell */ .sidebar-backdrop{display:none} @media(max-width:992px){ html,body{max-width:100%;overflow-x:hidden} body.navigation-open{overflow:hidden} .sidebar{width:min(86vw,320px);transform:translateX(-105%);transition:transform .25s ease;box-shadow:8px 0 30px rgba(0,0,0,.28);z-index:1200} .sidebar.is-mobile-open{transform:translateX(0)} .sidebar-backdrop{position:fixed;inset:0;z-index:1150;border:0;background:rgba(4,19,45,.55);opacity:0;pointer-events:none;transition:opacity .2s ease} body.navigation-open .sidebar-backdrop{display:block;opacity:1;pointer-events:auto} .topbar{left:0;height:68px;padding:0 18px;gap:12px} .topbar-left{min-width:0;gap:12px}.topbar-left>div{min-width:0}.topbar .page-title{max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.15rem}.topbar-left small{font-size:.72rem} .topbar-right{gap:16px}.user-dropdown span{display:none}.top-icon{min-width:40px;min-height:40px;display:grid;place-items:center}.topbar-right .top-icon+div.top-icon{display:none} .menu-toggle{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:10px;background:#eef4ff} .se-main-content{margin-left:0;margin-top:68px;padding:20px;min-height:calc(100vh - 68px)} .footer{margin-left:0;padding:18px 20px} .page-header{align-items:flex-start;flex-wrap:wrap;gap:14px}.page-header>div:last-child{display:flex;flex-wrap:wrap;gap:8px} .form-grid,.se-form-grid,.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .register-toolbar{align-items:stretch;flex-direction:column}.toolbar-left input{max-width:none}.toolbar-right{flex-wrap:wrap} .se-card{max-width:100%;overflow:hidden}.se-card-body{padding:18px} .table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;border-radius:8px} .table-responsive>.se-table,.table-responsive>table{min-width:720px}.se-table th,.se-table td{white-space:nowrap} input,select,textarea,.form-control,.se-input{max-width:100%;font-size:16px} .btn,.se-btn,button,input[type=submit]{min-height:44px} } @media(max-width:640px){ .se-main-content{padding:14px}.se-page{padding:0}.topbar{padding:0 10px}.topbar .page-title{max-width:44vw;font-size:1rem}.topbar-left small{display:none}.topbar-right{gap:8px} .form-grid,.se-form-grid,.form-grid-2{grid-template-columns:1fr}.se-dashboard{grid-template-columns:1fr}.se-stat-card{align-items:center;flex-direction:row;text-align:left;padding:18px} .page-header .page-title{font-size:1.55rem}.page-subtitle{font-size:.9rem}.page-header>div:last-child,.page-header .btn{width:100%}.page-header>div:last-child .btn{justify-content:center} .se-card-header{padding:14px 16px}.se-card-body{padding:14px}.empty-state{padding:35px 16px} .toolbar-right,.no-print{flex-direction:column}.toolbar-right .btn,.no-print .btn{width:100%;justify-content:center} .receipt{padding:18px}.loan-progress-heading{gap:8px;flex-direction:column} .se-login-card{width:calc(100% - 24px);margin:12px;grid-template-columns:1fr}.se-login-left{display:none}.se-login-right{padding:28px 20px} } @media(hover:none) and (pointer:coarse){.sidebar-menu a,.sidebar-menu .sidebar-toggle{min-height:48px}.btn,.top-icon,.menu-toggle{-webkit-tap-highlight-color:transparent}} .member-status-panel{margin-top:1rem;padding:1.15rem;border:1px solid #dbe6f3;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(23,50,77,.06)} .member-status-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.member-status-heading h2{margin:.15rem 0 0;color:#17324d;font-size:1.2rem}.member-status-kicker{color:#1d5fa7;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.member-status-count{padding:.4rem .7rem;border-radius:999px;background:#eef5fc;color:#29445f;font-size:.8rem;font-weight:700}.member-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.member-status-item{display:flex;gap:.85rem;padding:1rem;border-left:4px solid #198754;border-radius:10px;background:#f4fbf7}.member-status-item>i{margin-top:.1rem;color:#198754;font-size:1.35rem}.member-status-item strong{color:#17324d}.member-status-item p{margin:.3rem 0;color:#52677b;line-height:1.45}.member-status-item a{color:#1d5fa7;font-weight:700}.member-status-item.is-warning{border-color:#c58b16;background:#fff9eb}.member-status-item.is-warning>i{color:#c58b16}.member-status-item.is-danger{border-color:#c2413b;background:#fff4f3}.member-status-item.is-danger>i{color:#c2413b} .se-table-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem;color:#52677b;font-size:.85rem}.se-table-controls label{display:flex;align-items:center;gap:.4rem}.se-table-controls select{padding:.35rem 1.6rem .35rem .5rem;border:1px solid #cbd8e6;border-radius:7px;background:#fff}.se-table-pages{display:flex;gap:.4rem}.se-sortable{position:relative;padding-right:1.7rem!important;cursor:pointer;user-select:none}.se-sortable:after{position:absolute;right:.55rem;content:'\2195';opacity:.45}.se-sortable[aria-sort="ascending"]:after{content:'\2191';opacity:1}.se-sortable[aria-sort="descending"]:after{content:'\2193';opacity:1}.se-sortable:focus-visible{outline:2px solid #1d5fa7;outline-offset:-2px} @media(max-width:700px){.member-status-heading,.se-table-controls{align-items:flex-start;flex-direction:column}.member-status-grid{grid-template-columns:1fr}.se-table-summary{order:3}} @media print{.se-table-controls{display:none!important}table[data-enhanced-table] tbody tr{display:table-row!important}} /* Loan register summary cards: equal columns, height and internal alignment. */ .loan-register-stats{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} .loan-register-stats .se-stat-card{box-sizing:border-box;width:100%;min-height:134px;height:100%;padding:25px;align-self:stretch} .loan-register-stats .se-stat-info{display:flex;min-width:0;height:100%;flex-direction:column;justify-content:center} .loan-register-stats .se-stat-info h3{margin:0 0 8px;line-height:1} .loan-register-stats .se-stat-info p{line-height:1.35} .loan-register-stats .se-stat-icon{width:70px;min-width:70px;height:70px;flex:0 0 70px} @media(max-width:900px){.loan-register-stats{grid-template-columns:1fr}} @media(max-width:640px){.loan-register-stats .se-stat-card{min-height:112px}.loan-register-stats .se-stat-icon{width:58px;min-width:58px;height:58px;flex-basis:58px;font-size:25px}} /* Member record: compact profile view, scoped to member/view.php. */ .member-detail-page{display:grid;gap:1rem;padding-bottom:2rem}.member-detail-page .page-header{margin-bottom:0}.member-back-link{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.35rem;color:#1d5fa7;font-size:.84rem;font-weight:700}.member-page-actions{display:flex;flex-wrap:wrap;gap:.55rem}.member-hero{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:1.35rem 1.5rem;border:1px solid #d7e5f4;border-radius:18px;background:linear-gradient(120deg,#f8fbff 0%,#edf5ff 58%,#f5fbf7 100%);box-shadow:0 10px 24px rgba(23,50,77,.06)}.member-hero-identity{display:flex;align-items:center;gap:1rem;min-width:0}.member-avatar{display:grid;flex:0 0 76px;width:76px;height:76px;overflow:hidden;place-items:center;border:3px solid #fff;border-radius:50%;background:#174f97;color:#fff;box-shadow:0 5px 15px rgba(23,50,77,.18);font-size:1.7rem}.member-avatar img{width:100%;height:100%;object-fit:cover}.member-eyebrow,.member-section-heading span,.member-record-panel summary small{color:#1d5fa7;font-size:.73rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.member-hero h2{margin:.12rem 0;color:#123c78;font-size:1.5rem}.member-hero p{margin:0;color:#52677b}.member-hero p span{padding:0 .25rem;color:#9aafc5}.member-status{display:inline-flex;align-items:center;gap:.38rem;margin-top:.65rem;padding:.28rem .65rem;border-radius:999px;font-size:.78rem;font-weight:800}.member-status i{font-size:.48rem}.member-status.is-active{background:#e8f8ef;color:#137a3d}.member-status.is-suspended{background:#fff4de;color:#a46400}.member-status.is-exited{background:#fff0ef;color:#b42318}.member-status.is-inactive{background:#eef2f6;color:#52677b}.member-hero-contact{display:grid;gap:.45rem;min-width:250px;padding-left:1.2rem;border-left:1px solid #d7e5f4;color:#435a70;font-size:.87rem}.member-hero-contact a,.member-hero-contact span{display:flex;align-items:center;gap:.55rem}.member-hero-contact i{width:16px;color:#1d5fa7}.member-section-nav{display:flex;gap:.55rem;overflow-x:auto;padding:.25rem 0 .5rem;scrollbar-width:thin}.member-section-nav a{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;padding:.65rem .85rem;border:1px solid #dbe6f3;border-radius:10px;background:#fff;color:#38536d;font-size:.87rem;font-weight:700}.member-section-nav a:hover,.member-section-nav a.is-current{border-color:#1d5fa7;background:#edf5ff;color:#174f97}.member-section-nav span{display:grid;min-width:20px;height:20px;place-items:center;border-radius:999px;background:#e6eef8;font-size:.72rem}.member-section{padding:1.25rem;border:1px solid #dbe6f3;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(23,50,77,.045)}.member-section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.member-section-heading h2{margin:.1rem 0 0;color:#17324d;font-size:1.2rem}.member-text-action{display:inline-flex;align-items:center;gap:.4rem;color:#1d5fa7;font-size:.84rem;font-weight:800}.member-fact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.member-fact-grid article{display:flex;align-items:flex-start;gap:.65rem;min-width:0;padding:.85rem;border-radius:12px;background:#f8fbff}.member-fact-grid article>i{display:grid;flex:0 0 30px;width:30px;height:30px;place-items:center;border-radius:8px;background:#e4effc;color:#1d5fa7;font-size:.86rem}.member-fact-grid span{display:block;color:#71849a;font-size:.74rem;font-weight:700}.member-fact-grid strong{display:block;overflow:hidden;margin-top:.1rem;color:#243b53;font-size:.88rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.member-financial-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem}.member-financial-card{display:grid;gap:.35rem;min-height:145px;padding:1rem;border:1px solid #dbe6f3;border-radius:14px;background:#fbfdff}.member-financial-card>i{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;color:#fff;background:#1d5fa7}.member-financial-card span{margin-top:.1rem;color:#61758b;font-size:.77rem;font-weight:800;text-transform:uppercase}.member-financial-card strong{color:#17324d;font-size:1.15rem}.member-financial-card small{color:#71849a;font-size:.78rem}.member-financial-card.is-green>i{background:#198754}.member-financial-card.is-gold>i{background:#bd8616}.member-financial-card.is-red>i{background:#c2413b}.member-callout{display:flex;gap:.8rem;margin-bottom:1rem;padding:1rem;border-left:4px solid #1d5fa7;border-radius:10px;background:#f4f8ff}.member-callout>i{color:#1d5fa7;font-size:1.3rem}.member-callout p{margin:.25rem 0 0;color:#52677b}.member-inline-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.member-form-wide{grid-column:1/-1}.member-record-panel{overflow:hidden;border:1px solid #dbe6f3;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(23,50,77,.045)}.member-record-panel summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;cursor:pointer;list-style:none}.member-record-panel summary::-webkit-details-marker{display:none}.member-record-panel summary>span{display:flex;align-items:center;gap:.75rem}.member-record-panel summary>span>i{display:grid;width:37px;height:37px;place-items:center;border-radius:10px;background:#e8f1fc;color:#1d5fa7}.member-record-panel summary strong{display:block;color:#17324d}.member-record-panel summary b{display:flex;align-items:center;gap:.6rem;color:#61758b;font-size:.8rem}.member-record-panel summary b i{transition:transform .2s}.member-record-panel[open] summary{border-bottom:1px solid #dbe6f3;background:#fbfdff}.member-record-panel[open] summary b i{transform:rotate(180deg)}.member-panel-content{padding:1rem 1.2rem}.member-filter-bar{display:flex;align-items:end;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem}.member-filter-bar label{display:grid;gap:.25rem;color:#52677b;font-size:.75rem;font-weight:800}.member-filter-bar .form-control{min-width:145px}.member-panel-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.member-panel-actions p{margin:0;color:#61758b}.member-money{text-align:right!important;white-space:nowrap}.member-negative{color:#b42318;font-weight:800}.member-negative-note{color:#b42318;font-weight:800}.member-loan-status{display:inline-block;padding:.28rem .55rem;border-radius:999px;font-size:.75rem;font-weight:800}.member-loan-complete{background:#e8f8ef;color:#137a3d}.member-loan-active{background:#eaf3ff;color:#175ea9}.member-loan-pending{background:#fff6df;color:#9a6600}.member-table-link{display:grid;width:30px;height:30px;place-items:center;border-radius:8px;background:#eef5fc;color:#1d5fa7} @media(max-width:1100px){.member-hero{align-items:flex-start;flex-direction:column}.member-hero-contact{width:100%;min-width:0;padding:1rem 0 0;border-top:1px solid #d7e5f4;border-left:0}.member-fact-grid,.member-financial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.member-hero{padding:1rem}.member-avatar{flex-basis:60px;width:60px;height:60px}.member-hero h2{font-size:1.2rem}.member-section{padding:1rem}.member-section-heading,.member-panel-actions{align-items:flex-start;flex-direction:column}.member-fact-grid,.member-financial-grid,.member-inline-form{grid-template-columns:1fr}.member-record-panel summary{padding:.85rem 1rem}.member-record-panel summary b{font-size:.72rem}.member-panel-content{padding:1rem}.member-filter-bar{align-items:stretch;flex-direction:column}.member-filter-bar .form-control{min-width:0;width:100%}.member-page-actions{width:100%}.member-page-actions .btn{flex:1}.member-hero-contact{font-size:.82rem}} /* Approval queue: readable stacked records without horizontal phone scrolling. */ .disbursement-queue-summary{grid-template-columns:repeat(2,minmax(240px,1fr));margin-bottom:20px}.disbursement-queue-card{overflow:hidden}.disbursement-queue-table th,.disbursement-queue-table td{vertical-align:middle}.disbursement-queue-table small{color:#64748b}.disbursement-amount{white-space:nowrap;color:#123c78}.disbursement-actions{display:flex;gap:8px;flex-wrap:wrap}.disbursement-actions .btn{white-space:nowrap} @media(max-width:760px){.disbursement-queue-summary{grid-template-columns:1fr}.disbursement-queue-card{overflow:visible}.disbursement-queue-card>.se-card-body{overflow:visible}.disbursement-queue-table{display:block!important;min-width:0!important;width:100%}.disbursement-queue-table thead,.disbursement-queue-table tfoot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.disbursement-queue-table tbody{display:grid;gap:14px}.disbursement-queue-table tr{display:block;padding:14px;border:1px solid #dbe5f0;border-radius:14px;background:#fff;box-shadow:0 5px 16px rgba(20,50,80,.07)}.disbursement-queue-table td{display:grid;grid-template-columns:minmax(110px,38%) minmax(0,1fr);gap:10px;width:100%;padding:9px 0!important;border:0!important;border-bottom:1px solid #edf2f7!important;white-space:normal!important;text-align:left!important}.disbursement-queue-table td:before{color:#60758a;font-size:.76rem;font-weight:800;text-transform:uppercase}.disbursement-queue-table td:nth-child(1):before{content:'Loan'}.disbursement-queue-table td:nth-child(2):before{content:'Member'}.disbursement-queue-table td:nth-child(3):before{content:'Product / Period'}.disbursement-queue-table td:nth-child(4):before{content:'Application Date'}.disbursement-queue-table td:nth-child(5):before{content:'Approved Amount'}.disbursement-queue-table td:nth-child(6):before{content:'Status'}.disbursement-queue-table td:nth-child(7){display:block;border-bottom:0!important;padding-top:14px!important}.disbursement-queue-table td:nth-child(7):before,.disbursement-queue-table td[colspan]:before{display:none}.disbursement-actions .btn{flex:1;justify-content:center}} @media(max-width:700px){ .approval-queue-card{overflow:visible} .approval-queue-card>.se-card-body{overflow:visible} .approval-queue-table{display:block!important;min-width:0!important;width:100%} .approval-queue-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .approval-queue-table tbody{display:grid;gap:14px} .approval-queue-table tr{display:block;padding:14px;border:1px solid #dbe5f0;border-radius:14px;background:#fff;box-shadow:0 5px 16px rgba(20,50,80,.07)} .approval-queue-table td{display:grid;grid-template-columns:minmax(105px,38%) minmax(0,1fr);gap:10px;width:100%;padding:9px 0!important;border:0!important;border-bottom:1px solid #edf2f7!important;white-space:normal!important;overflow-wrap:anywhere;text-align:left!important} .approval-queue-table td::before{color:#60758a;font-size:.76rem;font-weight:800;letter-spacing:.025em;text-transform:uppercase} .approval-queue-table td:nth-child(1)::before{content:'Application'} .approval-queue-table td:nth-child(2)::before{content:'Member'} .approval-queue-table td:nth-child(3)::before{content:'Product'} .approval-queue-table td:nth-child(4)::before{content:'Amount'} .approval-queue-table td:nth-child(5)::before{content:'Months'} .approval-queue-table td:nth-child(6)::before{content:'Purpose'} .approval-queue-table td:nth-child(7)::before{content:'Approval Step'} .approval-queue-table td:nth-child(8)::before{content:'Status'} .approval-queue-table td:nth-child(9)::before{content:'Date'} .approval-queue-table td:nth-child(10){display:flex;gap:8px;padding-top:14px!important;border-bottom:0!important} .approval-queue-table td:nth-child(10)::before{display:none} .approval-queue-table td:nth-child(10) .btn{display:flex;flex:1;justify-content:center;min-width:0} .approval-queue-table td[colspan]{display:block;text-align:center!important} .approval-queue-table td[colspan]::before{display:none} }