/*:root {
  --app-purple-color: #093268;
}*/

:root {
  --app-purple-color: #093268;

  /* Accessible driver-portal action colors */
  --app-action-primary: #1f4e86;
  --app-action-primary-hover: #173653;

  --app-action-secondary: #495057;
  --app-action-secondary-hover: #343a40;

  --app-action-danger: #a20000;
  --app-action-danger-hover: #7a0000;

  --app-link-color: #1f4e86;
  --app-link-hover: #173653;

  --app-focus-color: #084298;
}

.appInstruction { font-size: 1.1em !important; }

.redText {
  color: #a20000;
}


h3.applicationName { color: var(--app-purple-color); font-size: 1.5em; width:100%; text-align:center;}

.blueLine { border: none; clear: both; padding: 0.05em 0; width: 100%; background-color: var(--app-purple-color);}
.error { color: #9d0000; margin-left: 0 !important}
.subhead { padding-left: 3em }
.headline { color: #3C5959; font-size: 1.2em; font-style: italic; font-weight: bold;}


.button-PI { background: var(--app-purple-color); padding: 8px 15px; font-size: 94%; cursor: pointer; color: white; border-radius: .4em; border: 1px solid transparent; line-height: 15px;}
.button-PI:hover { background: #6070bd; color: #FFF; }


@media screen and (max-width: 320px) {
	.loginForm .card.fat { padding: 0; }
	.loginForm .card.fat .card-body { padding: 15px; }
}

@media only screen and (max-width: 500px) {
    #footer {
      display:none;
    }
  }


/* select {-webkit-appearance: menulist !important;}
.thead { background: var(--app-purple-color); color: white; }
tbody > tr {border: white;} */

.alert-box {
    color:#555;
    border-radius:0.313em;
    padding:10px 0px 8px 46px;
    margin:0px;
}

.alert-box span {
    font-weight:bold;
    text-transform:uppercase;
}


.infoMessage {
    background: url('images/info.png') no-repeat 10px 50%;
    color: #2D4F8A;
}
.errorMessage {
    background: url('/limo/css/images/error-b605009bedbdd6585eca002b3c7e71b6.png') no-repeat 10px 50%;
    color: #B30000;
    border:1px dashed #f5aca6;
}
.successMessage {
    background: url('/limo/css/images/success-21a3746384a2373843ad757bb0e22506.png') no-repeat 10px 50%;
    color : #146061;
    border:1px dashed #a6ca8a;
}

.modal-dialog-center {
    margin-top: 25%;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
}

.close{
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.required .form-label:after {
	content:" (required)";
	color: #a20000;
	font-style: italic;
	font-size: .72em;
	font-weight: bold;
}

.required:after {
  		content:" *";
		color: red;
}

.req:after {
    content:" (required)";
	color: #a20000;
	font-style: italic;
	font-size: .72em;
	font-weight: bold;
  }


.error-msg {
	  			color: red;
	  			font-size: medium;
		}

 .nav-link .fs-6 {
        /* Adjust the margin-right value as needed */
        margin-right: 8px;
    }


label.col-form-label.required:after, label.form-label.required:after {
	content: " *";
	font-style: italic;
	font-weight: bold;
	font-size: 0.75em;
	color: #dc3545 !important;
}

.popover-header {
	background-color: #e7ecfe !important;
}

#wrapper {
  position: fixed;
  top: 0; left: 0; z-index: 9999;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s;
  visibility: hidden;
  opacity: 0;
}

#spinner {
  position: absolute;
  top: 50%; left: 50%; bottom: 50%; right: 50%;
  margin-top: -4rem; margin-left: -4rem; margin-bottom: -4rem; margin-right: -4rem;
  width: 8rem; height: 8rem;
  color:aliceblue;
}

#wrapper.show {
  visibility: visible;
  opacity: 1;
}


/* WEB STANDARDS CSS */

label.col-form-label.required:after, label.form-label.required:after {
	content: " *";
	font-style: italic;
	font-weight: bold;
	font-size: 0.75em;
	color: #dc3545 !important;
}

/* a {
	color: darkblue !important;

} */

.btn-close {
	width: 0.4em;
	height: 0.4em;
}

.bg-county {
	background-color: #e7ecfe !important;
	color: #000080;
}


/* =========================================
   Accessible driver portal action colors
   ========================================= */

.app-btn-primary {
	background-color: var(--app-action-primary);
	border-color: var(--app-action-primary);
	color: #ffffff;
}

.app-btn-primary:hover,
.app-btn-primary:active {
	background-color: var(--app-action-primary-hover);
	border-color: var(--app-action-primary-hover);
	color: #ffffff;
}

.app-btn-outline-secondary {
	background-color: transparent;
	border-color: var(--app-action-secondary);
	color: var(--app-action-secondary);
}

.app-btn-outline-secondary:hover,
.app-btn-outline-secondary:active {
	background-color: var(--app-action-secondary);
	border-color: var(--app-action-secondary);
	color: #ffffff;
}

.app-btn-outline-danger {
	background-color: transparent;
	border-color: var(--app-action-danger);
	color: var(--app-action-danger);
}

.app-btn-outline-danger:hover,
.app-btn-outline-danger:active {
	background-color: var(--app-action-danger);
	border-color: var(--app-action-danger);
	color: #ffffff;
}

.app-content-link {
	color: var(--app-link-color);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

.app-content-link:hover {
	color: var(--app-link-hover);
}

.app-text-danger {
	color: var(--app-action-danger) !important;
}

.app-btn-primary:focus-visible,
.app-btn-outline-secondary:focus-visible,
.app-btn-outline-danger:focus-visible,
.app-content-link:focus-visible {
	outline: 3px solid var(--app-focus-color);
	outline-offset: 2px;
	box-shadow: none;
}

.accordion-button:not(.collapsed) {
	color: #000080 !important;
	background-color: #e7ecfe !important;
}

.breadcrumb {
	margin-bottom: 0rem !important;
}

 .breadcrumb-item a {
	 color: #495057;
 }

 .breadcrumb-item a:focus {
	 color: #212529;
 }

.mb-5rem {
	margin-bottom: 5rem !important;
}

/* =========================================
   App Shell Layout
   Keeps header/content/footer consistent across the whole app.
   Do not use card height to push the footer down.
   ========================================= */

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
}

#mainContainer {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#mainContainer > .container-fluid {
	flex: 1 0 auto;
}

#page-footer {
	margin-top: auto;
}

/*  footer auto adjusting */


/* =========================================
   App Masthead / Header
   Applies globally across login, dashboard,
   renewal, payment, and admin pages.
   ========================================= */

.app-masthead {
	flex-shrink: 0;
	background: #f4f6f7;
}

.app-masthead-bar {
	min-height: 78px;
	display: grid;
	grid-template-columns: 231px minmax(0, 1fr) 231px;
	align-items: center;
	border-bottom: 4px solid #ffc107;
	padding: 0 0.25rem;
}

.app-masthead-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
}

.app-masthead-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 231px;
	max-height: 58px;
}

.app-masthead-title-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	text-align: center;
}

.app-masthead-title {
	margin: 0;
	color: #275a3d;
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
}

.app-masthead-spacer {
	width: 100%;
}

/* Medium screens */
@media (max-width: 991.98px) {
	.app-masthead-bar {
		grid-template-columns: 180px minmax(0, 1fr) 180px;
		min-height: 72px;
	}

	.app-masthead-logo {
		max-width: 180px;
		max-height: 52px;
	}

	.app-masthead-title {
		font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	}
}

/* Tablet and mobile */
@media (max-width: 767.98px) {
	.app-masthead-bar {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 0.35rem;
		min-height: auto;
		padding: 0.75rem 0.75rem 0.85rem;
	}

	.app-masthead-logo-wrap {
		justify-content: center;
	}

	.app-masthead-logo {
		max-width: 175px;
		max-height: 48px;
	}

	.app-masthead-title {
		font-size: 1.15rem;
		line-height: 1.25;
		max-width: 100%;
	}

	.app-masthead-spacer {
		display: none;
	}
}

/* Very small phones */
@media (max-width: 420px) {
	.app-masthead-logo {
		max-width: 155px;
		max-height: 44px;
	}

	.app-masthead-title {
		font-size: 1rem;
	}
}



/* Header Styling */

.nav-pills .nav-link:hover {
	background-color: #c6d2fd;
	color: #890000 !important;
}

.nav-pills .nav-link.active {
	background-color: #c6d2fd;
	color: #890000 !important;
}

.nav-link {
	display: block;
	padding: 0.1rem;
	color: #000 !important;
}

.nav-item .disabled:not(.active) {
	color: gray !important;
}

li.breadcrumb-item>a:hover {
	background-color: #ffc107 !important;
	color: #000 !important;
}

.login.card {
	border-color: #d5dde8;
	box-shadow: 0 8px 20px rgba(23, 54, 83, 0.09);
	border-radius: 0.875rem;
}

.bcrumb {
	flex-flow: row wrap;
}

.w-65 {
	width: 65rem;
}

.rightnav {
	--bs-breadcrumb-divider: '|';
}

.popover-header {
	background-color: #e7ecfe !important;
}

textarea {
	height: auto;
	overflow-y: hidden;
	box-sizing: border-box;
	resize: none !important;
}

.filters {
	word-break: break-all;
}


#selectlarge li {
    font-size: 14px;
}

.mt-4 {
	color: rgb(39, 90, 61);
}

.pageHeader {
	color: #775540;
}


 .submenuIcon {
	 display:none
 }

 @media (max-width: 768px) {
	 #logo{
		width: 100px; /* Set the desired width */
	 }

	.submenuIcon {
		display: inline;
	}

	#title{
		 font-size: small !important;
	}

	.mt-4 {
    	margin-top: 0.81rem!important;
	}

	.rightnav {
		font-size: xx-small !important;
	}

	.breadcrumb{
		font-size: xx-small !important;
		--bs-breadcrumb-item-padding-x: 0.2rem !important;
	}
}

 #Left-Nav div ui {
	border: solid #ffffff;
	border-width: 0.1em;
	width: auto;
}

#Left-Nav {
	padding: 0 !important;
}

#menu {
	width: 100%;
}
#menu li {
   /*  background-color: #e7ecfe;
    border: solid #ffffff;
	border-width: 0.15em; */
	padding-left: .6em;
}


.meIt {
	background-color: #e7ecfe;
	border-width: 0.15em;
}

.emptyPanel {
	min-height: 20em;
}

#cssBody {
	padding: 3rem ;
}

.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    vertical-align: -.150em !important;
}

.table thead {
--bs-table-bg: #e7ecfe !important;
}


/* =========================================
   Driver Renewal Login Page
   ========================================= */

:root {
    --renewal-navy: #173653;
    --renewal-blue: #245a9a;
    --renewal-blue-dark: #1f4e86;
    --renewal-gold: #d6a02f;
    --renewal-gold-soft: #fffaf0;
    --renewal-border: #d5dde8;
    --renewal-page-bg: #f4f7fa;
    --renewal-text: #1f2937;
    --renewal-muted: #4b5563;
}

/* Login page layout cleanup only.
   This does not change dashboard, payment, admin, or renewal pages. */
body:has(.login-public-page) {
    background: var(--renewal-page-bg);
    overflow-x: hidden;
}

body:has(.login-public-page) #Left-Nav,
body:has(.login-public-page) #Breadcrumbs,
body:has(.login-public-page) #Right-Nav,
body:has(.login-public-page) #Message,
body:has(.login-public-page) #sidemenuopenbtn {
    display: none !important;
}

body:has(.login-public-page) .bcrumb {
    display: none !important;
}

body:has(.login-public-page) .row.flex-nowrap {
    display: block !important;
}

body:has(.login-public-page) .col.w-75 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

body:has(.login-public-page) .container-fluid.mb-5rem {
    margin-bottom: 0 !important;
}

body:has(.login-public-page) #maincontent,
body:has(.login-public-page) #page-content,
body:has(.login-public-page) #rightContent {
    width: 100%;
}

body:has(.login-public-page) .renewal-login-card-body {
    min-height: auto !important;
}

.renewal-login-shell {
    width: min(100% - 2rem, 520px);
    margin: 1.25rem auto 1.5rem auto;
}

.renewal-top-notice {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: var(--renewal-gold-soft);
    border: 1px solid #ead6aa;
    border-left: 4px solid var(--renewal-gold);
    border-radius: 10px;
    color: var(--renewal-text);
}

.renewal-top-notice-icon {
    width: 2.1rem;
    height: 2.1rem;
    border: 1.5px solid var(--renewal-gold);
    border-radius: 50%;
    color: #9b6b11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.renewal-top-notice-title {
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.25;
}

.renewal-top-notice-text {
    margin-top: 0.15rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--renewal-muted);
}

.renewal-login-card {
    background: #ffffff;
    border: 1px solid var(--renewal-border);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(23, 54, 83, 0.09);
    overflow: hidden;
}

.renewal-login-card-body {
    min-height: auto !important;
    padding: 1.6rem 1.85rem 1.5rem 1.85rem !important;
}

.renewal-login-title {
    margin: 0 0 1.15rem 0;
    color: var(--renewal-navy);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: center;
}

.renewal-verification-box {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem;
    background: #fbfdff;
    border: 1px solid #d4e0ef;
    border-left: 4px solid #4d79aa;
    border-radius: 10px;
}

.renewal-verification-icon {
    width: 2rem;
    height: 2rem;
    border: 1px solid #c3d4ea;
    border-radius: 50%;
    color: var(--renewal-blue);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.renewal-verification-title {
    color: var(--renewal-navy);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.renewal-verification-text {
    margin-top: 0.15rem;
    color: var(--renewal-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.renewal-form-group {
    margin-bottom: 1rem;
}

.renewal-label {
    display: block;
    color: var(--renewal-navy);
    font-size: 0.93rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.renewal-password-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.renewal-input {
    height: 46px;
    border: 1px solid var(--renewal-border) !important;
    border-radius: 8px !important;
    color: var(--renewal-text);
    font-size: 0.98rem;
    padding: 0.6rem 0.85rem;
    box-shadow: none !important;
}

.renewal-input::placeholder {
    color: #6b7280;
    opacity: 1;
}

.renewal-input:focus {
    border-color: var(--renewal-blue) !important;
    box-shadow: 0 0 0 0.18rem rgba(36, 90, 154, 0.15) !important;
}

.renewal-password-wrap {
    position: relative;
}

.renewal-password-input {
    padding-right: 3rem;
}

.renewal-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.renewal-password-toggle i {
    font-size: 1rem;
    line-height: 1;
}

.renewal-password-toggle:hover,
.renewal-password-toggle:focus {
    background: #eef4fb;
    color: var(--renewal-blue);
    outline: 2px solid transparent;
}

.renewal-forgot-link {
    color: var(--renewal-blue);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.renewal-forgot-link:hover,
.renewal-forgot-link:focus {
    color: var(--renewal-blue-dark);
    text-decoration: underline;
}

.renewal-signin-btn-wrap {
    margin-top: 0.25rem;
}

.renewal-signin-btn {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--renewal-blue-dark);
    border-radius: 8px;
    background: var(--renewal-blue);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 5px 12px rgba(36, 90, 154, 0.16);
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.renewal-signin-btn:hover,
.renewal-signin-btn:focus {
    background: var(--renewal-blue-dark);
    color: #ffffff;
}

.renewal-signin-btn:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(36, 90, 154, 0.16);
}

.renewal-section-divider {
    margin: 1.15rem 0 0.95rem 0;
    border-top: 1px solid #dde3ec;
}

.renewal-create-account-wrap {
    text-align: center;
}

.renewal-create-title {
    margin-bottom: 0.55rem;
    color: var(--renewal-navy);
    font-size: 0.95rem;
    font-weight: 700;
}

.renewal-create-account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--renewal-blue);
    border-radius: 8px;
    background: #ffffff;
    color: var(--renewal-blue);
    font-size: 0.96rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.renewal-create-account-btn:hover,
.renewal-create-account-btn:focus {
    background: #f4f8ff;
    border-color: var(--renewal-blue-dark);
    color: var(--renewal-blue-dark);
    text-decoration: none;
}

.renewal-alert {
    margin: 0 0 1rem 0;
    border-radius: 8px;
    padding: 0.8rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.renewal-alert-error {
    background: #fff1f1;
    border: 1px solid #e2b7b7;
    color: #8f1d1d;
}

.renewal-alert-success {
    background: #eef9ef;
    border: 1px solid #b9d8bc;
    color: #1b6a2d;
}

.renewal-field-error {
    margin: 0.45rem 0 0 0;
    color: #9d0000;
    font-size: 0.9rem;
    font-weight: 700;
}

/* Tablet and mobile */
@media (max-width: 767.98px) {
    .renewal-login-shell {
        width: min(100% - 1.5rem, 520px);
        margin-top: 1rem;
        margin-bottom: 1.25rem;
    }

    .renewal-login-card-body {
        padding: 1.3rem 1.2rem 1.2rem 1.2rem !important;
    }

    .renewal-login-title {
        font-size: 1.8rem;
    }

    .renewal-top-notice,
    .renewal-verification-box {
        padding: 0.8rem;
    }
}

/* Small mobile */
@media (max-width: 420px) {
    .renewal-login-shell {
        width: calc(100% - 1rem);
    }

    .renewal-login-card-body {
        padding: 1.15rem 0.95rem 1.15rem 0.95rem !important;
    }

    .renewal-top-notice,
    .renewal-verification-box {
        gap: 0.7rem;
    }

    .renewal-top-notice-icon,
    .renewal-verification-icon {
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.9rem;
    }

    .renewal-password-label-row {
        align-items: baseline;
    }

    .renewal-forgot-link {
        font-size: 0.88rem;
    }
}


 /* =========================================
   APP CSS
   ========================================= */

 .primary-btn-wrap {
     padding: 4px 34px 0 34px;
 }

 .primary-btn {
     width: 100%;
     height: 50px;
     background: #245a9a;
     color: #ffffff;
     border: 1px solid #1f4e86;
     border-radius: 8px;
     font-size: 1rem;
     font-weight: 700;
     box-shadow: 0 5px 12px rgba(36, 90, 154, 0.16);
     transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
 }

 .primary-btn:hover,
 .primary-btn:focus {
     background: #1f4e86;
     color: #ffffff;
 }

 .primary-btn:active {
     transform: translateY(1px);
     box-shadow: 0 4px 10px rgba(36, 90, 154, 0.16);
 }

  .secondary-link {
     color: #245a9a;
     font-size: 0.98rem;
     font-weight: 700;
     text-decoration: none;
 }

 .secondary-link:hover,
 .secondary-link:focus {
     text-decoration: underline;
     color: #1f4e86;
 }

  .password-toggle {
      position: absolute;
      top: 50%;
      right: 0.65rem;
      transform: translateY(-50%);
      width: 2.1rem;
      height: 2.1rem;
      border: 0;
      border-radius: 0.375rem;
      background: transparent;
      color: #374151;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
 }
 .password-toggle i {
     font-size: 1rem;
     line-height: 1;
 }

 .password-toggle:hover,
 .password-toggle:focus {
     background: #eef4fb;
     color: var(--renewal-blue);
     outline: 2px solid transparent;
 }

  .primary-input {
     height: 46px;
     border: 1px solid #d5dde8 !important;
     border-radius: 8px !important;
     font-size: 0.98rem;
     color: #1f2937;
     box-shadow: none !important;
     padding-left: 14px;
     padding-right: 14px;
 }

 .primary-input::placeholder {
     color: #7b7f86;
     opacity: 1;
 }

  .primary-input:focus {
     border-color: #245a9a !important;
     box-shadow: 0 0 0 0.18rem rgba(36, 90, 154, 0.15) !important;
 }

 .app-alert {
     margin: 0 34px 18px 34px;
     border-radius: 6px;
     padding: 10px 12px;
     font-size: 0.92rem;
     font-weight: 600;
 }

 .app-alert-error {
     background: #fff1f1;
     border: 1px solid #e3b5b5;
     color: #8f1d1d;
 }

 .app-alert-success {
     background: #eef9ef;
     border: 1px solid #b9d8bc;
     color: #1b6a2d;
 }

 .otp-box {
     width: 45px;
     height: 65px;
     text-align: center;
     font-size: 20px;
     font-weight: bold;
     border-radius: 10px;
     transition: all 0.2s ease;
     border: 1px solid #ced4da;
 }

 .otp-box:hover {
     border-color: #0d6efd;
     transform: translateY(-2px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
 }

 .dataTables_filter {
	 margin-right: 1rem !important;
 }

 .dataTables_info {
	 font-size: 0.875em;
	 color: #6c757d;
	 font-weight: 400;
	 margin-left: 5px;
 }
 .dataTables_length {
	 margin-left: 5px;
 }

 .dataTables_paginate {
	 margin-right: 1rem !important;
 }

 /* DRIVER DASHBOARD UI */

 .driver-dashboard {
	width: 100%;
	max-width: none;
 }

 .dashboard-page-title {
     margin-bottom: 1.5rem;
 }

 .dashboard-page-title h2 {
     margin-bottom: 1rem;
     color: #14213d;
     font-weight: 800;
 }

 .dashboard-page-title p {
     margin-bottom: 0;
     font-size: 1.1rem;
     color: #1f2937;
 }

 .dashboard-summary-card,
 .dashboard-panel,
 .dashboard-notice-card {
     border: 1px solid #d9dee8;
     border-radius: 10px;
     box-shadow: 0 4px 14px rgba(20, 33, 61, 0.10);
 }

 .dashboard-summary-card .card-body {
     min-height: 160px;
     display: flex;
     align-items: center;
 }

 .dashboard-card-content,
 .dashboard-panel-header,
 .dashboard-notice-content {
     display: flex;
     align-items: center;
     gap: 1.5rem;
 }

 .dashboard-icon {
     width: 76px;
     height: 76px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
 }

 .dashboard-icon i {
     font-size: 2.1rem;
 }

 .dashboard-icon-green {
     background: #dff2e7;
     color: #006b3f;
 }

 .dashboard-icon-blue {
     background: #e7efff;
     color: #0b4fb3;
 }

 .dashboard-icon-gold {
     background: #fff0c6;
     color: #a46f00;
 }

 .dashboard-label {
     margin-bottom: 0.6rem;
     color: #29324a;
     font-size: 1rem;
     font-weight: 700;
     line-height: 1.35;
 }

 .dashboard-value {
     color: #006b3f;
     font-size: 1.45rem;
     font-weight: 800;
 }

 .dashboard-status-pill {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 7px 12px;
     border-radius: 7px;
     font-size: 0.95rem;
     font-weight: 800;
 }

 .dashboard-status-success {
     color: #126b2f;
     background: #dff4e6;
     border: 1px solid #bce7ca;
 }

 .dashboard-status-warning {
     color: #8a5a00;
     background: #fff4d6;
     border: 1px solid #f1d28b;
 }

 .dashboard-panel-header h3,
 .dashboard-notice-card h3 {
     margin-bottom: 0;
     color: #14213d;
     font-size: 1.25rem;
     font-weight: 800;
 }

 .dashboard-panel hr {
     margin: 1.25rem 0;
     border-color: #d9dee8;
     opacity: 1;
 }

 .dashboard-renewal-message {
     margin-bottom: 1.5rem;
     color: #273044;
     font-size: 1.05rem;
 }

 .dashboard-action-btn {
     min-height: 54px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     border-radius: 6px;
 }

 .dashboard-action-btn:disabled {
     background: #e9ecef;
     border-color: #d3d8df;
     color: #7b8494;
     cursor: not-allowed;
 }

 .dashboard-notice-card p {
     margin: 0.5rem 0 0;
     color: #4f596b;
     line-height: 1.55;
 }

 @media (max-width: 767.98px) {
     .dashboard-card-content,
     .dashboard-panel-header,
     .dashboard-notice-content {
         align-items: flex-start;
     }

     .dashboard-notice-content {
         flex-direction: column;
     }

     .dashboard-icon {
         width: 64px;
         height: 64px;
     }

     .dashboard-icon i {
         font-size: 1.8rem;
     }

     .dashboard-value {
         font-size: 1.25rem;
     }
 }

 /* =========================================
    ADMIN DASHBOARD UI
    ========================================= */
	:root {
	  --topbar-height: 56px;
	}

 body {
	 background-color: #f5f6fa;
	 font-size: 0.875rem;
 }

 /* ── Main content ── */
 .admin-dashboard {
	 width: 100%;
	 max-width: none;
 }

 /* ── Topbar ── */
 #topbar {
	 background: #fff;
	 border-bottom: 1px solid #e9ecef;
	 padding: 12px 20px;
	 z-index: 1030;
 }

 #topbar .page-title {
	 font-size: 0.95rem;
	 font-weight: 600;
	 color: #1a1a2e;
	 margin: 0;
 }

 #topbar .page-subtitle {
	 font-size: 0.75rem;
	 color: #6c757d;
	 margin: 0;
 }

 #topbar .topbar-actions {
	 margin-left: auto;
	 display: flex;
	 align-items: center;
	 gap: 8px;
 }

 /* ── Stat cards ── */
 .stat-card {
	 background: #fff;
	 border: 1px solid #e9ecef;
	 border-radius: 10px;
	 padding: 16px 18px;
 }

 .stat-card .stat-label {
	 font-size: 0.72rem;
	 font-weight: 500;
	 text-transform: uppercase;
	 letter-spacing: 0.05em;
	 color: #6c757d;
	 margin-bottom: 4px;
 }

 .stat-card .stat-value {
	 font-size: 1.75rem;
	 font-weight: 600;
	 line-height: 1;
	 margin-bottom: 4px;
 }

 .stat-warning {
	 color: #b26a00;
	 font-weight: 600;
 }

 .stat-card .stat-sub {
	 font-size: 0.72rem;
	 color: #6c757d;
 }

 /* ── Table card ── */
 .table-card {
	 background: #fff;
	 border: 1px solid #e9ecef;
	 border-radius: 10px;
	 overflow: hidden;
 }

 .table-card .table-card-header {
	 padding: 14px 18px;
	 border-bottom: 1px solid #e9ecef;
	 display: flex;
	 align-items: center;
	 gap: 10px;
	 flex-wrap: wrap;
 }

 .table-card .table {
	 margin-bottom: 0;
 }

 .table-card .table thead th {
	 font-size: 0.7rem;
	 font-weight: 600;
	 text-transform: uppercase;
	 letter-spacing: 0.06em;
	 color: #495057;
	 border-bottom-width: 1px;
	 background: #f8f9fa;
	 padding: 10px 14px;
	 white-space: nowrap;
 }

 .table-card .table tbody td {
	 padding: 11px 14px;
	 vertical-align: middle;
	 font-size: 0.82rem;
	 color: #343a40;
	 border-bottom: 1px solid #f0f2f5;
 }

 .table-card .table tbody tr:last-child td {
	 border-bottom: none;
 }

 .table-card .table tbody tr:hover {
	 background-color: #f8f9fb;
	 cursor: pointer;
 }

 .table-card .table tbody tr.table-row-selected {
	 background-color: #eaf2ff;
 }

 /* ── Status badges ── */
 .badge-pending      { background-color: #fff3cd; color: #856404; }
 .badge-incomplete    { background-color: #fde8e8; color: #842029; }
 .badge-approved     { background-color: #d1e7dd; color: #0a3622; }
 .badge-denied       { background-color: #f8d7da; color: #58151c; }

 /* ── Pagination ── */
 .table-footer {
	 padding: 10px 18px;
	 border-top: 1px solid #e9ecef;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 background: #fff;
 }

 /* ── Filter tab pills ── */
 .filter-tabs .nav-link {
	 font-size: 0.78rem;
	 padding: 4px 12px;
	 border-radius: 20px;
	 color: #6c757d;
	 border: 1px solid transparent;
 }

 .filter-tabs .nav-link.active {
	 background-color: #e7f0ff;
	 color: #0d6efd;
	 border-color: #b6d4fe;
 }

 /* ── App ID link ── */
 .app-id-link {
	 color: #0d6efd;
	 text-decoration: none;
	 font-weight: 500;
 }

 .app-id-link:hover { text-decoration: underline; }

 /* =========================================
   Admin Application Details/Edit User Page
   ========================================= */

 body { background-color: #f5f6fa; font-size: 0.875rem; }

 /* ── Cards ── */
 .detail-card {
	 background: #fff; border: 1px solid #e9ecef; border-radius: 10px;
	 margin-bottom: 16px;
 }

 .detail-card:last-child { margin-bottom: 0; }
 .detail-card .card-head {
	 padding: 13px 18px; border-bottom: 1px solid #f0f2f5;
	 display: flex; align-items: center; gap: 8px;
 }
 .detail-card .card-head .card-title {
	 font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
	 letter-spacing: 0.06em; color: #495057; margin: 0;
 }
 .detail-card .card-body-pad { padding: 18px; min-width: 0; max-width: 100%; }

 /* ── Fields ── */
 .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; width: 100%; max-width: 100%; min-width: 0; }
 .field-item { min-width: 0; overflow: hidden; }
 .field-item .field-label {
	 font-size: 0.7rem; font-weight: 500; text-transform: uppercase;
	 letter-spacing: 0.05em; color: #6c757d; margin-bottom: 2px; min-width: 0;
	 max-width: 100%;
	 overflow-wrap: anywhere;
	 word-break: break-word;
	 white-space: normal;
 }
 .field-item .field-value { font-size: 0.85rem; color: #212529; line-height: 1.5; min-width: 0;
	 max-width: 100%;
	 overflow-wrap: anywhere;
	 word-break: break-word;
	 white-space: normal;}
 .field-item.span-2 { grid-column: span 2; }

 /* ── Status badges ── */
 .badge-pending     { background-color: #fff3cd; color: #856404; }
 .badge-incomplete    { background-color: #fde8e8; color: #842029; }
 .badge-approved    { background-color: #d1e7dd; color: #0a3622; }
 .badge-denied      { background-color: #f8d7da; color: #58151c; }

 /* ── Attachments ── */
 .attachment-item {
	 display: flex; align-items: center; gap: 10px;
	 padding: 10px 12px; border: 1px solid #e9ecef; border-radius: 8px;
	 transition: border-color 0.15s, background 0.15s;
 }
 .attachment-item:hover { border-color: #b6d4fe; background: #f8faff; }
 .attachment-icon {
	 width: 36px; height: 36px; border-radius: 8px;
	 display: flex; align-items: center; justify-content: center;
	 font-size: 1.1rem; flex-shrink: 0;
 }
 .attachment-icon.pdf   { background: #fde8e8; color: #c0392b; }
 .attachment-icon.img   { background: #fff3cd; color: #856404; }
 .attachment-icon.doc   { background: #d1e7dd; color: #0a3622; }
 .attachment-icon.other { background: #e9ecef; color: #495057; }
 .attachment-info { flex: 1; min-width: 0; }
 .attachment-name { font-size: 0.82rem; font-weight: 500; color: #212529; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .attachment-meta { font-size: 0.7rem; color: #6c757d; margin-top: 1px; }
 .attachment-actions { display: flex; gap: 6px; flex-shrink: 0; }

 /* ── Timeline ── */
 .timeline { padding: 0; margin: 0; list-style: none; }
 .timeline-item { display: flex; gap: 12px; padding-bottom: 16px; }
 .timeline-item:last-child { padding-bottom: 0; }
 .timeline-marker { display: flex; flex-direction: column; align-items: center; min-width: 14px; }
 .timeline-marker .dot {
	 width: 10px; height: 10px; border-radius: 50%; border: 2px solid;
	 margin-top: 3px; flex-shrink: 0; background: #fff;
 }
 .timeline-marker .line { width: 1px; flex: 1; background: #dee2e6; margin-top: 3px; min-height: 20px; }
 .timeline-item:last-child .line { display: none; }
 .timeline-body { flex: 1; min-width: 0; }
 .timeline-body .tl-status { font-size: 0.82rem; font-weight: 500; color: #212529; }
 .timeline-body .tl-meta   { font-size: 0.72rem; color: #6c757d; margin-top: 1px; }
 .timeline-body .tl-note   { font-size: 0.78rem; color: #495057; margin-top: 4px; font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere; }
 .timeline-scroll { max-height: 350px; overflow-y: auto; padding-right: 8px; }

 /* ── Status form ── */
 .status-form select, .status-form textarea { font-size: 0.82rem; }

 /* Questionnaire Section */
 .question-list {
	 display: flex;
	 flex-direction: column;
	 gap: 1rem;
 }

 .question-item {
	 padding-bottom: 1rem;
	 border-bottom: 1px solid #e9ecef;
 }

 .question-item:last-child {
	 border-bottom: none;
	 padding-bottom: 0;
 }

 /* Toggle Collapse Bar */
 .card-head[aria-expanded="true"] .bi-chevron-down {
	 transform: rotate(180deg);
	 transition: 0.2s;
 }

 /* =========================================
   Admin Edit User Page
   ========================================= */

 .user-hero {
	 display: flex; align-items: center; gap: 16px; padding: 20px;
	 border-bottom: 1px solid #f0f2f5;
 }
 .user-avatar-lg {
	 width: 56px; height: 56px; border-radius: 50%; background: #1a6fc4;
	 display: flex; align-items: center; justify-content: center;
	 font-size: 1.2rem; font-weight: 600; color: #fff; flex-shrink: 0;
	 letter-spacing: 0.02em;
 }
 .user-hero-name { font-size: 1rem; font-weight: 600; color: #1a1a2e; margin: 0 0 2px; }
 .user-hero-meta { font-size: 0.78rem; color: #6c757d; margin: 0; }

 .edit-section-label {
	 font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
	 letter-spacing: 0.06em; color: #6c757d; margin-bottom: 10px;
 }
 .current-email-display {
	 display: flex; align-items: center; gap: 10px;
	 padding: 10px 14px; background: #f8f9fa; border: 1px solid #e9ecef;
	 border-radius: 8px; margin-bottom: 16px;
 }
 .current-email-display .email-text {
	 font-size: 0.85rem; color: #495057;
 }
 .current-email-display .email-badge {
	 font-size: 0.68rem; padding: 2px 8px; border-radius: 20px; margin-left: auto;
 }

 /* =========================================
    Renewal Application Progress Bar
    ========================================= */

 .renewal-progress {
     margin: 0 0 2rem;
     padding: 1.5rem 1rem 1rem;
 }

 .renewal-progress-list {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 0;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .renewal-progress-item {
     position: relative;
     flex: 1 1 0;
     min-width: 0;
     text-align: center;
 }

 .renewal-progress-marker {
     position: relative;
     z-index: 2;
     width: 2.75rem;
     height: 2.75rem;
     margin: 0 auto;
     border-radius: 50%;
     border: 2px solid #c8ced8;
     background: #ffffff;
     color: #343a40;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
 }

 .renewal-progress-item.is-current .renewal-progress-marker {
     background: #0647b8;
     border-color: #0647b8;
     color: #ffffff;
     box-shadow: 0 0 0 .35rem rgba(6, 71, 184, .16);
 }

 .renewal-progress-item.is-complete .renewal-progress-marker {
     background: #0f7a3a;
     border-color: #0f7a3a;
     color: #ffffff;
 }

 .renewal-progress-label {
     margin-top: .55rem;
     color: #343a40;
     font-size: .875rem;
     line-height: 1.2;
     white-space: normal;
 }

 .renewal-progress-item.is-current .renewal-progress-label {
     color: #0647b8;
     font-weight: 700;
 }

 .renewal-progress-item.is-complete .renewal-progress-label {
     color: #0f5132;
     font-weight: 600;
 }

 .renewal-progress-line {
     position: absolute;
     top: 1.35rem;
     left: calc(50% + 2rem);
     right: calc(-50% + 2rem);
     height: 2px;
     background: #c8ced8;
     z-index: 1;
 }

 .renewal-progress-line.is-complete {
     background: #0f7a3a;
 }

 @media (max-width: 768px) {
     .renewal-progress {
         padding: 1rem 0;
     }

     .renewal-progress-list {
         flex-direction: column;
         gap: .75rem;
     }

     .renewal-progress-item {
         display: flex;
         align-items: center;
         gap: .75rem;
         text-align: left;
     }

     .renewal-progress-marker {
         width: 2.35rem;
         height: 2.35rem;
         margin: 0;
         flex: 0 0 2.35rem;
     }

     .renewal-progress-label {
         margin-top: 0;
     }

     .renewal-progress-line {
         display: none;
     }
 }
 
 /* =========================================
    Renewal Documents Upload
    ========================================= */

 .renewal-upload-page {
     width: 100%;
     max-width: none;
     padding: 0.75rem 0 1.5rem;
     color: #151923;
 }

 .upload-summary-card {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1.5rem;
     margin: 0 0 1rem;
     padding: 1rem 1.25rem;
     background: #ffffff;
     border: 1px solid #d9dee8;
     border-radius: 0.875rem;
     box-shadow: 0 2px 10px rgba(20, 33, 61, 0.06);
 }

 .upload-summary-left {
     display: flex;
     align-items: center;
     gap: 1rem;
     min-width: 0;
 }

 .upload-summary-icon {
     width: 3.25rem;
     height: 3.25rem;
     border-radius: 0.65rem;
     background: #e7f0ff;
     color: #1f66d1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
     font-size: 1.45rem;
 }

 .upload-summary-card h2 {
     margin: 0 0 0.2rem;
     color: #111827;
     font-size: 1.15rem;
     font-weight: 800;
     line-height: 1.3;
 }

 .upload-summary-card p {
     margin: 0;
     color: #4b5563;
     font-size: 0.98rem;
     line-height: 1.45;
 }

 .upload-security-note {
     display: flex;
     align-items: center;
     gap: 0.8rem;
     padding-left: 1.5rem;
     border-left: 1px solid #d6dbe5;
     color: #111827;
     text-align: right;
     flex: 0 0 auto;
 }

 .upload-security-note strong {
     display: block;
     font-size: 0.98rem;
     font-weight: 800;
     line-height: 1.25;
 }

 .upload-security-note span {
     display: block;
     max-width: 18rem;
     color: #4b5563;
     font-size: 0.9rem;
     line-height: 1.35;
 }

 .upload-security-note i {
     color: #0d6efd;
     font-size: 1.65rem;
 }

 .document-upload-card {
     overflow: hidden;
     background: #ffffff;
     border: 1px solid #d9dee8;
     border-radius: 0.875rem;
     box-shadow: 0 4px 14px rgba(20, 33, 61, 0.08);
 }

 .document-upload-row {
     position: relative;
     display: grid;
     grid-template-columns: 3.5rem minmax(16rem, 1.35fr) minmax(12rem, 0.85fr) auto minmax(10rem, auto);
     align-items: center;
     gap: 1.25rem;
     min-width: 0;
     padding: 1rem 1.25rem;
     background: #ffffff;
     border-bottom: 1px solid #e2e6ee;
 }

 .document-upload-row:last-of-type {
     border-bottom: 0;
 }

 .document-required-line {
     position: absolute;
     left: 0;
     top: 1rem;
     bottom: 1rem;
     width: 0.25rem;
     background: #f0a020;
     border-radius: 0 999px 999px 0;
 }

 .document-icon {
     width: 3rem;
     height: 3rem;
     border-radius: 0.65rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 1.15rem;
     flex: 0 0 auto;
 }

 .document-icon-gold {
     background: #fff1d9;
     color: #d98300;
 }

 .document-icon-blue {
     background: #e7f2ff;
     color: #2274d8;
 }

 .document-icon-green {
     background: #dcf6ec;
     color: #13996b;
 }

 .document-icon-purple {
     background: #eee9ff;
     color: #7466d9;
 }

 .document-icon-gray {
     background: #eeeeeb;
     color: #73736d;
 }

 .document-info,
 .document-file-state {
     min-width: 0;
 }

 .document-name {
     margin: 0;
     color: #111827;
     font-size: 1rem;
     font-weight: 800;
     line-height: 1.25;
 }

 .document-help {
     margin-top: 0.22rem;
     color: #4b5563;
     font-size: 0.92rem;
     line-height: 1.35;
 }

 .document-file-name {
     color: #343a40;
     font-size: 0.98rem;
     font-weight: 500;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .document-file-state.is-uploaded .document-file-name {
     color: #087443;
     font-weight: 800;
 }

 .document-uploaded-state {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     margin-top: 0.2rem;
     color: #087443;
     font-size: 0.92rem;
     font-weight: 800;
 }

 .document-uploaded-state i {
     font-size: 0.95rem;
 }

 .document-status {
     justify-self: end;
     border-radius: 0.55rem;
     padding: 0.35rem 0.75rem;
     font-size: 0.88rem;
     font-weight: 800;
     white-space: nowrap;
 }

 .status-required {
     background: #fff1d9;
     color: #8a5000;
 }

 .document-actions {
     justify-self: end;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     min-width: 10rem;
 }

 .document-choose-btn,
 .document-remove-btn {
     min-width: 10rem;
     min-height: 2.65rem;
     border-radius: 0.55rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 0.98rem;
     font-weight: 800;
     text-decoration: none;
 }

 .document-choose-btn {
     color: #111827;
     background: #ffffff;
     border: 1px solid #aeb4bd;
 }

 .document-choose-btn:hover,
 .document-choose-btn:focus {
     color: #0d4ea6;
     background: #f7fbff;
     border-color: #0d6efd;
     box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.14);
 }

 .document-remove-btn {
     color: #0d4ea6;
     background: #ffffff;
     border: 1px solid #8fb7ff;
 }

 .document-remove-btn:hover,
 .document-remove-btn:focus {
     color: #ffffff;
     background: #0d6efd;
     border-color: #0d6efd;
     box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.16);
 }

 .document-upload-note {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.45rem;
     padding: 0.85rem 1.25rem;
     border-top: 1px solid #e2e6ee;
     color: #4b5563;
     font-size: 0.92rem;
     line-height: 1.4;
 }

 .document-upload-note i {
     color: #184f9d;
     font-size: 1rem;
 }

 .document-note-separator {
     color: #6b7280;
 }

 .document-upload-footer {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 1rem;
     margin-top: 1.25rem;
     padding-top: 1.25rem;
     border-top: 1px solid #d9dee8;
 }

 .document-footer-left {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     flex-wrap: wrap;
 }

 .document-footer-right {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 0.45rem;
 }

 .document-secondary-btn,
 .document-continue-btn {
     min-height: 3rem;
     border-radius: 0.55rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.45rem;
     font-size: 0.98rem;
     font-weight: 800;
 }

 .document-secondary-btn {
     min-width: 8rem;
     color: #111827;
     background: #ffffff;
     border: 1px solid #aeb4bd;
 }

 .document-secondary-btn:hover,
 .document-secondary-btn:focus {
     color: #0d4ea6;
     background: #f7fbff;
     border-color: #0d6efd;
 }

 .document-continue-btn {
     min-width: 14rem;
     color: #ffffff;
     background: #0d6efd;
     border: 1px solid #0b5ed7;
 }

 .document-continue-btn:hover,
 .document-continue-btn:focus {
     color: #ffffff;
     background: #0b5ed7;
     border-color: #0a58ca;
 }

 .document-continue-btn:disabled {
     color: #7b8494;
     background: #e5e7eb;
     border-color: #d1d5db;
     box-shadow: none;
     cursor: not-allowed;
     opacity: 1;
 }

 .document-continue-help {
     color: #4b5563;
     font-size: 0.9rem;
     text-align: right;
 }

 /* Responsive upload UI */
 @media (max-width: 1199.98px) {
     .document-upload-row {
         grid-template-columns: 3.5rem minmax(14rem, 1fr) minmax(10rem, 0.75fr) auto minmax(9rem, auto);
         gap: 0.9rem;
     }

     .document-choose-btn,
     .document-remove-btn {
         min-width: 9rem;
     }
 }

 @media (max-width: 991.98px) {
     .upload-summary-card {
         align-items: flex-start;
         flex-direction: column;
     }

     .upload-security-note {
         width: 100%;
         justify-content: space-between;
         padding-left: 0;
         padding-top: 0.85rem;
         border-left: 0;
         border-top: 1px solid #d6dbe5;
         text-align: left;
     }

     .document-upload-row {
         grid-template-columns: 3.5rem minmax(0, 1fr) auto;
         grid-template-areas:
             "icon info status"
             "icon file actions";
     }

     .document-icon {
         grid-area: icon;
     }

     .document-info {
         grid-area: info;
     }

     .document-file-state {
         grid-area: file;
     }

     .document-status {
         grid-area: status;
     }

     .document-actions {
         grid-area: actions;
     }
 }

 @media (max-width: 767.98px) {
     .renewal-upload-page {
         padding: 0.5rem 0 1rem;
     }

     .upload-summary-card {
         padding: 1rem;
     }

     .document-upload-row {
         grid-template-columns: 3rem minmax(0, 1fr);
         grid-template-areas:
             "icon info"
             "icon file"
             "icon status"
             "actions actions";
         padding: 1rem;
         gap: 0.65rem 0.85rem;
     }

     .document-icon {
         width: 2.75rem;
         height: 2.75rem;
     }

     .document-status {
         justify-self: start;
     }

     .document-actions {
         width: 100%;
         justify-self: stretch;
         justify-content: stretch;
         margin-top: 0.25rem;
     }

     .document-choose-btn,
     .document-remove-btn {
         width: 100%;
     }

     .document-upload-footer {
         flex-direction: column;
     }

     .document-footer-left,
     .document-footer-right {
         width: 100%;
         align-items: stretch;
     }

     .document-footer-left {
         flex-direction: column;
     }

     .document-secondary-btn,
     .document-continue-btn {
         width: 100%;
     }

     .document-continue-help {
         text-align: center;
     }
 }
 
 /* Same page background across header, layout, and content */
 body,
 #mainContainer,
 #mainContainer > .container-fluid,
 #maincontent,
 #page-content,
 #page-header,
 .app-masthead {
     background: #f4f7fa;
 }
 
 
 
 /* =========================================
    Final Document Upload State + Button Fixes
    Put this at the very bottom of app.css
    ========================================= */

 /* File name line after upload */
 .document-file-line {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     min-width: 0;
     max-width: 100%;
 }

 /* Green check next to uploaded file name */
 .document-file-check {
     color: #087443;
     font-size: 0.9rem;
     flex: 0 0 auto;
 }

 /* Uploaded file name */
 .document-file-state.is-uploaded .document-file-name {
     color: #087443;
     font-weight: 800;
 }

 /* Uploaded badge replaces Required badge */
 .status-uploaded {
     background: #dff4e6;
     color: #087443;
 }

 /* Required badge stays gold */
 .status-required {
     background: #fff1d9;
     color: #8a5000;
 }

 /* Choose File, Remove, Back, Save & Exit */
 .document-choose-btn,
 .document-remove-btn,
 .document-secondary-btn {
     color: #111827 !important;
     background: #ffffff !important;
     border: 1px solid #aeb4bd !important;
 }

 .document-choose-btn:hover,
 .document-choose-btn:focus,
 .document-remove-btn:hover,
 .document-remove-btn:focus,
 .document-secondary-btn:hover,
 .document-secondary-btn:focus {
     color: #245a9a !important;
     background: #f7fbff !important;
     border-color: #245a9a !important;
     box-shadow: 0 0 0 0.18rem rgba(36, 90, 154, 0.14) !important;
 }

 /* Active Continue button */
 .document-continue-btn {
     color: #ffffff !important;
     background: #245a9a !important;
     border: 1px solid #1f4e86 !important;
 }

 .document-continue-btn:hover,
 .document-continue-btn:focus {
     color: #ffffff !important;
     background: #1f4e86 !important;
     border-color: #1f4e86 !important;
 }

 /* Disabled Continue button */
 .document-continue-btn:disabled {
     color: #7b8494 !important;
     background: #e5e7eb !important;
     border-color: #d1d5db !important;
     box-shadow: none !important;
     cursor: not-allowed !important;
     opacity: 1 !important;
 }