/* ==========================================================================
   GOVERNMENT OF LESOTHO eSERVICES — UI FRAMEWORK
   Version: 2.0.1  |  Target Platform: Joget DX9
   Design Language: Irembo Rwanda x Modern Banking Portal x Microsoft Fluent
   NOTE: No CSS variables. All values resolved. Joget DX9 compatible.
   CHANGE LOG (2.0.1): reduced default button padding/height (section 8)
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

   /* ==========================================================================
      0. LESOTHO NATIONAL COLOR PALETTE (reference)
      Flag: blue (top) / white + black mokorotlo (centre) / green (bottom)
      No CSS custom properties are used elsewhere in this file (DX9 constraint),
      so these hexes are the single source of truth — reused directly below.
      --------------------------------------------------------------------------
      Blue   #00209F  -> gl-text-brand, primary buttons, links, focus rings,
                         topnav/sidebar active states, primary icon tints
      Green  #009543  -> success states, secondary buttons, requirement
                         checkmarks, badge-success
      White  #FFFFFF  -> base surface / card backgrounds
      Black  #000000  -> reserved, used sparingly for the mokorotlo hat motif
                         (e.g. a .gl-flag-stripe accent) — body text stays on
                         the softer #1F2937 for accessibility/readability
      ========================================================================== */
   .gl-flag-stripe {
     height: 6px;
     width: 100%;
     background: -webkit-linear-gradient(left, #00209F 0%, #00209F 33%, #FFFFFF 33%, #FFFFFF 66%, #009543 66%, #009543 100%);
     background: linear-gradient(90deg, #00209F 0%, #00209F 33%, #FFFFFF 33%, #FFFFFF 66%, #009543 66%, #009543 100%);
     border-radius: 999px;
   }
   
   /* ==========================================================================
      1. BASE RESET
      ========================================================================== */
   *, *::before, *::after { box-sizing: border-box; }
   
   html {
     -webkit-text-size-adjust: 100%;
     scroll-behavior: smooth;
   }
   
   body {
     margin: 0;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     font-weight: 400;
     line-height: 1.5;
     color: #1F2937;
     background-color: #F8FAFC;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   img, picture, svg, video { max-width: 100%; display: block; }
   a { color: #007A3D; text-decoration: none; }
   a:hover { text-decoration: underline; }
   ul, ol { padding-left: 24px; margin: 0 0 16px; }
   button { font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif; }
   input, select, textarea { font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif; color: #1F2937; }
   table { border-collapse: collapse; width: 100%; }
   fieldset { border: none; margin: 0; padding: 0; }
   hr { border: none; border-top: 1px solid #E5E7EB; margin: 24px 0; }
   
   *:focus-visible {
     outline: 2px solid #00209F;
     outline-offset: 2px;
   }
   
   /* Joget DX9 legacy platform chrome suppression */
   .jglogui,
   .form,
   .formContainer,
   .panel,
   .panel-default,
   .panel-body {
     background: transparent;
     border: none;
     box-shadow: none;
   }
   
   /* ==========================================================================
      2. TYPOGRAPHY SYSTEM
      ========================================================================== */
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     font-weight: 600;
     line-height: 1.25;
     color: #1F2937;
     margin: 0 0 12px;
   }
   
   h1, .gl-h1 { font-size: 2.25rem; font-weight: 700; }
   h2, .gl-h2 { font-size: 1.875rem; font-weight: 700; }
   h3, .gl-h3 { font-size: 1.375rem; font-weight: 700; color: #111827; }
   h4, .gl-h4 { font-size: 1.1875rem; font-weight: 600; }
   h5, .gl-h5 { font-size: 1.0625rem; font-weight: 600; }
   h6, .gl-h6 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7280; font-weight: 700; }
   
   p { margin: 0 0 16px; color: #1F2937; }
   
   .gl-text-xs { font-size: 0.75rem; }
   .gl-text-sm { font-size: 0.875rem; }
   .gl-text-base { font-size: 1rem; }
   .gl-text-md { font-size: 1.125rem; }
   .gl-text-lg { font-size: 1.25rem; }
   .gl-text-xl { font-size: 1.5rem; }
   
   .gl-fw-regular { font-weight: 400; }
   .gl-fw-medium { font-weight: 500; }
   .gl-fw-semibold { font-weight: 600; }
   .gl-fw-bold { font-weight: 700; }
   
   .gl-text-primary { color: #1F2937; }
   .gl-text-secondary { color: #6B7280; }
   .gl-text-muted { color: #9CA3AF; }
   .gl-text-success { color: #009543; }
   .gl-text-warning { color: #F59E0B; }
   .gl-text-danger { color: #DC3545; }
   .gl-text-info { color: #0EA5E9; }
   .gl-text-brand { color: #00209F; }
   
   .gl-eyebrow {
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: #6B7280;
   }
   
   .gl-lead { font-size: 1.125rem; color: #6B7280; line-height: 1.7; }
   
   /* ==========================================================================
      3. LAYOUT UTILITIES
      ========================================================================== */
   .gl-app-shell {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     min-height: 100vh;
     background: #F8FAFC;
   }
   
   .gl-main {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     min-width: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
   }
   
   .gl-content {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     padding: 40px;
   }
   
   .gl-section { margin-bottom: 48px; }
   .gl-section-header {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 24px;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   
   .gl-divider { border-top: 1px solid #E5E7EB; margin: 32px 0; }
   
   /* ==========================================================================
      4. GRID SYSTEM
      ========================================================================== */
   .gl-grid {
     display: -ms-grid;
     display: grid;
     gap: 24px;
     -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     grid-template-columns: repeat(12, 1fr);
   }
   
   .gl-col-1  { grid-column: span 1; }
   .gl-col-2  { grid-column: span 2; }
   .gl-col-3  { grid-column: span 3; }
   .gl-col-4  { grid-column: span 4; }
   .gl-col-5  { grid-column: span 5; }
   .gl-col-6  { grid-column: span 6; }
   .gl-col-7  { grid-column: span 7; }
   .gl-col-8  { grid-column: span 8; }
   .gl-col-9  { grid-column: span 9; }
   .gl-col-10 { grid-column: span 10; }
   .gl-col-11 { grid-column: span 11; }
   .gl-col-12 { grid-column: span 12; }
   
   .gl-grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
   .gl-grid-auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
   .gl-grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
   
   .gl-grid-2 { grid-template-columns: repeat(2, 1fr); }
   .gl-grid-3 { grid-template-columns: repeat(3, 1fr); }
   .gl-grid-4 { grid-template-columns: repeat(4, 1fr); }
   
   /* ==========================================================================
      5. CONTAINER CLASSES
      ========================================================================== */
   .gl-container {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 32px;
   }
   
   .gl-container-fluid { width: 100%; padding: 0 32px; }
   .gl-container-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 32px; }
   .gl-container-form { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 32px; }
   
   /* ==========================================================================
      6. CARD COMPONENTS
      ========================================================================== */
   .gl-card {
 /*    background: #FFFFFF; */
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     padding: 28px 32px;
     -webkit-transition: box-shadow 200ms ease, -webkit-transform 200ms ease;
     transition: box-shadow 200ms ease, transform 200ms ease;
   }
   
   .gl-card-hover:hover {
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
     -webkit-transform: translateY(-2px);
     transform: translateY(-2px);
   }
   
   .gl-card-header {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 20px;
   }
   
   .gl-card-title { font-size: 1.125rem; font-weight: 600; margin: 0; }
   .gl-card-subtitle { font-size: 0.875rem; color: #6B7280; margin-top: 2px; }
   .gl-card-body { color: #6B7280; font-size: 0.875rem; }
   .gl-card-footer {
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid #E5E7EB;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     gap: 12px;
   }
   
   .gl-card-flat { box-shadow: none; }
   .gl-card-compact { padding: 16px 20px; }
   
   /* Service Card */
   .gl-service-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     padding: 28px 28px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 16px;
     -webkit-transition: box-shadow 200ms ease, -webkit-transform 200ms ease;
     transition: box-shadow 200ms ease, transform 200ms ease;
     cursor: pointer;
     height: 100%;
   }
   
   .gl-service-card:hover {
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
     -webkit-transform: translateY(-2px);
     transform: translateY(-2px);
   }
   
   .gl-service-icon {
     width: 52px;
     height: 52px;
     border-radius: 10px;
     background: #E6EDF9;
     color: #00209F;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     font-size: 1.5rem;
   }
   
   .gl-service-card h3 { font-size: 1.125rem; margin-bottom: 4px; }
   .gl-service-card p { font-size: 0.875rem; color: #6B7280; margin-bottom: 0; }
   
   .gl-service-meta {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     margin-top: auto;
     padding-top: 12px;
     font-size: 0.75rem;
     color: #6B7280;
   }
   
   /* Service Category Card */
   .gl-category-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     padding: 28px 24px;
     text-align: center;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     -webkit-transition: box-shadow 200ms ease, -webkit-transform 200ms ease;
     transition: box-shadow 200ms ease, transform 200ms ease;
   }
   
   .gl-category-card:hover {
     box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
     -webkit-transform: translateY(-2px);
     transform: translateY(-2px);
   }
   
   .gl-category-icon {
     width: 60px;
     height: 60px;
     margin: 0 auto 16px;
     border-radius: 14px;
     background: #E1F3E7;
     color: #007A3D;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     font-size: 1.875rem;
   }
   
   /* Dashboard Card */
   .gl-dashboard-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     padding: 28px 32px;
   }
   
   /* KPI Card */
   .gl-kpi-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     padding: 24px 28px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 20px;
   }
   
   .gl-kpi-icon {
     width: 52px;
     height: 52px;
     border-radius: 10px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     font-size: 1.25rem;
     -ms-flex-negative: 0;
     flex-shrink: 0;
   }
   
   .gl-kpi-icon.is-primary { background: #E6EDF9; color: #00209F; }
   .gl-kpi-icon.is-success { background: #DFF3E6; color: #009543; }
   .gl-kpi-icon.is-warning { background: #FEF5E7; color: #F59E0B; }
   .gl-kpi-icon.is-danger { background: #FBE9EB; color: #DC3545; }
   .gl-kpi-icon.is-info { background: #E6F7FD; color: #0EA5E9; }
   
   .gl-kpi-value { font-size: 1.875rem; font-weight: 700; line-height: 1.1; }
   .gl-kpi-label { font-size: 0.875rem; color: #6B7280; margin-top: 4px; }
   
   .gl-kpi-trend {
     font-size: 0.75rem;
     font-weight: 500;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 4px;
     margin-top: 4px;
   }
   
   .gl-kpi-trend.is-up { color: #009543; }
   .gl-kpi-trend.is-down { color: #DC3545; }
   
   /* Information Card */
   .gl-info-card {
     background: #E6F7FD;
     border-radius: 10px;
     padding: 20px 24px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     gap: 12px;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
   }
   
   .gl-info-card .gl-info-icon { color: #0EA5E9; font-size: 1.125rem; -ms-flex-negative: 0; flex-shrink: 0; }
   
   /* Status Card */
   .gl-status-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     padding: 20px 24px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     gap: 16px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   }
   
   .gl-status-card .gl-status-text { font-weight: 500; }
   
   /* ==========================================================================
      7. FORM COMPONENTS
      ========================================================================== */
   .gl-form-group { margin-bottom: 28px; }
   
   .gl-label {
     display: block;
     font-size: 1rem;
     font-weight: 600;
     color: #1F2937;
     margin-bottom: 8px;
     letter-spacing: 0.01em;
   }
   
   .gl-label .gl-required { color: #DC3545; margin-left: 2px; }
   
   .gl-help-text { font-size: 0.8125rem; color: #6B7280; margin-top: 6px; }
   
   .gl-input,
   .gl-select,
   .gl-textarea,
   .form-control {
     width: 100%;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     font-size: 0.9375rem;
     color: #1F2937;
     background: #FFFFFF;
     border: 1px solid #D1D5DB;
     border-radius: 8px;
     padding: 13px 16px;
     line-height: 1.5;
     height: 48px;
     -webkit-transition: border-color 120ms ease, box-shadow 120ms ease;
     transition: border-color 120ms ease, box-shadow 120ms ease;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
   }
   
   .gl-textarea {
     min-height: 130px;
     resize: vertical;
     height: auto;
   }
   
   .gl-input::-webkit-input-placeholder, .gl-textarea::-webkit-input-placeholder { color: #9CA3AF; }
   .gl-input:-ms-input-placeholder, .gl-textarea:-ms-input-placeholder { color: #9CA3AF; }
   .gl-input::-ms-input-placeholder, .gl-textarea::-ms-input-placeholder { color: #9CA3AF; }
   .gl-input::placeholder, .gl-textarea::placeholder { color: #9CA3AF; }
   
   .gl-input:hover, .gl-select:hover, .gl-textarea:hover { border-color: #6B7280; }
   
   .gl-input:focus, .gl-select:focus, .gl-textarea:focus {
     outline: none;
     border-color: #00209F;
     box-shadow: 0 0 0 3px rgba(0, 32, 159, 0.18);
   }
   
   .gl-input:disabled, .gl-select:disabled, .gl-textarea:disabled {
     background: #F3F6FA;
     color: #9CA3AF;
     cursor: not-allowed;
   }
   
   .gl-select {
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.6' fill='none' fill-rule='evenodd'/></svg>");
     background-repeat: no-repeat;
     background-position: right 16px center;
     padding-right: 40px;
   }
   
   /* Joget DX9 native form field overrides */
   .form-control {
     height: 48px;
     font-size: 0.9375rem;
     border: 1px solid #D1D5DB;
     border-radius: 8px;
     padding: 13px 16px;
     box-shadow: none;
     -webkit-transition: border-color 120ms ease, box-shadow 120ms ease;
     transition: border-color 120ms ease, box-shadow 120ms ease;
   }
   
   .form-control:focus {
     border-color: #00209F;
     box-shadow: 0 0 0 3px rgba(0, 32, 159, 0.18);
     outline: none;
   }
   
   select.form-control {
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.6' fill='none' fill-rule='evenodd'/></svg>");
     background-repeat: no-repeat;
     background-position: right 16px center;
     padding-right: 40px;
   }
   
   textarea.form-control {
     height: auto;
     min-height: 130px;
   }
   
   /* Joget label overrides */
   .control-label,
   label {
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
   
     font-weight: 600;
     color: #1F2937;
     margin-bottom: 8px;
     display: block;
   }
   
   .gl-input-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
   .gl-input-group .gl-input { border-radius: 8px 0 0 8px; }
   .gl-input-group-addon {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     padding: 0 16px;
     background: #F3F6FA;
     border: 1px solid #D1D5DB;
     border-left: none;
     border-radius: 0 8px 8px 0;
     color: #6B7280;
     font-size: 0.875rem;
   }
   
   /* Checkbox & Radio */
   .gl-check, .gl-radio {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     gap: 10px;
     font-size: 0.9375rem;
     color: #1F2937;
     cursor: pointer;
     margin-bottom: 10px;
   }
   
   .gl-check input[type="checkbox"], .gl-radio input[type="radio"] {
     width: 20px;
     height: 20px;
     margin-top: 1px;
     accent-color: #00209F;
     cursor: pointer;
     -ms-flex-negative: 0;
     flex-shrink: 0;
   }
   
   /* File Upload Area */
   .gl-file-upload {
     border: 2px dashed #D1D5DB;
     border-radius: 10px;
     background: #F3F6FA;
     padding: 40px 32px;
     text-align: center;
     color: #6B7280;
     -webkit-transition: border-color 120ms ease, background 120ms ease;
     transition: border-color 120ms ease, background 120ms ease;
     cursor: pointer;
   }
   
   .gl-file-upload:hover { border-color: #00209F; background: #E6EDF9; }
   .gl-file-upload .gl-file-icon { font-size: 1.875rem; color: #00209F; margin-bottom: 10px; }
   .gl-file-upload-title { font-weight: 500; color: #1F2937; margin-bottom: 4px; }
   .gl-file-upload-hint { font-size: 0.75rem; }
   
   .gl-file-list { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; }
   .gl-file-item {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     gap: 12px;
     padding: 12px 16px;
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 8px;
     font-size: 0.875rem;
   }
   
   /* Validation states */
   .gl-input.is-valid, .gl-select.is-valid, .gl-textarea.is-valid,
   .form-control.is-valid { border-color: #009543; }
   
   .gl-input.is-invalid, .gl-select.is-invalid, .gl-textarea.is-invalid,
   .form-control.is-invalid { border-color: #DC3545; }
   
   .gl-input.is-valid:focus, .gl-textarea.is-valid:focus { box-shadow: 0 0 0 3px rgba(0, 149, 67, 0.16); }
   .gl-input.is-invalid:focus, .gl-textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.16); }
   
   .gl-feedback { font-size: 0.75rem; margin-top: 6px; display: none; }
   .gl-feedback.is-valid-feedback { color: #009543; }
   .gl-feedback.is-invalid-feedback { color: #DC3545; }
   .is-valid ~ .is-valid-feedback,
   .is-invalid ~ .is-invalid-feedback { display: block; }
   
   .gl-fieldset {
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     padding: 28px 32px;
     margin-bottom: 32px;
     background: #FFFFFF;
   }
   
   .gl-fieldset-legend {
     font-size: 1.375rem;
     font-weight: 700;
     color: #111827;
     margin-bottom: 20px;
   }
   
   /* Joget form row spacing */
   .form-group,
   .form-horizontal .form-group {
     margin-bottom: 24px;
   }
   
   /* ==========================================================================
      8. BUTTON SYSTEM
      ========================================================================== */
   .gl-btn {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     gap: 8px;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     font-size: 0.875rem;
     font-weight: 500;
     line-height: 1;
     padding: 9px 18px;
     border-radius: 8px;
     border: 1px solid transparent;
     cursor: pointer;
     -webkit-transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
     transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
     white-space: nowrap;
     text-decoration: none;
     height: 40px;
   }
   
   .gl-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0, 32, 159, 0.18); outline: none; }
   .gl-btn:disabled, .gl-btn.is-disabled { opacity: 0.55; cursor: not-allowed; }
   
   .gl-btn-primary { background: #00209F; color: #FFFFFF; border-color: #00209F; }
   .gl-btn-primary:hover { background: #001B78; border-color: #001B78; text-decoration: none; color: #FFFFFF; }
   
   .gl-btn-secondary { background: #007A3D; color: #FFFFFF; border-color: #007A3D; }
   .gl-btn-secondary:hover { background: #005C2E; border-color: #005C2E; text-decoration: none; color: #FFFFFF; }
   
   .gl-btn-outline { background: #FFFFFF; color: #00209F; border-color: #D1D5DB; }
   .gl-btn-outline:hover { background: #E6EDF9; border-color: #00209F; text-decoration: none; }
   
   .gl-btn-success { background: #009543; color: #FFFFFF; border-color: #009543; }
   .gl-btn-success:hover { background: #007A38; border-color: #007A38; text-decoration: none; color: #FFFFFF; }
   
   .gl-btn-danger { background: #DC3545; color: #FFFFFF; border-color: #DC3545; }
   .gl-btn-danger:hover { background: #B02A37; border-color: #B02A37; text-decoration: none; color: #FFFFFF; }
   
   .gl-btn-link { background: transparent; color: #007A3D; border-color: transparent; padding: 9px 4px; height: auto; }
   .gl-btn-link:hover { text-decoration: underline; background: transparent; }
   
   .gl-btn-ghost { background: transparent; color: #1F2937; border-color: transparent; }
   .gl-btn-ghost:hover { background: #F3F6FA; }
   
   .gl-btn-sm { padding: 6px 12px; font-size: 0.75rem; height: 32px; }
   .gl-btn-lg { padding: 12px 24px; font-size: 0.9375rem; height: 46px; }
   .gl-btn-block { width: 100%; }
   .gl-btn-icon { padding: 9px; width: 40px; }
   .gl-btn-pill { border-radius: 999px; }
   
   .gl-btn-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
   
   /* Joget default button overrides */
   .btn-primary,
   .btn.btn-primary {
     background: #00209F;
     border-color: #00209F;
     color: #FFFFFF;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     font-weight: 500;
     padding: 9px 18px;
     border-radius: 8px;
     height: 40px;
     line-height: 1;
     font-size: 0.875rem;
   }
   
   .btn-primary:hover,
   .btn.btn-primary:hover { background: #001B78; border-color: #001B78; color: #FFFFFF; }
   
   .btn-default,
   .btn.btn-default {
     background: #FFFFFF;
     border-color: #D1D5DB;
     color: #1F2937;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     padding: 9px 18px;
     border-radius: 8px;
     height: 40px;
     line-height: 1;
     font-size: 0.875rem;
   }
   
   .btn-default:hover,
   .btn.btn-default:hover { background: #F3F6FA; border-color: #6B7280; color: #1F2937; }
   
   /* ==========================================================================
      9. ALERT COMPONENTS
      ========================================================================== */
   .gl-alert {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     gap: 14px;
     border-radius: 10px;
     padding: 18px 20px;
     font-size: 0.875rem;
     border: 1px solid transparent;
     margin-bottom: 20px;
   }
   
   .gl-alert-icon { font-size: 1.125rem; -ms-flex-negative: 0; flex-shrink: 0; line-height: 1.4; }
   .gl-alert-title { font-weight: 600; margin-bottom: 3px; }
   .gl-alert-body { color: inherit; }
   .gl-alert-close { margin-left: auto; cursor: pointer; opacity: 0.6; background: none; border: none; font-size: 1.125rem; }
   .gl-alert-close:hover { opacity: 1; }
   
   .gl-alert-success { background: #DFF3E6; color: #0B4023; border-color: rgba(25,135,84,0.18); }
   .gl-alert-success .gl-alert-icon { color: #009543; }
   
   .gl-alert-warning { background: #FEF5E7; color: #7A4A04; border-color: rgba(245,158,11,0.22); }
   .gl-alert-warning .gl-alert-icon { color: #F59E0B; }
   
   .gl-alert-danger { background: #FBE9EB; color: #7A1F28; border-color: rgba(220,53,69,0.2); }
   .gl-alert-danger .gl-alert-icon { color: #DC3545; }
   
   .gl-alert-info { background: #E6F7FD; color: #0C4A6E; border-color: rgba(14,165,233,0.2); }
   .gl-alert-info .gl-alert-icon { color: #0EA5E9; }
   
   /* Bootstrap alert overrides for Joget */
   .alert { border-radius: 10px; padding: 16px 20px; font-size: 0.875rem; border-width: 1px; }
   .alert-success { background: #DFF3E6; color: #0B4023; border-color: rgba(25,135,84,0.18); }
   .alert-warning { background: #FEF5E7; color: #7A4A04; border-color: rgba(245,158,11,0.22); }
   .alert-danger { background: #FBE9EB; color: #7A1F28; border-color: rgba(220,53,69,0.2); }
   .alert-info { background: #E6F7FD; color: #0C4A6E; border-color: rgba(14,165,233,0.2); }
   
   /* ==========================================================================
      10. DASHBOARD COMPONENTS
      ========================================================================== */
   .gl-stat-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     padding: 24px 28px;
   }
   
   .gl-stat-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 12px; }
   .gl-stat-value { font-size: 1.875rem; font-weight: 700; }
   .gl-stat-label { font-size: 0.875rem; color: #6B7280; }
   
   .gl-activity-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     padding: 24px 28px;
   }
   
   .gl-activity-item {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     gap: 14px;
     padding: 14px 0;
     border-bottom: 1px solid #E5E7EB;
   }
   .gl-activity-item:last-child { border-bottom: none; padding-bottom: 0; }
   
   .gl-activity-icon {
     width: 40px;
     height: 40px;
     border-radius: 8px;
     background: #E6EDF9;
     color: #00209F;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     font-size: 1rem;
     -ms-flex-negative: 0;
     flex-shrink: 0;
   }
   
   .gl-activity-text { font-size: 0.875rem; }
   .gl-activity-time { font-size: 0.75rem; color: #9CA3AF; margin-top: 3px; }
   
   /* Profile Summary Card */
   .gl-profile-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     padding: 32px;
     text-align: center;
   }
   
   .gl-profile-avatar {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: #E6EDF9;
     color: #00209F;
     font-weight: 600;
     font-size: 1.5rem;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     margin: 0 auto 16px;
   }
   
   .gl-profile-name { font-weight: 600; font-size: 1.125rem; }
   .gl-profile-meta { font-size: 0.875rem; color: #6B7280; margin-top: 3px; }
   
   .gl-profile-stats {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: space-around;
     -ms-flex-pack: space-around;
     justify-content: space-around;
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid #E5E7EB;
   }
   
   .gl-profile-stat-value { font-weight: 700; font-size: 1.125rem; }
   .gl-profile-stat-label { font-size: 0.75rem; color: #6B7280; }
   
   /* Status Widget */
   .gl-status-widget {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 8px;
     padding: 6px 14px;
     border-radius: 999px;
     font-size: 0.75rem;
     font-weight: 600;
   }
   
   .gl-status-widget .gl-dot { width: 8px; height: 8px; border-radius: 50%; }
   
   .gl-status-widget.is-pending { background: #FEF5E7; color: #7A4A04; }
   .gl-status-widget.is-pending .gl-dot { background: #F59E0B; }
   
   .gl-status-widget.is-approved { background: #DFF3E6; color: #0B4023; }
   .gl-status-widget.is-approved .gl-dot { background: #009543; }
   
   .gl-status-widget.is-rejected { background: #FBE9EB; color: #7A1F28; }
   .gl-status-widget.is-rejected .gl-dot { background: #DC3545; }
   
   .gl-status-widget.is-processing { background: #E6F7FD; color: #0C4A6E; }
   .gl-status-widget.is-processing .gl-dot { background: #0EA5E9; }
   
   .gl-status-widget.is-draft { background: #F3F6FA; color: #6B7280; }
   .gl-status-widget.is-draft .gl-dot { background: #9CA3AF; }
   
   /* ==========================================================================
      11. TABLE COMPONENTS
      ========================================================================== */
   .gl-table-wrap {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     overflow: hidden;
   }
   
   .gl-table-toolbar {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     gap: 16px;
     padding: 20px 24px;
     border-bottom: 1px solid #E5E7EB;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   
   .gl-table-search {
     position: relative;
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     max-width: 340px;
   }
   
   .gl-table-search .gl-input { padding-left: 42px; }
   .gl-table-search-icon {
     position: absolute;
     left: 14px;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     color: #9CA3AF;
   }
   
   .gl-table-filters { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
   .gl-table-filters .gl-select { min-width: 160px; }
   
   .gl-table { width: 100%; font-size: 0.9375rem; }
   .gl-table thead th {
     text-align: left;
     font-weight: 700;
     font-size: 0.8125rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #6B7280;
     background: #F3F6FA;
     padding: 14px 20px;
     border-bottom: 1px solid #E5E7EB;
   }
   
   .gl-table tbody td {
     padding: 18px 20px;
     border-bottom: 1px solid #E5E7EB;
     color: #1F2937;
     vertical-align: middle;
   }
   
   .gl-table tbody tr:last-child td { border-bottom: none; }
   .gl-table tbody tr:hover { background: #F8FAFC; }
   .gl-table-striped tbody tr:nth-child(even) { background: #F8FAFC; }
   
   /* Joget datalist table overrides */
   .jg-datagrid table,
   .jg-datalist table,
   .datalist-table {
     width: 100%;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     font-size: 0.9375rem;
     border-collapse: collapse;
   }
   
   .jg-datagrid table thead th,
   .jg-datalist table thead th,
   .datalist-table thead th {
     text-align: left;
     font-weight: 700;
     font-size: 0.8125rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: #6B7280;
     background: #F3F6FA;
     padding: 14px 20px;
     border-bottom: 1px solid #E5E7EB;
   }
   
   .jg-datagrid table tbody td,
   .jg-datalist table tbody td,
   .datalist-table tbody td {
     padding: 18px 20px;
     border-bottom: 1px solid #E5E7EB;
     color: #1F2937;
     vertical-align: middle;
   }
   
   .jg-datagrid table tbody tr:hover,
   .jg-datalist table tbody tr:hover,
   .datalist-table tbody tr:hover { background: #F8FAFC; }
   
   .gl-table-pagination {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     gap: 16px;
     padding: 16px 24px;
     border-top: 1px solid #E5E7EB;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   
   .gl-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
   
   .gl-page-item {
     min-width: 40px;
     height: 40px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     border-radius: 8px;
     font-size: 0.875rem;
     color: #6B7280;
     cursor: pointer;
     border: 1px solid transparent;
     padding: 0 10px;
   }
   
   .gl-page-item:hover { background: #F3F6FA; }
   .gl-page-item.is-active { background: #00209F; color: #FFFFFF; border-color: #00209F; }
   .gl-page-item.is-disabled { opacity: 0.4; cursor: not-allowed; }
   
   /* Joget pagination override */
   .pagination > li > a,
   .pagination > li > span {
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     color: #00209F;
     border-color: #E5E7EB;
     border-radius: 8px;
     margin: 0 2px;
     min-width: 40px;
     height: 40px;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
   }
   
   .pagination > .active > a,
   .pagination > .active > span {
     background: #00209F;
     border-color: #00209F;
     color: #FFFFFF;
   }
   
   /* ==========================================================================
      12. SERVICE CATALOGUE COMPONENTS
      ========================================================================== */
   .gl-catalogue-hero {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 14px;
     padding: 48px 52px;
     margin-bottom: 40px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   }
   
   .gl-catalogue-search {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     gap: 12px;
     margin-top: 24px;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   
   .gl-catalogue-search .gl-input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 240px; }
   
   .gl-service-detail-layout {
     display: -ms-grid;
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 32px;
   }
   
   .gl-service-detail-main {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     padding: 40px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   }
   
   .gl-service-detail-side { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; }
   
   .gl-requirement-list { list-style: none; padding: 0; margin: 0; }
   .gl-requirement-list li {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     gap: 10px;
     padding: 10px 0;
     font-size: 0.875rem;
     color: #1F2937;
     border-bottom: 1px solid #F3F6FA;
   }
   .gl-requirement-list li:last-child { border-bottom: none; }
   .gl-requirement-list li::before {
     content: "✓";
     color: #009543;
     font-weight: 700;
     -ms-flex-negative: 0;
     flex-shrink: 0;
   }
   
   /* ==========================================================================
      13. NAVIGATION COMPONENTS
      ========================================================================== */
   /* Top Navigation */
   .gl-topnav {
     height: 68px;
     background: #FFFFFF;
     border-bottom: 1px solid #E5E7EB;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     padding: 0 32px;
     position: sticky;
     top: 0;
     z-index: 1030;
   }
   
   .gl-topnav-brand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; font-weight: 600; }
   .gl-topnav-brand img { height: 36px; }
   .gl-topnav-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; }
   
   .gl-topnav-link {
     font-size: 0.875rem;
     font-weight: 500;
     color: #6B7280;
     padding: 8px 14px;
     border-radius: 8px;
   }
   
   .gl-topnav-link:hover { background: #F3F6FA; text-decoration: none; color: #1F2937; }
   .gl-topnav-link.is-active { color: #00209F; background: #E6EDF9; }
   
   /* Sidebar Navigation */
   .gl-sidebar {
     width: 272px;
     background: #FFFFFF;
     border-right: 1px solid #E5E7EB;
     padding: 24px 16px;
     -ms-flex-negative: 0;
     flex-shrink: 0;
     position: sticky;
     top: 0;
     height: 100vh;
     overflow-y: auto;
   }
   
   .gl-sidebar-section { margin-bottom: 32px; }
   .gl-sidebar-label {
     font-size: 0.6875rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: #9CA3AF;
     font-weight: 600;
     padding: 0 12px;
     margin-bottom: 8px;
   }
   
   .gl-sidebar-item {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 12px;
     padding: 11px 12px;
     border-radius: 8px;
     color: #6B7280;
     font-size: 0.875rem;
     font-weight: 500;
     cursor: pointer;
     margin-bottom: 2px;
     -webkit-transition: background 120ms ease, color 120ms ease;
     transition: background 120ms ease, color 120ms ease;
   }
   
   .gl-sidebar-item:hover { background: #F3F6FA; color: #1F2937; text-decoration: none; }
   .gl-sidebar-item.is-active { background: #E6EDF9; color: #00209F; }
   .gl-sidebar-item .gl-sidebar-icon { width: 22px; text-align: center; -ms-flex-negative: 0; flex-shrink: 0; }
   
   /* Breadcrumbs */
   .gl-breadcrumb {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 8px;
     font-size: 0.875rem;
     color: #6B7280;
     list-style: none;
     margin: 0 0 24px;
     padding: 0;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   
   .gl-breadcrumb li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; }
   .gl-breadcrumb li:not(:last-child)::after { content: "/"; color: #9CA3AF; }
   .gl-breadcrumb a { color: #6B7280; }
   .gl-breadcrumb a:hover { color: #00209F; }
   .gl-breadcrumb li:last-child { color: #1F2937; font-weight: 500; }
   
   /* Joget breadcrumb override */
   .breadcrumb {
     background: transparent;
     padding: 0;
     margin-bottom: 24px;
     font-size: 0.875rem;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
   }
   .breadcrumb > li + li::before { color: #9CA3AF; }
   .breadcrumb > li > a { color: #6B7280; }
   .breadcrumb > .active { color: #1F2937; font-weight: 500; }
   
   /* User Menu */
   .gl-user-menu { position: relative; display: inline-block; }
   .gl-user-trigger {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     padding: 6px 8px;
     border-radius: 8px;
   }
   .gl-user-trigger:hover { background: #F3F6FA; }
   
   .gl-user-avatar {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: #E6EDF9;
     color: #00209F;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     font-weight: 600;
     font-size: 0.875rem;
   }
   
   .gl-user-dropdown {
     position: absolute;
     right: 0;
     top: calc(100% + 8px);
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
     min-width: 230px;
     padding: 8px;
     z-index: 1000;
   }
   
   .gl-user-dropdown-item {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 12px;
     padding: 12px;
     border-radius: 8px;
     font-size: 0.875rem;
     color: #1F2937;
     cursor: pointer;
   }
   .gl-user-dropdown-item:hover { background: #F3F6FA; text-decoration: none; }
   
   /* ==========================================================================
      14. MODAL COMPONENTS
      ========================================================================== */
   .gl-modal-backdrop {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: rgba(17, 24, 39, 0.5);
     z-index: 1040;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     padding: 24px;
   }
   
   .gl-modal {
     background: #FFFFFF;
     border-radius: 14px;
     box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
     width: 100%;
     max-width: 580px;
     max-height: 90vh;
     overflow-y: auto;
     z-index: 1050;
   }
   
   .gl-modal-sm { max-width: 440px; }
   .gl-modal-lg { max-width: 780px; }
   
   .gl-modal-header {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     padding: 24px 28px;
     border-bottom: 1px solid #E5E7EB;
   }
   
   .gl-modal-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
   .gl-modal-close { background: none; border: none; font-size: 1.25rem; color: #6B7280; cursor: pointer; }
   .gl-modal-close:hover { color: #1F2937; }
   
   .gl-modal-body { padding: 28px; color: #6B7280; font-size: 0.9375rem; }
   
   .gl-modal-footer {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     gap: 12px;
     padding: 20px 28px;
     border-top: 1px solid #E5E7EB;
   }
   
   /* Joget dialog override */
   .modal-dialog { border-radius: 14px; overflow: hidden; }
   .modal-header { padding: 24px 28px; border-bottom: 1px solid #E5E7EB; }
   .modal-title { font-size: 1.25rem; font-weight: 600; font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif; }
   .modal-body { padding: 28px; font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif; }
   .modal-footer { padding: 20px 28px; border-top: 1px solid #E5E7EB; }
   
   /* ==========================================================================
      15. BADGE COMPONENTS
      ========================================================================== */
   .gl-badge {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 4px;
     padding: 4px 12px;
     border-radius: 999px;
     font-size: 0.75rem;
     font-weight: 600;
     line-height: 1.6;
   }
   
   .gl-badge-primary { background: #E6EDF9; color: #00209F; }
   .gl-badge-secondary { background: #E1F3E7; color: #007A3D; }
   .gl-badge-success { background: #DFF3E6; color: #009543; }
   .gl-badge-warning { background: #FEF5E7; color: #92660A; }
   .gl-badge-danger { background: #FBE9EB; color: #DC3545; }
   .gl-badge-info { background: #E6F7FD; color: #0C7DB0; }
   .gl-badge-neutral { background: #F3F6FA; color: #6B7280; }
   
   .gl-badge-outline { background: transparent; border: 1px solid currentColor; }
   
   /* ==========================================================================
      16. TIMELINE COMPONENTS
      ========================================================================== */
   .gl-timeline { position: relative; padding-left: 36px; }
   
   .gl-timeline::before {
     content: "";
     position: absolute;
     left: 11px;
     top: 4px;
     bottom: 4px;
     width: 2px;
     background: #E5E7EB;
   }
   
   .gl-timeline-item { position: relative; padding-bottom: 28px; }
   .gl-timeline-item:last-child { padding-bottom: 0; }
   
   .gl-timeline-dot {
     position: absolute;
     left: -32px;
     top: 2px;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #FFFFFF;
     border: 3px solid #D1D5DB;
   }
   
   .gl-timeline-item.is-complete .gl-timeline-dot { border-color: #009543; background: #DFF3E6; }
   .gl-timeline-item.is-current .gl-timeline-dot { border-color: #00209F; box-shadow: 0 0 0 4px #E6EDF9; background: #FFFFFF; }
   .gl-timeline-item.is-pending .gl-timeline-dot { border-color: #D1D5DB; }
   
   .gl-timeline-title { font-weight: 600; font-size: 0.9375rem; }
   .gl-timeline-meta { font-size: 0.75rem; color: #6B7280; margin-top: 3px; }
   .gl-timeline-desc { font-size: 0.875rem; color: #6B7280; margin-top: 10px; }
   
   /* ==========================================================================
      17. APPLICATION TRACKING COMPONENTS
      ========================================================================== */
   .gl-tracker {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 0;
     margin-bottom: 40px;
     overflow-x: auto;
     padding-bottom: 4px;
   }
   
   .gl-tracker-step {
     -webkit-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
     min-width: 130px;
     text-align: center;
     position: relative;
     padding-top: 52px;
   }
   
   .gl-tracker-step::before {
     content: "";
     position: absolute;
     top: 17px;
     left: 0;
     right: 0;
     height: 2px;
     background: #E5E7EB;
   }
   
   .gl-tracker-step:first-child::before { left: 50%; }
   .gl-tracker-step:last-child::before { right: 50%; }
   
   .gl-tracker-step.is-complete::before { background: #009543; }
   .gl-tracker-step.is-complete ~ .gl-tracker-step::before { background: #E5E7EB; }
   
   .gl-tracker-circle {
     position: absolute;
     top: 4px;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: #FFFFFF;
     border: 2px solid #D1D5DB;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     font-size: 0.75rem;
     font-weight: 600;
     color: #6B7280;
     z-index: 1;
   }
   
   .gl-tracker-step.is-complete .gl-tracker-circle { background: #009543; border-color: #009543; color: #FFFFFF; }
   .gl-tracker-step.is-current .gl-tracker-circle { background: #00209F; border-color: #00209F; color: #FFFFFF; box-shadow: 0 0 0 5px #E6EDF9; }
   
   .gl-tracker-label { font-size: 0.75rem; font-weight: 500; color: #6B7280; margin-top: 4px; }
   .gl-tracker-step.is-current .gl-tracker-label,
   .gl-tracker-step.is-complete .gl-tracker-label { color: #1F2937; }
   
   .gl-tracking-card {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
     padding: 28px 32px;
   }
   
   .gl-tracking-ref {
     font-family: 'Inter', monospace;
     font-weight: 600;
     letter-spacing: 0.03em;
     color: #00209F;
   }
   
   /* ==========================================================================
      18. UTILITY CLASSES
      ========================================================================== */
   .gl-m-0 { margin: 0 !important; }
   .gl-mt-0 { margin-top: 0 !important; }
   .gl-mb-0 { margin-bottom: 0 !important; }
   .gl-m-1 { margin: 4px !important; }
   .gl-mt-1 { margin-top: 4px !important; }
   .gl-mb-1 { margin-bottom: 4px !important; }
   .gl-ml-1 { margin-left: 4px !important; }
   .gl-mr-1 { margin-right: 4px !important; }
   .gl-m-2 { margin: 8px !important; }
   .gl-mt-2 { margin-top: 8px !important; }
   .gl-mb-2 { margin-bottom: 8px !important; }
   .gl-ml-2 { margin-left: 8px !important; }
   .gl-mr-2 { margin-right: 8px !important; }
   .gl-m-3 { margin: 12px !important; }
   .gl-mt-3 { margin-top: 12px !important; }
   .gl-mb-3 { margin-bottom: 12px !important; }
   .gl-ml-3 { margin-left: 12px !important; }
   .gl-mr-3 { margin-right: 12px !important; }
   .gl-m-4 { margin: 16px !important; }
   .gl-mt-4 { margin-top: 16px !important; }
   .gl-mb-4 { margin-bottom: 16px !important; }
   .gl-ml-4 { margin-left: 16px !important; }
   .gl-mr-4 { margin-right: 16px !important; }
   .gl-m-5 { margin: 20px !important; }
   .gl-mt-5 { margin-top: 20px !important; }
   .gl-mb-5 { margin-bottom: 20px !important; }
   .gl-ml-5 { margin-left: 20px !important; }
   .gl-mr-5 { margin-right: 20px !important; }
   .gl-m-6 { margin: 24px !important; }
   .gl-mt-6 { margin-top: 24px !important; }
   .gl-mb-6 { margin-bottom: 24px !important; }
   .gl-ml-6 { margin-left: 24px !important; }
   .gl-mr-6 { margin-right: 24px !important; }
   .gl-m-7 { margin: 32px !important; }
   .gl-mt-7 { margin-top: 32px !important; }
   .gl-mb-7 { margin-bottom: 32px !important; }
   .gl-m-8 { margin: 40px !important; }
   .gl-mt-8 { margin-top: 40px !important; }
   .gl-mb-8 { margin-bottom: 40px !important; }
   .gl-mx-auto { margin-left: auto !important; margin-right: auto !important; }
   
   .gl-p-0 { padding: 0 !important; }
   .gl-p-1 { padding: 4px !important; }
   .gl-p-2 { padding: 8px !important; }
   .gl-p-3 { padding: 12px !important; }
   .gl-p-4 { padding: 16px !important; }
   .gl-p-5 { padding: 20px !important; }
   .gl-p-6 { padding: 24px !important; }
   .gl-p-7 { padding: 32px !important; }
   .gl-p-8 { padding: 40px !important; }
   .gl-pt-0 { padding-top: 0 !important; }
   .gl-pb-0 { padding-bottom: 0 !important; }
   .gl-pt-4 { padding-top: 16px !important; }
   .gl-pb-4 { padding-bottom: 16px !important; }
   .gl-pt-6 { padding-top: 24px !important; }
   .gl-pb-6 { padding-bottom: 24px !important; }
   .gl-px-4 { padding-left: 16px !important; padding-right: 16px !important; }
   .gl-px-6 { padding-left: 24px !important; padding-right: 24px !important; }
   .gl-py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }
   .gl-py-6 { padding-top: 24px !important; padding-bottom: 24px !important; }
   
   /* Flex */
   .gl-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
   .gl-inline-flex { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; }
   .gl-flex-col { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; }
   .gl-flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }
   .gl-items-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; }
   .gl-items-start { -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; }
   .gl-items-end { -webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important; }
   .gl-justify-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; }
   .gl-justify-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; }
   .gl-justify-end { -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; }
   .gl-gap-1 { gap: 4px !important; }
   .gl-gap-2 { gap: 8px !important; }
   .gl-gap-3 { gap: 12px !important; }
   .gl-gap-4 { gap: 16px !important; }
   .gl-gap-5 { gap: 20px !important; }
   .gl-gap-6 { gap: 24px !important; }
   .gl-flex-1 { -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; }
   .gl-flex-auto { -webkit-box-flex: 1 !important; -ms-flex: auto !important; flex: auto !important; }
   .gl-flex-none { -webkit-box-flex: 0 !important; -ms-flex: none !important; flex: none !important; }
   
   /* Display */
   .gl-block { display: block !important; }
   .gl-inline-block { display: inline-block !important; }
   .gl-grid-display { display: -ms-grid !important; display: grid !important; }
   .gl-hidden { display: none !important; }
   
   /* Width / Height */
   .gl-w-full { width: 100% !important; }
   .gl-h-full { height: 100% !important; }
   .gl-max-w-full { max-width: 100% !important; }
   
   /* Text */
   .gl-text-left { text-align: left !important; }
   .gl-text-center { text-align: center !important; }
   .gl-text-right { text-align: right !important; }
   .gl-text-uppercase { text-transform: uppercase !important; }
   .gl-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   
   /* Rounded / Shadow */
   .gl-rounded-sm { border-radius: 6px !important; }
   .gl-rounded { border-radius: 10px !important; }
   .gl-rounded-lg { border-radius: 14px !important; }
   .gl-rounded-pill { border-radius: 999px !important; }
   .gl-shadow-sm { box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06) !important; }
   .gl-shadow { box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08) !important; }
   .gl-shadow-none { box-shadow: none !important; }
   .gl-border { border: 1px solid #E5E7EB !important; }
   .gl-border-0 { border: none !important; }
   
   /* Visibility defaults */
   .gl-hide-sm, .gl-hide-md, .gl-hide-lg { display: initial; }
   .gl-show-sm, .gl-show-md, .gl-show-lg { display: none; }
   
   /* ==========================================================================
      19. JOGET DX9 SPECIFIC OVERRIDES
      ========================================================================== */
   
   /* Joget page chrome */
   .v-page-body,
   .v-form-body {
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     background: #F8FAFC;
     color: #1F2937;
   }
   
   /* Joget userview section spacing */
   .v-element {
     margin-bottom: 24px;
   }
   
   /* Joget form section titles */
   .jg-form-section-title,
   .jg-section-title {
     font-size: 1.375rem;
     background: none;
     font-weight: 700;
     color: #111827;
     padding-bottom: 12px;
     border-bottom: 1px solid #E5E7EB;
     margin-bottom: 24px;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
   }
   
   /* Joget DX9 rendered form section headings — broad selector net */
   .form-section-title,
   .section-title,
   .v-form-section > legend,
   .v-form-section > .legend,
   fieldset > legend,
   .jg-form > .section-header,
   .panel-heading,
   .panel-title {
     font-size: 1.375rem !important;
     font-weight: 700 !important;
     color: #111827 !important;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif !important;
     letter-spacing: -0.01em;
     line-height: 1.25;
     background:none;
   }
   
   /* Joget sidebar nav font size — needs to be readable */
   .gl-sidebar-item,
   .v-nav-item {
     font-size: 0.9375rem;
   }
   
   /* Joget sidebar section label */
   .gl-sidebar-label {
     font-size: 0.6875rem;
   }
   
   /* Joget datalist search and filter bar */
   .jg-datalist-search,
   .datalist-search,
   .jg-search-form {
     padding: 20px 24px;
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     margin-bottom: 20px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   }
   
   /* Joget datalist action toolbar */
   .jg-datalist-action,
   .datalist-action {
     padding: 14px 20px;
     background: #F3F6FA;
     border-bottom: 1px solid #E5E7EB;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: 10px;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
   }
   
   /* Joget inbox */
   .jg-inbox-row,
   .inbox-row {
     padding: 16px 20px;
     border-bottom: 1px solid #E5E7EB;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     font-size: 0.875rem;
     color: #1F2937;
   }
   
   .jg-inbox-row:hover,
   .inbox-row:hover { background: #F8FAFC; }
   
   /* Joget notification badges */
   .jg-badge,
   .v-badge {
     background: #00209F;
     color: #FFFFFF;
     border-radius: 999px;
     font-size: 0.6875rem;
     font-weight: 600;
     padding: 2px 8px;
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
   }
   
   /* Joget tab navigation */
   .nav-tabs {
     border-bottom: 2px solid #E5E7EB;
     margin-bottom: 28px;
   }
   
   .nav-tabs > li > a {
     font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
     font-size: 0.9375rem;
     font-weight: 500;
     color: #6B7280;
     border: none;
     border-bottom: 2px solid transparent;
     padding: 12px 20px;
     margin-bottom: -2px;
     border-radius: 0;
     -webkit-transition: color 120ms ease, border-color 120ms ease;
     transition: color 120ms ease, border-color 120ms ease;
   }
   
   .nav-tabs > li > a:hover { color: #1F2937; border-color: transparent; background: transparent; }
   
   .nav-tabs > li.active > a,
   .nav-tabs > li.active > a:focus,
   .nav-tabs > li.active > a:hover {
     color: #00209F;
     border: none;
     border-bottom: 2px solid #00209F;
     background: transparent;
     font-weight: 600;
   }
   
   /* Joget report output */
   .jg-report-container,
   .v-report {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     padding: 32px;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   }
   
   /* Joget CRUD grid */
   .jg-grid-body,
   .crud-grid {
     background: #FFFFFF;
     border: 1px solid #E5E7EB;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   }
   
   /* ==========================================================================
      20. MOBILE RESPONSIVE RULES
      ========================================================================== */
   
   /* 1400px */
   @media (max-width: 1400px) {
     .gl-container { max-width: 1140px; }
   }
   
   /* 1200px */
   @media (max-width: 1200px) {
     .gl-container { max-width: 960px; }
     .gl-grid-4 { grid-template-columns: repeat(3, 1fr); }
   }
   
   /* 992px - tablet / sidebar collapse */
   @media (max-width: 992px) {
     .gl-container { max-width: 720px; }
     .gl-sidebar {
       position: fixed;
       left: -100%;
       top: 0;
       height: 100vh;
       z-index: 1025;
       -webkit-transition: left 320ms ease;
       transition: left 320ms ease;
       box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
     }
     .gl-sidebar.is-open { left: 0; }
     .gl-grid-3 { grid-template-columns: repeat(2, 1fr); }
     .gl-grid-4 { grid-template-columns: repeat(2, 1fr); }
     .gl-content { padding: 28px 24px; }
     .gl-service-detail-layout { grid-template-columns: 1fr; }
     .gl-hide-md { display: none !important; }
     .gl-show-md { display: initial !important; }
   }
   
   /* 768px - mobile landscape */
   @media (max-width: 768px) {
     .gl-container,
     .gl-container-fluid,
     .gl-container-narrow,
     .gl-container-form { padding: 0 20px; }
     .gl-content { padding: 20px 16px; }
     .gl-grid { gap: 16px; }
     .gl-grid-2, .gl-grid-3, .gl-grid-4 { grid-template-columns: 1fr; }
     .gl-col-1,.gl-col-2,.gl-col-3,.gl-col-4,.gl-col-5,.gl-col-6,
     .gl-col-7,.gl-col-8,.gl-col-9,.gl-col-10,.gl-col-11,.gl-col-12 { grid-column: span 12; }
     .gl-topnav { padding: 0 20px; }
     .gl-card, .gl-service-card, .gl-dashboard-card, .gl-stat-card, .gl-tracking-card { padding: 20px; }
     .gl-modal { max-width: 100%; border-radius: 10px; }
     h1, .gl-h1 { font-size: 1.875rem; }
     h2, .gl-h2 { font-size: 1.5rem; }
     .gl-catalogue-hero { padding: 28px 24px; }
     .gl-service-detail-main { padding: 24px; }
     .gl-hide-sm { display: none !important; }
     .gl-show-sm { display: initial !important; }
   
     .gl-tracker { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 24px; }
     .gl-tracker-step { padding-top: 0; padding-left: 52px; text-align: left; width: 100%; min-width: 0; }
     .gl-tracker-step::before { top: 0; bottom: 0; left: 17px; right: auto; width: 2px; height: 100%; }
     .gl-tracker-step:first-child::before,
     .gl-tracker-step:last-child::before { top: 0; bottom: 0; left: 17px; right: auto; }
     .gl-tracker-circle { top: 0; left: 0; -webkit-transform: none; transform: none; }
   
     .gl-table-responsive thead { display: none; }
     .gl-table-responsive tbody tr {
       display: block;
       border: 1px solid #E5E7EB;
       border-radius: 8px;
       margin-bottom: 12px;
       padding: 12px;
     }
     .gl-table-responsive tbody td {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: justify;
       -ms-flex-pack: justify;
       justify-content: space-between;
       border-bottom: 1px dashed #E5E7EB;
       padding: 10px 0;
     }
     .gl-table-responsive tbody td:last-child { border-bottom: none; }
     .gl-table-responsive tbody td::before {
       content: attr(data-label);
       font-weight: 500;
       color: #6B7280;
       margin-right: 12px;
     }
   }
   
   /* 576px - mobile portrait */
   @media (max-width: 576px) {
     .gl-btn { width: 100%; }
     .gl-btn-group { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
     .gl-btn-group .gl-btn-auto { width: auto; }
     .gl-kpi-card { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; }
     .gl-table-toolbar { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
     .gl-table-search { max-width: 100%; }
     .gl-profile-stats { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; }
     .gl-modal-footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
     .gl-modal-footer .gl-btn { width: 100%; }
     .gl-form-group { margin-bottom: 20px; }
   }
   
   /* ==========================================================================
      END OF FRAMEWORK — Government of Lesotho eServices v2.0.1
      Joget DX9 Production CSS | No Variables | No Preprocessors
   ========================================================================== */