@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap);
@charset "UTF-8";/*!
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-family:var(--bs-body-font-family);font-size:1rem;font-size:var(--bs-body-font-size);font-weight:400;font-weight:var(--bs-body-font-weight);line-height:1.5;line-height:var(--bs-body-line-height);color:#212529;color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:#fff;background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;border-top:var(--bs-border-width) solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:inherit;color:var(--bs-heading-color)}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.1875em;color:#212529;color:var(--bs-highlight-color);background-color:#fff3cd;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(13,110,253,1);color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:#fff;color:var(--bs-body-bg);background-color:#212529;background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:rgba(33, 37, 41, 0.75);color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;line-height:inherit;font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button{cursor:pointer;filter:grayscale(1)}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-weight:300;line-height:1.2;font-size:calc(1.625rem + 4.5vw)}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-weight:300;line-height:1.2;font-size:calc(1.575rem + 3.9vw)}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-weight:300;line-height:1.2;font-size:calc(1.525rem + 3.3vw)}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-weight:300;line-height:1.2;font-size:calc(1.475rem + 2.7vw)}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-weight:300;line-height:1.2;font-size:calc(1.425rem + 2.1vw)}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-weight:300;line-height:1.2;font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;background-color:var(--bs-body-bg);border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.375rem;border-radius:var(--bs-border-radius);max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:rgba(33, 37, 41, 0.75);color:var(--bs-secondary-color)}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb), 0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb), 0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb), 0.075);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;color:var(--bs-table-color);color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:1px;border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(1px * 2) solid currentcolor;border-top:calc(var(--bs-border-width) * 2) solid currentcolor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:1px 0;border-width:var(--bs-border-width) 0}.table-bordered>:not(caption)>*>*{border-width:0 1px;border-width:0 var(--bs-border-width)}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-striped-columns>:not(caption)>tr>:nth-child(2n){--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-active{--bs-table-color-state:var(--bs-table-active-color);--bs-table-bg-state:var(--bs-table-active-bg)}.table-hover>tbody>tr:hover>*{--bs-table-color-state:var(--bs-table-hover-color);--bs-table-bg-state:var(--bs-table-hover-bg)}.table-primary{--bs-table-color:#000;--bs-table-bg:#cfe2ff;--bs-table-border-color:#a6b5cc;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-secondary{--bs-table-color:#000;--bs-table-bg:#e2e3e5;--bs-table-border-color:#b5b6b7;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-success{--bs-table-color:#000;--bs-table-bg:#d1e7dd;--bs-table-border-color:#a7b9b1;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-info{--bs-table-color:#000;--bs-table-bg:#cff4fc;--bs-table-border-color:#a6c3ca;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-warning{--bs-table-color:#000;--bs-table-bg:#fff3cd;--bs-table-border-color:#ccc2a4;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-danger{--bs-table-color:#000;--bs-table-bg:#f8d7da;--bs-table-border-color:#c6acae;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-light{--bs-table-color:#000;--bs-table-bg:#f8f9fa;--bs-table-border-color:#c6c7c8;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-dark{--bs-table-color:#fff;--bs-table-bg:#212529;--bs-table-border-color:#4d5154;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + 1px);padding-top:calc(.375rem + var(--bs-border-width));padding-bottom:calc(.375rem + 1px);padding-bottom:calc(.375rem + var(--bs-border-width));margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-top:calc(.5rem + var(--bs-border-width));padding-bottom:calc(.5rem + 1px);padding-bottom:calc(.5rem + var(--bs-border-width));font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-top:calc(.25rem + var(--bs-border-width));padding-bottom:calc(.25rem + 1px);padding-bottom:calc(.25rem + var(--bs-border-width));font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:rgba(33, 37, 41, 0.75);color:var(--bs-secondary-color)}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;color:var(--bs-body-color);-webkit-appearance:none;appearance:none;background-color:#fff;background-color:var(--bs-body-bg);background-clip:padding-box;border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.375rem;border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;color:var(--bs-body-color);background-color:#fff;background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1.5em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:rgba(33, 37, 41, 0.75);color:var(--bs-secondary-color);opacity:1}.form-control:disabled{background-color:#e9ecef;background-color:var(--bs-secondary-bg);opacity:1}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;color:var(--bs-body-color);background-color:#f8f9fa;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-inline-end-width:var(--bs-border-width);border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;color:var(--bs-body-color);background-color:#f8f9fa;background-color:var(--bs-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-inline-end-width:var(--bs-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#e9ecef;background-color:var(--bs-secondary-bg)}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#e9ecef;background-color:var(--bs-secondary-bg)}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:#212529;color:var(--bs-body-color);background-color:transparent;border:solid transparent;border-width:1px 0;border-width:var(--bs-border-width) 0}.form-control-plaintext:focus{outline:0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + .5rem + calc(1px * 2));min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));padding:.25rem .5rem;font-size:.875rem;border-radius:0.25rem;border-radius:var(--bs-border-radius-sm)}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + calc(1px * 2));min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));padding:.5rem 1rem;font-size:1.25rem;border-radius:0.5rem;border-radius:var(--bs-border-radius-lg)}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + .75rem + calc(1px * 2));min-height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2))}textarea.form-control-sm{min-height:calc(1.5em + .5rem + calc(1px * 2));min-height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}textarea.form-control-lg{min-height:calc(1.5em + 1rem + calc(1px * 2));min-height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-control-color{width:3rem;height:calc(1.5em + .75rem + calc(1px * 2));height:calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{border:0!important;border-radius:0.375rem;border-radius:var(--bs-border-radius)}.form-control-color::-webkit-color-swatch{border:0!important;border-radius:0.375rem;border-radius:var(--bs-border-radius)}.form-control-color.form-control-sm{height:calc(1.5em + .5rem + calc(1px * 2));height:calc(1.5em + .5rem + calc(var(--bs-border-width) * 2))}.form-control-color.form-control-lg{height:calc(1.5em + 1rem + calc(1px * 2));height:calc(1.5em + 1rem + calc(var(--bs-border-width) * 2))}.form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;color:var(--bs-body-color);-webkit-appearance:none;appearance:none;background-color:#fff;background-color:var(--bs-body-bg);background-image:var(--bs-form-select-bg-img),none;background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.375rem;border-radius:var(--bs-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:#e9ecef;background-color:var(--bs-secondary-bg)}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #212529;text-shadow:0 0 0 var(--bs-body-color)}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:0.25rem;border-radius:var(--bs-border-radius-sm)}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem;border-radius:0.5rem;border-radius:var(--bs-border-radius-lg)}[data-bs-theme=dark] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23dee2e6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e")}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-reverse{padding-right:1.5em;padding-left:0;text-align:right}.form-check-reverse .form-check-input{float:right;margin-right:-1.5em;margin-left:0}.form-check-input{--bs-form-check-bg:var(--bs-body-bg);flex-shrink:0;width:1em;height:1em;margin-top:.25em;vertical-align:top;-webkit-appearance:none;appearance:none;background-color:var(--bs-form-check-bg);background-image:var(--bs-form-check-bg-image);background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);-webkit-print-color-adjust:exact;print-color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27m6 10 3 3 6-6%27/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%272%27 fill=%27%23fff%27/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;--bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10h8%27/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:default;opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%280, 0, 0, 0.25%29%27/%3e%3c/svg%3e");width:2em;margin-left:-2.5em;background-image:var(--bs-form-switch-bg);background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2386b7fe%27/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e")}.form-switch.form-check-reverse{padding-right:2.5em;padding-left:0}.form-switch.form-check-reverse .form-check-input{margin-right:-2.5em;margin-left:0}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus){--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%28255, 255, 255, 0.25%29%27/%3e%3c/svg%3e")}.form-range{width:100%;height:1.5rem;padding:0;-webkit-appearance:none;appearance:none;background-color:transparent}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;-webkit-appearance:none;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#e9ecef;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;appearance:none;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#e9ecef;background-color:var(--bs-secondary-bg);border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:rgba(33, 37, 41, 0.75);background-color:var(--bs-secondary-color)}.form-range:disabled::-moz-range-thumb{background-color:rgba(33, 37, 41, 0.75);background-color:var(--bs-secondary-color)}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-control-plaintext,.form-floating>.form-select{height:calc(3.5rem + calc(1px * 2));height:calc(3.5rem + calc(var(--bs-border-width) * 2));min-height:calc(3.5rem + calc(1px * 2));min-height:calc(3.5rem + calc(var(--bs-border-width) * 2));line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;z-index:2;max-width:100%;height:100%;padding:1rem .75rem;overflow:hidden;color:rgba(33,37,41,.65);color:rgba(var(--bs-body-color-rgb),.65);text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:1px solid transparent;border:var(--bs-border-width) solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control,.form-floating>.form-control-plaintext{padding:1rem .75rem}.form-floating>.form-control-plaintext::placeholder,.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control-plaintext:focus,.form-floating>.form-control-plaintext:not(:placeholder-shown),.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control-plaintext:-webkit-autofill,.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem;padding-left:.75rem}.form-floating>.form-control-plaintext~label,.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:-webkit-autofill~label{transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>textarea:focus~label::after,.form-floating>textarea:not(:placeholder-shown)~label::after{position:absolute;inset:1rem 0.375rem;z-index:-1;height:1.5em;content:"";background-color:#fff;background-color:var(--bs-body-bg);border-radius:0.375rem;border-radius:var(--bs-border-radius)}.form-floating>textarea:disabled~label::after{background-color:#e9ecef;background-color:var(--bs-secondary-bg)}.form-floating>.form-control-plaintext~label{border-width:1px 0;border-width:var(--bs-border-width) 0}.form-floating>.form-control:disabled~label,.form-floating>:disabled~label{color:#6c757d}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-floating,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-floating:focus-within,.input-group>.form-select:focus{z-index:5}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:5}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;color:var(--bs-body-color);text-align:center;white-space:nowrap;background-color:#f8f9fa;background-color:var(--bs-tertiary-bg);border:1px solid #dee2e6;border:var(--bs-border-width) solid var(--bs-border-color);border-radius:0.375rem;border-radius:var(--bs-border-radius)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:0.5rem;border-radius:var(--bs-border-radius-lg)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:0.25rem;border-radius:var(--bs-border-radius-sm)}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-control,.input-group.has-validation>.form-floating:nth-last-child(n+3)>.form-select,.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:calc(-1 * 1px);margin-left:calc(-1 * var(--bs-border-width));border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.form-floating:not(:first-child)>.form-control,.input-group>.form-floating:not(:first-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#198754;color:var(--bs-form-valid-color)}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:#198754;background-color:var(--bs-success);border-radius:0.375rem;border-radius:var(--bs-border-radius)}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#198754;border-color:var(--bs-form-valid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23198754%27 d=%27M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1%27/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#198754;border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(25,135,84,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#198754;border-color:var(--bs-form-valid-border-color)}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23198754%27 d=%27M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1%27/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#198754;border-color:var(--bs-form-valid-border-color);box-shadow:0 0 0 .25rem rgba(25,135,84,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-control-color.is-valid,.was-validated .form-control-color:valid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#198754;border-color:var(--bs-form-valid-border-color)}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#198754;background-color:var(--bs-form-valid-color)}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-success-rgb),.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#198754;color:var(--bs-form-valid-color)}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-valid,.input-group>.form-floating:not(:focus-within).is-valid,.input-group>.form-select:not(:focus).is-valid,.was-validated .input-group>.form-control:not(:focus):valid,.was-validated .input-group>.form-floating:not(:focus-within):valid,.was-validated .input-group>.form-select:not(:focus):valid{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#dc3545;color:var(--bs-form-invalid-color)}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:#dc3545;background-color:var(--bs-danger);border-radius:0.375rem;border-radius:var(--bs-border-radius)}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color);padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(220,53,69,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color)}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{--bs-form-select-bg-icon:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e");padding-right:4.125rem;background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color);box-shadow:0 0 0 .25rem rgba(220,53,69,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-control-color.is-invalid,.was-validated .form-control-color:invalid{width:calc(3rem + calc(1.5em + .75rem))}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#dc3545;border-color:var(--bs-form-invalid-border-color)}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#dc3545;background-color:var(--bs-form-invalid-color)}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.25);box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545;color:var(--bs-form-invalid-color)}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group>.form-control:not(:focus).is-invalid,.input-group>.form-floating:not(:focus-within).is-invalid,.input-group>.form-select:not(:focus).is-invalid,.was-validated .input-group>.form-control:not(:focus):invalid,.was-validated .input-group>.form-floating:not(:focus-within):invalid,.was-validated .input-group>.form-select:not(:focus):invalid{z-index:4}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;--bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn-check+.btn:hover{color:var(--bs-btn-color);background-color:var(--bs-btn-bg);border-color:var(--bs-btn-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn-check:checked:focus-visible+.btn{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}.btn-secondary{--bs-btn-color:#fff;--bs-btn-bg:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5c636a;--bs-btn-hover-border-color:#565e64;--bs-btn-focus-shadow-rgb:130,138,145;--bs-btn-active-color:#fff;--bs-btn-active-bg:#565e64;--bs-btn-active-border-color:#51585e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#6c757d;--bs-btn-disabled-border-color:#6c757d}.btn-success{--bs-btn-color:#fff;--bs-btn-bg:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#157347;--bs-btn-hover-border-color:#146c43;--bs-btn-focus-shadow-rgb:60,153,110;--bs-btn-active-color:#fff;--bs-btn-active-bg:#146c43;--bs-btn-active-border-color:#13653f;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#198754;--bs-btn-disabled-border-color:#198754}.btn-info{--bs-btn-color:#000;--bs-btn-bg:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#31d2f2;--bs-btn-hover-border-color:#25cff2;--bs-btn-focus-shadow-rgb:11,172,204;--bs-btn-active-color:#000;--bs-btn-active-bg:#3dd5f3;--bs-btn-active-border-color:#25cff2;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#0dcaf0;--bs-btn-disabled-border-color:#0dcaf0}.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffca2c;--bs-btn-hover-border-color:#ffc720;--bs-btn-focus-shadow-rgb:217,164,6;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffcd39;--bs-btn-active-border-color:#ffc720;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#ffc107;--bs-btn-disabled-border-color:#ffc107}.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#bb2d3b;--bs-btn-hover-border-color:#b02a37;--bs-btn-focus-shadow-rgb:225,83,97;--bs-btn-active-color:#fff;--bs-btn-active-bg:#b02a37;--bs-btn-active-border-color:#a52834;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#dc3545;--bs-btn-disabled-border-color:#dc3545}.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;--bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;--bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}.btn-dark{--bs-btn-color:#fff;--bs-btn-bg:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#424649;--bs-btn-hover-border-color:#373b3e;--bs-btn-focus-shadow-rgb:66,70,73;--bs-btn-active-color:#fff;--bs-btn-active-bg:#4d5154;--bs-btn-active-border-color:#373b3e;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#212529;--bs-btn-disabled-border-color:#212529}.btn-outline-primary{--bs-btn-color:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0d6efd;--bs-btn-hover-border-color:#0d6efd;--bs-btn-focus-shadow-rgb:13,110,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0d6efd;--bs-btn-active-border-color:#0d6efd;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0d6efd;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0d6efd;--bs-gradient:none}.btn-outline-secondary{--bs-btn-color:#6c757d;--bs-btn-border-color:#6c757d;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#6c757d;--bs-btn-hover-border-color:#6c757d;--bs-btn-focus-shadow-rgb:108,117,125;--bs-btn-active-color:#fff;--bs-btn-active-bg:#6c757d;--bs-btn-active-border-color:#6c757d;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#6c757d;--bs-gradient:none}.btn-outline-success{--bs-btn-color:#198754;--bs-btn-border-color:#198754;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#198754;--bs-btn-hover-border-color:#198754;--bs-btn-focus-shadow-rgb:25,135,84;--bs-btn-active-color:#fff;--bs-btn-active-bg:#198754;--bs-btn-active-border-color:#198754;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#198754;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#198754;--bs-gradient:none}.btn-outline-info{--bs-btn-color:#0dcaf0;--bs-btn-border-color:#0dcaf0;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#0dcaf0;--bs-btn-hover-border-color:#0dcaf0;--bs-btn-focus-shadow-rgb:13,202,240;--bs-btn-active-color:#000;--bs-btn-active-bg:#0dcaf0;--bs-btn-active-border-color:#0dcaf0;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#0dcaf0;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#0dcaf0;--bs-gradient:none}.btn-outline-warning{--bs-btn-color:#ffc107;--bs-btn-border-color:#ffc107;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ffc107;--bs-btn-hover-border-color:#ffc107;--bs-btn-focus-shadow-rgb:255,193,7;--bs-btn-active-color:#000;--bs-btn-active-bg:#ffc107;--bs-btn-active-border-color:#ffc107;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#ffc107;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#ffc107;--bs-gradient:none}.btn-outline-danger{--bs-btn-color:#dc3545;--bs-btn-border-color:#dc3545;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#dc3545;--bs-btn-hover-border-color:#dc3545;--bs-btn-focus-shadow-rgb:220,53,69;--bs-btn-active-color:#fff;--bs-btn-active-bg:#dc3545;--bs-btn-active-border-color:#dc3545;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#dc3545;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#dc3545;--bs-gradient:none}.btn-outline-light{--bs-btn-color:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f8f9fa;--bs-btn-hover-border-color:#f8f9fa;--bs-btn-focus-shadow-rgb:248,249,250;--bs-btn-active-color:#000;--bs-btn-active-bg:#f8f9fa;--bs-btn-active-border-color:#f8f9fa;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#f8f9fa;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#f8f9fa;--bs-gradient:none}.btn-outline-dark{--bs-btn-color:#212529;--bs-btn-border-color:#212529;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#212529;--bs-btn-hover-border-color:#212529;--bs-btn-focus-shadow-rgb:33,37,41;--bs-btn-active-color:#fff;--bs-btn-active-bg:#212529;--bs-btn-active-border-color:#212529;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#212529;--bs-btn-disabled-bg:transparent;--bs-btn-disabled-border-color:#212529;--bs-gradient:none}.btn-link{--bs-btn-font-weight:400;--bs-btn-color:var(--bs-link-color);--bs-btn-bg:transparent;--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bs-link-hover-color);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bs-link-hover-color);--bs-btn-active-border-color:transparent;--bs-btn-disabled-color:#6c757d;--bs-btn-disabled-border-color:transparent;--bs-btn-box-shadow:0 0 0 #000;--bs-btn-focus-shadow-rgb:49,132,253;text-decoration:underline}.btn-link:focus-visible{color:var(--bs-btn-color)}.btn-link:hover{color:var(--bs-btn-hover-color)}.btn-group-lg>.btn,.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:var(--bs-border-radius-lg)}.btn-group-sm>.btn,.btn-sm{--bs-btn-padding-y:0.25rem;--bs-btn-padding-x:0.5rem;--bs-btn-font-size:0.875rem;--bs-btn-border-radius:var(--bs-border-radius-sm)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropdown-center,.dropend,.dropstart,.dropup,.dropup-center{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:var(--bs-body-color);--bs-dropdown-bg:var(--bs-body-bg);--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:var(--bs-border-radius);--bs-dropdown-border-width:var(--bs-border-width);--bs-dropdown-inner-border-radius:calc(var(--bs-border-radius) - var(--bs-border-width));--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:var(--bs-box-shadow);--bs-dropdown-link-color:var(--bs-body-color);--bs-dropdown-link-hover-color:var(--bs-body-color);--bs-dropdown-link-hover-bg:var(--bs-tertiary-bg);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:var(--bs-tertiary-color);--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;border-radius:0;border-radius:var(--bs-dropdown-item-border-radius,0)}.dropdown-item:focus,.dropdown-item:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}.dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}.dropdown-menu-dark{--bs-dropdown-color:#dee2e6;--bs-dropdown-bg:#343a40;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color:#dee2e6;--bs-dropdown-link-hover-color:#fff;--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg:rgba(255, 255, 255, 0.15);--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-header-color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group{border-radius:0.375rem;border-radius:var(--bs-border-radius)}.btn-group>.btn-group:not(:first-child),.btn-group>:not(.btn-check:first-child)+.btn{margin-left:calc(-1 * 1px);margin-left:calc(-1 * var(--bs-border-width))}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn.dropdown-toggle-split:first-child,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:calc(-1 * 1px);margin-top:calc(-1 * var(--bs-border-width))}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:nth-child(n+3),.btn-group-vertical>:not(.btn-check)+.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:0 0;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link:focus-visible{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.nav-link.disabled,.nav-link:disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.nav-tabs{--bs-nav-tabs-border-width:var(--bs-border-width);--bs-nav-tabs-border-color:var(--bs-border-color);--bs-nav-tabs-border-radius:var(--bs-border-radius);--bs-nav-tabs-link-hover-border-color:var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);--bs-nav-tabs-link-active-color:var(--bs-emphasis-color);--bs-nav-tabs-link-active-bg:var(--bs-body-bg);--bs-nav-tabs-link-active-border-color:var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);border-bottom:var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)}.nav-tabs .nav-link{margin-bottom:calc(-1 * var(--bs-nav-tabs-border-width));border:var(--bs-nav-tabs-border-width) solid transparent;border-top-left-radius:var(--bs-nav-tabs-border-radius);border-top-right-radius:var(--bs-nav-tabs-border-radius)}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{isolation:isolate;border-color:var(--bs-nav-tabs-link-hover-border-color)}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:var(--bs-nav-tabs-link-active-color);background-color:var(--bs-nav-tabs-link-active-bg);border-color:var(--bs-nav-tabs-link-active-border-color)}.nav-tabs .dropdown-menu{margin-top:calc(-1 * var(--bs-nav-tabs-border-width));border-top-left-radius:0;border-top-right-radius:0}.nav-pills{--bs-nav-pills-border-radius:var(--bs-border-radius);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#0d6efd}.nav-pills .nav-link{border-radius:var(--bs-nav-pills-border-radius)}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:var(--bs-nav-pills-link-active-color);background-color:var(--bs-nav-pills-link-active-bg)}.nav-underline{--bs-nav-underline-gap:1rem;--bs-nav-underline-border-width:0.125rem;--bs-nav-underline-link-active-color:var(--bs-emphasis-color);gap:var(--bs-nav-underline-gap)}.nav-underline .nav-link{padding-right:0;padding-left:0;border-bottom:var(--bs-nav-underline-border-width) solid transparent}.nav-underline .nav-link:focus,.nav-underline .nav-link:hover{border-bottom-color:currentcolor}.nav-underline .nav-link.active,.nav-underline .show>.nav-link{font-weight:700;color:var(--bs-nav-underline-link-active-color);border-bottom-color:currentcolor}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-grow:1;flex-basis:0;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb), 0.8);--bs-navbar-disabled-color:rgba(var(--bs-emphasis-color-rgb), 0.3);--bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-brand-hover-color:rgba(var(--bs-emphasis-color-rgb), 1);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%2833, 37, 41, 0.75%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb), 0.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{color:var(--bs-navbar-brand-hover-color)}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .nav-link.show{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-navbar-color)}.navbar-text a,.navbar-text a:focus,.navbar-text a:hover{color:var(--bs-navbar-active-color)}.navbar-collapse{flex-grow:1;flex-basis:100%;align-items:center}.navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:1px solid var(--bs-navbar-toggler-border-color);border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:var(--bs-navbar-toggler-icon-bg);background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:75vh;max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-sm .offcanvas .offcanvas-header{display:none}.navbar-expand-sm .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-md .offcanvas .offcanvas-header{display:none}.navbar-expand-md .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-lg .offcanvas .offcanvas-header{display:none}.navbar-expand-lg .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xl .offcanvas .offcanvas-header{display:none}.navbar-expand-xl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}.navbar-expand-xxl .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand-xxl .offcanvas .offcanvas-header{display:none}.navbar-expand-xxl .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .offcanvas{position:static;z-index:auto;flex-grow:1;width:auto!important;height:auto!important;visibility:visible!important;background-color:transparent!important;border:0!important;transform:none!important;transition:none}.navbar-expand .offcanvas .offcanvas-header{display:none}.navbar-expand .offcanvas .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}.navbar-dark,.navbar[data-bs-theme=dark]{--bs-navbar-color:rgba(255, 255, 255, 0.55);--bs-navbar-hover-color:rgba(255, 255, 255, 0.75);--bs-navbar-disabled-color:rgba(255, 255, 255, 0.25);--bs-navbar-active-color:#fff;--bs-navbar-brand-color:#fff;--bs-navbar-brand-hover-color:#fff;--bs-navbar-toggler-border-color:rgba(255, 255, 255, 0.1);--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%28255, 255, 255, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e")}[data-bs-theme=dark] .navbar-toggler-icon{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%28255, 255, 255, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e")}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:#212529;color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);color:var(--bs-card-color)}.card-title{margin-bottom:var(--bs-card-title-spacer-y);color:var(--bs-card-title-color)}.card-subtitle{margin-top:calc(-.5 * var(--bs-card-title-spacer-y));margin-bottom:0;color:var(--bs-card-subtitle-color)}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:var(--bs-card-spacer-x)}.card-header{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);margin-bottom:0;color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-bottom:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-header:first-child{border-radius:var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0}.card-footer{padding:var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);color:var(--bs-card-cap-color);background-color:var(--bs-card-cap-bg);border-top:var(--bs-card-border-width) solid var(--bs-card-border-color)}.card-footer:last-child{border-radius:0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)}.card-header-tabs{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-bottom:calc(-1 * var(--bs-card-cap-padding-y));margin-left:calc(-.5 * var(--bs-card-cap-padding-x));border-bottom:0}.card-header-tabs .nav-link.active{background-color:var(--bs-card-bg);border-bottom-color:var(--bs-card-bg)}.card-header-pills{margin-right:calc(-.5 * var(--bs-card-cap-padding-x));margin-left:calc(-.5 * var(--bs-card-cap-padding-x))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--bs-card-img-overlay-padding);border-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card-img,.card-img-bottom{border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.card-group>.card{margin-bottom:var(--bs-card-group-margin)}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child)>.card-header,.card-group>.card:not(:last-child)>.card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child)>.card-footer,.card-group>.card:not(:last-child)>.card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child)>.card-header,.card-group>.card:not(:first-child)>.card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child)>.card-footer,.card-group>.card:not(:first-child)>.card-img-bottom{border-bottom-left-radius:0}}.accordion{--bs-accordion-color:var(--bs-body-color);--bs-accordion-bg:var(--bs-body-bg);--bs-accordion-transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-width:var(--bs-border-width);--bs-accordion-border-radius:var(--bs-border-radius);--bs-accordion-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-btn-color:var(--bs-body-color);--bs-accordion-btn-bg:var(--bs-accordion-bg);--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23212529%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpath d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");--bs-accordion-btn-icon-width:1.25rem;--bs-accordion-btn-icon-transform:rotate(-180deg);--bs-accordion-btn-icon-transition:transform 0.2s ease-in-out;--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27%23052c65%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpath d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");--bs-accordion-btn-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem;--bs-accordion-active-color:var(--bs-primary-text-emphasis);--bs-accordion-active-bg:var(--bs-primary-bg-subtle)}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg);border:0;border-radius:0;overflow-anchor:none;transition:var(--bs-accordion-transition)}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg);box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)}.accordion-button:not(.collapsed)::after{background-image:var(--bs-accordion-btn-active-icon);transform:var(--bs-accordion-btn-icon-transform)}.accordion-button::after{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:auto;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;outline:0;box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.accordion-header{margin-bottom:0}.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg);border:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.accordion-item:first-of-type{border-top-left-radius:var(--bs-accordion-border-radius);border-top-right-radius:var(--bs-accordion-border-radius)}.accordion-item:first-of-type>.accordion-header .accordion-button{border-top-left-radius:var(--bs-accordion-inner-border-radius);border-top-right-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed{border-bottom-right-radius:var(--bs-accordion-inner-border-radius);border-bottom-left-radius:var(--bs-accordion-inner-border-radius)}.accordion-item:last-of-type>.accordion-collapse{border-bottom-right-radius:var(--bs-accordion-border-radius);border-bottom-left-radius:var(--bs-accordion-border-radius)}.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}.accordion-flush>.accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush>.accordion-item:first-child{border-top:0}.accordion-flush>.accordion-item:last-child{border-bottom:0}.accordion-flush>.accordion-item>.accordion-collapse,.accordion-flush>.accordion-item>.accordion-header .accordion-button,.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed{border-radius:0}[data-bs-theme=dark] .accordion-button::after{--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%236ea8fe%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708%27/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%236ea8fe%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708%27/%3e%3c/svg%3e")}.breadcrumb{--bs-breadcrumb-padding-x:0;--bs-breadcrumb-padding-y:0;--bs-breadcrumb-margin-bottom:1rem;--bs-breadcrumb-bg: ;--bs-breadcrumb-border-radius: ;--bs-breadcrumb-divider-color:var(--bs-secondary-color);--bs-breadcrumb-item-padding-x:0.5rem;--bs-breadcrumb-item-active-color:var(--bs-secondary-color);display:flex;flex-wrap:wrap;padding:var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);margin-bottom:var(--bs-breadcrumb-margin-bottom);font-size:var(--bs-breadcrumb-font-size);list-style:none;background-color:var(--bs-breadcrumb-bg);border-radius:var(--bs-breadcrumb-border-radius)}.breadcrumb-item+.breadcrumb-item{padding-left:var(--bs-breadcrumb-item-padding-x)}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color);content:"/";content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:var(--bs-breadcrumb-item-active-color)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:var(--bs-body-bg);--bs-pagination-border-width:var(--bs-border-width);--bs-pagination-border-color:var(--bs-border-color);--bs-pagination-border-radius:var(--bs-border-radius);--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:var(--bs-tertiary-bg);--bs-pagination-hover-border-color:var(--bs-border-color);--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:var(--bs-secondary-bg);--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:var(--bs-secondary-color);--bs-pagination-disabled-bg:var(--bs-secondary-bg);--bs-pagination-disabled-border-color:var(--bs-border-color);display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;padding:var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);font-size:var(--bs-pagination-font-size);color:var(--bs-pagination-color);text-decoration:none;background-color:var(--bs-pagination-bg);border:var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:var(--bs-pagination-hover-color);background-color:var(--bs-pagination-hover-bg);border-color:var(--bs-pagination-hover-border-color)}.page-link:focus{z-index:3;color:var(--bs-pagination-focus-color);background-color:var(--bs-pagination-focus-bg);outline:0;box-shadow:var(--bs-pagination-focus-box-shadow)}.active>.page-link,.page-link.active{z-index:3;color:var(--bs-pagination-active-color);background-color:var(--bs-pagination-active-bg);border-color:var(--bs-pagination-active-border-color)}.disabled>.page-link,.page-link.disabled{color:var(--bs-pagination-disabled-color);pointer-events:none;background-color:var(--bs-pagination-disabled-bg);border-color:var(--bs-pagination-disabled-border-color)}.page-item:not(:first-child) .page-link{margin-left:calc(-1 * 1px);margin-left:calc(-1 * var(--bs-border-width))}.page-item:first-child .page-link{border-top-left-radius:var(--bs-pagination-border-radius);border-bottom-left-radius:var(--bs-pagination-border-radius)}.page-item:last-child .page-link{border-top-right-radius:var(--bs-pagination-border-radius);border-bottom-right-radius:var(--bs-pagination-border-radius)}.pagination-lg{--bs-pagination-padding-x:1.5rem;--bs-pagination-padding-y:0.75rem;--bs-pagination-font-size:1.25rem;--bs-pagination-border-radius:var(--bs-border-radius-lg)}.pagination-sm{--bs-pagination-padding-x:0.5rem;--bs-pagination-padding-y:0.25rem;--bs-pagination-font-size:0.875rem;--bs-pagination-border-radius:var(--bs-border-radius-sm)}.badge{--bs-badge-padding-x:0.65em;--bs-badge-padding-y:0.35em;--bs-badge-font-size:0.75em;--bs-badge-font-weight:700;--bs-badge-color:#fff;--bs-badge-border-radius:var(--bs-border-radius);display:inline-block;padding:var(--bs-badge-padding-y) var(--bs-badge-padding-x);font-size:var(--bs-badge-font-size);font-weight:var(--bs-badge-font-weight);line-height:1;color:var(--bs-badge-color);text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--bs-badge-border-radius)}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:var(--bs-border-width) solid var(--bs-alert-border-color);--bs-alert-border-radius:var(--bs-border-radius);--bs-alert-link-color:inherit;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}.alert-heading{color:inherit}.alert-link{font-weight:700;color:var(--bs-alert-link-color)}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{--bs-alert-color:var(--bs-primary-text-emphasis);--bs-alert-bg:var(--bs-primary-bg-subtle);--bs-alert-border-color:var(--bs-primary-border-subtle);--bs-alert-link-color:var(--bs-primary-text-emphasis)}.alert-secondary{--bs-alert-color:var(--bs-secondary-text-emphasis);--bs-alert-bg:var(--bs-secondary-bg-subtle);--bs-alert-border-color:var(--bs-secondary-border-subtle);--bs-alert-link-color:var(--bs-secondary-text-emphasis)}.alert-success{--bs-alert-color:var(--bs-success-text-emphasis);--bs-alert-bg:var(--bs-success-bg-subtle);--bs-alert-border-color:var(--bs-success-border-subtle);--bs-alert-link-color:var(--bs-success-text-emphasis)}.alert-info{--bs-alert-color:var(--bs-info-text-emphasis);--bs-alert-bg:var(--bs-info-bg-subtle);--bs-alert-border-color:var(--bs-info-border-subtle);--bs-alert-link-color:var(--bs-info-text-emphasis)}.alert-warning{--bs-alert-color:var(--bs-warning-text-emphasis);--bs-alert-bg:var(--bs-warning-bg-subtle);--bs-alert-border-color:var(--bs-warning-border-subtle);--bs-alert-link-color:var(--bs-warning-text-emphasis)}.alert-danger{--bs-alert-color:var(--bs-danger-text-emphasis);--bs-alert-bg:var(--bs-danger-bg-subtle);--bs-alert-border-color:var(--bs-danger-border-subtle);--bs-alert-link-color:var(--bs-danger-text-emphasis)}.alert-light{--bs-alert-color:var(--bs-light-text-emphasis);--bs-alert-bg:var(--bs-light-bg-subtle);--bs-alert-border-color:var(--bs-light-border-subtle);--bs-alert-link-color:var(--bs-light-text-emphasis)}.alert-dark{--bs-alert-color:var(--bs-dark-text-emphasis);--bs-alert-bg:var(--bs-dark-bg-subtle);--bs-alert-border-color:var(--bs-dark-border-subtle);--bs-alert-link-color:var(--bs-dark-text-emphasis)}@keyframes progress-bar-stripes{0%{background-position-x:var(--bs-progress-height)}}.progress,.progress-stacked{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:var(--bs-secondary-bg);--bs-progress-border-radius:var(--bs-border-radius);--bs-progress-box-shadow:var(--bs-box-shadow-inset);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:var(--bs-progress-bar-color);text-align:center;white-space:nowrap;background-color:var(--bs-progress-bar-bg);transition:var(--bs-progress-bar-transition)}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:var(--bs-progress-height) var(--bs-progress-height)}.progress-stacked>.progress{overflow:visible}.progress-stacked>.progress>.progress-bar{width:100%}.progress-bar-animated{animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{animation:none}}.list-group{--bs-list-group-color:var(--bs-body-color);--bs-list-group-bg:var(--bs-body-bg);--bs-list-group-border-color:var(--bs-border-color);--bs-list-group-border-width:var(--bs-border-width);--bs-list-group-border-radius:var(--bs-border-radius);--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:var(--bs-secondary-color);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-tertiary-bg);--bs-list-group-action-active-color:var(--bs-body-color);--bs-list-group-action-active-bg:var(--bs-secondary-bg);--bs-list-group-disabled-color:var(--bs-secondary-color);--bs-list-group-disabled-bg:var(--bs-body-bg);--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#0d6efd;--bs-list-group-active-border-color:#0d6efd;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>.list-group-item::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:calc(-1 * var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}.list-group-item-action{width:100%;color:var(--bs-list-group-action-color);text-align:inherit}.list-group-item-action:not(.active):focus,.list-group-item-action:not(.active):hover{z-index:1;color:var(--bs-list-group-action-hover-color);text-decoration:none;background-color:var(--bs-list-group-action-hover-bg)}.list-group-item-action:not(.active):active{color:var(--bs-list-group-action-active-color);background-color:var(--bs-list-group-action-active-bg)}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child){border-bottom-left-radius:var(--bs-list-group-border-radius);border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child){border-top-right-radius:var(--bs-list-group-border-radius);border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:var(--bs-list-group-border-width);border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:calc(-1 * var(--bs-list-group-border-width));border-left-width:var(--bs-list-group-border-width)}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 var(--bs-list-group-border-width)}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{--bs-list-group-color:var(--bs-primary-text-emphasis);--bs-list-group-bg:var(--bs-primary-bg-subtle);--bs-list-group-border-color:var(--bs-primary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-primary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-primary-border-subtle);--bs-list-group-active-color:var(--bs-primary-bg-subtle);--bs-list-group-active-bg:var(--bs-primary-text-emphasis);--bs-list-group-active-border-color:var(--bs-primary-text-emphasis)}.list-group-item-secondary{--bs-list-group-color:var(--bs-secondary-text-emphasis);--bs-list-group-bg:var(--bs-secondary-bg-subtle);--bs-list-group-border-color:var(--bs-secondary-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-secondary-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-secondary-border-subtle);--bs-list-group-active-color:var(--bs-secondary-bg-subtle);--bs-list-group-active-bg:var(--bs-secondary-text-emphasis);--bs-list-group-active-border-color:var(--bs-secondary-text-emphasis)}.list-group-item-success{--bs-list-group-color:var(--bs-success-text-emphasis);--bs-list-group-bg:var(--bs-success-bg-subtle);--bs-list-group-border-color:var(--bs-success-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-success-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-success-border-subtle);--bs-list-group-active-color:var(--bs-success-bg-subtle);--bs-list-group-active-bg:var(--bs-success-text-emphasis);--bs-list-group-active-border-color:var(--bs-success-text-emphasis)}.list-group-item-info{--bs-list-group-color:var(--bs-info-text-emphasis);--bs-list-group-bg:var(--bs-info-bg-subtle);--bs-list-group-border-color:var(--bs-info-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-info-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-info-border-subtle);--bs-list-group-active-color:var(--bs-info-bg-subtle);--bs-list-group-active-bg:var(--bs-info-text-emphasis);--bs-list-group-active-border-color:var(--bs-info-text-emphasis)}.list-group-item-warning{--bs-list-group-color:var(--bs-warning-text-emphasis);--bs-list-group-bg:var(--bs-warning-bg-subtle);--bs-list-group-border-color:var(--bs-warning-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-warning-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-warning-border-subtle);--bs-list-group-active-color:var(--bs-warning-bg-subtle);--bs-list-group-active-bg:var(--bs-warning-text-emphasis);--bs-list-group-active-border-color:var(--bs-warning-text-emphasis)}.list-group-item-danger{--bs-list-group-color:var(--bs-danger-text-emphasis);--bs-list-group-bg:var(--bs-danger-bg-subtle);--bs-list-group-border-color:var(--bs-danger-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-danger-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-danger-border-subtle);--bs-list-group-active-color:var(--bs-danger-bg-subtle);--bs-list-group-active-bg:var(--bs-danger-text-emphasis);--bs-list-group-active-border-color:var(--bs-danger-text-emphasis)}.list-group-item-light{--bs-list-group-color:var(--bs-light-text-emphasis);--bs-list-group-bg:var(--bs-light-bg-subtle);--bs-list-group-border-color:var(--bs-light-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-light-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-light-border-subtle);--bs-list-group-active-color:var(--bs-light-bg-subtle);--bs-list-group-active-bg:var(--bs-light-text-emphasis);--bs-list-group-active-border-color:var(--bs-light-text-emphasis)}.list-group-item-dark{--bs-list-group-color:var(--bs-dark-text-emphasis);--bs-list-group-bg:var(--bs-dark-bg-subtle);--bs-list-group-border-color:var(--bs-dark-border-subtle);--bs-list-group-action-hover-color:var(--bs-emphasis-color);--bs-list-group-action-hover-bg:var(--bs-dark-border-subtle);--bs-list-group-action-active-color:var(--bs-emphasis-color);--bs-list-group-action-active-bg:var(--bs-dark-border-subtle);--bs-list-group-active-color:var(--bs-dark-bg-subtle);--bs-list-group-active-bg:var(--bs-dark-text-emphasis);--bs-list-group-active-border-color:var(--bs-dark-text-emphasis)}.btn-close{--bs-btn-close-color:#000;--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23000%27%3e%3cpath d=%27M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414%27/%3e%3c/svg%3e");--bs-btn-close-opacity:0.5;--bs-btn-close-hover-opacity:0.75;--bs-btn-close-focus-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-btn-close-focus-opacity:1;--bs-btn-close-disabled-opacity:0.25;box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:var(--bs-btn-close-color);background:transparent var(--bs-btn-close-bg) center/1em auto no-repeat;filter: ;filter:var(--bs-btn-close-filter);border:0;border-radius:.375rem;opacity:var(--bs-btn-close-opacity)}.btn-close:hover{color:var(--bs-btn-close-color);text-decoration:none;opacity:var(--bs-btn-close-hover-opacity)}.btn-close:focus{outline:0;box-shadow:var(--bs-btn-close-focus-shadow);opacity:var(--bs-btn-close-focus-opacity)}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:var(--bs-btn-close-disabled-opacity)}.btn-close-white{--bs-btn-close-filter:invert(1) grayscale(100%) brightness(200%)}:root,[data-bs-theme=light]{--bs-btn-close-filter: }[data-bs-theme=dark]{--bs-btn-close-filter:invert(1) grayscale(100%) brightness(200%)}.toast{--bs-toast-zindex:1090;--bs-toast-padding-x:0.75rem;--bs-toast-padding-y:0.5rem;--bs-toast-spacing:1.5rem;--bs-toast-max-width:350px;--bs-toast-font-size:0.875rem;--bs-toast-color: ;--bs-toast-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-border-width:var(--bs-border-width);--bs-toast-border-color:var(--bs-border-color-translucent);--bs-toast-border-radius:var(--bs-border-radius);--bs-toast-box-shadow:var(--bs-box-shadow);--bs-toast-header-color:var(--bs-secondary-color);--bs-toast-header-bg:rgba(var(--bs-body-bg-rgb), 0.85);--bs-toast-header-border-color:var(--bs-border-color-translucent);width:var(--bs-toast-max-width);max-width:100%;font-size:var(--bs-toast-font-size);color:var(--bs-toast-color);pointer-events:auto;background-color:var(--bs-toast-bg);background-clip:padding-box;border:var(--bs-toast-border-width) solid var(--bs-toast-border-color);box-shadow:var(--bs-toast-box-shadow);border-radius:var(--bs-toast-border-radius)}.toast.showing{opacity:0}.toast:not(.show){display:none}.toast-container{--bs-toast-zindex:1090;position:absolute;z-index:var(--bs-toast-zindex);width:-webkit-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:var(--bs-toast-spacing)}.toast-header{display:flex;align-items:center;padding:var(--bs-toast-padding-y) var(--bs-toast-padding-x);color:var(--bs-toast-header-color);background-color:var(--bs-toast-header-bg);background-clip:padding-box;border-bottom:var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);border-top-left-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));border-top-right-radius:calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width))}.toast-header .btn-close{margin-right:calc(-.5 * var(--bs-toast-padding-x));margin-left:var(--bs-toast-padding-x)}.toast-body{padding:var(--bs-toast-padding-x);word-wrap:break-word}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color:var(--bs-body-color);--bs-modal-bg:var(--bs-body-bg);--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:var(--bs-border-width);--bs-modal-border-radius:var(--bs-border-radius-lg);--bs-modal-box-shadow:var(--bs-box-shadow-sm);--bs-modal-inner-border-radius:calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:var(--bs-border-width);--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:var(--bs-border-width);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transform:translate(0,-50px);transition:transform .3s ease-out}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - var(--bs-modal-margin) * 2)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin) * 2)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);border-radius:var(--bs-modal-border-radius);outline:0}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.modal-header{display:flex;flex-shrink:0;align-items:center;padding:var(--bs-modal-header-padding);border-bottom:var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);border-top-left-radius:var(--bs-modal-inner-border-radius);border-top-right-radius:var(--bs-modal-inner-border-radius)}.modal-header .btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);margin-top:calc(-.5 * var(--bs-modal-header-padding-y));margin-right:calc(-.5 * var(--bs-modal-header-padding-x));margin-bottom:calc(-.5 * var(--bs-modal-header-padding-y));margin-left:auto}.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);background-color:var(--bs-modal-footer-bg);border-top:var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);border-bottom-right-radius:var(--bs-modal-inner-border-radius);border-bottom-left-radius:var(--bs-modal-inner-border-radius)}.modal-footer>*{margin:calc(var(--bs-modal-footer-gap) * .5)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:var(--bs-box-shadow)}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}.modal-sm{--bs-modal-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{--bs-modal-width:800px}}@media (min-width:1200px){.modal-xl{--bs-modal-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-footer,.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-footer,.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-footer,.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-footer,.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-footer,.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-max-width:200px;--bs-tooltip-padding-x:0.5rem;--bs-tooltip-padding-y:0.25rem;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-color:var(--bs-body-bg);--bs-tooltip-bg:var(--bs-emphasis-color);--bs-tooltip-border-radius:var(--bs-border-radius);--bs-tooltip-opacity:0.9;--bs-tooltip-arrow-width:0.8rem;--bs-tooltip-arrow-height:0.4rem;z-index:var(--bs-tooltip-zindex);display:block;margin:var(--bs-tooltip-margin);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-top-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;border-right-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:calc(-1 * var(--bs-tooltip-arrow-height))}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-bottom-color:var(--bs-tooltip-bg)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:calc(-1 * var(--bs-tooltip-arrow-height));width:var(--bs-tooltip-arrow-height);height:var(--bs-tooltip-arrow-width)}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);border-left-color:var(--bs-tooltip-bg)}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.popover{--bs-popover-zindex:1070;--bs-popover-max-width:276px;--bs-popover-font-size:0.875rem;--bs-popover-bg:var(--bs-body-bg);--bs-popover-border-width:var(--bs-border-width);--bs-popover-border-color:var(--bs-border-color-translucent);--bs-popover-border-radius:var(--bs-border-radius-lg);--bs-popover-inner-border-radius:calc(var(--bs-border-radius-lg) - var(--bs-border-width));--bs-popover-box-shadow:var(--bs-box-shadow);--bs-popover-header-padding-x:1rem;--bs-popover-header-padding-y:0.5rem;--bs-popover-header-font-size:1rem;--bs-popover-header-color:inherit;--bs-popover-header-bg:var(--bs-secondary-bg);--bs-popover-body-padding-x:1rem;--bs-popover-body-padding-y:1rem;--bs-popover-body-color:var(--bs-body-color);--bs-popover-arrow-width:1rem;--bs-popover-arrow-height:0.5rem;--bs-popover-arrow-border:var(--bs-popover-border-color);z-index:var(--bs-popover-zindex);display:block;max-width:var(--bs-popover-max-width);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-popover-font-size);word-wrap:break-word;background-color:var(--bs-popover-bg);background-clip:padding-box;border:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-radius:var(--bs-popover-border-radius)}.popover .popover-arrow{display:block;width:var(--bs-popover-arrow-width);height:var(--bs-popover-arrow-height)}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::after,.bs-popover-top>.popover-arrow::before{border-width:var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-top-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:var(--bs-popover-border-width);border-top-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::after,.bs-popover-end>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-right-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:var(--bs-popover-border-width);border-right-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::before{border-width:0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-bottom-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:var(--bs-popover-border-width);border-bottom-color:var(--bs-popover-bg)}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:var(--bs-popover-arrow-width);margin-left:calc(-.5 * var(--bs-popover-arrow-width));content:"";border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-header-bg)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));width:var(--bs-popover-arrow-height);height:var(--bs-popover-arrow-width)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::after,.bs-popover-start>.popover-arrow::before{border-width:calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-left-color:var(--bs-popover-arrow-border)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:var(--bs-popover-border-width);border-left-color:var(--bs-popover-bg)}.popover-header{padding:var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);margin-bottom:0;font-size:var(--bs-popover-header-font-size);color:var(--bs-popover-header-color);background-color:var(--bs-popover-header-bg);border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-top-left-radius:var(--bs-popover-inner-border-radius);border-top-right-radius:var(--bs-popover-inner-border-radius)}.popover-header:empty{display:none}.popover-body{padding:var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);color:var(--bs-popover-body-color)}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;filter: ;filter:var(--bs-carousel-control-icon-filter);border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0%27/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708%27/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-color:var(--bs-carousel-indicator-active-bg);background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;color:var(--bs-carousel-caption-color);text-align:center}.carousel-dark{--bs-carousel-indicator-active-bg:#000;--bs-carousel-caption-color:#000;--bs-carousel-control-icon-filter:invert(1) grayscale(100)}:root,[data-bs-theme=light]{--bs-carousel-indicator-active-bg:#fff;--bs-carousel-caption-color:#fff;--bs-carousel-control-icon-filter: }[data-bs-theme=dark]{--bs-carousel-indicator-active-bg:#000;--bs-carousel-caption-color:#000;--bs-carousel-control-icon-filter:invert(1) grayscale(100)}.spinner-border,.spinner-grow{display:inline-block;flex-shrink:0;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.offcanvas,.offcanvas-lg,.offcanvas-md,.offcanvas-sm,.offcanvas-xl,.offcanvas-xxl{--bs-offcanvas-zindex:1045;--bs-offcanvas-width:400px;--bs-offcanvas-height:30vh;--bs-offcanvas-padding-x:1rem;--bs-offcanvas-padding-y:1rem;--bs-offcanvas-color:var(--bs-body-color);--bs-offcanvas-bg:var(--bs-body-bg);--bs-offcanvas-border-width:var(--bs-border-width);--bs-offcanvas-border-color:var(--bs-border-color-translucent);--bs-offcanvas-box-shadow:var(--bs-box-shadow-sm);--bs-offcanvas-transition:transform 0.3s ease-in-out;--bs-offcanvas-title-line-height:1.5}@media (max-width:575.98px){.offcanvas-sm{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:575.98px) and (prefers-reduced-motion:reduce){.offcanvas-sm{transition:none}}@media (max-width:575.98px){.offcanvas-sm.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-sm.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-sm.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-sm.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-sm.show:not(.hiding),.offcanvas-sm.showing{transform:none}.offcanvas-sm.hiding,.offcanvas-sm.show,.offcanvas-sm.showing{visibility:visible}}@media (min-width:576px){.offcanvas-sm{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-sm .offcanvas-header{display:none}.offcanvas-sm .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:767.98px){.offcanvas-md{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:767.98px) and (prefers-reduced-motion:reduce){.offcanvas-md{transition:none}}@media (max-width:767.98px){.offcanvas-md.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-md.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-md.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-md.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-md.show:not(.hiding),.offcanvas-md.showing{transform:none}.offcanvas-md.hiding,.offcanvas-md.show,.offcanvas-md.showing{visibility:visible}}@media (min-width:768px){.offcanvas-md{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-md .offcanvas-header{display:none}.offcanvas-md .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:991.98px){.offcanvas-lg{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:991.98px) and (prefers-reduced-motion:reduce){.offcanvas-lg{transition:none}}@media (max-width:991.98px){.offcanvas-lg.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-lg.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-lg.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-lg.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-lg.show:not(.hiding),.offcanvas-lg.showing{transform:none}.offcanvas-lg.hiding,.offcanvas-lg.show,.offcanvas-lg.showing{visibility:visible}}@media (min-width:992px){.offcanvas-lg{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-lg .offcanvas-header{display:none}.offcanvas-lg .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1199.98px){.offcanvas-xl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1199.98px) and (prefers-reduced-motion:reduce){.offcanvas-xl{transition:none}}@media (max-width:1199.98px){.offcanvas-xl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xl.show:not(.hiding),.offcanvas-xl.showing{transform:none}.offcanvas-xl.hiding,.offcanvas-xl.show,.offcanvas-xl.showing{visibility:visible}}@media (min-width:1200px){.offcanvas-xl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xl .offcanvas-header{display:none}.offcanvas-xl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}@media (max-width:1399.98px){.offcanvas-xxl{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}}@media (max-width:1399.98px) and (prefers-reduced-motion:reduce){.offcanvas-xxl{transition:none}}@media (max-width:1399.98px){.offcanvas-xxl.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas-xxl.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas-xxl.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas-xxl.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas-xxl.show:not(.hiding),.offcanvas-xxl.showing{transform:none}.offcanvas-xxl.hiding,.offcanvas-xxl.show,.offcanvas-xxl.showing{visibility:visible}}@media (min-width:1400px){.offcanvas-xxl{--bs-offcanvas-height:auto;--bs-offcanvas-border-width:0;background-color:transparent!important}.offcanvas-xxl .offcanvas-header{display:none}.offcanvas-xxl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible;background-color:transparent!important}}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:var(--bs-offcanvas-transition)}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.offcanvas-start{top:0;left:0;width:var(--bs-offcanvas-width);border-right:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(-100%)}.offcanvas.offcanvas-end{top:0;right:0;width:var(--bs-offcanvas-width);border-left:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateX(100%)}.offcanvas.offcanvas-top{top:0;right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-bottom:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(-100%)}.offcanvas.offcanvas-bottom{right:0;left:0;height:var(--bs-offcanvas-height);max-height:100%;border-top:var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);transform:translateY(100%)}.offcanvas.show:not(.hiding),.offcanvas.showing{transform:none}.offcanvas.hiding,.offcanvas.show,.offcanvas.showing{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)}.offcanvas-header .btn-close{padding:calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5);margin-top:calc(-.5 * var(--bs-offcanvas-padding-y));margin-right:calc(-.5 * var(--bs-offcanvas-padding-x));margin-bottom:calc(-.5 * var(--bs-offcanvas-padding-y));margin-left:auto}.offcanvas-title{margin-bottom:0;line-height:var(--bs-offcanvas-title-line-height)}.offcanvas-body{flex-grow:1;padding:var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);overflow-y:auto}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.2em}.placeholder-glow .placeholder{animation:placeholder-glow 2s ease-in-out infinite}@keyframes placeholder-glow{50%{opacity:.2}}.placeholder-wave{-webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.clearfix::after{display:block;clear:both;content:""}.text-bg-primary{color:#fff!important;background-color:RGBA(13,110,253,1)!important;background-color:RGBA(var(--bs-primary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-secondary{color:#fff!important;background-color:RGBA(108,117,125,1)!important;background-color:RGBA(var(--bs-secondary-rgb),var(--bs-bg-opacity,1))!important}.text-bg-success{color:#fff!important;background-color:RGBA(25,135,84,1)!important;background-color:RGBA(var(--bs-success-rgb),var(--bs-bg-opacity,1))!important}.text-bg-info{color:#000!important;background-color:RGBA(13,202,240,1)!important;background-color:RGBA(var(--bs-info-rgb),var(--bs-bg-opacity,1))!important}.text-bg-warning{color:#000!important;background-color:RGBA(255,193,7,1)!important;background-color:RGBA(var(--bs-warning-rgb),var(--bs-bg-opacity,1))!important}.text-bg-danger{color:#fff!important;background-color:RGBA(220,53,69,1)!important;background-color:RGBA(var(--bs-danger-rgb),var(--bs-bg-opacity,1))!important}.text-bg-light{color:#000!important;background-color:RGBA(248,249,250,1)!important;background-color:RGBA(var(--bs-light-rgb),var(--bs-bg-opacity,1))!important}.text-bg-dark{color:#fff!important;background-color:RGBA(33,37,41,1)!important;background-color:RGBA(var(--bs-dark-rgb),var(--bs-bg-opacity,1))!important}.link-primary{color:RGBA(13,110,253,1)!important;color:RGBA(var(--bs-primary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(13,110,253,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(13,110,253,1)!important;text-decoration-color:RGBA(var(--bs-primary-rgb),var(--bs-link-underline-opacity,1))!important}.link-primary:focus,.link-primary:hover{color:RGBA(10,88,202,1)!important;color:RGBA(10,88,202,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(10,88,202,1)!important;-webkit-text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(10,88,202,1)!important;text-decoration-color:RGBA(10,88,202,var(--bs-link-underline-opacity,1))!important}.link-secondary{color:RGBA(108,117,125,1)!important;color:RGBA(var(--bs-secondary-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(108,117,125,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(108,117,125,1)!important;text-decoration-color:RGBA(var(--bs-secondary-rgb),var(--bs-link-underline-opacity,1))!important}.link-secondary:focus,.link-secondary:hover{color:RGBA(86,94,100,1)!important;color:RGBA(86,94,100,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(86,94,100,1)!important;-webkit-text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(86,94,100,1)!important;text-decoration-color:RGBA(86,94,100,var(--bs-link-underline-opacity,1))!important}.link-success{color:RGBA(25,135,84,1)!important;color:RGBA(var(--bs-success-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(25,135,84,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(25,135,84,1)!important;text-decoration-color:RGBA(var(--bs-success-rgb),var(--bs-link-underline-opacity,1))!important}.link-success:focus,.link-success:hover{color:RGBA(20,108,67,1)!important;color:RGBA(20,108,67,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(20,108,67,1)!important;-webkit-text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(20,108,67,1)!important;text-decoration-color:RGBA(20,108,67,var(--bs-link-underline-opacity,1))!important}.link-info{color:RGBA(13,202,240,1)!important;color:RGBA(var(--bs-info-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(13,202,240,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(13,202,240,1)!important;text-decoration-color:RGBA(var(--bs-info-rgb),var(--bs-link-underline-opacity,1))!important}.link-info:focus,.link-info:hover{color:RGBA(61,213,243,1)!important;color:RGBA(61,213,243,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(61,213,243,1)!important;-webkit-text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(61,213,243,1)!important;text-decoration-color:RGBA(61,213,243,var(--bs-link-underline-opacity,1))!important}.link-warning{color:RGBA(255,193,7,1)!important;color:RGBA(var(--bs-warning-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(255,193,7,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(255,193,7,1)!important;text-decoration-color:RGBA(var(--bs-warning-rgb),var(--bs-link-underline-opacity,1))!important}.link-warning:focus,.link-warning:hover{color:RGBA(255,205,57,1)!important;color:RGBA(255,205,57,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(255,205,57,1)!important;-webkit-text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(255,205,57,1)!important;text-decoration-color:RGBA(255,205,57,var(--bs-link-underline-opacity,1))!important}.link-danger{color:RGBA(220,53,69,1)!important;color:RGBA(var(--bs-danger-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(220,53,69,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(220,53,69,1)!important;text-decoration-color:RGBA(var(--bs-danger-rgb),var(--bs-link-underline-opacity,1))!important}.link-danger:focus,.link-danger:hover{color:RGBA(176,42,55,1)!important;color:RGBA(176,42,55,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(176,42,55,1)!important;-webkit-text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(176,42,55,1)!important;text-decoration-color:RGBA(176,42,55,var(--bs-link-underline-opacity,1))!important}.link-light{color:RGBA(248,249,250,1)!important;color:RGBA(var(--bs-light-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(248,249,250,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(248,249,250,1)!important;text-decoration-color:RGBA(var(--bs-light-rgb),var(--bs-link-underline-opacity,1))!important}.link-light:focus,.link-light:hover{color:RGBA(249,250,251,1)!important;color:RGBA(249,250,251,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(249,250,251,1)!important;-webkit-text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(249,250,251,1)!important;text-decoration-color:RGBA(249,250,251,var(--bs-link-underline-opacity,1))!important}.link-dark{color:RGBA(33,37,41,1)!important;color:RGBA(var(--bs-dark-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(33,37,41,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(33,37,41,1)!important;text-decoration-color:RGBA(var(--bs-dark-rgb),var(--bs-link-underline-opacity,1))!important}.link-dark:focus,.link-dark:hover{color:RGBA(26,30,33,1)!important;color:RGBA(26,30,33,var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(26,30,33,1)!important;-webkit-text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(26,30,33,1)!important;text-decoration-color:RGBA(26,30,33,var(--bs-link-underline-opacity,1))!important}.link-body-emphasis{color:RGBA(0,0,0,1)!important;color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,1))!important;-webkit-text-decoration-color:RGBA(0,0,0,1)!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:RGBA(0,0,0,1)!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-body-emphasis:focus,.link-body-emphasis:hover{color:RGBA(0,0,0,.75)!important;color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-opacity,.75))!important;-webkit-text-decoration-color:RGBA(0,0,0,0.75)!important;-webkit-text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important;text-decoration-color:RGBA(0,0,0,0.75)!important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb),var(--bs-link-underline-opacity,0.75))!important}.focus-ring:focus{outline:0;box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);box-shadow:var(--bs-focus-ring-x,0) var(--bs-focus-ring-y,0) var(--bs-focus-ring-blur,0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.icon-link{display:inline-flex;gap:.375rem;align-items:center;-webkit-text-decoration-color:rgba(13,110,253,0.5);-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-decoration-color:rgba(13,110,253,0.5);text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,0.5));text-underline-offset:0.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}.icon-link>.bi{flex-shrink:0;width:1em;height:1em;fill:currentcolor;transition:.2s ease-in-out transform}@media (prefers-reduced-motion:reduce){.icon-link>.bi{transition:none}}.icon-link-hover:focus-visible>.bi,.icon-link-hover:hover>.bi{transform:translate3d(.25em,0,0);transform:var(--bs-icon-link-transform,translate3d(.25em,0,0))}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:-webkit-sticky;position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),.visually-hidden:not(caption){position:absolute!important}.visually-hidden *,.visually-hidden-focusable:not(:focus):not(:focus-within) *{overflow:hidden!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:1px;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:.25}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.object-fit-contain{object-fit:contain!important}.object-fit-cover{object-fit:cover!important}.object-fit-fill{object-fit:fill!important}.object-fit-scale{object-fit:scale-down!important}.object-fit-none{object-fit:none!important}.opacity-0{opacity:0!important}.opacity-25{opacity:.25!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.overflow-x-auto{overflow-x:auto!important}.overflow-x-hidden{overflow-x:hidden!important}.overflow-x-visible{overflow-x:visible!important}.overflow-x-scroll{overflow-x:scroll!important}.overflow-y-auto{overflow-y:auto!important}.overflow-y-hidden{overflow-y:hidden!important}.overflow-y-visible{overflow-y:visible!important}.overflow-y-scroll{overflow-y:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-inline-grid{display:inline-grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15)!important;box-shadow:var(--bs-box-shadow)!important}.shadow-sm{box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)!important;box-shadow:var(--bs-box-shadow-sm)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0, 0, 0, 0.175)!important;box-shadow:var(--bs-box-shadow-lg)!important}.shadow-none{box-shadow:none!important}.focus-ring-primary{--bs-focus-ring-color:rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-secondary{--bs-focus-ring-color:rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity))}.focus-ring-success{--bs-focus-ring-color:rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity))}.focus-ring-info{--bs-focus-ring-color:rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity))}.focus-ring-warning{--bs-focus-ring-color:rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity))}.focus-ring-danger{--bs-focus-ring-color:rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity))}.focus-ring-light{--bs-focus-ring-color:rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity))}.focus-ring-dark{--bs-focus-ring-color:rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity))}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:1px solid #dee2e6!important;border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-0{border:0!important}.border-top{border-top:1px solid #dee2e6!important;border-top:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-top-0{border-top:0!important}.border-end{border-right:1px solid #dee2e6!important;border-right:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:1px solid #dee2e6!important;border-bottom:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:1px solid #dee2e6!important;border-left:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.border-start-0{border-left:0!important}.border-primary{--bs-border-opacity:1;border-color:rgba(13,110,253,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-primary-rgb),var(--bs-border-opacity))!important}.border-secondary{--bs-border-opacity:1;border-color:rgba(108,117,125,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-secondary-rgb),var(--bs-border-opacity))!important}.border-success{--bs-border-opacity:1;border-color:rgba(25,135,84,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important}.border-info{--bs-border-opacity:1;border-color:rgba(13,202,240,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-info-rgb),var(--bs-border-opacity))!important}.border-warning{--bs-border-opacity:1;border-color:rgba(255,193,7,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-warning-rgb),var(--bs-border-opacity))!important}.border-danger{--bs-border-opacity:1;border-color:rgba(220,53,69,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important}.border-light{--bs-border-opacity:1;border-color:rgba(248,249,250,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-light-rgb),var(--bs-border-opacity))!important}.border-dark{--bs-border-opacity:1;border-color:rgba(33,37,41,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-dark-rgb),var(--bs-border-opacity))!important}.border-black{--bs-border-opacity:1;border-color:rgba(0,0,0,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-black-rgb),var(--bs-border-opacity))!important}.border-white{--bs-border-opacity:1;border-color:rgba(255,255,255,var(--bs-border-opacity))!important;border-color:rgba(var(--bs-white-rgb),var(--bs-border-opacity))!important}.border-primary-subtle{border-color:#9ec5fe!important;border-color:var(--bs-primary-border-subtle)!important}.border-secondary-subtle{border-color:#c4c8cb!important;border-color:var(--bs-secondary-border-subtle)!important}.border-success-subtle{border-color:#a3cfbb!important;border-color:var(--bs-success-border-subtle)!important}.border-info-subtle{border-color:#9eeaf9!important;border-color:var(--bs-info-border-subtle)!important}.border-warning-subtle{border-color:#ffe69c!important;border-color:var(--bs-warning-border-subtle)!important}.border-danger-subtle{border-color:#f1aeb5!important;border-color:var(--bs-danger-border-subtle)!important}.border-light-subtle{border-color:#e9ecef!important;border-color:var(--bs-light-border-subtle)!important}.border-dark-subtle{border-color:#adb5bd!important;border-color:var(--bs-dark-border-subtle)!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.border-opacity-10{--bs-border-opacity:0.1}.border-opacity-25{--bs-border-opacity:0.25}.border-opacity-50{--bs-border-opacity:0.5}.border-opacity-75{--bs-border-opacity:0.75}.border-opacity-100{--bs-border-opacity:1}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.row-gap-0{row-gap:0!important}.row-gap-1{row-gap:.25rem!important}.row-gap-2{row-gap:.5rem!important}.row-gap-3{row-gap:1rem!important}.row-gap-4{row-gap:1.5rem!important}.row-gap-5{row-gap:3rem!important}.column-gap-0{column-gap:0!important}.column-gap-1{column-gap:.25rem!important}.column-gap-2{column-gap:.5rem!important}.column-gap-3{column-gap:1rem!important}.column-gap-4{column-gap:1.5rem!important}.column-gap-5{column-gap:3rem!important}.font-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace!important;font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-lighter{font-weight:lighter!important}.fw-light{font-weight:300!important}.fw-normal{font-weight:400!important}.fw-medium{font-weight:500!important}.fw-semibold{font-weight:600!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{--bs-text-opacity:1;color:rgba(13,110,253,var(--bs-text-opacity))!important;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(108,117,125,var(--bs-text-opacity))!important;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-success{--bs-text-opacity:1;color:rgba(25,135,84,var(--bs-text-opacity))!important;color:rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important}.text-info{--bs-text-opacity:1;color:rgba(13,202,240,var(--bs-text-opacity))!important;color:rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(255,193,7,var(--bs-text-opacity))!important;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-danger{--bs-text-opacity:1;color:rgba(220,53,69,var(--bs-text-opacity))!important;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(248,249,250,var(--bs-text-opacity))!important;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(33,37,41,var(--bs-text-opacity))!important;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-black{--bs-text-opacity:1;color:rgba(0,0,0,var(--bs-text-opacity))!important;color:rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(255,255,255,var(--bs-text-opacity))!important;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-body{--bs-text-opacity:1;color:rgba(33,37,41,var(--bs-text-opacity))!important;color:rgba(var(--bs-body-color-rgb),var(--bs-text-opacity))!important}.text-muted{--bs-text-opacity:1;color:rgba(33, 37, 41, 0.75)!important;color:var(--bs-secondary-color)!important}.text-black-50{--bs-text-opacity:1;color:rgba(0,0,0,.5)!important}.text-white-50{--bs-text-opacity:1;color:rgba(255,255,255,.5)!important}.text-body-secondary{--bs-text-opacity:1;color:rgba(33, 37, 41, 0.75)!important;color:var(--bs-secondary-color)!important}.text-body-tertiary{--bs-text-opacity:1;color:rgba(33, 37, 41, 0.5)!important;color:var(--bs-tertiary-color)!important}.text-body-emphasis{--bs-text-opacity:1;color:#000!important;color:var(--bs-emphasis-color)!important}.text-reset{--bs-text-opacity:1;color:inherit!important}.text-opacity-25{--bs-text-opacity:0.25}.text-opacity-50{--bs-text-opacity:0.5}.text-opacity-75{--bs-text-opacity:0.75}.text-opacity-100{--bs-text-opacity:1}.text-primary-emphasis{color:#052c65!important;color:var(--bs-primary-text-emphasis)!important}.text-secondary-emphasis{color:#2b2f32!important;color:var(--bs-secondary-text-emphasis)!important}.text-success-emphasis{color:#0a3622!important;color:var(--bs-success-text-emphasis)!important}.text-info-emphasis{color:#055160!important;color:var(--bs-info-text-emphasis)!important}.text-warning-emphasis{color:#664d03!important;color:var(--bs-warning-text-emphasis)!important}.text-danger-emphasis{color:#58151c!important;color:var(--bs-danger-text-emphasis)!important}.text-light-emphasis{color:#495057!important;color:var(--bs-light-text-emphasis)!important}.text-dark-emphasis{color:#495057!important;color:var(--bs-dark-text-emphasis)!important}.link-opacity-10{--bs-link-opacity:0.1}.link-opacity-10-hover:hover{--bs-link-opacity:0.1}.link-opacity-25{--bs-link-opacity:0.25}.link-opacity-25-hover:hover{--bs-link-opacity:0.25}.link-opacity-50{--bs-link-opacity:0.5}.link-opacity-50-hover:hover{--bs-link-opacity:0.5}.link-opacity-75{--bs-link-opacity:0.75}.link-opacity-75-hover:hover{--bs-link-opacity:0.75}.link-opacity-100{--bs-link-opacity:1}.link-opacity-100-hover:hover{--bs-link-opacity:1}.link-offset-1{text-underline-offset:0.125em!important}.link-offset-1-hover:hover{text-underline-offset:0.125em!important}.link-offset-2{text-underline-offset:0.25em!important}.link-offset-2-hover:hover{text-underline-offset:0.25em!important}.link-offset-3{text-underline-offset:0.375em!important}.link-offset-3-hover:hover{text-underline-offset:0.375em!important}.link-underline-primary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(13,110,253,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(13,110,253,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-primary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-secondary{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(108,117,125,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(108,117,125,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-secondary-rgb),var(--bs-link-underline-opacity))!important}.link-underline-success{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(25,135,84,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(25,135,84,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-success-rgb),var(--bs-link-underline-opacity))!important}.link-underline-info{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(13,202,240,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(13,202,240,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-info-rgb),var(--bs-link-underline-opacity))!important}.link-underline-warning{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(255,193,7,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(255,193,7,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-warning-rgb),var(--bs-link-underline-opacity))!important}.link-underline-danger{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(220,53,69,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(220,53,69,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-danger-rgb),var(--bs-link-underline-opacity))!important}.link-underline-light{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(248,249,250,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(248,249,250,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-light-rgb),var(--bs-link-underline-opacity))!important}.link-underline-dark{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(33,37,41,var(--bs-link-underline-opacity))!important;-webkit-text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(33,37,41,var(--bs-link-underline-opacity))!important;text-decoration-color:rgba(var(--bs-dark-rgb),var(--bs-link-underline-opacity))!important}.link-underline{--bs-link-underline-opacity:1;-webkit-text-decoration-color:rgba(13,110,253,1)!important;-webkit-text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important;text-decoration-color:rgba(13,110,253,1)!important;text-decoration-color:rgba(var(--bs-link-color-rgb),var(--bs-link-underline-opacity,1))!important}.link-underline-opacity-0{--bs-link-underline-opacity:0}.link-underline-opacity-0-hover:hover{--bs-link-underline-opacity:0}.link-underline-opacity-10{--bs-link-underline-opacity:0.1}.link-underline-opacity-10-hover:hover{--bs-link-underline-opacity:0.1}.link-underline-opacity-25{--bs-link-underline-opacity:0.25}.link-underline-opacity-25-hover:hover{--bs-link-underline-opacity:0.25}.link-underline-opacity-50{--bs-link-underline-opacity:0.5}.link-underline-opacity-50-hover:hover{--bs-link-underline-opacity:0.5}.link-underline-opacity-75{--bs-link-underline-opacity:0.75}.link-underline-opacity-75-hover:hover{--bs-link-underline-opacity:0.75}.link-underline-opacity-100{--bs-link-underline-opacity:1}.link-underline-opacity-100-hover:hover{--bs-link-underline-opacity:1}.bg-primary{--bs-bg-opacity:1;background-color:rgba(13,110,253,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important}.bg-secondary{--bs-bg-opacity:1;background-color:rgba(108,117,125,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}.bg-success{--bs-bg-opacity:1;background-color:rgba(25,135,84,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important}.bg-info{--bs-bg-opacity:1;background-color:rgba(13,202,240,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}.bg-warning{--bs-bg-opacity:1;background-color:rgba(255,193,7,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}.bg-danger{--bs-bg-opacity:1;background-color:rgba(220,53,69,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(248,249,250,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(33,37,41,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.bg-black{--bs-bg-opacity:1;background-color:rgba(0,0,0,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-black-rgb),var(--bs-bg-opacity))!important}.bg-white{--bs-bg-opacity:1;background-color:rgba(255,255,255,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important}.bg-body{--bs-bg-opacity:1;background-color:rgba(255,255,255,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity))!important}.bg-transparent{--bs-bg-opacity:1;background-color:transparent!important}.bg-body-secondary{--bs-bg-opacity:1;background-color:rgba(233,236,239,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-secondary-bg-rgb),var(--bs-bg-opacity))!important}.bg-body-tertiary{--bs-bg-opacity:1;background-color:rgba(248,249,250,var(--bs-bg-opacity))!important;background-color:rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important}.bg-opacity-10{--bs-bg-opacity:0.1}.bg-opacity-25{--bs-bg-opacity:0.25}.bg-opacity-50{--bs-bg-opacity:0.5}.bg-opacity-75{--bs-bg-opacity:0.75}.bg-opacity-100{--bs-bg-opacity:1}.bg-primary-subtle{background-color:#cfe2ff!important;background-color:var(--bs-primary-bg-subtle)!important}.bg-secondary-subtle{background-color:#e2e3e5!important;background-color:var(--bs-secondary-bg-subtle)!important}.bg-success-subtle{background-color:#d1e7dd!important;background-color:var(--bs-success-bg-subtle)!important}.bg-info-subtle{background-color:#cff4fc!important;background-color:var(--bs-info-bg-subtle)!important}.bg-warning-subtle{background-color:#fff3cd!important;background-color:var(--bs-warning-bg-subtle)!important}.bg-danger-subtle{background-color:#f8d7da!important;background-color:var(--bs-danger-bg-subtle)!important}.bg-light-subtle{background-color:#fcfcfd!important;background-color:var(--bs-light-bg-subtle)!important}.bg-dark-subtle{background-color:#ced4da!important;background-color:var(--bs-dark-bg-subtle)!important}.bg-gradient{background-image:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))!important;background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:0.375rem!important;border-radius:var(--bs-border-radius)!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:0.25rem!important;border-radius:var(--bs-border-radius-sm)!important}.rounded-2{border-radius:0.375rem!important;border-radius:var(--bs-border-radius)!important}.rounded-3{border-radius:0.5rem!important;border-radius:var(--bs-border-radius-lg)!important}.rounded-4{border-radius:1rem!important;border-radius:var(--bs-border-radius-xl)!important}.rounded-5{border-radius:2rem!important;border-radius:var(--bs-border-radius-xxl)!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important;border-radius:var(--bs-border-radius-pill)!important}.rounded-top{border-top-left-radius:0.375rem!important;border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:0.375rem!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-0{border-top-left-radius:0!important;border-top-right-radius:0!important}.rounded-top-1{border-top-left-radius:0.25rem!important;border-top-left-radius:var(--bs-border-radius-sm)!important;border-top-right-radius:0.25rem!important;border-top-right-radius:var(--bs-border-radius-sm)!important}.rounded-top-2{border-top-left-radius:0.375rem!important;border-top-left-radius:var(--bs-border-radius)!important;border-top-right-radius:0.375rem!important;border-top-right-radius:var(--bs-border-radius)!important}.rounded-top-3{border-top-left-radius:0.5rem!important;border-top-left-radius:var(--bs-border-radius-lg)!important;border-top-right-radius:0.5rem!important;border-top-right-radius:var(--bs-border-radius-lg)!important}.rounded-top-4{border-top-left-radius:1rem!important;border-top-left-radius:var(--bs-border-radius-xl)!important;border-top-right-radius:1rem!important;border-top-right-radius:var(--bs-border-radius-xl)!important}.rounded-top-5{border-top-left-radius:2rem!important;border-top-left-radius:var(--bs-border-radius-xxl)!important;border-top-right-radius:2rem!important;border-top-right-radius:var(--bs-border-radius-xxl)!important}.rounded-top-circle{border-top-left-radius:50%!important;border-top-right-radius:50%!important}.rounded-top-pill{border-top-left-radius:50rem!important;border-top-left-radius:var(--bs-border-radius-pill)!important;border-top-right-radius:50rem!important;border-top-right-radius:var(--bs-border-radius-pill)!important}.rounded-end{border-top-right-radius:0.375rem!important;border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:0.375rem!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-0{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.rounded-end-1{border-top-right-radius:0.25rem!important;border-top-right-radius:var(--bs-border-radius-sm)!important;border-bottom-right-radius:0.25rem!important;border-bottom-right-radius:var(--bs-border-radius-sm)!important}.rounded-end-2{border-top-right-radius:0.375rem!important;border-top-right-radius:var(--bs-border-radius)!important;border-bottom-right-radius:0.375rem!important;border-bottom-right-radius:var(--bs-border-radius)!important}.rounded-end-3{border-top-right-radius:0.5rem!important;border-top-right-radius:var(--bs-border-radius-lg)!important;border-bottom-right-radius:0.5rem!important;border-bottom-right-radius:var(--bs-border-radius-lg)!important}.rounded-end-4{border-top-right-radius:1rem!important;border-top-right-radius:var(--bs-border-radius-xl)!important;border-bottom-right-radius:1rem!important;border-bottom-right-radius:var(--bs-border-radius-xl)!important}.rounded-end-5{border-top-right-radius:2rem!important;border-top-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-right-radius:2rem!important;border-bottom-right-radius:var(--bs-border-radius-xxl)!important}.rounded-end-circle{border-top-right-radius:50%!important;border-bottom-right-radius:50%!important}.rounded-end-pill{border-top-right-radius:50rem!important;border-top-right-radius:var(--bs-border-radius-pill)!important;border-bottom-right-radius:50rem!important;border-bottom-right-radius:var(--bs-border-radius-pill)!important}.rounded-bottom{border-bottom-right-radius:0.375rem!important;border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:0.375rem!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-0{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.rounded-bottom-1{border-bottom-right-radius:0.25rem!important;border-bottom-right-radius:var(--bs-border-radius-sm)!important;border-bottom-left-radius:0.25rem!important;border-bottom-left-radius:var(--bs-border-radius-sm)!important}.rounded-bottom-2{border-bottom-right-radius:0.375rem!important;border-bottom-right-radius:var(--bs-border-radius)!important;border-bottom-left-radius:0.375rem!important;border-bottom-left-radius:var(--bs-border-radius)!important}.rounded-bottom-3{border-bottom-right-radius:0.5rem!important;border-bottom-right-radius:var(--bs-border-radius-lg)!important;border-bottom-left-radius:0.5rem!important;border-bottom-left-radius:var(--bs-border-radius-lg)!important}.rounded-bottom-4{border-bottom-right-radius:1rem!important;border-bottom-right-radius:var(--bs-border-radius-xl)!important;border-bottom-left-radius:1rem!important;border-bottom-left-radius:var(--bs-border-radius-xl)!important}.rounded-bottom-5{border-bottom-right-radius:2rem!important;border-bottom-right-radius:var(--bs-border-radius-xxl)!important;border-bottom-left-radius:2rem!important;border-bottom-left-radius:var(--bs-border-radius-xxl)!important}.rounded-bottom-circle{border-bottom-right-radius:50%!important;border-bottom-left-radius:50%!important}.rounded-bottom-pill{border-bottom-right-radius:50rem!important;border-bottom-right-radius:var(--bs-border-radius-pill)!important;border-bottom-left-radius:50rem!important;border-bottom-left-radius:var(--bs-border-radius-pill)!important}.rounded-start{border-bottom-left-radius:0.375rem!important;border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:0.375rem!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-0{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.rounded-start-1{border-bottom-left-radius:0.25rem!important;border-bottom-left-radius:var(--bs-border-radius-sm)!important;border-top-left-radius:0.25rem!important;border-top-left-radius:var(--bs-border-radius-sm)!important}.rounded-start-2{border-bottom-left-radius:0.375rem!important;border-bottom-left-radius:var(--bs-border-radius)!important;border-top-left-radius:0.375rem!important;border-top-left-radius:var(--bs-border-radius)!important}.rounded-start-3{border-bottom-left-radius:0.5rem!important;border-bottom-left-radius:var(--bs-border-radius-lg)!important;border-top-left-radius:0.5rem!important;border-top-left-radius:var(--bs-border-radius-lg)!important}.rounded-start-4{border-bottom-left-radius:1rem!important;border-bottom-left-radius:var(--bs-border-radius-xl)!important;border-top-left-radius:1rem!important;border-top-left-radius:var(--bs-border-radius-xl)!important}.rounded-start-5{border-bottom-left-radius:2rem!important;border-bottom-left-radius:var(--bs-border-radius-xxl)!important;border-top-left-radius:2rem!important;border-top-left-radius:var(--bs-border-radius-xxl)!important}.rounded-start-circle{border-bottom-left-radius:50%!important;border-top-left-radius:50%!important}.rounded-start-pill{border-bottom-left-radius:50rem!important;border-bottom-left-radius:var(--bs-border-radius-pill)!important;border-top-left-radius:50rem!important;border-top-left-radius:var(--bs-border-radius-pill)!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.z-n1{z-index:-1!important}.z-0{z-index:0!important}.z-1{z-index:1!important}.z-2{z-index:2!important}.z-3{z-index:3!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.object-fit-sm-contain{object-fit:contain!important}.object-fit-sm-cover{object-fit:cover!important}.object-fit-sm-fill{object-fit:fill!important}.object-fit-sm-scale{object-fit:scale-down!important}.object-fit-sm-none{object-fit:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-inline-grid{display:inline-grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.row-gap-sm-0{row-gap:0!important}.row-gap-sm-1{row-gap:.25rem!important}.row-gap-sm-2{row-gap:.5rem!important}.row-gap-sm-3{row-gap:1rem!important}.row-gap-sm-4{row-gap:1.5rem!important}.row-gap-sm-5{row-gap:3rem!important}.column-gap-sm-0{column-gap:0!important}.column-gap-sm-1{column-gap:.25rem!important}.column-gap-sm-2{column-gap:.5rem!important}.column-gap-sm-3{column-gap:1rem!important}.column-gap-sm-4{column-gap:1.5rem!important}.column-gap-sm-5{column-gap:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.object-fit-md-contain{object-fit:contain!important}.object-fit-md-cover{object-fit:cover!important}.object-fit-md-fill{object-fit:fill!important}.object-fit-md-scale{object-fit:scale-down!important}.object-fit-md-none{object-fit:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-inline-grid{display:inline-grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.row-gap-md-0{row-gap:0!important}.row-gap-md-1{row-gap:.25rem!important}.row-gap-md-2{row-gap:.5rem!important}.row-gap-md-3{row-gap:1rem!important}.row-gap-md-4{row-gap:1.5rem!important}.row-gap-md-5{row-gap:3rem!important}.column-gap-md-0{column-gap:0!important}.column-gap-md-1{column-gap:.25rem!important}.column-gap-md-2{column-gap:.5rem!important}.column-gap-md-3{column-gap:1rem!important}.column-gap-md-4{column-gap:1.5rem!important}.column-gap-md-5{column-gap:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.object-fit-lg-contain{object-fit:contain!important}.object-fit-lg-cover{object-fit:cover!important}.object-fit-lg-fill{object-fit:fill!important}.object-fit-lg-scale{object-fit:scale-down!important}.object-fit-lg-none{object-fit:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-inline-grid{display:inline-grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.row-gap-lg-0{row-gap:0!important}.row-gap-lg-1{row-gap:.25rem!important}.row-gap-lg-2{row-gap:.5rem!important}.row-gap-lg-3{row-gap:1rem!important}.row-gap-lg-4{row-gap:1.5rem!important}.row-gap-lg-5{row-gap:3rem!important}.column-gap-lg-0{column-gap:0!important}.column-gap-lg-1{column-gap:.25rem!important}.column-gap-lg-2{column-gap:.5rem!important}.column-gap-lg-3{column-gap:1rem!important}.column-gap-lg-4{column-gap:1.5rem!important}.column-gap-lg-5{column-gap:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.object-fit-xl-contain{object-fit:contain!important}.object-fit-xl-cover{object-fit:cover!important}.object-fit-xl-fill{object-fit:fill!important}.object-fit-xl-scale{object-fit:scale-down!important}.object-fit-xl-none{object-fit:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-inline-grid{display:inline-grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.row-gap-xl-0{row-gap:0!important}.row-gap-xl-1{row-gap:.25rem!important}.row-gap-xl-2{row-gap:.5rem!important}.row-gap-xl-3{row-gap:1rem!important}.row-gap-xl-4{row-gap:1.5rem!important}.row-gap-xl-5{row-gap:3rem!important}.column-gap-xl-0{column-gap:0!important}.column-gap-xl-1{column-gap:.25rem!important}.column-gap-xl-2{column-gap:.5rem!important}.column-gap-xl-3{column-gap:1rem!important}.column-gap-xl-4{column-gap:1.5rem!important}.column-gap-xl-5{column-gap:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.object-fit-xxl-contain{object-fit:contain!important}.object-fit-xxl-cover{object-fit:cover!important}.object-fit-xxl-fill{object-fit:fill!important}.object-fit-xxl-scale{object-fit:scale-down!important}.object-fit-xxl-none{object-fit:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-inline-grid{display:inline-grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.row-gap-xxl-0{row-gap:0!important}.row-gap-xxl-1{row-gap:.25rem!important}.row-gap-xxl-2{row-gap:.5rem!important}.row-gap-xxl-3{row-gap:1rem!important}.row-gap-xxl-4{row-gap:1.5rem!important}.row-gap-xxl-5{row-gap:3rem!important}.column-gap-xxl-0{column-gap:0!important}.column-gap-xxl-1{column-gap:.25rem!important}.column-gap-xxl-2{column-gap:.5rem!important}.column-gap-xxl-3{column-gap:1rem!important}.column-gap-xxl-4{column-gap:1.5rem!important}.column-gap-xxl-5{column-gap:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-inline-grid{display:inline-grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-field {
  width: 100%;
  box-sizing: border-box;
  padding-right: 40px;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: "Inter", sans-serif;
  background-color: #f9fafb;
  overflow: auto;
}

/* Main container */
.login-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  background-color: #f9fafb;
  font-family: "Inter", sans-serif;
}

.login-container .login-box .text-center .subtitle {
  margin-bottom: 0.6rem;
}

/* Background SVG */
.background-lines {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
  z-index: 0;
}

/* Login box */
.login-box {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.7);
  /* 👈 background opacity */
  max-width: 420px;
  width: 100%;
  padding: 1.2rem 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Logo */
.icon-wrapper {
  display: flex;
  justify-content: center;
}

.logo-circle {
  width: 56px;
  height: 56px;
  background-color: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}

.logo {
  width: 32px;
  height: 32px;
}

/* Headings */
.text-center {
  text-align: center;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #181d27;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

/* Tab switcher */
.tab-switcher {
  position: relative;
  display: flex;
  background-color: #f3f4f6;
  border-radius: 8px;
  padding: 4px;
  overflow: hidden;
}

/* Sliding effect */
.tab-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none;
  border-radius: 6px;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
  /* Added slight border-like shadow for thumb */
  z-index: 0;
}

.tab-slider::after {
  display: none;
}

.login-box .tab-slider {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Tab buttons */
.tab-btn {
  flex: 1 1;
  background: transparent;
  border: none;
  outline: none;
  z-index: 1;
  font-weight: 500;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.3s ease;
  border-radius: 6px;
  min-height: auto;
  min-width: auto;
  padding: 0 1rem;
}

.tab-btn.active {
  color: #111827;
  /* Darker grey to match screenshot */
  font-weight: 600;
  background-color: transparent;
  /* rely on absolute slider */
}

/* Form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* User Type Section */
.user-type-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.user-type-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.user-type-card {
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
}

.user-type-card:hover {
  border-color: #d1d5db;
}

.user-type-card.selected {
  border-color: #2563eb;
  background: #f0f7ff;
}

.user-type-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.radio-icon {
  font-size: 20px;
  color: #d1d5db;
}

.radio-icon.selected {
  color: #2563eb;
}

.user-type-title {
  font-size: 14px;
  font-weight: 600;
  color: #181d27;
}

.user-type-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
  padding-left: 32px;
}

/* Form groups */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.form-group input:not([type="checkbox"]) {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 14px;
  /* Matches normal placeholder text in design */
  border: 1px solid #d1d5db;
  /* Lighter thinner border */
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
  background: #ffffff;
}

.form-group input:not([type="checkbox"]):focus {
  border-color: #2563eb;
  /* box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); */
}

.form-group input::placeholder {
  color: #9ca3af;
}

.form-group input.input-error:not([type="checkbox"]) {
  border-color: #dc2626;
  background-color: #fef2f2;
}

.form-group .field-error {
  font-size: 12px;
  color: #b91c1c;
  line-height: 1.35;
  margin-top: 2px;
}

.password-input-wrapper.password-wrap-error input {
  border-color: #dc2626;
  background-color: #fef2f2;
}

/* Phone input */
.phone-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.country-code {
  width: 90px;
  padding: 0.75rem 0.5rem;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  cursor: pointer;
}

.country-code:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.phone-input-wrapper input {
  flex: 1 1;
}

/* Password input */
.password-input-wrapper {
  position: relative;
  width: 100%;
}

.password-input-wrapper input {
  width: 100%;
  padding-right: 3rem;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visibility-icon {
  font-size: 20px;
  color: #9ca3af;
}

.toggle-password:hover .visibility-icon {
  color: #6b7280;
}

/* Password rules */
.password-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.password-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  transition: color 0.2s ease;
}

.password-rules li.rule-passed {
  color: #374151;
  /* Dark text for passed rule */
}

.password-rules li.rule-passed .rule-icon.check-passed {
  color: #2563eb;
}

.password-rules li.rule-failed {
  color: #9ca3af;
  /* Light text for failed rule */
}

.password-rules li.rule-failed .rule-icon.check-failed {
  color: #d1d5db;
  /* Light grey icon for failed rule */
}

.password-rules .rule-icon {
  font-size: 18px;
}

/* Extra form options */
.form-extra {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
}

.form-extra-row {
  justify-content: space-between;
}

.forgot-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.forgot-link:hover {
  text-decoration: underline;
}

/* Buttons */
.sign-in-btn {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: #2563eb;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.sign-in-btn:hover:not(:disabled) {
  background-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.sign-in-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.sign-in-btn:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
  box-shadow: none;
}

/* Google button */
.google-btn {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px solid #d1d5db;
  font-size: 15px;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.google-btn:hover {
  background-color: #f9fafb;
  border-color: #b4bcc4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.google-icon {
  width: 20px;
  height: 20px;
}

/* Divider */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0.5rem 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #e5e7eb;
}

.divider span {
  padding: 0 1rem;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

/* Remember Me Checkbox */
.remember-me-row {
  margin: -0.5rem 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.remember-me-row .checkbox-label input[type="checkbox"],
.checkbox-label input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: transparent !important;
}

.remember-me-row .checkbox-label input[type="checkbox"]:checked,
.checkbox-label input[type="checkbox"]:checked {
  background-color: #2563eb !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
}

.remember-me-row .checkbox-label input[type="checkbox"]:checked::after,
.checkbox-label input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg);
}

/* Required asterisk */
.required {
  color: #ef4444;
  margin-left: 2px;
}

/* Footer */
.footer-text {
  font-size: 14px;
  text-align: center;
  color: #6b7280;
  margin: 0;
}

.footer-text a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.footer-text a:hover {
  text-decoration: underline;
}

/* Error message */
.error-message,
.submit-error {
  color: #dc2626;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .login-container {
    padding: 1rem;
  }

  .login-box {
    padding: 2rem 1.5rem;
  }

  .title {
    font-size: 22px;
  }

  .subtitle {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 0.5rem;
  }

  .login-box {
    padding: 1.5rem 1.25rem;
    gap: 1.25rem;
    border-radius: 12px;
    margin: 0 0.5rem;
  }

  .title {
    font-size: 20px;
  }

  .subtitle {
    font-size: 13px;
  }

  .tab-switcher {
    height: 51px;
  }

  .tab-btn {
    font-size: 13px;
  }

  .form-group label {
    font-size: 13px;
  }

  .form-group input:not([type="checkbox"]) {
    font-size: 16px;
    /* Prevents zoom on iOS */
    padding: 0.625rem 0.875rem;
  }

  .user-type-card {
    padding: 0.875rem;
  }

  .user-type-title {
    font-size: 13px;
  }

  .user-type-desc {
    font-size: 12px;
  }

  .password-rules {
    font-size: 12px;
  }

  .sign-in-btn,
  .google-btn {
    font-size: 14px;
    padding: 0.75rem;
  }

  .footer-text {
    font-size: 13px;
  }

  .logo {
    width: 40px;
    height: 40px;
  }
}
/* ------------------------
   General Form Field Styles
------------------------ */
.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  font-family: "Inter", sans-serif;
  max-width: 100%;
  position: relative;
  z-index: auto;
  overflow: visible;
}

.input-error {
  border: 1px solid #e53935;
  background-color: #fff6f6;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 6px;
  display: block;
}

.required {
  color: #1570ef;
}

.form-field-hint {
  font-size: 12px;
  color: #667085;
  margin-top: 6px;
  line-height: 1.4;
}

/* Main container */
.phone-container {
  width: 100%;
}

/* Whole input field */
.phone-container .react-tel-input .form-control.phone-input {
  width: 100%;
  height: 70px;
  border-radius: 20px;
  background: #fff;
  border: 2px solid #e5e7eb;
  font-size: 32px;
  padding-left: 95px;
  color: #6b7280;
  box-shadow: none;
}

/* On focus */
.phone-container .react-tel-input .form-control.phone-input:focus {
  border-color: #d1d5db;
  box-shadow: none;
  background: #fff;
}

/* Country dropdown button */
.phone-container .react-tel-input .flag-dropdown.phone-dropdown {
  background: transparent;
  border: none;
  border-radius: 20px 0 0 20px;
  padding-left: 20px;
}

/* Remove default border */
.phone-container .react-tel-input .flag-dropdown.open {
  background: transparent;
}

/* Apply border to full wrapper */
.phone-container .react-tel-input {
  width: 100%;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  background: #fff;
  height: 67px;
  display: flex;
  align-items: center;
}

/* Remove input's own border */
.phone-container .react-tel-input .form-control {
  border: none !important;
  background: transparent !important;
  width: 100%;
  height: 100%;
  font-size: 28px;
  padding-left: 90px;
  box-shadow: none !important;
}

/* Remove dropdown border */
.phone-container .react-tel-input .flag-dropdown {
  border: none !important;
  background: transparent !important;
}

/* Country text (IN) */
.phone-container .selected-flag {
  padding-left: 18px;
}

.required {
  color: #1570ef;
}

.error-message {
  font-size: 11px;
  color: #D92D20;
  margin-top: 4px;
  display: block;
  font-weight: 500;
}

/* ------------------------
   Input Fields
------------------------ */
.form-input {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.form-input::placeholder {
  color: #98A2B3;
  background-color: #ffffff;
}

/* ------------------------
   Textarea
------------------------ */
textarea.form-input {
  resize: none;
  overflow: hidden;
  min-height: 40px;
}

/* ------------------------
   Select Fields
------------------------ */
.form-select {
  padding: 8px 12px;
  padding-right: 32px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #fff !important;
  color: #111827;
  outline: none;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23344054%27 d=%27M1.5 4.5l4.5 4.5 4.5-4.5%27 stroke=%27%23344054%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 12px !important;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
  z-index: 100;
}

/* Dropdown options styling */
.form-select option {
  background-color: white !important;
  color: #111827;
  padding: 10px 12px !important;
}

/* ------------------------
   Phone Input
------------------------ */
/* ===== React Phone Input Custom Styling ===== */

/* Main phone wrapper */
.phone-container {
  width: 100%;
  height: 44px; /* Matches normal input height */
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  background: #fff !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Input inside */
.phone-container .form-control {
  border: none !important;
  background: transparent !important;
  height: 100% !important;
  font-size: 16px !important;
  padding: 0 12px 0 14px !important; /* Small padding as flag is hidden */
  color: #101828 !important;
  box-shadow: none !important;
  width: 100% !important;
}

.phone-container .form-control::placeholder {
  color: #667085 !important;
}

/* Country dropdown button */
.phone-container .flag-dropdown {
  border: none !important;
  background: transparent !important;
  border-radius: 8px 0 0 8px !important;
}

.phone-container .selected-flag {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 0 !important; /* Make it effectively invisible */
  overflow: hidden !important;
}

/* Hide the flag icon specifically */
.phone-container .selected-flag .flag {
  display: none !important;
}

/* Hide default arrow */
.phone-container .selected-flag .arrow {
  display: none !important;
}

/* Focus effect */
.phone-container:focus-within {
  border: 2px solid #1570ef;
}

/* ------------------------
   Price Field
------------------------ */
.price-combined-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 0 4px;
}

.price-combined-input:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.currency-dropdown select {
  box-shadow: none !important;
  border: none !important;
  border-right: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  outline: none !important;
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  padding: 8px 24px 8px 12px !important;
  cursor: pointer;
  -webkit-appearance: none !important;
          appearance: none !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
}

.currency-dropdown-right select {
  box-shadow: none !important;
  width: auto;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  outline: none !important;
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  padding: 8px 24px 8px 12px !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg fill=%27gray%27 height=%2716%27 viewBox=%270 0 24 24%27 width=%2716%27 xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath d=%27M7 10l5 5 5-5z%27%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 12px !important;
}

.price-prefix {
  padding-left: 12px;
  color: #6b7280;
  font-weight: 500;
}

.price-field-input {
  flex: 1 1;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  background-color: transparent !important;
  color: #111827;
  width: 100%;
}

.price-field-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ------------------------
   Weight Field
------------------------ */
.weight-combined-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  padding: 4px 8px;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.weight-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 8px 12px;
  background: transparent;
}

.weight-input:disabled {
  background: #f5f5f5;
}

.weight-select {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 10px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}

.weight-select:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* ------------------------
   Error Messages
------------------------ */
.form-error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .form-field {
    max-width: 100%;
    margin-bottom: 14px;
  }

  .form-label {
    font-size: 0.8125rem;
    /* 13px */
    margin-bottom: 4px;
  }

  .form-input,
  .form-select {
    font-size: 16px;
    /* Prevents zoom on iOS - keep at 16px */
    padding: 10px 12px;
  }

  .price-combined-input {
    width: 100%;
  }

  .weight-combined-input {
    width: 100%;
  }

  .weight-input {
    width: 100%;
    max-width: 100%;
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  .unit-select {
    position: static;
    padding: 0;
    width: auto;
    left: auto;
    top: auto;
    font-size: 0.8125rem;
    /* 13px */
  }
}

@media (max-width: 480px) {
  .form-field {
    margin-bottom: 12px;
  }

  .form-label {
    font-size: 0.75rem;
    /* 12px */
    margin-bottom: 4px;
  }

  .form-input,
  .form-select {
    font-size: 16px;
    /* Keep at 16px to prevent iOS zoom */
    padding: 8px 10px;
  }

  .price-combined-input {
    height: 40px;
    padding: 0 10px;
  }

  .weight-input {
    font-size: 16px;
    /* Keep at 16px */
  }
}

/* Input Prefix & Suffix Addon Styles */
.form-input.addon-wrapper {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.form-input.addon-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.input-prefix {
  padding-left: 12px;
  color: #344054;
  font-weight: 500;
  white-space: nowrap;
}

.input-suffix {
  padding-right: 12px;
  color: #667085;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.form-input-unstyle {
  flex: 1 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 8px 12px;
  font-size: 16px;
  color: #111827;
  width: 100%;
}

/* ====== 
   FIGMA EXACT INPUT ADDON (GROUP) STYLES 
   ====== */
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.input-group>.main-input-wrapper {
  flex: 1 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.input-group>.main-input-wrapper>.form-input {
  width: 100%;
  margin: 0;
}

/* When input has an addon suffix, remove right border radius */
.input-group.has-addon-suffix>.main-input-wrapper>.form-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Ensure focus ring overlaps right addon */
.input-group>.main-input-wrapper>.form-input:focus {
  z-index: 2;
  border-color: #1570ef;
  box-shadow: 0 0 0 4px #EFF4FF;
}

.input-group .main-input-prefix {
  position: absolute;
  left: 12px;
  color: #475467;
  font-size: 16px;
  font-weight: 500;
  pointer-events: none;
  z-index: 3;
}

/* Give space for prefix */
.input-group .form-input.has-prefix {
  padding-left: 30px;
}

.input-group>.addon-right {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-left: none;
  /* Crucial for Figma look */
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #475467;
  font-size: 16px;
  font-weight: 500;
}

.password-toggle {
  transition: color 0.2s;
}

.password-toggle:hover {
  color: #1570ef;
}

.password-input {
  /* Prevent browser-specific password toggles from overlapping ours */
  -ms-reveal: none;
}

/* Custom Checkboxes */
.custom-checkbox-standard {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid #D0D5DD;
  border-radius: 4px;
  background-color: #FFFFFF;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 !important;
  padding: 0 !important;
}

.custom-checkbox-standard:checked {
  background-color: #175CD3;
  border-color: #175CD3;
}

.custom-checkbox-standard:checked::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}
/* ------------------------
   Status Radio Field Styles
------------------------ */
.custom-status-radio-group {
    display: flex;
    gap: 24px;
    align-items: center;
    height: 44px;
    box-sizing: border-box;
}

.status-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
}

.radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #D0D5DD;
    position: relative;
    transition: all 0.2s ease;
    background: #fff;
}

.status-radio-item.active .radio-circle {
    border-color: #1570EF;
}

.radio-inner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1570EF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

.status-radio-item.active .radio-inner-dot {
    transform: translate(-50%, -50%) scale(1);
}

.radio-label {
    font-size: 14px;
    font-weight: 500;
    color: #344054;
}

/* ------------------------
   Premium Select Field Styles
------------------------ */
.premium-select-container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.premium-select-trigger {
    height: 44px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.premium-select-trigger.disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: #f9fafb;
}

.premium-select-container.active .premium-select-trigger {
    border-color: #1570EF;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.premium-select-value {
    font-size: 14px;
    color: #101828;
}

.premium-select-value.placeholder {
    color: #98A2B3;
    background-color: #ffffff;
}

.premium-chevron-icon {
    color: #667085;
    transition: transform 0.2s;
    font-size: 18px;
}

.premium-chevron-icon.rotate {
    transform: rotate(180deg);
}

.premium-select-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #E4E7EC;
    border-radius: 8px;
    box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08);
    z-index: 1000;
    padding: 4px;
    max-height: 250px;
    overflow-y: auto;
}

.premium-select-option {
    padding: 10px 12px;
    font-size: 14px;
    color: #344054;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.premium-select-option:hover {
    background: #F9FAF9;
}

.premium-select-option.selected {
    background: #F9FAF9;
    color: #1570EF;
    font-weight: 500;
}

.premium-check-icon {
    font-size: 16px;
    color: #1570EF;
}

/* Searchable Select Specific Styles */
.premium-select-trigger.searchable {
    padding: 0;
    overflow: hidden;
}

.searchable-select-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 14px;
    font-size: 14px;
    color: #101828;
    background: transparent;
}

.searchable-select-input::placeholder {
    color: #101828;
    opacity: 1;
}

.premium-select-trigger.searchable .premium-chevron-icon {
    margin-right: 14px;
}

.premium-select-no-results {
    padding: 10px 12px;
    font-size: 13px;
    color: #667085;
    text-align: center;
}

/* Accessibility helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.react-tel-input{font-family:'Roboto',sans-serif;font-size:15px;position:relative;width:100%}.react-tel-input :disabled{cursor:not-allowed}.react-tel-input .flag{width:16px;height:11px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACmCAMAAAACnqETAAADAFBMVEUAAAD30gQCKn0GJJ4MP4kMlD43WGf9/f329vcBAQHhAADx8vHvAwL8AQL7UlL4RUUzqDP2MjLp6un2Jyj0Ghn2PTr9fHvi5OJYuln7Xl75+UPpNzXUAQH29jH6cXC+AAIAJwBNtE/23Ff5aGdDr0TJAQHsZV3qR0IAOQB3x3fdRD/Z2NvuWFLkcG7fVlH4kI4AAlXO0M8BATsdS6MCagIBfQEASgPoKSc4VKL442q4xeQAigD46eetAABYd9jvf3nZMiwAAoD30zz55X5ng9tPbKZnwGXz8x77+lY7OTjzzikABGsenh72pKNPldEAWgHgGBgAACH88/Gqt95JR0OWAwP3uLd/qdr53kMBBJJ3d3XMPTpWer8NnAwABKPH1O1VVFIuLSz13NtZnlf2kEh9keLn7vfZ4vNkZGHzvwJIXZRfZLuDwfv4y8tvk79LlUblzsxorGcCBusFKuYCCcdmfq5jqvlxt/tzktEABLb8/HL2tlTAw8SLlMFpj/ZlpNhBZ81BYbQcGxuToN9SYdjXY2Lz7lD0dCQ6S9Dm0EUCYPdDlvWWvd2AnviXqc11eMZTqPc3cPMCRev16ZrRUE0Hf/tNT7HIJyTptDVTffSsTkvhtgQ0T4jigoFUx/g+hsX9/QUHzQY1dbJ7sHV02Pduvd0leiK1XmaTrfpCQPgELrrdsrY1NamgyPrh03iPxosvX92ysbCgoZzk5kP1YD7t6AILnu+45LykNS40qvXDdHnR6tBennz6u3TSxU1Or9Swz6wqzCsPZKzglJbIqEY8hDhyAgFzbJxuOC+Li4d9sJLFsnhwbvH2d1A3kzAqPZQITsN76nq2dzaZdKJf4F6RJkb078YFiM+tnWZGh2F+dDibykYoMcsnekdI1UhCAwWb25qVkEq43km9yBrclQMGwfyZ3/zZ2QK9gJxsJWCBUk32QwqOSYKRxh6Xdm3B4oMW22EPZzawnR72kgZltCqPxrdH1dkBkqDdWwwMwMO9O2sqKXHvipPGJkzlRVLhJjVIs9KrAAAAB3RSTlMA/v3+/Pn9Fk05qAAAUU9JREFUeNp0nAlYVNcVxzHazoroGBkXhAgCCjMsroDoKIgKdFABBwQUnSAoCqLRFBfcCBIM4kbqShO1hlSrCJqQQmNssVFqjBarsdjFJWlMTOLXJDZt8/X7+j/n3pk3vNq/bb8+3nbP79137/+dd954qTVt8uTJL73OMhqNer03ady4cWOhWbNmjV+0FfKGjMb36Y9/1fXUst9cb2y8/lpb797z5k2dOjXVD9Ljn59fcHBwQEDAgGch3l9on6feeeedn0r9kvT222+/sErRgvcDArwV8f5tN/rcvPnMZ22pqVFRSVGjR38k9Rsp9fLql/MXLj20VGjt2rVeak2Og/auI/kHBQ3We/tCo0ZNhwYNGj58/NaWlpbOyMhIX1//2/jTrICvckhXruQsWbJw4cL3tzhPORynSk5lZWVtglL9IkmdDQ05NqvVGhLwbKSUL+Tvb9yH/2sj+eN0IZZ3fvq3Hnp71ZtCOyofdnTYSzq9xX7UtsF9+/Y1FpeZT54sc2aUlq6Jy89YM/qj2oZaoeOkMR8dV/Tee++NWb04rrA5MRYKDAyc/NKCpwDIyKhE9LEzZ/r4DLQAAE6EyEeM6AcNH7m1pTMnB+fHX7tG9Bs0Xt+GwM/frqm5tz950aKDk6rsiA0xbUrbRAii/BDeV9bGhQsPRlyOCAuZ9GykZwT++n2RHPnVYQU+oaFDPQD8jEQAPiDdaLPaHGVXbn/O7YHQuIH9B/gYgzts1iqrtSopKWlNRkzS6I8arFaOFvTfew8AfiYil/rN6sWTKwtbArOzExISUl7+vwCuQNt8Bg71AQCcTwNpWeFbW3IIQEmJr08XgIzX2xDcvZrs7Jru5EWXwwKSwh2RkQ77w7Q0bXp6YRoDaKO+kZl8MCwsYpJ3pEf8liAAoPhDhqUMQ/wAkF+oqKiosJYA7HxotdnTtVe6Pr/S0h+AI90QffU3T9obGuwdD5PqkmJiMtbM+ajWI/60TX0COhoarAAE1dfXV80FgMmLi1oSKP7/B6ASAGyBV4YM7D/Bx8/bF7g5fgmgEwCCSiJtJQRgxEi9zZqVdYUu9pW0tLCIgOvxdR0dpxx5aWl7EzV7CYDV+tXnCzMzkzMvE4AFlTuhZaSf/OQny1L32RC+JcHikzJ06NAJoe+YNKRbsbG3xPlWZTxssNmdOP/J27ffudLJ60V7DAaT1lxRVvfwYe3Jlrq4uJiKjAwAcIWP+BkAhV/i7HA0uAG8BAIUf8qfzvwvgJcQf+XMK4GWi8OGTpgQ6uftzwC0LIM2WgcASwaXOBwlA7v6/YgAhFRt2pRGeu0/UyImbal77eHDo2kVAJAeKwE0fl6P63/5nSlTAKBCiR8AovbZEL9lf8I5AMD5booAE7OzY8X5fhGJi0/nTzTcMh+80iIBaF0APqvIu3EjqfRGcV3S4aSKYk8AaW4ADU4gOFlfn8sAXnoJBDpTCMDL87zU2kwATl+x1Nw+P2HChKHBBMDHFT8DwGjX11FSYu/f/aMf9XtOjwAacf2hmxRg7ywXDrr30kb7NVhDquo/z0y+nJs7ZUoYA5DxM4BFmcnJyV93PzjbvQhK3urqAYF7xflWVT5ssDaU4Ox7T9+6Ei4BaN0AUkvXJEExMTGHD9cdFgA2yfgZQAP1f0dJw0lrfS4BmIb4z5yZBgL/H8DibbehGROenQ0AQRhvZPwQAGDQ8wlqsFkmdP9ofr/n/OgK2ml1xxQECAAy/tdee++91wCA1mfWJy/KXUTr536T+O67764X2r9//T+3JkPdDx50f7qItDXfff+zeAxY1lYV0VCmPV1Ts5fGAGUYDbHpo0qT6vKTignAtWvXiuf0StwGZZPQybMPAYC8/xF/bj0AUPwvvzytKCdl6dMAvJxRuXjxkCHnL86YMXs2A8B4m4yWQTrdIp0uByMajcATJrwzXwCIiIjAFSrbJwGI+FlH00YH8/rQy5enQPsYgBK/BLCI1c0Afonhn/XjH8MNLP9o1Y4Pfg795N9hYQ23bt1q4fb07z+A/ITR2J8AFJnqOP7iuj7Fc35TK+9/bkPaM+NGiSnsB6wRIwGA4n/5T5Pzc5aeeAqAP1VCM4niWRqVgr1p1sEYlskNJQC4BQZbLJi0MAgCgBUKqYo3VEVEhIWFTZqXtYmVxiIAtB4QeDUAvMuSFBgAJCkwAKHlLAKw4wMIFG5URVgdLdwedEq6BuCgj1qzpi4uiVScYa6I0fWKJQVC2aRDY0eNWrlyECwMMIDDc2vZ6UF0F7z8tB5w4kTvtZ+ygklGkk4lvZ6sne45SDg8aJIQ2z+4Mmg0qcfauXPnfvPNN9XV/1S0VSWyf1Ls4FZ5aIHu/blGKb2UOM0ckq4PmsZ2b8yYMb2l4FbhX8ePHwmhuSPXkhaQ5q0tXzBvntdUUq9eSyFu9njXxpA74Leg198yktRWVI4OkAkymw2Q3WO90+nnN3u2H0QkHI6JpHHj2GvTYdsupd68GfVZ4yTJqJeUaNKhQ+rzCUvOMXEr//4vD3333XdLe+rRJx4iqumDnT2O5zW1HII1hPLy8pJGjz9GWgk9D61Al4fWkWay9VRbUa1GEVCYDRoonu0dr++n0ZQ0dMCNdDRYHVrtuImjWHQ80lvfl4WfhJetw1CFm6h+rkazd28iJHvyIe/IHt7ZOBY7o4GPH4smPqf7nRwz/sH6bmmi2HtvYiBUYPxEcZakt701PdsPAIhb3DBbYmIIAOK+F9HXJ6z7t799AwDI48+cOQRi66m2ogoAYVwIQEkQb8DrJza1azRWq9NpjUjXtg+aNXHU9EEQHW/YsGFD3toHMFZbgzUsDNPkPgAgpScG1vA4TgB8PZATAAoc6IasWPHhhwCQkyNCdwMIJCVqDabA8+cAAJFLYVD92dvpjvQe7ZcA7p0/350dEzNmy+iRAHBPrO9+AwB41Of4h2HoFdZYhsfL7ej7QmbSBdED/GkDXv+ju9Pv4i9mM+g09Rs1duKoQSQR/4whb7msbFhufHy8M2xup6AZ3sHzWOChaveIWQCtn00A7s/84MDuD4bd+fBDcYEukrVna5fwMQPAsqnQZOqqLtBzezysvHd6z/YLANndUELMGAmgXqzPfeON3+IE8PHbuL2YegYCAO+/fz/io2VMM+5HpR/BGXIPGCzix3oAaBo13aApK9Mahg8fNAo9ANsPGi7iB4BLZRUPH9advJGb6zx+3Jk7FwFtCNekNzQUabW3cAv0Ek9uUA0U+PGsY4NmzrxQVBS3e82wGQDA7bvI8SsAsgNP7y26HV4GALyeJzGaY5J18fZ4GT+3DwBK8/K2ZF/s7v46ZYwEsMJHrJ/gApBJ8QPAs9gh2BYBnT077OwUnvcBwB0/nCEAQPFBdADefv5dPEu3p2u18e39Bg2aPou2h9wNmP3wi7bGL9qsuVOcizoBgM/X0BBtamggK2wGABn+WSLw8awm9P4Du3ecys+aMWPGt6J9medF/EsBIBbxJxSFm4vM5moJAOGL+AHAO90jfglgy5bshO7uFAIQM2fkyhUr6sX6fW+MJQDYX1wvWI/+uOIc79mziJec4ESxDPGy6AF9RfzYHgBw02s7yswNhf1GDJ8+lvcfPgKrxfoAa0S9uP9HTV95LHdur8TzuF7W5OSqDdEGAFiaiIjk9U8hAMdw+1Ts3r37VPOMGR/K9l3k+CUA9P9b4c6y8LKC6upqAiDj3wpxD1Dix/m9Uku3KAD6xMx5DgC6xfrLYwnAEuw/jOJnAMHjpnvECwA8aK5YseK3EA2aogf0pQNIAIOaXI8S0/sBAPaHaLUEIOJHPmjUsWACACN7/qLVmoz2Zjabv3x8X+oBdP/DWeih94d9sHv3BzO+fOOND6l9C93xL00BgOy97dHo/ZHm6EcAwM8OHlZ+YLpFtF9eQAGA9+81pg8DQCzdU3D9Ef/YN3AC8OP4Z5D1DBg7XYmfAKitqYl7AA8AvDxxVLtGW1VVVhYRZjC0jhg/Tuzv3j6gCuEjfghGYd/cXrFk5BNqai4K633k938h/Zp15C8Tx68E7X7Dtm2b8QZEAH743j8gYQQwC8TGlp08Z7ZWC+k/4eFf6pc//Sje3+TZ/pFeqXkQ7hoIhhoAnve8ogRgCQZBMQsgTgBgXykpAoDKmpoIuJP/wMvzwaOKHkisVfUnDYZZ2J/k3n4ST/94UiHt2/d+Lx7yttFAXnP+60W6+X9ggQFzGDdeOJT791fQNAgAv/qHFFMAAJou7AWQBCAkKXzknW71bD96APnWQ4c+hthRsv1Ty2WNA4InwYYpzhJSW1MT+lmkxx9awyfNhQVmvf9+c9M4kVt1by8tsmuLub3I/in6er7URGkh1SZ1znfk/xR9o2oP7F8Pax1vbO8RgJcwhYp8BvpMcD1t+0GffPJ7xUo+CA54Yc+DPXv2vGA0vkBavfqIW+xeH3kr8iJ9QxJegQNpu/TMzZupnzXOkQ7+OkumeCCOU+Si2Sr7kR6RkQZ/iA0y62PWVKlUiLy8fsz1MSd6s+YhLz1vu0t7ILS4T1Rqn2cU9fF6YQdpMZIAG6dNmzZ5bX+7PZKGsXi0CM9xwZ+0DmuVnejxsHMDJu3Zu24vkrT+QTtYq4/8nvWHPzyeCa2HUySRbzMKAO9CGhZ15Pku67uGlaS7frzoeFat26uY2CpzijiIrbKfLdH2buy7eKLkR8oAaXWhQNLH8+qEKirKy0tLS6O8bXVZQpvg8dPmbV/O+jH0IvRClLY06hkPAcBGqLa19ckBzC0HVg+0R9rQFpqFtWER1oBPhr3+eutPocevPzIaBwTseTORAu/rQ7sd2AgA4g69T1PlfmGVsX9fn8ESALk4ER5Gsb/Mny2tbzGkPQwASH1s2iTDBwC2yhYeVdgq+yXODAwpCCzAozT7Dml12fqR8VGcOMtk9A0pkUvsI7YvR+DQrl2vQLtWpdbFPAVAq8lgMrcygKEEoKQsJKTMYQgLDQn4ZN3r60T43ngSrH5g1rBcWaINAoCMX1plXq8GoBUAXNYX4RcfPqzVXa8tqk3bpATAVtnCVpytsp8tsCBifcJVil8BoFhfu7OE5RCyGn0HWxweQLYvf/HF2tp1T568IgD0Gf2MJilKBSCrPf5Cc3h76e4zuwmAv8ZqQ5cLMwwNA4DWn+IfwoeqX3/8kQvAQC2rGQCU+NkqywuiAqAVACa6rO/hYsR/uBi3wKZd7wGA1gPAcEvfhAQAmEEA4DwLEgo4/tmzwyYdYqurWF+9zWKxhCKlTjnV2WEBxkhHX5/G8jSZEZoKALWJWbuyYgWBVRgA6vqk9hgDNh54YtI2t2jbn5wBgAl2m1XTYAmxhFoNU5DG/uRnHuG/d/yjEa0X7kID+99tgu6OxTytxK8A0KoAaCGexz+rWHPpUtKaG4e1hwnAhhNZlLtMhwyG+HhDGVvl0PXZ2fv7w3oMe8vPijuf4of2AQCyutDmzWdI1zcv0Psr8SOFF2As0Th8Qr84CiEzcjSKni09b4l5C+al4r9uAcCBA1nthuYKc3spA4i0hWgNdFazgbK8n3iEjzct380S1rd/f+mkAECJH87O21/2v76eALQM4MiRX0+MKqXsFXSYAei8/d3WXLHaoQNTUga4AYSGiesPTSEASvwEwCrin4D4GYAv4m9MS5M5yalGX1uixccntCDwKqf5n5FSboGNBw4caG03m1tbz5zZs3v1bAAAKvtJDAuzAeD1c0r4DEBY4f4DKH4C8AclfgYQxFl0etRWAAj+RwjA6DUyfuoC3xt02F6JnwDQ8UNpeQAB+DTY6op/HxJLU+au3jj5JYRPwvR5ZoFN3v12oVxjkE+oXbG+4o71WH5dJa9VALD7wBPMArvP7AEAfaTVgm3NZkzcszHoBCvhM4BvhTcfMOCB8OZH/sDxp0hrCwA8PvKjNqkaAPaL80sAyvU3fF+sU1tptspDaRkA3gKAEIoforwaAPhZ3f2de4RWeUvAARqDKH65ZDKE7/nxriexm17ZtO0JxvhXX1n1Q5UAYCMQTCsvn7ybEuYL9JE2q9jfZJoSBgADEP5xt757MJM0xMcHUUOfzr9Pywlua+vtThhJAOvdPYDc/LjRayC+CxiDTm2l2SpbeJmPHywzyhLDXH1ICI96wEAcAlIr4ABKSThuXt4c75ByyJ2Zj9qDWbD2SSJmAdaqBSp5CdPoB5frx9LDdEVDG6C5cKnB/xz1kdB3rAcP2Bb7+X0q9GtOXirWU7HGEgBSwI/CoehosrIT2f7pFKmtNFvlYF4W/jvAI6kMoX2y1kBIZKBHu1PDwfNI7A1ZbP+UIgPMAn08hFnAIOROal3P6pnlzSQlK8pHf4F2s+AwjSRNvDsCadl76bQif9tbqDBdNvzPfxcy8+nCw1OULDDrOukEi7PXnngo+IDLY8UZZMmGOmsMn09yPTI8VwjhWEUkXIY4mYVu2/7qq9tJXuqsLoxJj+XMZqEWUmdnskabf8olWOI9Rl9Ik07vqeh1id/EpqZRUGKOhksqxveuZGm0Idx3g//+BPrd734n793wXnuFEoUOXc+ClJcrC4wiI8rv0On4GNUbbh8TBRtwDOPVWerxv2P9SuiPukKcBwd0xRPusuLSH+/xUmd1r9dm5XsuZzZ35kBLxCt+ANBoihA5CY6YAODEmnS8KRpIr7cBgJp2uyDkahcmi+EAUE7SpvPQFRrw9yfcvk5nPHUyApDokQWPBQCOXN7DafPo+ABH1RN8fL0t6OrVq1X3eC7C8dVZ6vHu2P/4xz//WQDAQ44rnmhXFlrYYxeAW+mJ6bcSEyUAEFCyqJdPfkX6HLp8+fJXBEBTyAR2uAD0tWjSfbh9BGAUxX/1zi8HVXcpAHZq03m9BNBptXY4ET8DUOKXANJk/AxAFETYbO/ayJ3aACAwcH3gep/Qru4PUZ8w/nW8X9gWOMSdZR7bRG81jkOU1XjeDUArFOey4i++WFW1vr4NAMTLaFjLvekuAJvylYKIXIcvFcQItzLB9o5G44CzylcA+Pe1+GjS+fojwGDO4hbcOfuXX35bnZ0deIgB7Nyp1QqrygB+1Wb9lbOBAUQTAOV1XuwhdRZXI7Q3UVplfSKS45aEc0MH9p/yTveKkQCw7WrIXneWmYDMrD3++Mnx47x8Iqt8GiTs4+bJ8y6V3Xj4sOLkjV27qjA9AYCBvGJsQkLgXraKBAAEOsCdZPfLdbjjRwQAUOJvxy7t/BK+NKuPhqVYTX6PEHJ101+qq8MWLcrUqdf/ne5Pa+OvMLPRPB3dBw+ychaDSkers7gaFiAliv31sSHr14euv0o8n322XoeAHXhwOyuydsMYwJDax0+ePD5OywCA8NM4fAIwdWfdtIqKvKyMXbuKDPWFRS8wAG3r3lvtF0RBAveANuqv7K2Dc+3K9Z/g7gGtlKRja9sjPjSQF6/eqc7+9ttztKz3Z6uarl22BcqL+jvdo1URvyqzGbSUpOTX6XlkW0mvpaqzuBLA6dOxOD4DKMA7koRzaMyUf3+xczUCvlVgic+m+CWAIUNqjz95vEkBwJdfAniVhj6+/xuRjGyTAO42XRjVxJMfACjxE4CuveRlC2SO7d13NJD59yJFSQD0QRj+tPHu7flhpqv6y+pv/9lF7wn0QexZ4g1bBIBZBCAnIsJaEm+QAJT4f/Naqrmndd2wCFMPhuHTp3OWQDk6vS1hfcL+6v6I/iU8vgPAkAs1+5vPIn62zt6+56AsdNChjx49OqcvwsEQPx2OjwcAIv5d+YW5hfkSgNZ814wNGADHP0HEo58Q8PXe2Fjx/JkCxd7T8uXn+CUA3P4AILcPFu8NuqrDziF+lND4hfCjigAQsywKozQN0Esc8eJ89LTHLk8+7ZmV+LnBnJX2KNAA8KvVQ//9xWTYkDNnJq9VW2m5XF8vl2lSx/X3AMDhU35kee7yXS94mfh8St78RNZDOetAEwBAmaRjoS6t4a7M0TKFcWxNtfE+cvvgsWKCjs3U8jwFAGxd0w150DIAkHO0QSjaSPM3Pa6BI+RnVtojAPAErBRo6AeHtN1YDP8uRra1aiutXgYALTZ1H287pn+SxAAA0pFB0aQT7wuzKbOQwV93kfC/Qt13j/TI0k5kg2Yqox1YY0VBwlKdWXgx6VvLzKlRrPEjRU53Q7QQdpenE/bW7G7JBpZOpUmfLVi9arXQWkhtpdXLZP8WzFsQFx3Hh2vm/CjrBZaX9UbvmzenotZWWmpZ3AOJUgvCtkq/2u2Vy0lmbiOfZhxLqSWuyC/FpS5qbCyiW/6LUm/om2rv6mrvR9VGyCRkNErs6uOprS2bcpaZ91Bbd0CTmsTiPd/i8gtuzxGVPpoIebTY61qJ+aT9pJOytEnQ6NfiSBlxcbWsMTRG7LBtdFvJ8nxI9FAyKEhgkJRa4jqHpigjQxMZqamry/fV1Hk3eWRx198zmjTpmEZovSbe7tRGq4+ntraGnlY9nJfT47Wu5YAGVIKSZIEF7y8KOrg9R5C++r2iI6/W9myvF2p3/YNwyqQYcl/Fc14TkcNAk+r60AkPhBzg0wkA4GNi2fyDCMAg5VURKkfz4uwOzWJN0GBNuR0Qrnk3jTrrqlh68O1wvDlyNCBp6R+k0Tqq7ACgOp7K2koA6b7xSgFGeuTgvkElWBYAEDgidxVY8P5c0DGMrbLTgx908tVTPdo73uumw+4baW94WByTlp+fFuMCkJGhBqD1ACCeFP2pTg/WVzkgTpiXUV6GtCCeD4Li82N29vYGoDs1/Lrvy379ngcADaWtg0JwMAe8ufp46gIM+brdYnEKL4/lSF5fItqjFE6ms6/g/UVBB18Qb1xgeno4x7qqf/XUKdr81i2ZIfJaU1LR0YEsbUxMWmnFUQEgP5/sYFxceXlWn1XIGR6w0JzDWosGZ2SIBgeFwJvDeBBvtxWVz5Ior2Xle486i4KIO1fP3aEXkiv0QQ47pa9CQoTTnP304227d08ejwMsszRaylwAZIGDvwCw/RQ8ObRRaBUXcIiCDpwPAN6NvQoN5vgHngOA5XT7NDVJa+31WUXSjRsxa27EXEuLawGAo3HU/+OysnBjlpdmPeNnExkYV16+HO3NEKMQJjgrGizjl1a0MTLI4xL2vek9KrBg+IiuhBRUFhMAfrojiae74Kcf715m8j0+ngDgj/vBR9QOAyArUmj2njc5cJmkOLCKa5u5PTO4YMM7cR0REPELAMtxxA0bpDX3SsXYFwNdu5bWmZN0bc7RjNraOMSPHpBRCgCrKWcYKq//njNrp4kGmyCQCQlGg5X40WDZA3z6u3vAnUEjRtw5d+5LAJi/Qm9xcOstFht9JxHp9/TjDeteKJyd7AFhuVPKhFX39vcXXd4hssjbuQO4IGxkAD6iPZy1Rg9Yj/g5/IGPAGD58kJ42Q0bwnE8AUDG39mZl5eToyMAiL62Fok2AkD34O7QM26jlIcG14oui6sYEjymrpxeyuUJlaZuqViWnz5Y0x8AQpt7J6V6Hxs+4k4N2chD386f/6EeRseB9lso89oBY6I+3lhVAQYDSHfud5qEkUEWGftj574ii2xWUqJyPTqfKOjg/WlQ5P7v4wJwSguhoJEV7hW1huOHKO1xDQD45aJWWyoAUAPOhBEAgwtAbZ2YhC2haDA/bbkfNvKmxmRobJF5mgEDNL/Q2EPKU72nD7rPPhq5rwf9CIDdageAUK2hod4GAKrj/U8BRiQ/ju8/R/7UJ4Ssbl9HutbpL63uUws2RH/k5bKe1vrKq8td1nsflDsXAES5OXQY9da639SS6uQswAC0ByyTlR6QAQkbEgIBQNbicggY8qCpdRpb3M6dNAguS4rTWC4ZjwVCXIABCitgdZ2RGNBDMAs4bSUAoDre/xRgsCFYvx5hkbkVVjfIv6/L6j61YIMLOs7ysuvttdSRV+vcnqEecycAiFpbFtUbiEpbzpiy6NKsDlhL/pS1ZQuq6TZwkjCYJOtuSVNJpZ8nIQeaf/NmPlKyz9R+b4T++cj46JF+9iM9JK2un5+0uurjkX2T5Qsso5Df/7O6smCj5/a93oI+5eUjKu0JVpLMJK/r18PDZRaWq4i3k0ykcHbLKmcqaoVlCvcQtGjEjyZ6emF1Fre3CpDa6vKZhbHn8wdLueytnqU8n7CTFSllugeMik0WaJd6CrUZDTfmwep/cY3S5M/hmqjP73V9Mj0uKjnA7ZQtFebiRWiVt8x/yrHW6GE1SYf8Hraa2psUa2m0QWRlQ0QWd8FiUrkrL5XK+ytm13iiUog3mzZtQbANsrpL7CfpySCz+G8BXEChYRVAxj1vSsmCDVUBxTfFTq3zpDO+Li5/Q9OFlrg6tdX2MovZCn6MtXM7PS8LAPQ+HQA48IcPeardqFesJtf6HvL2bby97tat9unCCQIAz/ORkWKeBwB3PgafKWxOFVYXCYvjwuqe4NAlnpcIgIhcFkQAAAfOfwwNIwAALR4IkKEpMJp6ZrWj1QUUgx2Yde32G/hIB+VVx6LUVlsCcF2Dyt4MQBzvFQgAKP62pvA2CUBaTZmF/RjLEV+dn7nuVvuo4fQRFQBYoHRH31DKAgdX5EMSb0ZGXIy0uiU+JcLqEoBprvgZgBK/BKDEHxYBAIMEAG16NQDoJYAdO7QCQAKnL043N5+mbpB4qNEZ77CXlFRk5FMJfFOd/OyOxJ/deZ1A99+8Weue5gjALphFLL+yezcB2AhZmy5Y2Wnh9feSCGE1ET8DAM2D3WeHDKFuMGi80R/hl+CjqvgSBsBlc5V0vMpCqigRF4viN7AVXV252B3+S8jaKtdTZoH5q7IIaUUjJnEBhYHWxysA3ty4482Nb2r5+KyMuvw64fQqnBknT2aU7aQe0PX8MqoXaKUsaCvivWvQmiQA7qHQ5t7bkSt5RctWYzcD2MEAwsNDJICvFi7sewf6knRnIltPn8vdxGNYvGkcAPj42OPt9hJfTqpyAws1GRnaImRBXQAQf4mBG7i2snwnaxlp51R1FjnEYRfqgBo69nHO0YD1ngAKNxbiP7S9BFAXV1EhnN7D8KLw5riiirq4lXUHK47VIf6mC63tTU3trU3T78IJilJSpQcAwK5XeLlQAXCg6oMbVYife8DCep8RSqkpACD+e0hL70UPGD5S70/pLXQ6pyhY4BzfYi20uNDgBoD4Bxi4gQyQZnVZPK3OMquXOecIdgQA0vMGuPwbD+yg9RIA4o8T20+tAFvxlV59Te6y0Vh5wWQytLYaTOgBAFCp3KNiEPzxrldUADD8VV06/wUWfw4AZDUVqzoSy2GXHwyZiTGgHwGhLHGoj7Mk0jmUAVS4D54BxcVcr90E5fUfkJTGb36ox4gSDwg9hkthP4RQCDtu3Ic6dYEDF1CYPAHweowBwgqPbVoJyXJXfFCxrCgjDv8Jr4urO51bk1GBLDOUQ+IssxesKKlSqveeH7+iBnAAqo/YTTogsq49rOfB7m23brUOp2UGQNH4DJ1gEVnledP47pKvfLdEqd/9occo8TMAJX4CoFXilwBg+lQA5HoFAIcvviiZWsHXH4q5nVDzk9HqLLNXUaFLJlORqahuz4uQOCDPAkblUYvkx1bTw3oGt3Xi4ivLsoDBnVWeygNc3mYSsoQA4PnyFwDIMCglD8EjXc3/kAQAPbPE4Wx9PW6BF6RDkW1ci2+K+JsngQE9AB2QOwEudGNdRoU6y+zl/ohMmjWyf6uiyfduWEVSnJ0wZLw4UvkMTaebCCuqLOtVFQxKGasQdwSYZdcZPWweSykFFuKwlZxoOBdQXIiGmvUkVxJ5g5TaSivnHs3SqeQ1UZUl7Q1p9Bp3kQWvFicXNvvQfGX7cR8fmqs6oPozOp1KAqgClSyw1AKSnqVA/PbTXj3E7RWnn/81jrcb4loHme7+n/Pz5krWuu3GM5+hVnmOfAICAFVWtzdVE9g05VApHvNTPawnW8fLiYmPeXvofmCNztv2lRxRuG/p1AUXOl6rrDd6WFGyyqsXQ4oXnKe3sRIT2f5YAsY2PV4nNJPUS2nv/a9wQJ3yewPiW2OcP3wDN8LQvIHP3zO+7/kXJ8IvrYGuJBUDgEhqyruaAJSXa0I0eaSjRwGA1otw2DrqOs8HBt6hzb+tSbi4RAdn17jE/UI7UwJw+Po6xLOFjmsroj//fEMmr+eCCovl6lUfeqHu47d2scsG0WA5eSqMj1AovM/QiAB8JXZnnRvBul6u9k4/v9Ccmbzwn8ZIgROwwDPET6sxdeaEa5xOTfiSnHA+//OeWetce0cDVAzl5BwGgNb29lb570L73fZ+AFCqsWg4fgCIYuspLidbVxzwNgggzZOQ0o2AyNpG2JWHKQZgJ6sdycvR3CGdDbYyE6kFABD/+uyEgoFcUBHQEAHVV1XxZyNhcwUAy/r1FP+UiIBZo0zmY+2etcQc//3uzE5T54P1evSokvj4SB/w7I/jAUB4Z3N6ZF8f3/TmJRsYwMILraQLUOvwz8ocHR2ODlSo5V65sg8ANKx0B7IsJGGtLaraXXF+Nir0/r77fPb58wkXM1HAAACUpbZjvQJAfJY00EnLRt8gdPXPIyIuiwoRLqi4mlBQkFI9gQFQUWpDhNNZbwWAXADg+AMD9w8dOmVKaMAsg2FQ+3BYFs/2TL+/EIN4Z8qjgXqjf4kdpoP7kwCgMWkdMGNDI03hOD+11+xhrWWt8uHiwyfbGk+6AdjtjkhhPV3Fx2F0/tnyszixP9cCy8/UshP2y8/Q7Brg9sHeImvLX42JlLADy+E4HrxxZlhY8gSuEGGrjOrnagAg4wMA9RH4lCu+w5lLADpQ+mlxxm8LvFUytKTEcnCWofV5fOVzzAmVlDk7yAneP4/4M79GcSoBcJb4l8SHIH4+Hj8oNoeGLtv8kNojASjWGlnwS5eK16BMM6eidMlhFwBtpK/Bw3qGqqyn2J+SkASAPtM6fz7l62QG4O8RvwQQL95qOGnZDeCyLGaGVeYesL8ayxKANl6Lt125+/DV2CVTZZGzcrHZPDmvbPLm8O/RA4a39+uux+WQF2T6/ZZMxJ/yDbcHPcBGPYDjFwBM2lPL8jafyTCF4/zUXrOHlY7iStXDEDlUAPCNdzgdeHqz8z9Hwzx8SQoAR4/S6/yYo1FsPbUKADipewnZeMvxZcrS7q2LuNY3TMYPAQAUSfHbeDma/1xmtdIYYMYYQE5yYEFKyjdoLwMIC4sHAPzHSQAqKovi8L5w2uT8yrz8uPLiWStN7Su60COnkADg8fkWU2dmZkr/ZwWAoCCMAUEU/7M4np9BE57TrM3avLm8sHnhBkM0ffbX4S4mdoSNXiPiv3b7ypIlt2/rvNjaYnwXFQb99QRAO5QB4Fvio6PZeor4OAury7mYXfMtWeFvD/X6OpNqfbtkXpYLIkTBhX1w30gDA6D9Mfp2d/cTn6kZg7gQoLpaFlQsKH/J9Sj6p1/8Yktq76LFIDAtP39yXn5dXv4zs5DFqFB06Us8jYZn7v/GVRCBW4qrC4aKMQA9wJyzJFqbn2+IXrgkmgHkDqRV8nwE4DDU53DO7dt0C6gLCqZi+tdatHlyGhjN1lPL4vVbAwPvu2aVOyn7dd4h92ReVhREqAsuxk6XqyFplT0LMILXyklQUpiaVJlfWRkXt7g8P6M8I2Na1KyVpTt2vPjiRgjO/MAq3RKopsDd3lNFbuVDWTj/hmYTj3ctzQYCEIFRVzkfirUheRdcAwB1lpXsnyHAFOVyj2w9hdPk9UsPjVM+Oxv/9cdzx49VliF1wcVY1S84eBg9JavMLlyqeOrhw6mpl4qjooqfiSruM+sErLmHYP7++sijvduVYgfa7gX1+XV6Y48TzoF6WOFPDilfxZHUWWB1VlY+Fe12qTe0wCOIQKkE+SaAQcp6E1JvlZRSYaH+AyCPn1sTnxMqmq2SOsurXl5L6vUWnYFb4KXWJ3v39viFBXXWVFpT/EFY0wOiSjg//03Wmd5ZdRcSL9SJdyN4MRK4cuX69bHvtjWyLn4claHNqFCssfN/ACSSlF+MGKC8+fSFjHPbWOJ4Bw/+1VsldXvVy2sXQ+ug2Fgy108DwIHXPr4gfmHhs4fQDegL0g2dPhI20/2ISwA4B52fv5EeQncAwGk0/HReHj/u5qUGrny+oCBWNPhg48GuKK3GcMkKcR2DddI8IfQYIffvA8hfjEDBBklG4A8AHDj0DnTwr656mAApdZZXvcxWe+bM27e3bQujn/J6CoDH/FFkQs1dBnCiklL4izERbebSUmEMTE3HzOIzOQaw42+dnX/bCBGAFjS/heNXADQ27u+6eLHrIABkGOouKVmdsgyhiooMoU/58/ga1vnzNV/j9beUqB94v02JnwDopFxPzOqCCvUyAZi8rQa/d5f9fwAkcg/APXteApgGFWq0hZM9ANx9fkWTJ4CizOQiAWDBYnR8cf1BYHNq4PMAEAgACfsPgkBXVMWlS+gBso6lapJGqKVFI6T+BQpTz6ywuSzeKVVG6tCxtrZsdQPgeLu65C9W8LLyCxEAgFlm2+2IiHsAMOWpAKgHXKAe8AQE3j5BxMrp/NO4tJQBtFOKpp2sJAPYsTwuOTnuRQbwfcWNG5eEMLdc0kkABxMu7t+f0nWzK75nlrdMxpe8SAGgxA8fYVJlhf+nFpkVvUSn6RQAOCtd39WVi3gJQKS4f0R9bxAATAaAewUFADDlqQD+W9y1hkVRRmGyy+6ygrYleMVCM4sQoRvQKiFSBlG56CZiYYigEIgFlcJWhIJ0YUuUCLMbT1mhS4ClaRJPEQRElhbhpRD1qSyhInvq6f6e832zMzta/arebm4zOzvnnW9n3j3fOe9H8f/gev6HH57vpPZyMAbK0pESpAfz/YKA5YuWvb9skdnMBGCq6PO2lpbMz6l19pWhUZdg8h1ljvLHSOCiZUxASxyw/eM9F7Cbn1LHNGWugYHyv3pJgIcDhSRAla5B/zQCZNvdnj2y7U73/lAiYFVJ3/33980jJXkqAsDA84e+aaorq5MEYCaLlBjiVwgw73z//eadZgAEIAV3O6YB9qN4CASQ1t/KMkP82BEE4Mu/5+ieoyDA6pnVzd3G6Ni3r0P8aVqwNA94nJDcetfnWyRuB7Z80rqDvv8MPA+36y1M9W13escIEACVNW9eX9+8vyIghr0Fnq/r/IEdFnq/xP1fwbHjprFqZyYCvHDaYzRXGBkHJAoCArby5qtJa4KAGctAwIzqTR9/vP3j7Xu20whQ69gwAs7UgbPIfGyRRUYxs1LMCzy6tnWTGj8R8CkDnUfyDyc5WOiyxCtmQmTOGxcXd20cm7mdTIALI4DwvHBYGOopjceO9czaggDcA0TBA+4BIGCSsp1mr8YIAgKrqqs/BrbvOWr1lMa5egJ0WWQQAIhqXgAEqE9BQu+3OuilvL7W+FZKOAmHvYuBkwl4rV81WCB4CmNtgncag+XfKyr0bWyiq7kK2MDQdb2dPALUtzPWywznWolWoFcD/fv1Ul6pE1DKjVmkiloGPgMvPTh/qpGOWjsGoPeZUlF9+ypv//pVTspyLe5S3n/paR5YynvfweDt+qzzEAn5CWhkdySGR2NKMD4+1oH/c5WAsv9lO9qSqJZ5k5LbNgukKuerrxUmKrSXzyTQ2moSuJEgiiouIKBfAPBTpWO0IzJS9rAsWNAWPLR0ZQw9VyIisH1UQcnXnJVdSYjg/U/Twcdvl5/fewzejv0ZSlZ2SDmhsLs7t5w+I2yIozwjwwGxjFcZkflh+iz1L7VBtW+jzc3pzM8CwoyGUM7hBcjz5YIKqTSBaWrWWbTxcVZ6IHhgYNMAZ6Vv7ADEk4J9jgUBE1TpiConQzls5WJji2IHStN+8vErCEzzpSqlEVtnVG0dylnZEioQmMf7y7jnzXMTEDjBF/aHAG/n/YHD54us8xDE7WjurLVXuPDDlAjIiUzPyTcY8ImRKSBAZH0PHJAFF4+/jfDwd2wl5c5jw8xB9cSAzVeeL0tleZ8gpYik6yRlQp0KMSkrXb3uq2EXvpv8LmWluWNFEIAqBDcBqnSMTiQCEH7R/D2lu1ItkJZdBWm+aWkj0qq2YjtnZbkKawbvf4TQ39/d3d/Pf/TZFVjg+xID22l/jv6aiyYOP4DECBNQX9HgKMx3VRAB0Q5k9nNiiYCUICaA4p84ejTCp/25zQ21zCCgvHxmJUZAoYEJkOcLLzQMDE5fsRcaLDQ+BA5to8IwImCA4qcn7cePX6cSAG8zI0nj8WJ6fJQqHeMdiZH5dPk3IXyjOf/rkC5fhF9QUFp69jkoNOSsLBdIzOD9ScGcf+gio/GiQ+dfjxcYMV2SAN6O/YGJzcaJQuoSARXfFDkiwztiYjPzw8opNZcSaTBGRpYnwhwT+59/WEijfux/heI4URk+8+aamZWzzTKNPUyebxKZwRURwskLbSqatCj+nTsPCQJ8/Dyn35kAY27nV7VaAiZdDAjT03gUfdLl79rVbcxw5M+mvjykMEePSyutikPpKkvXEtkxzwQA2wzANv6jT0RBYJcggLfT/ofroKK2NSOi4ZOHOEBAaE650VEUkwkC+LGNf5SkJRFwzWiaGm08QbW+xxxZe/dWOvdmhs901EzP1BAgpO9UR74U4sBZbSYm4KNtOz8iIAlLSlGVSgoB/vUDQWb+bSAIGMnnTlL0ivgcXP62Tbu6zZE54bDW+toPI6CrNC6utPQcGgEsXRE/CGDlxe1Tt8Ay8NAtz9KffWBmtpXCv/NO1RFip9G80+hfh+MTAfmFFbGO0AUdMZnhsbPLUzLSMQjQ05kY5J8YGUv7L2scfaB/XOMLtH+8MysWU9tAT0tfX7gkwGgdIaWvvlZZEPAhj4DPQIDOoYIJ2GdsQFkiDDLcBJyvFjzE5+Dmtys7qDwW1ZIgAFJza0HaCIRf+v3XisMD1+IKAoRIsaRmp2/nP/pEzPAkgM3TcAecOFwc35Gf73C5CuubY9rDQQCMkVPgCms04kVkfvhs3v/9/nHj+hE/E1CE+LmYt69vtyQAOWSY1UkCZPyybQ7KkupCP9yG+ImAG2vUyXYyiLyCCfBvaPDXEGA8Xy14iM9v67Tj4u++dPduJiCgYF7p2WdXVZ177tenfT9CODzw58Wx9OQMlq/9ppvsvufSn/EVmAECKEGnOkIMP7TN/9A1fHwiIL+jor4+ph7FuUxAeUo+EwBvcBDA+7//Pp8PEyDiZ4AAPl8iQErfE4cPc8GSBNr4hDK/Wrb9ieOp8YGAffvEF078NmDpeI1a4DC1vjYxJ5YQDuArMCuwC4MItjaY7Kq6lmtz5VOApScr2DE3QcvjP4APPZ9fYpyyljdetMkWFnJ2lghIsVgc+UYjnoL+QeGz9ftP5cd/bCxYIJhk1tn6F7XC+qzzeP32K94ABAEXAyCApOONkwGRtT1rSLxaPQzAP4qwdKk34wvOEn/xKnDUmzBGB9477w4gj7frfX01hg8MvMbfYRZLmHAX4/35DfyOydjbo5pZJn1zvSXUUmEBVb4L6D+f/yMKQKYRvPKSBgeTUKp7gdT0c3XSNSlaZqzjo4upse0DAVFcDHytgmt3rwDqLNQXbekwAaLAwky1x3w8ofRVua/P4iImwwcGNQ198OBBLy2mMlQSnQGLF/vOnD5scyCjTPEpVnZhFjRtdkrbHX8U4JVUUVFfUeF4z2wjWHN9NtZ5SNFop8PBZXzF6dmjID0/ePjh4vLyYsXn4davd0mI/uKh8CWm2Wwz5uN2ki8xS1tRsMDHQy2ytnfzTn3tMLLQhocNAcETpOPEwaHeBz0IQLM5Q5ixzX4iIzVjZUZ2yr0ls8gQvEw6RNCdZm8+vmLjbXZjsGfbnTGdunBEgYa31/6KehdKS9dMkVlfH79JfdousCSnK7ANPviRlgBIz4TmDx7+xlUyq6T+vpkzUeM0EwSkKSil2l2y2AQBNTWoxiSLTZa2ggA+HipRAf65DxABOBN3HpMImGS42cClc+w4sXmoNfVlDwI4cDm7Ezt7UmpMQkRIRMLqEkYZHCJYOmeGH99xfDcISDWkTvHwPU7npplhskADBDhcaE5fY7EycimrmqvxCU5yBoIAZ0YqbEKH5W678VgFcsz7R4/u3MsIy7ZZFaQCtZMFAYsWGY3bXmACRgoCjGaWtg8h06Ma3N3+4Dlau/xRAd6CAJmCIQJsqanW0zUE5GjihxvdsOyYkEC/iLensB98SZl0iNiLG+bx3cczZ4832g1TZPxyBKRsYTM04XiBr0CM0+VyrrmYSwKmjB+6o2CS77qFC5WSl2hnW1tloiUE99yQoIuoDW3WrP19eAYMGwY16uuN2IDsXbtkSQwREGrYtuydDiLgHZNa22tmKawYQsRUiIIFs2cWOMgA3Ky+tuy2W63eY4d4jgCKX5qxPZFhD5oVaX9xeiPiBwGKQ0T4pszdxzcdnz0+WG2rpPoD5fMofiYgz4HLDygjYKhrfqDvsGTFwQEEVGbh8o84e5h950RuQ5vVtx8MjEP8RIA4YEJX6S7hQEG+xKGGmnfeWW5sJgLU2l4LZX0VApo3SkcIszZ+aeCw+D5gJq8Qcesv3t6bdyN9oBCwocKloKmpyTW4KmHx4mGLnVOyED9QdmxvZlvbk20gYNPu3cfDmQAZPxOwfosYfTTbRZ4kXhdQ/z6AEUfCYLz3QGDwsGS+/A8IAootCfh2+gUdIqlMI2B0H+KfQfFTZ6c6AjgLS77Eoc3L33lnUUcz+RKrtb0Wer86AmKE9jfrsrj06j5NQcMvYzdu5OsvQStKuGd3z8g0Bc7CzY/RyASobYAQckPCTdK3mJukqP6A70G4Aymf52W1EZRvsTWXtHM20hUSndEZVrQt4vKPFFJ58jdNfXPm9I07wZnJfaZt8maxU6D5PCKgbhkufkcz+RKTtJUE8PvlPeD55/kxcPfa0++RM/EA2d9ByRnuY8cV4RU2NSo1dcpULQHlhoxYEf4ZggAZ/jyE31g1NV+N/9iQ3aZp5Fs8nCDOn9sBRDl0SBSyxl5jgy/RZnWnQfunwdWcgPRG3NEgKviZkNs8XErJyW8coJo4jh+pWZNH29pVw88jX2I00eBGENRMvsQsRQUB/H4qxmasB2BuFp0jg+dmrefCxk4iAjhLTO5x08JgTD9pWpibAHiRWSIRvyDgSRDA8SN8ip8IcMdfXX0MBJBvscZHGN5iiJ8IyL5wTDYISLUB6n28FtpftrkxC0d98JCy+9e5peR57FEk8SkI0ElN8iVGaVxNjdFcCF9isV0QwNvXqklvgAjIkUOAAQImGW82KlVaIOACOKmOBwMqATnKUwA8yBEgKWACshQdn3kcbYDsW6w5v7UYeQSaqU6lEUBunLUCbxOGfr90A5qtjiqAYuqsu0yVkqjj9YBeatLmGmRlC4NCF7m3hwbR/zmPtq8FtPZm0bpaXsg/88sWNcuJ/81QGFCW01DA8k+iCsD+HrtwOhonqIh9pZgCYpghfIXF1RcNegLu1rVeb0+p2pDkmTcmWenO4QI2BXJIXRYVdUWS5h1508aqWXZAX2sszNDUz1uvgvXzKZf40MwX6R0puCXvVeC009T0uSZGL5aimlrgsbq2NdPARqFSAgp4++juYqdmsawwesRrpbPNs1Y4NcpiycbuLqcLv7OzKqfe8d6XG0UWF4Djg77WGFIaULPU6kQJpm0efXTtqZf4GFD8vkx6RwquRdYsEeI9aRSyppw2JYwHATiQphZ4rK5tDVnV6kt8gbQZcVuxHQEmInBgMyAIuIZqd6Ujg00bPhPgb8/KaiqrbGrLbNkNApAvp/dI5OprjSGllx9oKiiQWV8QgMB/+OabH14ngIBTLfGB0IXXGQjQOVLk0WSvcJTg/b1HjRmT3NWVfDWDCcDxNLXAcqkrV0y3UGKUVv4KS06k4a5IvsFGg82W4pTxny4IQPzI+E1sngil5yZABvhCtr2msrKsrL2sJbNpSWwYCHjpvQx1u77WGAQ0lXVtLaiSWV8i4BCmYcYJBtby8ckugn1ozf5iBHD8TIDekSKPJns1S4SMRU3pxStXagkAnZpaYNGuHjElLcIqCVhY2DCnetjWrajuRUbI2L1ypc3s3Mzxn75ZElDnP3L4yJ3NUHoKAcoVDsKZVFa2tcMvP65lScvUOx5JwdpRe1ezozwmS30CRslaY5WArtTcLrmEBxMw7hmgkVYgen2tCDg1JCRVU5w9wPEzAXpHCnah1SwRMgQP3ITkZDseusBz8V6cNVVrgQUBFYGrdwRWSHO0woVz6ue8m3z2OaVLUZxs6541q9uwsuH4McJxk5l+506sI9P+kcNJKofILyjPWI7CXB0IaI/tmUEE7G8JuyPSkIFs0XEpTVuJAG2tsSAgI7iKs54gAN/9ZwjjBAHpQnnWObOF9BZKEvFLAvSOFAoBSOLheIIAFDFnX6olQK4mp86vm8v37i2HYwET0DBnznx8P7efc24ptmMEVNhsIe4sKxFw/sSLzIdkgYM+CxtKBLS0NM3vw11uMBNfgUhaNkuugLYaI0CNX0rpAy1dUWVx4v0g4NFHrxUj4DUQcKcgIDUqCgSYFQIGZPyt75r0jhRUIHF/ibpECBEA45mNl3KPPAgQq8npCDBmwARItKlRre2cBvpl0Ps4B2zrtmVPkPFJApBTbTbX1TWPBAH6goWhWI+wMhMFUC0tRwaXbAYBuP4Z6nS5rtaYf0scaKqqKsX7FQLoHnBtx2uCAGVPbvNKZwKMRhl+77smvSPFipmo9OD4BQFGIDk7N5mPgQssaoU1tcB6H18QUN9O8QNzh3LACcPUggQmgB4AdTv9rxl+1clLbnh3pq3bvHl+S8sgsGTzbBCwyuJu6zHX6muNJ9MSH+/jAPx+IgC3vh8OH0b8TADf1QFaLg1marcyAQNMQG8rCNA7UqygUieO/1U+Ht+YduzINQv4i1phtRYYBEzx8PFFbW77EqXN7N2rva/tDtEvqWH+uyU3QMDqrErG5vDNRMBe7ZoarfpaY7HEh/r+9fT4B15nEAGA6LYGmACcungMAia9IwXXInMWex4fz6wWTwgChhJyGd6EC7QqDTB5ojVNV5BAVN+od3AANJP0c8NUeTo7r3U8jqsuqaGrNZZaW33/ep37WR5B02amb03TO1LQXis2cIGEPF8mxw0vo4TSO6lRngycm8f6c3mL895Tz2D7IGRuUvQR8i6Tvr46qXoGgAINLomYCgz19qw/GeMMv2l8uPNxxQhZ3/ZmtCkwQ1pbLM+6cQvDKODuHLuccBrjlFL6KkDbR6f3Fc5YzwVaAi7X3WshTRmyE9NUbFxsSHwPwJewweXaHw2dW78SSBPS9Ko6T6l6BrLHqATOEXg6zDvbZseyvAEy6zu2MiElISTFnuh0kt1g1lSeKFXPx6Jvw4MpitYW5Rb9+bO5GytfIX3VeISPsFqwIXyJ9b7C/kgZKVnrzrIyFwhwNyPj7rTMlFecQrGvATrLmpYhY5SV5YLUTGNpSgURNVqpCgJycvCDTVr0gQCbPcAOF6ULpZMUChsnTAAdYoa/CATgt4Z6PhabgWtm+bUgQLPuDlas0J0/CEBgmtXx1HiEj7BnBsq80+slt0cwrW35yB14g7L/fU1N5SBgUd225prmZvzT8QIIWJyBq4/w9zaVHXiBCWgX8Z+tFEQs12QYckHADcgv5CN+SUDqJVi2WcQPAi5IwHjxi9pRVNQCFE2FoUIGtxKuIkxPeiUxalSq36jixYziFZ9tOwQoo+DDZyUBLpdRIQAXViN9RTx3bdnyKKUh7lrrE8J1pAUFUqh54bHEEBO6L92xXsaP3ekNdxIBzc11zXUdy5mANcZVxmJx+V9A3osIcLnjv8SeS1ng5WrbSOhS/ZIYdlsCHtDSIv/C8UUJiVEbEzc6isKZgLAVM+1m+xrCQWBNdN4jAci8+zqJEJTu3qp+PTRSuK4C+dHl/BoE0Fp2Bw4I6QsCEM2WlIwMUPDoQyCACyZm4IRYamsJoCzFS3dgvh1QZpxLvkCWt3lnc0dH3aLlNcsQcF7kquJVuPxNB16QBLTL+M+eYIew4CzwIqVSDwREqPETAUNxBTTl9xfMjSzescNZviM8fMCR4ggHAZhtUOJ/GQQsDh6VGuI7cxURsMZNgHL8IL5gD3f+8ENPA7JMd93Jnz8aNSaHxep44oLiB3IK4gcBomAibdy4UsSvJ+AOEKAvOJisLqbGAa/A+HfSt5/iv4wIcHH8IwKy3W12y/3l+TEBFL+6GpzNMwucixHEX38QMLBsERGAG4wHAaHOmc7a6Rw/E6B9vyRgeWddTc+yh4gAWcDR3y+lr/ARvj09/faHeLuQ3jNQyS1Xm5u28WfCbwI/t+oLDkiaNjMKmwUBaxo6cfk5fiKggeIfRj/OcEtpvhxZ4EWaR23hkJynn0b80qP0uTAmQOMHEO1E/JVU4VS0bFlReNjcL38W+Jjwc+/4jW/nTg/FuuF8fuvmHpSOQwC7zrBP8H03d7bcdwNPtbEZm0b6Ch9h3Ai2KFNxbqXGaX0vvXRFAB7L0REBYt21ukV0xfPqcfkXyfiR9Y12pQ3zTbCiBubQRcOx/+XXLJqjdWgAAc/h+iN+JmC2TY2fgBGgVHjtxlK54WGn8AkOsEepr1es4tEB5AEHo0Wef0ts7O0iQM5Sq6vjgQB1KpK2mw3ysy2M0JPa5k7K8roNKd4hmOZ0lnVqV6ML2+Vn99/ZXDdyotj/suWeDg1UEIG7AB4CjNlmXe1wvJPL3ABRkPFPPsG3riIo3xEQIGcZRZhEgPoUoP312y93t/HJ1eZOMifTFRwAJi2ODr7g8frdd9+/6jLs7y5AMHmC5B+yzO4SB5Jz0gwil0ACkHPCEv/kE6zvslOFsgCXVyAHitU5dFJabscO2iy211kmT4zXFUioApyxoiF4UrCKKVfrs7TwRvFwJt7Rdvqxj4cc26Skvrm0gl0hNrAWlu+9SpGm+uONB7T11nkEFvj4B2jV7T958uPT5k4+7zvluumPZxZQzdSefEVncRHlKRXvhLXMI8WPKHeeFfWpU66+2I2bxuuztDeopjkPA2+dIWt9xSIwsWFsniYW1SA5PFYWSLg/T18wofcN5l+D5JPlqidtkGTq3OXx+ZM7MLkB++7QDp7BMZ3sU5zqB6td5TUIeH29RyelT9QkjfEuCPDw+gIBWEYZi2lLPL5dn6X9vkK7uvqun0St78bg2KL89vZYIgB5e9EoCCFABCRkB4waFSgelWVy9ThVCut9gykfkJ7TiQVPmnqK1tyfZJrfE9ilfj4I2LFxdce+jn3+b/ASG3x+2Zj/svtJn+JRtByesj8IwK+kyFSLgoU+fl1pJcDoRrqTNvanpKutuUBxvXVXdwgYUAjQL2xMxcvrqhcutNqruc3tmFzSIraoKbCqpWg2ETBTNEqyEPLB9Ugd5et2f6tkSyMH4AQc0eK5H1NREWHj43OOL316J9DUfpAIWNJXUqDWOk/uwFjZV7gv1PLGp5IAX7vdzzfAHjJB+BRnj4Kxsbrw8hkPbXvo0ewQBe9CKnaljR5dMoj4B68dfcTgqbUt9fVL2g3Z5yhfKzYsMDaT+dghiyQgrQWPgVBrbkvuu9W9+bLWt6ioottNADu9BUIOEwF2q93X94QEapI4feLOOhs5/u6KCmuMQkBDw/T0+9e0d7b3HLw/2tQQtHB/ybw0WTsMAlZvWr3vDf+gjn1MAElfu1+C1c8vdQJtlxdMXXj5jIefKXxw/c8+Er1QSl1bYex73eC4/bcNjpMEpNTUpIiChvr65x21BssxBXRArK6N+M+/iKRv647OzoUNDXMKl7TX7tmDEeBYwKvLhYe3NLWAAG7MdHG36BgmIISywr7utrloJ8evpt0pfuSpkaN2kfSFUnQ1dC5Ys6aop70FvxVMFqyEg4qVNFkLfB4TsG/fGxQ/pu9J+dl9rX7D7NZRtF1XOwwCHq149MEv8UoABPAIaBwcd+2rg9cyAXyNm2XBQkPnlztiUqBZBIbwCGCLjzp/MxPgKK+GCij0r9/elrO9N56qLlnptBw4MBg+m5e8cFH8IECt5j7BGH7iininev1PT9osa4PxiypGSGsQ0NlQ1g4CsEY6pDKPgMZ5aUoW+rw3Vg+sw7y1nL4XBASEWBP8Un1puz5r7XXWaw8+mNJtVbDQZ8LWNEUJv/pqY3+k+v0X94DumApHtLpiob5NjdvcPr7utsJaavOSBIQTAZktLWeFzz6dZmpcFH8ZF0EtjaCeYVmQgIWTk4o1M4+VWVPNuuODgPbOpibcAfct20cEzJ+zv0TMoigEVK/m+CUByDonJEwYAWfJS2i7LmsNAh5c/60GV/gEY4EkjVsc33SgvbDEHdTXqlvxFFgQPUSF3pzse9z+GVWEgp9AgIj/0ieBcNPp90xfsMDF/cJXEgEbIsoA8l0mxA3qzdN4Ieh3VOmNLG9WT1N7T0/PvmUvEwFL+maUqtIZBLy9eqMIXxKAeO2pVmvCKN6ul9pev6z/9lktAd471BwtcF6e6vIEHkBAyu54TfzxenMyOFMzygWGTOXHP0HU+t56j3ITdF0IoJbX8/N88MiWE0sEb/1C0LfiPJwNrsCypvY3yHHC1FMwSiOVQQAeg7J8AzD9g7TGCPiOcYWCabqCB9XxVqAt3mPR1l9MOkD+aZ2Jz9CW+tL205OAQV43mBPQemmql776haClFI6Pjxbo1e1vMs31qDn4J2ntpZeKVgzkB6y+7tetEr2M7b0vM2B6JrerWdbLTxzBB+qzynqCshT4BfAMvX7JjPjElKypUxMdiZI3xV3CIrPEdDlOkyDmXj1yhMsfFOxou/XYx0mQ3sBUQH98fbxeeql4jq1h/vwGm1153bpDwaZO16ae3pdp4QG4aSvb3W1uFzWW9KHAAQUNgFrQYFINHAmmLMMW+sv4ovimN5htFVjj62HCzcDp8UYkiOm2K+6Cs3k1OpRVKlnhvPe43oHTvlSQ8X7UykPyNWFpkpDexe4CjgqrrbvCUIG/u7u7K1z6eEWBREKC6sBgt7UvXDjfliBf66XpyzcXw4UX5dlyu2JudrgR1lq37R+k6WwOXRY0cIpN9SF+NWuLdCDBrDD8xqZYUHpbwfe8dEJkfEa6IyMyIzIofDM1SIAAIRttstY3773pq5TjkTna+4unf6M5/lLZZrfaXcBRERGD6CNKbLaIwLLGTindu7oUKcxS0Wq1qw4MCWBgznxriHgNy1as2vQmgMLNuI4hgoDp0y9Us8Bk7tXYuB/3wMHGfhCgncpae5pYKFlK3XlHs7YYHzM+Zn5sPY3LWeZCEFCyEi1jW7bwyh5vtX6ptAF+DFSblMXYbObuzs5uKwhYtQrF2qNJqpOP8WlEsOpzvEFI7417Kzcvwn0QBEBDlJQsdux9zzXuSFl3EMULFMxQpDCEiJ/Nb1jACOswxYEhwTZ/DjHAr/F+Q4qM/+mON0EA1ieFR+aFQkoyAbj8TXPQlHek8dAHTMBTMn5MZgqhk91gtIv9s7Y8Rlj/li8oP8dvndkaE2M1SpdReIzqsr6FICCCYMzo6Ww6UiEIOHzg8OETh6+l2uM8nqVIxwDiLHJSFknv4tq9mzfvq2letjnMaQx1BZY4sVNZo6sisZDPZ96M0aPj4s5mKQxlZLdhPCOppUhFMICCgCXWEHptaG7GIBDxPx3XEX36zewRugBnL9vi6PL34RnY19j45utrP3n4ecKbEpdCGAHGhiVGaoDfjnsALr/lQf8P+L6UXm+hiSCcvkShrna4cKkwWcFPIXNPj9koCDgwsbFxeP+1JJ3xGvEXrzlYnIEs2ZqkY85KVHdnEQF1ze+AgIxIgyHCFpy7uqy5OAMEsI0vjZcROH8mAPEGQCj5ZZ/rlooh1iW33bbEGoXXMRUx3Rkcf08cLWV98kLJB+jyX4fLX0fT16d5ZpVp/UASxsaL68XqcTwCHnzrg5eZQb/qG1J4+Ct4K10bv4YAY4WrtrY+NHSFGAEnTvQfuZZylnjN8R8EA5QjjHZL6X3LQMDs4sgUw7JAIqAx0uEPAvj8S5EWl1KYpKEd9Xw0Ia9KRTDwwAMLU6PO9jZ0d3P4lOmJewME6KTkVa6SPmigvsbDb74mCFDjJwIGXU3AEQX70Umi+qQGpba/fLNqsksE97KUdsO0IUa47GCuqbbWbAmlgFHwcWI4jk6lt71uvwdRshOfpfyU6Ozra9rMXWaNByqaWppccUGQ0uL8x20dgaSxJIDiDaH4tVIxxLrwgQfmpIZ466WpXkp+4VooLj8qWCQBavyvjtvwjOfrL/yy/ahVW3yDfAKqM/j+z4Crr6VQ5yvMBAQCZloMGgFQVrgEXYX9OBoRoD8fECB/SvUAggBzs6UszlVcaGYCeK0KavbD/kzAqaUixsB1ty1J9e5Vbsp7qvYgw3GStCQp3NdY8vzrDBCgPvUIG3y6BLYKeAepbFrS/f27XlZshm9gRF/h6SsMAuRTgN7DBOArII7feKqCjHihH+QwYAL487qRpmMC9FL4r6Virgmo7WVAYP7Ue0ppif+1/4sTH7izrm5jsA0C+v2nELhEpJrhr1teTilEUCCOcvRortxpxYqkJOXopyrI0LflWdxrTwicJIUf2GCaq5WGSTC4nzZtndvyIgzgo2G7B2SNw1VXjQw9R/N+/epzQZM1OWZgnhszGJfq8MckTbGtbdIfXv82TD0xAzs00jDJiaxncIIsY1s3Nyy/PMgRCTsouR0ODVF+qpPt2P66ukOWBPX9l9cp6CkoaEk7z2io+YaADlfCVaNHqEBKqErGHa4QkD3l92xeZZWqAX+fku31b8M0vy8QpbCKFGYCVq97e906tvYhAiLb2spRmy+2gwBEfoni4njJ2MGYi5ZftDNhgnw/CLhIunuPXJ6WVjMZN9FOrRSeN8LdIgkwAUVFOQtynAvuKSrCC4Ph1z9+tRm6ugw2/MFg8Pq3QVnVsq+q3VlSImAdCEhel2tMTU5uRYNCZnkbehPk9pBsuwLy6LzQ1BlxzfKROy3yfweDAMR/jSwrWT7ZuDLBMCBvgj/9tHU8CKDoq6q8CRczAU6MAAyBBQvwgi/879lRUfRvw39BgCuwqa9MWeh4jkkSkJycm1yLv0BAZmI59WZI6asvUKC8PFWLi6zGyCtAgDR3H3PObQ+keUfFzAqJql5XnZzMbnCt80Yg/LRzq6puSsPEEAgQGOjJFH8wEH4dExx8MS7/f0JA55KyOftlv8WGsj3JYi2L5GRj7eNvm0FAW2Ybxf+LlL46qUq+vX2B15xPFilw9Zl43uV1irm9IMAeMmuW3Sj5hRIUBFS99VZV2lg3AZkopJQMSJ/jm25KMPxHBPS0NO0vk+eHE5wWLK29UpPffhwjQC999W1uuIeU1cD1REwlnT8ZBMjhf+W5D4AAc8isAnM1H5L79ogA79KqHxdV/aQSgPjBQLgkgG8D+Ps/ImAJrv+c990LKU9bLU82udZci2puvfRtL9Sux19/namzERUFO/3FdGBklljiYqRKAHyWv8Is4k8//cQNGCDAG6iqajmGphVJQHgPCBhQRkAqf/v/s3vAEjV+QQDHT0DG7vFWvdTEkFduGDxiBiOoXWLxGqVgQV3i4qZzHzCVggBzzziNFJ43huMvrfqpCk07IICR2TMwHwNAfQoA/9VToM+15HzNQspz8fgHkiUNraeQvu48MGDqp6fgYnfFQrS6xMWFY667rdTbaK45wBBGF5fNGKN1uU0GAYz5bh1wCS484T/TAUdNk7ULKSuFvK0SJ0lfHS677MzyFZrV1NQlLi6Aj9dYb3+T55IXM9CxogAcV/3vSvC/Bj1utPD6n/EnnaQbrf6BCX0AAAAASUVORK5CYII=)}.react-tel-input .ad{background-position:-16px 0}.react-tel-input .ae{background-position:-32px 0}.react-tel-input .af{background-position:-48px 0}.react-tel-input .ag{background-position:-64px 0}.react-tel-input .ai{background-position:-80px 0}.react-tel-input .al{background-position:-96px 0}.react-tel-input .am{background-position:-112px 0}.react-tel-input .ao{background-position:-128px 0}.react-tel-input .ar{background-position:-144px 0}.react-tel-input .as{background-position:-160px 0}.react-tel-input .at{background-position:-176px 0}.react-tel-input .au{background-position:-192px 0}.react-tel-input .aw{background-position:-208px 0}.react-tel-input .az{background-position:-224px 0}.react-tel-input .ba{background-position:-240px 0}.react-tel-input .bb{background-position:0 -11px}.react-tel-input .bd{background-position:-16px -11px}.react-tel-input .be{background-position:-32px -11px}.react-tel-input .bf{background-position:-48px -11px}.react-tel-input .bg{background-position:-64px -11px}.react-tel-input .bh{background-position:-80px -11px}.react-tel-input .bi{background-position:-96px -11px}.react-tel-input .bj{background-position:-112px -11px}.react-tel-input .bm{background-position:-128px -11px}.react-tel-input .bn{background-position:-144px -11px}.react-tel-input .bo{background-position:-160px -11px}.react-tel-input .br{background-position:-176px -11px}.react-tel-input .bs{background-position:-192px -11px}.react-tel-input .bt{background-position:-208px -11px}.react-tel-input .bw{background-position:-224px -11px}.react-tel-input .by{background-position:-240px -11px}.react-tel-input .bz{background-position:0 -22px}.react-tel-input .ca{background-position:-16px -22px}.react-tel-input .cd{background-position:-32px -22px}.react-tel-input .cf{background-position:-48px -22px}.react-tel-input .cg{background-position:-64px -22px}.react-tel-input .ch{background-position:-80px -22px}.react-tel-input .ci{background-position:-96px -22px}.react-tel-input .ck{background-position:-112px -22px}.react-tel-input .cl{background-position:-128px -22px}.react-tel-input .cm{background-position:-144px -22px}.react-tel-input .cn{background-position:-160px -22px}.react-tel-input .co{background-position:-176px -22px}.react-tel-input .cr{background-position:-192px -22px}.react-tel-input .cu{background-position:-208px -22px}.react-tel-input .cv{background-position:-224px -22px}.react-tel-input .cw{background-position:-240px -22px}.react-tel-input .cy{background-position:0 -33px}.react-tel-input .cz{background-position:-16px -33px}.react-tel-input .de{background-position:-32px -33px}.react-tel-input .dj{background-position:-48px -33px}.react-tel-input .dk{background-position:-64px -33px}.react-tel-input .dm{background-position:-80px -33px}.react-tel-input .do{background-position:-96px -33px}.react-tel-input .dz{background-position:-112px -33px}.react-tel-input .ec{background-position:-128px -33px}.react-tel-input .ee{background-position:-144px -33px}.react-tel-input .eg{background-position:-160px -33px}.react-tel-input .er{background-position:-176px -33px}.react-tel-input .es{background-position:-192px -33px}.react-tel-input .et{background-position:-208px -33px}.react-tel-input .fi{background-position:-224px -33px}.react-tel-input .fj{background-position:-240px -33px}.react-tel-input .fk{background-position:0 -44px}.react-tel-input .fm{background-position:-16px -44px}.react-tel-input .fo{background-position:-32px -44px}.react-tel-input .fr,.react-tel-input .bl,.react-tel-input .mf{background-position:-48px -44px}.react-tel-input .ga{background-position:-64px -44px}.react-tel-input .gb{background-position:-80px -44px}.react-tel-input .gd{background-position:-96px -44px}.react-tel-input .ge{background-position:-112px -44px}.react-tel-input .gf{background-position:-128px -44px}.react-tel-input .gh{background-position:-144px -44px}.react-tel-input .gi{background-position:-160px -44px}.react-tel-input .gl{background-position:-176px -44px}.react-tel-input .gm{background-position:-192px -44px}.react-tel-input .gn{background-position:-208px -44px}.react-tel-input .gp{background-position:-224px -44px}.react-tel-input .gq{background-position:-240px -44px}.react-tel-input .gr{background-position:0 -55px}.react-tel-input .gt{background-position:-16px -55px}.react-tel-input .gu{background-position:-32px -55px}.react-tel-input .gw{background-position:-48px -55px}.react-tel-input .gy{background-position:-64px -55px}.react-tel-input .hk{background-position:-80px -55px}.react-tel-input .hn{background-position:-96px -55px}.react-tel-input .hr{background-position:-112px -55px}.react-tel-input .ht{background-position:-128px -55px}.react-tel-input .hu{background-position:-144px -55px}.react-tel-input .id{background-position:-160px -55px}.react-tel-input .ie{background-position:-176px -55px}.react-tel-input .il{background-position:-192px -55px}.react-tel-input .in{background-position:-208px -55px}.react-tel-input .io{background-position:-224px -55px}.react-tel-input .iq{background-position:-240px -55px}.react-tel-input .ir{background-position:0 -66px}.react-tel-input .is{background-position:-16px -66px}.react-tel-input .it{background-position:-32px -66px}.react-tel-input .je{background-position:-144px -154px}.react-tel-input .jm{background-position:-48px -66px}.react-tel-input .jo{background-position:-64px -66px}.react-tel-input .jp{background-position:-80px -66px}.react-tel-input .ke{background-position:-96px -66px}.react-tel-input .kg{background-position:-112px -66px}.react-tel-input .kh{background-position:-128px -66px}.react-tel-input .ki{background-position:-144px -66px}.react-tel-input .xk{background-position:-128px -154px}.react-tel-input .km{background-position:-160px -66px}.react-tel-input .kn{background-position:-176px -66px}.react-tel-input .kp{background-position:-192px -66px}.react-tel-input .kr{background-position:-208px -66px}.react-tel-input .kw{background-position:-224px -66px}.react-tel-input .ky{background-position:-240px -66px}.react-tel-input .kz{background-position:0 -77px}.react-tel-input .la{background-position:-16px -77px}.react-tel-input .lb{background-position:-32px -77px}.react-tel-input .lc{background-position:-48px -77px}.react-tel-input .li{background-position:-64px -77px}.react-tel-input .lk{background-position:-80px -77px}.react-tel-input .lr{background-position:-96px -77px}.react-tel-input .ls{background-position:-112px -77px}.react-tel-input .lt{background-position:-128px -77px}.react-tel-input .lu{background-position:-144px -77px}.react-tel-input .lv{background-position:-160px -77px}.react-tel-input .ly{background-position:-176px -77px}.react-tel-input .ma{background-position:-192px -77px}.react-tel-input .mc{background-position:-208px -77px}.react-tel-input .md{background-position:-224px -77px}.react-tel-input .me{background-position:-112px -154px;height:12px}.react-tel-input .mg{background-position:0 -88px}.react-tel-input .mh{background-position:-16px -88px}.react-tel-input .mk{background-position:-32px -88px}.react-tel-input .ml{background-position:-48px -88px}.react-tel-input .mm{background-position:-64px -88px}.react-tel-input .mn{background-position:-80px -88px}.react-tel-input .mo{background-position:-96px -88px}.react-tel-input .mp{background-position:-112px -88px}.react-tel-input .mq{background-position:-128px -88px}.react-tel-input .mr{background-position:-144px -88px}.react-tel-input .ms{background-position:-160px -88px}.react-tel-input .mt{background-position:-176px -88px}.react-tel-input .mu{background-position:-192px -88px}.react-tel-input .mv{background-position:-208px -88px}.react-tel-input .mw{background-position:-224px -88px}.react-tel-input .mx{background-position:-240px -88px}.react-tel-input .my{background-position:0 -99px}.react-tel-input .mz{background-position:-16px -99px}.react-tel-input .na{background-position:-32px -99px}.react-tel-input .nc{background-position:-48px -99px}.react-tel-input .ne{background-position:-64px -99px}.react-tel-input .nf{background-position:-80px -99px}.react-tel-input .ng{background-position:-96px -99px}.react-tel-input .ni{background-position:-112px -99px}.react-tel-input .nl,.react-tel-input .bq{background-position:-128px -99px}.react-tel-input .no{background-position:-144px -99px}.react-tel-input .np{background-position:-160px -99px}.react-tel-input .nr{background-position:-176px -99px}.react-tel-input .nu{background-position:-192px -99px}.react-tel-input .nz{background-position:-208px -99px}.react-tel-input .om{background-position:-224px -99px}.react-tel-input .pa{background-position:-240px -99px}.react-tel-input .pe{background-position:0 -110px}.react-tel-input .pf{background-position:-16px -110px}.react-tel-input .pg{background-position:-32px -110px}.react-tel-input .ph{background-position:-48px -110px}.react-tel-input .pk{background-position:-64px -110px}.react-tel-input .pl{background-position:-80px -110px}.react-tel-input .pm{background-position:-96px -110px}.react-tel-input .pr{background-position:-112px -110px}.react-tel-input .ps{background-position:-128px -110px}.react-tel-input .pt{background-position:-144px -110px}.react-tel-input .pw{background-position:-160px -110px}.react-tel-input .py{background-position:-176px -110px}.react-tel-input .qa{background-position:-192px -110px}.react-tel-input .re{background-position:-208px -110px}.react-tel-input .ro{background-position:-224px -110px}.react-tel-input .rs{background-position:-240px -110px}.react-tel-input .ru{background-position:0 -121px}.react-tel-input .rw{background-position:-16px -121px}.react-tel-input .sa{background-position:-32px -121px}.react-tel-input .sb{background-position:-48px -121px}.react-tel-input .sc{background-position:-64px -121px}.react-tel-input .sd{background-position:-80px -121px}.react-tel-input .se{background-position:-96px -121px}.react-tel-input .sg{background-position:-112px -121px}.react-tel-input .sh{background-position:-128px -121px}.react-tel-input .si{background-position:-144px -121px}.react-tel-input .sk{background-position:-160px -121px}.react-tel-input .sl{background-position:-176px -121px}.react-tel-input .sm{background-position:-192px -121px}.react-tel-input .sn{background-position:-208px -121px}.react-tel-input .so{background-position:-224px -121px}.react-tel-input .sr{background-position:-240px -121px}.react-tel-input .ss{background-position:0 -132px}.react-tel-input .st{background-position:-16px -132px}.react-tel-input .sv{background-position:-32px -132px}.react-tel-input .sx{background-position:-48px -132px}.react-tel-input .sy{background-position:-64px -132px}.react-tel-input .sz{background-position:-80px -132px}.react-tel-input .tc{background-position:-96px -132px}.react-tel-input .td{background-position:-112px -132px}.react-tel-input .tg{background-position:-128px -132px}.react-tel-input .th{background-position:-144px -132px}.react-tel-input .tj{background-position:-160px -132px}.react-tel-input .tk{background-position:-176px -132px}.react-tel-input .tl{background-position:-192px -132px}.react-tel-input .tm{background-position:-208px -132px}.react-tel-input .tn{background-position:-224px -132px}.react-tel-input .to{background-position:-240px -132px}.react-tel-input .tr{background-position:0 -143px}.react-tel-input .tt{background-position:-16px -143px}.react-tel-input .tv{background-position:-32px -143px}.react-tel-input .tw{background-position:-48px -143px}.react-tel-input .tz{background-position:-64px -143px}.react-tel-input .ua{background-position:-80px -143px}.react-tel-input .ug{background-position:-96px -143px}.react-tel-input .us{background-position:-112px -143px}.react-tel-input .uy{background-position:-128px -143px}.react-tel-input .uz{background-position:-144px -143px}.react-tel-input .va{background-position:-160px -143px}.react-tel-input .vc{background-position:-176px -143px}.react-tel-input .ve{background-position:-192px -143px}.react-tel-input .vg{background-position:-208px -143px}.react-tel-input .vi{background-position:-224px -143px}.react-tel-input .vn{background-position:-240px -143px}.react-tel-input .vu{background-position:0 -154px}.react-tel-input .wf{background-position:-16px -154px}.react-tel-input .ws{background-position:-32px -154px}.react-tel-input .ye{background-position:-48px -154px}.react-tel-input .za{background-position:-64px -154px}.react-tel-input .zm{background-position:-80px -154px}.react-tel-input .zw{background-position:-96px -154px}.react-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.react-tel-input .hide{display:none}.react-tel-input .v-hide{visibility:hidden}.react-tel-input .form-control{position:relative;font-size:14px;letter-spacing:.01rem;margin-top:0 !important;margin-bottom:0 !important;padding-left:48px;margin-left:0;background:#FFFFFF;border:1px solid #CACACA;border-radius:5px;line-height:25px;height:35px;width:300px;outline:none}.react-tel-input .form-control.invalid-number{border:1px solid #d79f9f;background-color:#FAF0F0;border-left-color:#cacaca}.react-tel-input .form-control.invalid-number:focus{border:1px solid #d79f9f;border-left-color:#cacaca;background-color:#FAF0F0}.react-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:0;background-color:#f5f5f5;border:1px solid #cacaca;border-radius:3px 0 0 3px}.react-tel-input .flag-dropdown:hover,.react-tel-input .flag-dropdown:focus{cursor:pointer}.react-tel-input .flag-dropdown.invalid-number{border-color:#d79f9f}.react-tel-input .flag-dropdown.open{z-index:2;background:#fff;border-radius:3px 0 0 0}.react-tel-input .flag-dropdown.open .selected-flag{background:#fff;border-radius:3px 0 0 0}.react-tel-input input[disabled]+.flag-dropdown:hover{cursor:default}.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag{background-color:transparent}.react-tel-input .selected-flag{outline:none;position:relative;width:38px;height:100%;padding:0 0 0 8px;border-radius:3px 0 0 3px}.react-tel-input .selected-flag:hover,.react-tel-input .selected-flag:focus{background-color:#fff}.react-tel-input .selected-flag .flag{position:absolute;top:50%;margin-top:-5px}.react-tel-input .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.react-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.react-tel-input .country-list{outline:none;z-index:1;list-style:none;position:absolute;padding:0;margin:10px 0 10px -1px;box-shadow:1px 2px 10px rgba(0,0,0,0.35);background-color:white;width:300px;max-height:200px;overflow-y:scroll;border-radius:0 0 3px 3px}.react-tel-input .country-list .flag{display:inline-block}.react-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.react-tel-input .country-list .country{padding:7px 9px}.react-tel-input .country-list .country .dial-code{color:#6b6b6b}.react-tel-input .country-list .country:hover{background-color:#f1f1f1}.react-tel-input .country-list .country.highlight{background-color:#f1f1f1}.react-tel-input .country-list .flag{margin-right:7px;margin-top:2px}.react-tel-input .country-list .country-name{margin-right:6px}.react-tel-input .country-list .search{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;padding:10px 0 6px 10px}.react-tel-input .country-list .search-emoji{font-size:15px}.react-tel-input .country-list .search-box{border:1px solid #cacaca;border-radius:3px;font-size:15px;line-height:15px;margin-left:6px;padding:3px 8px 5px;outline:none}.react-tel-input .country-list .no-entries-message{padding:7px 10px 11px;opacity:.7}.react-tel-input .invalid-number-message{position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;color:#de0000}.react-tel-input .special-label{display:none;position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;white-space:nowrap}
.unauthorized-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6f8;
  padding: 24px;
}

/* When shown inside app Layout (sidebar + header), avoid full-viewport takeover */
.layout .page-content .unauthorized-page {
  min-height: calc(100vh - 140px);
  background: transparent;
}

.unauthorized-card {
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.unauthorized-card h1 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  color: #101828;
}

.unauthorized-card p {
  margin: 0 0 24px;
  color: #475467;
  line-height: 1.5;
}

.unauthorized-link {
  display: inline-block;
  color: #1570ef;
  font-weight: 600;
  text-decoration: none;
}

.unauthorized-link:hover {
  text-decoration: underline;
}

/* Forgot Password Styles */
.forgot-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f9fafb;
  padding: 1rem;
  font-family: "Inter", sans-serif;
}

.background-lines {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.forgot-box {
  position: relative;
  z-index: 1;
  max-width: 400px;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.lock-icon-wrapper {
  width: 56px;
  height: 56px;
  background: #f3f4f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-icon {
  width: 28px;
  height: 28px;
  color: #374151;
}

.forgot-box .text-center {
  text-align: center;
}

.forgot-box .title {
  font-size: 24px;
  font-weight: 600;
  color: #181d27;
  margin-bottom: 0.75rem;
}

.forgot-box .subtitle {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

.email-sent {
  color: #181d27;
  font-weight: 600;
  font-size: 14px;
  margin-top: 8px;
}

.forgot-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.forgot-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.forgot-form .form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.forgot-form .form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease;
  background: #ffffff;
}

.forgot-form .form-group input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.forgot-form .form-group input::placeholder {
  color: #9ca3af;
}

.error-message {
  color: #dc2626;
  font-size: 12px;
  margin-top: 0px;
}

.primary-btn {
  width: 100%;
  padding: 0.875rem;
  background-color: #2563eb;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.primary-btn:hover:not(:disabled) {
  background-color: #1d4ed8;
}

.primary-btn:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
}

.resend-text {
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}

.resend-link {
  background: none;
  border: none;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}

.resend-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.resend-link:disabled {
  color: #93c5fd;
  cursor: not-allowed;
}

.back-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.back-btn:hover {
  color: #374151;
}

.reset-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.reset-option-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #ffffff;
}

.reset-option-card:hover {
  border-color: #d1d5db;
}

.reset-option-card.selected {
  border-color: #2563eb;
  background-color: #f0f7ff;
}

.option-icon-box {
  width: 40px;
  height: 40px;
  background: #f3f4f6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-icon-box svg {
  color: #374151;
}

.reset-option-card.selected .option-icon-box {
  background: #2563eb;
}

.reset-option-card.selected .option-icon-box svg {
  color: #ffffff;
}

.option-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.option-title {
  font-size: 14px;
  font-weight: 600;
  color: #181d27;
}

.option-desc {
  font-size: 12px;
  color: #6b7280;
}

.option-radio {
  display: flex;
  align-items: center;
}

/* Responsive */
@media (max-width: 480px) {
  .forgot-box {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }

  .forgot-box .title {
    font-size: 20px;
  }

  .forgot-box .subtitle {
    font-size: 13px;
  }
}
/* Set New Password Styles */
.setpassword-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  background-color: #f9fafb;
  font-family: "Inter", sans-serif;
}

.setpassword-box {
  position: relative;
  z-index: 1;
  background: #ffffff;
  max-width: 400px;
  width: 100%;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.lock-icon-wrapper {
  width: 56px;
  height: 56px;
  background: #f3f4f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-icon {
  width: 28px;
  height: 28px;
  color: #374151;
}

.setpassword-box .text-center {
  text-align: center;
}

.setpassword-box .title {
  font-size: 24px;
  font-weight: 600;
  color: #181d27;
  margin-bottom: 0.75rem;
}

.setpassword-box .subtitle {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.setpassword-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.setpassword-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.setpassword-form .form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.password-input-wrapper {
  position: relative;
  width: 100%;
}

.setpassword-form .form-group input {
  width: 100%;
  padding: 0.75rem 3rem 0.75rem 1rem;
  font-size: 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease;
  background: #ffffff;
}

.setpassword-form .form-group input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.setpassword-form .form-group input::placeholder {
  color: #9ca3af;
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visibility-icon {
  font-size: 20px;
  color: #9ca3af;
}

.toggle-password:hover .visibility-icon {
  color: #6b7280;
}

.password-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.password-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: color 0.2s ease;
}

.password-rules li.rule-passed {
  color: #374151;
}

.password-rules li.rule-failed {
  color: #6b7280;
}

.password-rules .rule-icon {
  font-size: 18px;
}

.reset-btn {
  width: 100%;
  padding: 0.875rem;
  background-color: #2563eb;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 0.5rem;
}

.reset-btn:hover:not(:disabled) {
  background-color: #1d4ed8;
}

.reset-btn:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
}

.back-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.back-btn:hover {
  color: #374151;
}

/* Responsive */
@media (max-width: 480px) {
  .setpassword-box {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }

  .setpassword-box .title {
    font-size: 20px;
  }

  .setpassword-box .subtitle {
    font-size: 13px;
  }
}
/* Password Reset Success Styles */
.reset-success-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  background-color: #f9fafb;
  font-family: "Inter", sans-serif;
}

.reset-success-box {
  position: relative;
  z-index: 1;
  background: #ffffff;
  max-width: 400px;
  width: 100%;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.success-icon-wrapper {
  width: 56px;
  height: 56px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon {
  width: 28px;
  height: 28px;
  color: #16a34a;
}

.reset-success-box .text-center {
  text-align: center;
}

.reset-success-box .title {
  font-size: 24px;
  font-weight: 600;
  color: #181d27;
  margin-bottom: 0.75rem;
}

.reset-success-box .subtitle {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.continue-btn {
  width: 100%;
  padding: 0.875rem;
  background-color: #2563eb;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.continue-btn:hover {
  background-color: #1d4ed8;
}

.back-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.back-btn:hover {
  color: #374151;
}

/* Responsive */
@media (max-width: 480px) {
  .reset-success-box {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }

  .reset-success-box .title {
    font-size: 20px;
  }

  .reset-success-box .subtitle {
    font-size: 13px;
  }
}

/* OTP Verification Styles */
.otp-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  background-color: #f9fafb;
  font-family: "Inter", sans-serif;
}

.otp-box {
  position: relative;
  z-index: 1;
  background: #ffffff;
  max-width: 400px;
  width: 100%;
  padding: 2.5rem 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.lock-icon-wrapper {
  width: 56px;
  height: 56px;
  background: #f3f4f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-icon {
  width: 28px;
  height: 28px;
  color: #374151;
}

.otp-box .text-center {
  text-align: center;
}

.otp-box .title {
  font-size: 24px;
  font-weight: 600;
  color: #181d27;
  margin-bottom: 0.75rem;
}

.otp-box .subtitle {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.email-highlight {
  color: #2563eb;
  font-weight: 500;
}

.otp-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.otp-input {
  width: 48px;
  height: 56px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #181d27;
  background: #ffffff;
  transition: all 0.2s ease;
  outline: none;
}

.otp-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.otp-input:not(:placeholder-shown) {
  border-color: #2563eb;
}

.verify-btn {
  width: 100%;
  padding: 0.875rem;
  background-color: #2563eb;
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.verify-btn:hover:not(:disabled) {
  background-color: #1d4ed8;
}

.verify-btn:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
}

.resend-text {
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}

.countdown {
  color: #2563eb;
  font-weight: 500;
}

.resend-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.resend-btn:hover {
  color: #1d4ed8;
}

/* Responsive */
@media (max-width: 480px) {
  .otp-box {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }

  .otp-input {
    width: 42px;
    height: 50px;
    font-size: 20px;
  }

  .otp-box .title {
    font-size: 20px;
  }

  .otp-box .subtitle {
    font-size: 13px;
  }
}

/* =========================
   SIDEBAR - COLLAPSED/EXPANDED TOGGLE
   ========================= */

.sidebar-new {
  transition: width 0.15s ease, padding 0.15s ease;
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* COLLAPSED STATE - 72px width (icon rail) */
.sidebar-new.sidebar-collapsed {
  width: 72px;
  padding: 12px 0;
}

/* EXPANDED STATE - 280px width (full sidebar) */
.sidebar-new.sidebar-expanded {
  width: 280px;
  padding: 20px 0;
}

/* =========================
   TOGGLE BUTTON
   ========================= */

.sidebar-toggle-btn {
  display: none;
  position: fixed;
  top: 16px;
  left: 88px;
  z-index: 2001;
  width: 36px;
  height: 36px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  color: #374151;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
}

.sidebar-toggle-btn:hover {
  background: #f3f4f6;
}

@media (min-width: 769px) {
  .sidebar-toggle-btn {
    display: flex;
  }
}

.sidebar-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* =========================
   LOGO SECTION
   ========================= */

.sidebar-logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  transition: all 0.15s ease;
}

.sidebar-collapsed .sidebar-logo-section {
  justify-content: center;
  padding: 0 8px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo-icon {
  color: #2563eb;
  font-size: 24px;
  font-weight: bold;
}

.sidebar-logo-text {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: -0.5px;
  opacity: 1;
  transition: opacity 0.3s ease, max-width 0.3s ease;
  white-space: nowrap;
}

.sidebar-collapsed .sidebar-logo-text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
}

/* =========================
   SEARCH BOX
   ========================= */

.sidebar-search {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin: 0 16px 16px;
}

.sidebar-collapsed .sidebar-search {
  display: none;
}

.sidebar-search-icon {
  width: 18px;
  height: 18px;
  color: #9ca3af;
  flex-shrink: 0;
}

.sidebar-search-input {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s ease;
  font-family: "Inter", sans-serif;
  outline: none;
}

.sidebar-search-input:focus {
  outline: none;
}

.sidebar-search:focus-within {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.sidebar-search-shortcut {
  font-size: 11px;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  -webkit-user-select: none;
          user-select: none;
}

/* =========================
   NAVIGATION MENU
   ========================= */

.sidebar-nav {
  flex: 1 1;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.sidebar-menu-wrapper {
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}

.sidebar-menu-item {
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
}

.sidebar-collapsed .sidebar-menu-item {
  justify-content: center;
  padding: 12px;
  gap: 0;
}

.sidebar-menu-item:hover {
  background: #f0f7ff;
  color: #2563eb;
}

.sidebar-menu-item.active {
  background: #f0f7ff;
  color: #2563eb;
  font-weight: 600;
}

.sidebar-collapsed .sidebar-menu-item {
  border-radius: 12px;
  padding: 10px;
}

.sidebar-collapsed .sidebar-menu-item:hover {
  background: #f3f4f6;
}

.sidebar-collapsed .sidebar-menu-item.active {
  background: #bfdbfe;
}

.sidebar-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
}

.sidebar-menu-icon svg {
  width: 20px;
  height: 20px;
}

.sidebar-menu-label {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity 0.3s ease, max-width 0.3s ease;
}

.sidebar-collapsed .sidebar-menu-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  display: none;
}

.sidebar-menu-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.05s ease, color 0.15s ease;
  opacity: 1;
}

.sidebar-collapsed .sidebar-menu-arrow {
  opacity: 0;
  display: none;
}

.sidebar-menu-arrow.expanded {
  transform: rotate(180deg);
  color: #2563eb;
}

/* =========================
   SUBMENU
   ========================= */

.sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0 4px 0;
  animation: slideDown 0.05s ease;
  max-height: 500px;
  overflow: hidden;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-collapsed .sidebar-submenu {
  display: none;
}

.sidebar-submenu-item {
  padding: 8px 12px 8px 48px;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s ease;
  text-align: left;
}

.sidebar-submenu-item:hover {
  background: #f0f7ff;
  color: #2563eb;
}

.sidebar-submenu-item.active {
  background: #f0f7ff;
  color: #2563eb;
  font-weight: 600;
}

.sidebar-submenu-icon-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #9ca3af;
  transition: color 0.2s ease;
}

.sidebar-submenu-icon-wrap svg {
  width: 18px;
  height: 18px;
}

.sidebar-submenu-item:hover .sidebar-submenu-icon-wrap,
.sidebar-submenu-item.active .sidebar-submenu-icon-wrap {
  color: #2563eb;
}

.sidebar-submenu-label {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   FOOTER SECTION
   ========================= */

.sidebar-footer-section {
  border-top: 1px solid #e5e7eb;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.3s ease;
}

.sidebar-collapsed .sidebar-footer-section {
  padding: 8px 4px;
}

.sidebar-footer-item {
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.2s ease;
  text-align: left;
}

.sidebar-collapsed .sidebar-footer-item {
  justify-content: center;
  padding: 10px;
  gap: 0;
  border-radius: 8px;
}

.sidebar-footer-item:hover {
  background: #f3f4f6;
  color: #374151;
}

.sidebar-footer-item.sidebar-logout-btn {
  color: #ef4444;
}

.sidebar-footer-item.sidebar-logout-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.sidebar-footer-item.sidebar-logout-btn .sidebar-footer-icon {
  color: #ef4444;
}

.sidebar-footer-item.sidebar-logout-btn:hover .sidebar-footer-icon {
  color: #dc2626;
}

.sidebar-collapsed .sidebar-footer-item:hover {
  background: #e0edff;
}

.sidebar-footer-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-collapsed .sidebar-footer-item>span {
  display: none;
}

.sidebar-profile-card {
  margin-top: 8px;
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 1;
  transition: opacity 0.3s ease, display 0.3s ease;
}

.sidebar-collapsed .sidebar-profile-card {
  display: none;
  opacity: 0;
}

.sidebar-profile-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.sidebar-profile-info {
  flex: 1 1;
  min-width: 0;
}

.sidebar-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-email {
  font-size: 12px;
  color: #9ca3af;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   MOBILE RESPONSIVE
   ========================= */

.sidebar-mobile-toggle {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  color: #374151;
  align-items: center;
  justify-content: center;
}

.sidebar-mobile-toggle svg {
  width: 24px;
  height: 24px;
}

.sidebar-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1998;
}

@media (max-width: 768px) {
  .sidebar-toggle-btn {
    display: none !important;
  }

  .sidebar-mobile-toggle {
    display: flex;
  }

  .sidebar-new {
    position: fixed;
    left: -280px;
    top: 0;
    width: 280px;
    height: 100vh;
    z-index: 1999;
    transition: left 0.3s ease;
    border-radius: 0;
    margin: 0;
    padding: 20px 0;
  }

  .sidebar-new.mobile-open {
    left: 0;
  }

  .sidebar-collapsed {
    width: 280px;
    padding: 20px 0;
  }

  .sidebar-collapsed .sidebar-logo-section {
    justify-content: flex-start;
    padding: 0 16px 24px;
  }

  .sidebar-collapsed .sidebar-logo-text {
    opacity: 1;
    max-width: 200px;
  }

  .sidebar-collapsed .sidebar-search {
    display: flex;
  }

  .sidebar-collapsed .sidebar-menu-item {
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .sidebar-collapsed .sidebar-menu-label {
    opacity: 1;
    max-width: 200px;
    display: block;
  }

  .sidebar-collapsed .sidebar-menu-arrow {
    opacity: 1;
    display: block;
  }

  .sidebar-collapsed .sidebar-footer-item {
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .sidebar-collapsed .sidebar-footer-item>span {
    display: block;
  }

  .sidebar-collapsed .sidebar-profile-card {
    display: flex;
    opacity: 1;
  }

  .sidebar-mobile-overlay {
    display: block;
  }
}

@media (max-width: 480px) {
  .sidebar-new {
    width: 100%;
    left: -100%;
  }

  .sidebar-new.mobile-open {
    left: 0;
  }
}

/* =========================
   SCROLLBAR STYLING
   ========================= */

.sidebar-nav::-webkit-scrollbar,
.sidebar-new::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track,
.sidebar-new::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.sidebar-new::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover,
.sidebar-new::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* =========================
   MAIN LAYOUT
   ========================= */
.layout {
  display: flex;
  height: 95vh;
  background: #f9fafb;
  font-family: "Inter", sans-serif;
}

.main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
  background: #f9fafb;
}
/* .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 0.75rem 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  margin: 0.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.header-left h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  flex-wrap: wrap;
}

.username {
  color: #111827;
}

.header-right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.org-select {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
  white-space: nowrap;
}

.org-select:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Tablet */
@media (max-width: 1024px) {
  .header {
    padding: 0.75rem 1rem;
  }

  .header-left h2 {
    font-size: 1rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0.5rem;
    padding: 0.75rem;
    border-radius: 8px;
  }

  .header-left {
    width: 100%;
  }

  .header-left h2 {
    font-size: 0.95rem;
    flex-wrap: wrap;
  }

  .header-right {
    width: 100%;
    justify-content: flex-start;
  }

  .org-select {
    width: 100%;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .header {
    margin: 0.25rem;
    padding: 0.5rem;
  }

  .header-left h2 {
    font-size: 0.875rem;
  }

  .org-select {
    font-size: 0.85rem;
    padding: 0.5rem;
  }
}

*/

/* Same styling as before — kept untouched */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 1rem 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  margin: 2rem 2rem 0.75rem 2rem;
  gap: 20px;
  min-height: 50px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Smart Search Button */
.smart-search-btn {
  background: #f0f5ff;
  border: 1px solid #b7d0ff;
  color: #2b5cff;
  padding: 8px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 115, 255, 0.25);
}

.smart-icon {
  font-size: 20px;
}

.notif-icon-box {
  width: 42px;
  height: 42px;
  background: #f4f4f4;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative; /* Added for badge positioning */
}

.notif-icon {
  font-size: 22px;
  color: #555;
}

/* Language Dropdown */
.lang-dropdown-wrapper {
  position: relative;
}

.lang-dropdown {
  height: 42px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #e6e9f2;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #1f1f1f;
  min-width: 120px;
}

.arrow-icon {
  font-size: 20px;
  color: #555;
  transition: 0.2s ease;
}

.arrow-icon.rotate {
  transform: rotate(180deg);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .header-container {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
  }

  .header-left h2 {
    font-size: 1rem;
  }

  .header-right {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem;
  }

  .header-left h2 {
    font-size: 0.95rem;
  }

  .header-right {
    width: 100%;
    gap: 12px;
  }
}

/* Dropdown Menu */
.lang-menu-list {
  position: absolute;
  top: 50px;
  right: 0;
  width: 150px;
  background: white;
  border: 1px solid #e6e9f2;
  border-radius: 12px;
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
  z-index: 9999;
}

.lang-menu-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s ease;
  color: #1f1f1f;
}

.lang-menu-item:hover {
  background: #f5f7fa;
}

/* Notification Styles */
.notif-wrapper {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #2b5cff; /* Blue color as requested */
  color: white;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notif-dropdown-container {
  position: absolute;
  top: 55px;
  right: -100px;
  width: 380px;
  background: #ffffff;
  border: 1px solid #e6e9f2;
  border-radius: 16px;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 10000;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notif-dropdown-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.notif-dropdown-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.mark-all-read-btn {
  background: transparent;
  border: none;
  color: #2b5cff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.mark-all-read-btn:hover {
  background: #f0f5ff;
}

.notif-list {
  height: 420px; /* Fixed height */
  overflow-y: auto;
}

.notif-list::-webkit-scrollbar {
  width: 6px;
}

.notif-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.notif-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.notif-card {
  padding: 16px 20px;
  border-bottom: 1px solid #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 0.2s;
  position: relative;
  gap: 12px;
  cursor: pointer;
}

.notif-card:last-child {
  border-bottom: none;
}

.notif-card.unread {
  background: #f9fbff;
}

.notif-card.unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #2b5cff;
}

.notif-card:hover {
  background: #f5f7fa;
}

.notif-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.notif-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

.notif-priority-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}

.notif-priority-badge.normal {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.notif-priority-badge.high {
  background: #fff1f0;
  color: #f5222d;
  border: 1px solid #ffa39e;
}

.notif-priority-badge.low {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.notif-message {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}

.notif-time {
  font-size: 11px;
  color: #999;
  font-weight: 500;
  margin-top: 4px;
}

.mark-read-btn {
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #999;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}

.mark-read-btn:hover {
  background: #2b5cff;
  color: #fff;
  border-color: #2b5cff;
  transform: scale(1.1);
}

.no-notif {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
}

.notif-pagination {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-top: 1px solid #f8f9fa;
}

.load-more-btn {
  background: #f0f5ff;
  border: 1px solid #b7d0ff;
  color: #2b5cff;
  padding: 8px 24px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 36px;
}

.load-more-btn:hover:not(:disabled) {
  background: #2b5cff;
  color: #fff;
  box-shadow: 0 4px 10px rgba(43, 92, 255, 0.2);
}

.load-more-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.show-less-btn {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.show-less-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #374151;
}

.no-more-text {
  font-size: 12px;
  color: #999;
  font-weight: 500;
  margin-bottom: 4px;
}

/* Notification Toast Styles (Bottom Right) */
.notif-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 340px;
  background: #ffffff;
  border: 1px solid #e6e9f2;
  border-radius: 16px;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 11000;
  overflow: hidden;
  animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.notif-toast-header {
  padding: 12px 16px;
  background: #f9fbff;
  border-bottom: 1px solid #f0f3f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notif-toast-header span {
  font-size: 11px;
  font-weight: 700;
  color: #2b5cff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.toast-priority-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}

.toast-priority-badge.normal {
  background: #e6f7ff;
  color: #1890ff;
}

.toast-priority-badge.high {
  background: #fff1f0;
  color: #f5222d;
}

.toast-close-btn {
  background: transparent;
  border: none;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 4px;
  transition: background 0.2s;
}

.toast-close-btn:hover {
  background: #eee;
  color: #333;
}

.notif-toast-body {
  padding: 16px;
  cursor: pointer;
}

.toast-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}

.toast-message {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

.toast-time {
  display: block;
  font-size: 11px;
  color: #999;
  margin-top: 8px;
}

.notif-toast-footer {
  padding: 10px 16px;
  background: #fff;
  border-top: 1px solid #f8f9fa;
  display: flex;
  justify-content: flex-end;
}

.toast-mark-read-btn {
  background: #2b5cff;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.toast-mark-read-btn:hover {
  background: #1a49e0;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(43, 92, 255, 0.2);
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  .notif-dropdown-container {
    right: -120px;
    width: 320px;
  }
  
  .notif-toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}
/* .layout {
    display: flex;
    height: 100vh;
    background: #f9fafb;
    font-family: 'Inter', sans-serif;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .page-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
    
    background: #f9fafb;
  } */

/* ==========================================
   LAYOUT.CSS - Main Layout Structure
   ========================================== */

.layout {
  display: flex;
  height: 100vh;
  background: #f9fafb;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

.main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

.page-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 1.5rem 1.5rem 1.5rem;
  /* Added bottom padding for gap */
  position: relative;
  background: #f9fafb;
}

.global-footer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
  z-index: 100;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Standard Layout Utilities */
.standard-page-container {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
  overflow: hidden;
  min-height: 0;
}

.standard-table-container {
  flex: 1 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.standard-form-scrollable {
  flex: 1 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 80px; /* Increased padding to prevent bottom cut */
  scroll-behavior: smooth;
}

/* Mobile hamburger menu button */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
  color: #374151;
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1998;
}

.sidebar-overlay.active {
  display: block;
}

.header-container {
  padding: 0.6rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: white;
  margin: 1.5rem 1.5rem 0.75rem 1.5rem;
}

.sidebar-menu::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

/* ==========================================
     RESPONSIVE BREAKPOINTS
     ========================================== */

/* Tablet and below (1024px) */
@media (max-width: 1024px) {
  .page-content {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }

  .main-content {
    width: 100%;
  }

  .page-content {
    padding: 1rem 1rem 1rem 1rem;
    padding-top: 4rem;
    /* Space for mobile menu button */
  }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  .page-content {
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
    padding-top: 2rem;
  }
}


/* ==========================================
     SIDEBAR.CSS - Responsive Sidebar
     ========================================== */
/* Main Layout */
.layout {
  display: flex;
  height: 100vh;
  background: #f9fafb;
  font-family: var(--font-family-primary);
  overflow: hidden;
}

.main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

.page-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #f9fafb;
}

/* Sidebar Base */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 72px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1rem 0;
  transition: width 0.3s ease;
  overflow: hidden;
  z-index: 1999;
}

.sidebar:hover {
  width: 280px;
}

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  min-height: 48px;
  margin-left: 10px;
}

.logo {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.logo-label {
  font-weight: 600;
  font-size: 18px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar:hover .logo-label {
  opacity: 1;
}

/* Menu */
.sidebar-menu {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  overflow-y: auto;
}

.menu-item-wrapper {
  position: relative;
  width: 100%;
}

.menu-item {
  background: none;
  border: none;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 12px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
  font-size: 22px;
}

/* Hover and Active States */
.sidebar:not(:hover) .menu-item.active .menu-icon,
.sidebar:not(:hover) .menu-item:hover .menu-icon {
  background: #f3f4f6;
  color: #2563eb;
  width: 100%;
}

.sidebar:hover .menu-item.active,
.sidebar:hover .menu-item:hover {
  background: #f3f4f6;
  color: #2563eb;
  border-radius: 12px;
  width: 100%;
}

.sidebar:hover .menu-item.active .menu-icon,
.sidebar:hover .menu-item:hover .menu-icon {
  background: transparent;
}

/* Submenu - REMOVED OLD HOVER-BASED RULES, using Sidebar.css instead */
/* Submenu styling is now handled in Sidebar.css for click-based behavior */
/* DO NOT ADD HOVER RULES HERE - they will conflict with click-based behavior */

/* Mobile Sidebar */
.sidebar.mobile {
  position: fixed;
  top: 0;
  left: -100%;
  width: 280px;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  border-right: 1px solid #e5e7eb;
  transition: left 0.3s ease;
  z-index: 1999;
}

.sidebar.mobile.mobile-open {
  left: 0;
}

/* Mobile Hamburger Button */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
  color: #374151;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1998;
}

.sidebar-overlay.active {
  display: block;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
  }

  .sidebar .logo-label,
  .sidebar .sidebar-label {
    opacity: 1;
  }

  .submenu {
    display: none;
  }

  .sidebar-menu {
    padding-top: 60px;
    /* Adjust for mobile */
  }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  .sidebar {
    width: 100%;
    max-width: 100%;
  }
}


/* ==========================================
     HEADER.CSS - Responsive Header
     ========================================== */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 0.75rem 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  margin: 0;
}

.header-left h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.username {
  color: #111827;
}

.header-right {
  display: flex;
  align-items: center;
}

.org-select {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}

.org-select:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  .header {
    padding: 0.65rem 1rem;
    margin: 0.5rem 0.5rem 0.5rem 0;
  }

  .header-left h2 {
    font-size: 1rem;
  }

  .org-select {
    font-size: 0.9rem;
    padding: 0.45rem 0.75rem;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    margin: 0.5rem;
    margin-left: 0;
  }

  .header-left h2 {
    font-size: 0.95rem;
  }

  .header-right {
    width: 100%;
  }

  .org-select {
    width: 100%;
    justify-content: space-between;
    font-size: 0.85rem;
  }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  .header {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }

  .header-left h2 {
    font-size: 0.9rem;
  }

  .org-select {
    font-size: 0.8rem;
    padding: 0.4rem 0.65rem;
  }
}


/* ==========================================
     DATATABLE.CSS - Responsive Data Table
     ========================================== */

.data-table-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}

.data-table {
  margin-top: 0rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  overflow: hidden;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  font-family: "Inter", sans-serif;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 800px;
  /* Minimum width to prevent squishing */
}

.data-table thead th {
  background: #f9fafb;
  font-weight: 600;
  color: #535862;
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
}

.data-table tbody {
  display: block;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  font-family: "Inter", sans-serif;
}

.data-table thead,
.data-table tbody tr {
  display: table;
  width: 100%;
  table-layout: auto;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

.data-table th,
.data-table td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.95rem;
  vertical-align: middle;
  font-family: "Inter", sans-serif;
  color: #535862;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Scrollbar styling */
.data-table tbody::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.data-table tbody::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.data-table tbody::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.data-table tbody::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Make table horizontally scrollable on small screens */
.data-table-scroll-container {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
}

/* ==========================================
     DATA TABLE RESPONSIVE
     ========================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  .data-table {
    overflow-x: auto;
  }

  .data-table table {
    min-width: 700px;
  }

  .data-table th,
  .data-table td {
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
  }

  .data-table tbody {
    max-height: 50vh;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  .data-table-wrapper {
    overflow-x: auto;
  }

  .data-table {
    overflow-x: auto;
    margin-top: 0.75rem;
  }

  .data-table table {
    min-width: 600px;
  }

  .data-table th,
  .data-table td {
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
  }

  .data-table tbody {
    max-height: 55vh;
  }

  /* Make action buttons stack vertically on mobile */
  .data-table td:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  .data-table table {
    min-width: 500px;
  }

  .data-table th,
  .data-table td {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
  }

  .data-table tbody {
    max-height: 60vh;
  }
}

/* Pagination responsive */
@media (max-width: 768px) {
  .pagination-container {
    padding: 0.5rem;
  }

  .pagination-container button {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .pagination-container {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination-container button {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
  }
}

/* Base layout */
.layout {
  display: flex;
  height: 100vh;
  background: #f9fafb;
  font-family: var(--font-family-primary);
  overflow: hidden;
  position: relative;
}

/* Main content should start to the right of the closed sidebar */
.main-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 72px sidebar width + ~24px (0.75rem*2) side margin = 96px */
  /* margin-left: 96px; */
  transition: margin-left 0.25s ease;
}

/* When sidebar expands on hover, push content further right */
.sidebar:hover~.main-content {
  /* 280px sidebar width + 24px margin = 304px */
  margin-left: 304px;
}
/* ===== Common Page Header Style ===== */
.page-header,
.pdp-header {
  background: #fff;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin-bottom: 1.2rem;
  margin-top: 0;
  border: 1px solid #e5e7eb;
  font-family: "Inter", sans-serif;
}

.page-header-top {
  display: flex;
  margin: 0;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  padding: 0;
}

.page-header-top>div:first-child {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-header-back-link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  width: -webkit-fit-content;
  width: fit-content;
  gap: 4px;
  margin-bottom: 12px;
}

.page-header-back-link:hover {
  color: #111827;
}

.page-header .breadcrumb {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-header h2,
.pdp-product-details h2 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
  color: #111827;
  line-height: 1.2;
}

.page-header p,
.pdp-product-details p {
  font-size: 0.95rem;
  color: #6b7280;
  margin: 0.25rem 0 0 0;
  line-height: 1.3;
}

.page-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== PDP Specific ===== */
.pdp-product-card {
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 16px;
}

.pdp-product-image {
  width: 100px;
  height: auto;
  border-radius: 8px;
  margin-right: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pdp-product-details h2 {
  font-size: 20px;
}

.pdp-product-details p {
  font-size: 14px;
  margin: 2px 0;
  color: #555;
}

.home-icon {
  position: relative;
  top: 5px;
}

.next-icon {
  position: relative;
  top: 5px;
}

/* Mobile Responsive */
@media (max-width: 768px) {

  .page-header,
  .pdp-header {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
  }

  .page-header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .page-header .breadcrumb {
    font-size: 0.75rem;
    /* 12px */
  }

  .page-header h2,
  .pdp-product-details h2 {
    font-size: 1.125rem;
    /* 18px */
  }

  .page-header p,
  .pdp-product-details p {
    font-size: 0.8125rem;
    /* 13px */
  }

  .page-header-actions {
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
  }

  .page-header-actions button {
    width: 100%;
    font-size: 0.8125rem;
    /* 13px */
  }

  .pdp-product-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
  }

  .pdp-product-image {
    width: 80px;
    margin-right: 0;
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {

  .page-header,
  .pdp-header {
    padding: 0.75rem;
  }

  .page-header .breadcrumb {
    font-size: 0.6875rem;
    /* 11px */
  }

  .page-header h2,
  .pdp-product-details h2 {
    font-size: 1rem;
    /* 16px */
  }

  .page-header p,
  .pdp-product-details p {
    font-size: 0.75rem;
    /* 12px */
  }

  .page-header-actions button {
    font-size: 0.75rem;
    /* 12px */
  }

  .pdp-product-image {
    width: 60px;
  }
}
.primary-button {
  background-color: #2563eb;
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Inter", sans-serif;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.primary-button:hover {
  background-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.primary-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.primary-button:disabled {
  background-color: #93c5fd;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

.secondary-button {
  background-color: #ffffff;
  color: #374151;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Inter", sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.secondary-button:hover {
  background-color: #f9fafb;
  border-color: #b4bcc4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.secondary-button:active {
  background-color: #f3f4f6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.secondary-button:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
  border-color: #e5e7eb;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .primary-button,
  .secondary-button {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem; /* 13px */
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .primary-button,
  .secondary-button {
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem; /* 12px */
  }
}

.status-badge.core-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* keep dot on left */
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  /* subtle roundness */
  text-transform: capitalize;
  gap: 8px;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}

.status-badge.core-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.status-badge.core-status-badge.has-icon::before {
  display: none;
}

/* Active Status - Green dot, White background, Light border */
.status-badge.core-status-badge.active {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); /* Subtle shadow like in screenshot */
}

.status-badge.core-status-badge.active::before {
  background-color: #12b76a; /* Success Green */
}

/* Inactive Status - Red dot, White background, Light border */
.status-badge.core-status-badge.inactive {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.status-badge.core-status-badge.inactive::before {
  background-color: #f04438; /* Error Red */
}

/* Returned Status - Red */
.status-badge.core-status-badge.returned {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.returned::before {
  background-color: #f97066;
  /* Coral */
}

/* Draft Status - Blue/Purple */
.status-badge.core-status-badge.draft {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.draft::before {
  background-color: #98a2b3;
  /* Slate Gray */
}

/* Discontinue Status - Red */
.status-badge.core-status-badge.discontinue {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.discontinue::before {
  background-color: #475467;
  /* Dark Gray */
}

/* Packed Status - Green */
.status-badge.core-status-badge.packed {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.packed::before {
  background-color: #15b79e;
  /* Teal */
}

/* Dispatched Status - Blue */
.status-badge.core-status-badge.dispatched {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.dispatched::before {
  background-color: #2e90fa;
  /* Blue */
}

/* Rejected Status - Red */
.status-badge.core-status-badge.rejected {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.rejected::before {
  background-color: #b42318;
  /* Dark Red */
}

/* Approved Status - Teal */
.status-badge.core-status-badge.approved {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.approved::before {
  background-color: #039855;
  /* Emerald */
}

/* Confirmed Status - Green */
.status-badge.core-status-badge.confirmed {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.confirmed::before {
  background-color: #079455;
  /* Forest Green */
}

/* Received Status - Blue */
.status-badge.core-status-badge.received {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.received::before {
  background-color: #004eeb;
  /* Deep Blue */
}

/* Pending Status - Yellow/Orange */
.status-badge.core-status-badge.pending {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.pending::before {
  background-color: #f79009;
  /* Orange */
}

/* Issued Status - Indigo */
.status-badge.core-status-badge.issued {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.issued::before {
  background-color: #6172f3;
  /* Indigo */
}

/* Assigned Status - Violet */
.status-badge.core-status-badge.assigned {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.assigned::before {
  background-color: #7a5af8;
  /* Violet */
}

/* Completed Status - Green */
.status-badge.core-status-badge.completed {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.completed::before {
  background-color: #12b76a;
  /* Success */
}

/* In Progress Status - Blue */
.status-badge.core-status-badge.inprogress {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.inprogress::before {
  background-color: #53b1fd;
  /* Sky Blue */
}

/* Present Status - Green */
.status-badge.core-status-badge.present {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.present::before {
  background-color: #32d583;
  /* Mint */
}

/* Leave Status - Red */
.status-badge.core-status-badge.leave {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.leave::before {
  background-color: #fda29b;
  /* Light Red */
}

/* Half Day Status - Purple */
.status-badge.core-status-badge.halfday {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.halfday::before {
  background-color: #d6bbfb;
  /* Lavender */
}

/* Absent Status - Orange */
.status-badge.core-status-badge.absent {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.absent::before {
  background-color: #f38744;
  /* Amber */
}

/* Applied Status - Green */
.status-badge.core-status-badge.applied {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.applied::before {
  background-color: #067647;
  /* Grass */
}

/* Open Status - Red */
.status-badge.core-status-badge.open {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.open::before {
  background-color: #f04438;
  /* Open Red */
}

/* Refunded Status - Blue */
.status-badge.core-status-badge.refunded {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.refunded::before {
  background-color: #2e90fa;
  /* Refund Blue */
}

/* Partially Paid Status - Yellow */
.status-badge.core-status-badge.partiallypaid {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.partiallypaid::before {
  background-color: #fdb022;
  /* Golden Yellow */
}

/* Unpaid Status - Red */
.status-badge.core-status-badge.unpaid {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.unpaid::before {
  background-color: #d92d20;
  /* Error Crimson */
}

/* Paid Status - Blue */
.status-badge.core-status-badge.paid {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.paid::before {
  background-color: #1570ef;
  /* Navy Blue */
}

/* Online Status - Green */
.status-badge.core-status-badge.online {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.online::before {
  background-color: #17b26a;
  /* Online Green */
}

/* Offline Status - Red */
.status-badge.core-status-badge.offline {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.offline::before {
  background-color: #475467;
  /* Offline Gray */
}

/* Resolved Status - Teal */
.status-badge.core-status-badge.resolved {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.resolved::before {
  background-color: #0e9384;
  /* Cyan */
}

/* Converted Status - Green */
.status-badge.core-status-badge.converted {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.converted::before {
  background-color: #079455;
  /* Converted */
}

/* Lost Status - Red */
.status-badge.core-status-badge.lost {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.lost::before {
  background-color: #667085;
  /* Lost Slate */
}

/* Done Status - Blue/Teal */
.status-badge.core-status-badge.done {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.done::before {
  background-color: #039855;
  /* Done */
}

/* Overdue Status - Red */
.status-badge.core-status-badge.overdue {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.overdue::before {
  background-color: #b42318;
  /* Overdue */
}

/* Cancelled Status - Gray */
.status-badge.core-status-badge.cancelled {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.cancelled::before {
  background-color: #98a2b3;
  /* Cancelled */
}

/* Sent Status - Blue */
.status-badge.core-status-badge.sent {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.sent::before {
  background-color: #84caff;
  /* Light Blue */
}

/* In Follow-up Status - Purple */
.status-badge.core-status-badge.infollowup {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.infollowup::before {
  background-color: #ee46bc;
  /* Pink */
}

/* Yellow Status - Yellow */
.status-badge.core-status-badge.yellow {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.yellow::before {
  background-color: #fac515;
  /* Yellow */
}

/* New Status - Blue */
.status-badge.core-status-badge.new {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.new::before {
  background-color: #444ce7;
  /* New Blue */
}

/* Available Status - Green */
.status-badge.core-status-badge.available {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.available::before {
  background-color: #12b76a;
}

/* Low Stock Status - Orange */
.status-badge.core-status-badge.lowstock {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.lowstock::before {
  background-color: #f79009;
}

/* Out of Stock Status - Red */
.status-badge.core-status-badge.outofstock {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.outofstock::before {
  background-color: #f04438;
}

/* Stock Request - Blue */
.status-badge.core-status-badge.stockrequest {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.stockrequest::before {
  background-color: #2e90fa;
}

/* Transfer Request - Orange */
.status-badge.core-status-badge.transferrequest {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.transferrequest::before {
  background-color: #f79009;
}

/* Priority Normal - Green */
.status-badge.core-status-badge.normal {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.normal::before {
  background-color: #12b76a;
}

/* Priority Urgent - Red */
.status-badge.core-status-badge.urgent {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.urgent::before {
  background-color: #f04438;
}

/* Priority Low - Sky Blue */
.status-badge.core-status-badge.low {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.low::before {
  background-color: #53b1fd;
}

/* Priority High - Orange/Amber */
.status-badge.core-status-badge.high {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.high::before {
  background-color: #f79009;
}

/* Stock request lifecycle — same shell as priority rows (white, gray border, dot). */
.status-badge.core-status-badge.stock-rs {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.stock-rs.stock-rs--draft::before {
  background-color: #667085;
}
.status-badge.core-status-badge.stock-rs.stock-rs--pending::before {
  background-color: #f79009;
}
.status-badge.core-status-badge.stock-rs.stock-rs--approved::before {
  background-color: #039855;
}
.status-badge.core-status-badge.stock-rs.stock-rs--partial::before {
  background-color: #fdb022;
}
.status-badge.core-status-badge.stock-rs.stock-rs--rejected::before {
  background-color: #b42318;
}
.status-badge.core-status-badge.stock-rs.stock-rs--hold::before {
  background-color: #f79009;
}
.status-badge.core-status-badge.stock-rs.stock-rs--dispatch::before {
  background-color: #2e90fa;
}
.status-badge.core-status-badge.stock-rs.stock-rs--transit::before {
  background-color: #53b1fd;
}
.status-badge.core-status-badge.stock-rs.stock-rs--partialrecv::before {
  background-color: #1570ef;
}
.status-badge.core-status-badge.stock-rs.stock-rs--received::before {
  background-color: #004eeb;
}
.status-badge.core-status-badge.stock-rs.stock-rs--issue::before {
  background-color: #f04438;
}
.status-badge.core-status-badge.stock-rs.stock-rs--revoked::before {
  background-color: #f04438;
}
.status-badge.core-status-badge.stock-rs.stock-rs--verified::before {
  background-color: #12b76a;
}

/* Customer Type: Contract - Blue */
.status-badge.core-status-badge.contract {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.contract::before {
  background-color: #2e90fa;
}

/* Customer Type: One Time - Orange */
.status-badge.core-status-badge.onetime {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.onetime::before {
  background-color: #f79009;
}

/* Customer Type: Product - Yellow */
.status-badge.core-status-badge.product {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.product::before {
  background-color: #fac515;
}

/* Expired Status */
.status-badge.core-status-badge.expired {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

/* Terminate Status */
.status-badge.core-status-badge.terminate {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.status-badge.core-status-badge.terminate::before {
  background-color: #f04438; /* Error Red */
}

/* Expired Status - Orange dot as per reference */
.status-badge.core-status-badge.expired {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.status-badge.core-status-badge.expired::before {
  background-color: #f79009; /* Orange */
}

/* Expiring Soon Status - Yellow dot as per reference */
.status-badge.core-status-badge.expiring-soon {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.status-badge.core-status-badge.expiring-soon::before {
  background-color: #fac515; /* Yellow */
}

/* Scheduled Status */
.status-badge.core-status-badge.scheduled {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

/* Service Status - Blue dot */
.status-badge.core-status-badge.service {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.service::before {
  background-color: #2e90fa; /* Blue */
}

/* Qualified Status - Green dot */
.status-badge.core-status-badge.qualified {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d1d5db;
}

.status-badge.core-status-badge.qualified::before {
  background-color: #12b76a; /* Green */
}

/* Quotation Specific Statuses */
.status-badge.core-status-badge.accepted,
.status-badge.core-status-badge.converted {
  background-color: #ecfdf3;
  color: #027a48;
  border: 1px solid #abefc6;
}
.status-badge.core-status-badge.accepted::before,
.status-badge.core-status-badge.converted::before { background-color: #12b76a; }

.status-badge.core-status-badge.sent,
.status-badge.core-status-badge.viewed {
  background-color: #eff8ff;
  color: #175cd3;
  border: 1px solid #b2ddff;
}
.status-badge.core-status-badge.sent::before,
.status-badge.core-status-badge.viewed::before { background-color: #2e90fa; }

.status-badge.core-status-badge.draft {
  background-color: #f2f4f7;
  color: #344054;
  border: 1px solid #d0d5dd;
}
.status-badge.core-status-badge.draft::before { background-color: #667085; }

.status-badge.core-status-badge.infollowup,
.status-badge.core-status-badge.revised {
  background-color: #fffaeb;
  color: #b54708;
  border: 1px solid #fec84b;
}
.status-badge.core-status-badge.infollowup::before,
.status-badge.core-status-badge.revised::before { background-color: #f79009; }

/* Leave Types */
.status-badge.core-status-badge.cl {
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  text-transform: uppercase;
}
.status-badge.core-status-badge.cl::before {
  background-color: #12B76A !important;
}

.status-badge.core-status-badge.sl {
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  text-transform: uppercase;
}
.status-badge.core-status-badge.sl::before {
  background-color: #F04438 !important;
}

.status-badge.core-status-badge.pl {
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  text-transform: uppercase;
}
.status-badge.core-status-badge.pl::before {
  background-color: #2e90fa !important;
}

/* Pest Type Badge - Same as Termite for all pests */
.status-badge.core-status-badge.pest {
  background-color: #F0F9FF;
  color: #026AA2;
  border: 1px solid #B9E6FE;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.status-badge.core-status-badge.pest::before {
  background-color: #026AA2;
}

/* Travel Started Status - Indigo */
.status-badge.core-status-badge.travelstarted {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.status-badge.core-status-badge.travelstarted::before {
  background-color: #6172f3; /* Indigo */
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .status-badge.core-status-badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

@media (max-width: 480px) {
  .status-badge.core-status-badge {
    font-size: 9px;
    padding: 2px 6px;
  }
}

.no-data-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  background: #ffffff;
  border-radius: 8px;
  border: 2px solid #d1d5db;
}

.no-data-content {
  max-width: 400px;
}

.no-data-icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  color: #000000 !important;
}

.no-data-icon svg {
  width: 64px;
  height: 64px;
}

.no-data-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

.no-data-subtitle {
  font-size: 16px !important;
  color: #111827 !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

.no-data-action {
  display: flex;
  justify-content: center;
}

/* DataTable integration - override any conflicting styles */
.data-table .no-data-container {
  background: #ffffff !important;
}

.data-table .no-data-title {
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

.data-table .no-data-subtitle {
  color: #111827 !important;
  font-weight: 500 !important;
  font-size: 16px !important;
}

/* Override table cell color inheritance */
.data-table td .no-data-title,
.data-table td .no-data-subtitle {
  color: inherit !important;
}

/* Most specific override */
.data-table tbody tr td .no-data-container .no-data-title {
  color: #000000 !important;
}

.data-table tbody tr td .no-data-container .no-data-subtitle {
  color: #111827 !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .no-data-container {
    padding: 32px 16px;
  }
  
  .no-data-content {
    max-width: 300px;
  }
  
  .no-data-title {
    font-size: 16px;
  }
  
  .no-data-subtitle {
    font-size: 13px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .no-data-container {
    background: #1f2937;
    border-color: #374151;
  }
  
  .no-data-title {
    color: #f9fafb;
  }
  
  .no-data-subtitle {
    color: #d1d5db;
  }
  
  .no-data-icon {
    color: #6b7280;
  }
}

/* Integration with DataTable */
.data-table .no-data-container {
  margin: 20px 0;
  border: none;
  background: transparent;
}

/* Animation */
.no-data-container {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Table Toggle Switch */
.table-toggle-wrap {
  display: flex;
  align-items: center;
}

.table-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}

.table-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.table-slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2f4f7;
  transition: 0.4s;
  border-radius: 20px;
  border: 1px solid #eaecf0;
}

.table-slider-round:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);
}

input:checked+.table-slider-round {
  background-color: #12b76a;
  border-color: #12b76a;
}

input:checked+.table-slider-round:before {
  transform: translateX(14px);
}

.data-table-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
  min-height: 480px;
  box-sizing: border-box;
}

.data-table {
  flex: 1 1;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-responsive {
  flex: 1 1;
  width: 100%;
  overflow: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Table Structure */
.data-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  font-family: var(--font-family-primary);
  table-layout: auto;
  min-width: 100%;
}

/* Table Header */
.data-table thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  /* Ensure it stays above content */
  display: table-header-group;
}

.data-table thead th {
  background: #f9fafb;
  padding: 14px 16px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-family: 'Inter', var(--font-family-primary, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: #535862;
  text-transform: capitalize;
  border-bottom: 2px solid #e5e7eb;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0px;
}

/* Ensure table-container wrapped DataTables also have consistent styling */
.table-container .data-table thead th {
  background: #f9fafb;
  padding: 14px 16px;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-family: 'Inter', var(--font-family-primary, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: #535862;
  text-transform: capitalize;
  border-bottom: 2px solid #e5e7eb;
  vertical-align: middle;
  white-space: nowrap;
  letter-spacing: 0px;
}

/* Global table header styling to ensure consistency */
table thead th {
  font-family: 'Inter', sans-serif;
  font-family: 'Inter', var(--font-family-primary, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: #535862;
  text-transform: capitalize;
  letter-spacing: 0px;
}

/* Default column widths for alignment - removed nth-child rules to use inline width styles */

/* Table Body */
.data-table tbody {
  background: #fff;
  display: table-row-group;
  width: 100%;
}

.data-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
  display: table-row;
  width: 100%;
  table-layout: fixed;
  font-family: var(--font-family-primary);
}

.data-table tbody tr:hover {
  background-color: #f9fafb;
}


.padding-row {
  height: 52px;
  /* Matches the standard row height with padding */
  pointer-events: none;
  /* Disable hover/click effects on empty rows */
}

.padding-row:hover {
  background-color: transparent;
}

.empty-cell {
  background: transparent;
}

/* Table Cells */
.data-table tbody td {
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-family: 'Inter', var(--font-family-primary, sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: #535862;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table-cell;
}

/* Base style for truncating text within cells */
.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

/* Product Cell - Override overflow for images */
.data-table tbody td:first-child {
  overflow: visible;
  white-space: normal;
  word-break: break-word;
}

/* Product Cell with Image */
.product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 200px;
}

.product-image {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background-color: #f3f4f6;
  flex-shrink: 0;
  display: block;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid #e5e7eb;
}


.product-image-placeholder {
  min-width: 45px;
  min-height: 45px;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background-color: #6B7280;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: visible;
  opacity: 1;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1;
  min-width: 0;
}

.product-name {
  font-weight: 600;
  color: #111827;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}

.product-brand {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.2;
  white-space: nowrap;
}

.product-sku {
  font-size: 10px;
  color: #9ca3af;
  line-height: 1.2;
  white-space: nowrap;
}

/* Service ID Cell - push right */
.service-id-cell {
  padding-left: 35px;
}

/* Description Cell - 2 lines max, pull left */
.description-cell {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.4;
  max-width: 200px;
  font-size: 13px;
  line-clamp: 2;
}

/* Action Buttons */
.action-btns {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.actions-cell {
  min-width: 140px;
  width: auto;
  overflow: visible !important;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
  gap: 4px;
}

.table-edit-btn,
.table-delete-btn,
.table-download-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.table-edit-btn:hover,
.table-delete-btn:hover,
.table-download-btn:hover {
  background-color: #f2f4f7;
}

.table-edit-btn.minimal,
.table-delete-btn.minimal {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}

.table-edit-btn.minimal:hover,
.table-delete-btn.minimal:hover {
  background: none !important;
  transform: scale(1.1);
  box-shadow: none !important;
}

.table-edit-btn img,
.table-delete-btn img,
.table-download-btn img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Legacy table status styles (kept scoped to avoid overriding shared StatusBadge component) */
.table-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.table-status-active {
  background-color: #d1fae5;
  color: #065f46;
}

.table-status-inactive {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Price and Expiry Styling */
.price-value {
  font-weight: 600;
  color: #111827;
}

.expiry-date {
  font-size: 14px;
  font-weight: 500;
}

.expiry-normal {
  color: #6b7280;
}

.expiry-soon {
  color: #dc2626;
  font-weight: 600;
}

.expiry-expired {
  color: #991b1b;
  font-weight: 600;
  text-decoration: line-through;
}

/* No padding class for specific columns */
.data-table thead th.no-padding,
.data-table tbody td.no-padding {
  padding: 0 !important;
  padding-left: 8px !important;
}

/* Data Table Pagination Wrapper */
.data-table-pagination-wrapper {
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #eaecf0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  min-height: 64px;
}

/* Action Box Classes */
.table-actions-container {
  display: flex;
  gap: 8px;
  cursor: pointer;
  align-items: center;
}

.download-arrow-icon {
  font-size: 16px;
  color: #9ca3af;
  font-weight: bold;
}

.table-action-icon {
  font-size: 18px !important;
  color: #98A2B3;
}

.table-action-icon-grey {
  font-size: 18px !important;
  color: #6b7280;
}

/* Tooltip Custom Styles */
.custom-tooltip-popper .MuiTooltip-tooltip {
  background-color: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12) !important;
  font-size: 13px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  max-width: 300px !important;
  font-family: "Inter", sans-serif !important;
}

.custom-tooltip-popper .MuiTooltip-arrow {
  color: #ffffff !important;
}

.custom-tooltip-popper .MuiTooltip-arrow::before {
  border: 1px solid #e5e7eb !important;
}
.tansfer-main {
  width: 699px;
  height: 416px;
  border: 1px solid #e9eaeb;
  border-radius: 16px;
  background-color: #ffffff;
  position: absolute;
  top: 19%;
  left: 25%;
}
.main-transfer-head-hero {
  width: 699px;
  height: 344px;
}
.transfer-head-hero {
  width: 651px;
  height: 272px;
}
.avatar-text {
  width: 364px;
  height: 92px;
}
.transfer-product {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  size: 14px;
  color: #181d27;
}
.transfer-brand {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  size: 14px;
  color: #535862;
}
.transfer-proid {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  size: 14px;
  color: #535862;
}
.transfer-image {
  position: relative;
  top: 30px;
  left: 30px;
}
.transfer-text {
  position: absolute;
  top: 30px;
  left: 100px;
}
.label1 {
  font-weight: 500;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: #414651;
  position: absolute;
  top: 124px;
  left: 24px;
}
.select1 {
  width: 300.5px;
  height: 40px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #d5d7da;
  font-family: "Inter", sans-serif;
  color: #717680;
  position: absolute;
  top: 150px;
  left: 24px;
  padding-left: 10px;
  -webkit-appearance: none;
          appearance: none;
  background: url(/static/media/chevron-down.0a96cbd81d8a04a2b981.svg) no-repeat right 10px center;
}
.select-icon {
  position: absolute;
  top: 145px;
  left: 337.5px;
}
.label2 {
  font-weight: 500;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: #414651;
  position: absolute;
  top: 124px;
  right: 167.5px;
}
.select2 {
  width: 300.5px;
  height: 40px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #d5d7da;
  font-family: "Inter", sans-serif;
  color: #717680;
  position: absolute;
  top: 150px;
  right: 19.5px;
  padding-left: 10px;
  gap: 8px;
  -webkit-appearance: none;
          appearance: none;
  background: url(/static/media/chevron-down.0a96cbd81d8a04a2b981.svg) no-repeat right 10px center;
}
.label3 {
  width: 159px;
  height: 20px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #414651;
  position: absolute;
  top: 222px;
  left: 24px;
}
.quantity {
  width: 285.5px;
  height: 35px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #d5d7da;
  font-family: "Inter", sans-serif;
  color: #717680;
  position: absolute;
  top: 248px;
  left: 24px;
  padding-left: 10px;
}
.label4 {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #414651;
  position: absolute;
  left: 385px;
  top: 222px;
}
.reason {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #414651;
  background-color: #ffffff;
  width: 285.5px;
  height: 35px;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  position: absolute;
  top: 248px;
  left: 380px;
  padding-left: 10px;
}
.transfer-bottom {
  width: 699px;
  height: 72px;
  border-top: 1px solid #e9eaeb;
  position: absolute;
  top: 344px;
}
.avalable {
  color: #079455;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  position: absolute;
  top: 20px;
  left: 24px;
}
.cancel {
  width: 80px;
  height: 40px;
  border-radius: 8px;
  background-color: #ffffff;
  border: 1px solid #d5d7da;
  font-family: "Inter", sans-serif;
  color: #414651;
  position: absolute;
  bottom: 16px;
  right: 179px;
  cursor: pointer;
}
.send-req {
  width: 151px;
  height: 40px;
  border-radius: 8px;
  background-color: #1570ef;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  border: 2px solid #ffffff1f;
  background-image: url(/static/media/send-01.27a263f1a8b91b1b7293.svg);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 20px;
  position: absolute;
  cursor: pointer;
  padding-left: 30px;
  bottom: 16px;
  right: 16px;
}

/* Delete Modal Styles - Unique to Inventory/DataTable */
.inv-delete-main {
  width: 400px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.inv-delete-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #98A2B3;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.inv-delete-close-btn:hover {
  color: #667085;
}

.inv-delete-icon-wrapper {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.inv-delete-icon-circle {
  width: 56px;
  height: 56px;
  background: #FEF3F2;
  border: 10px solid #FFF1F0;
  border-radius: 50%;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-delete-title {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 8px 0;
  text-align: left;
  width: 100%;
}

.inv-delete-paragraph {
  font-size: 14px;
  line-height: 1.5;
  color: #475467;
  margin: 0 0 32px 0;
  text-align: left;
  width: 100%;
}

.inv-delete-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.inv-cancel-btn {
  flex: 1 1;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  background: #fff;
  color: #344054;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.inv-cancel-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.inv-delete-btn {
  flex: 1 1;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #D92D20;
  background: #D92D20;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.inv-delete-btn:hover {
  background: #B42318;
  border-color: #B42318;
}

.inv-delete-btn:active {
  transform: scale(0.98);
}

.toast-wrapper {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 250px;
  animation: slideDown 0.3s ease-out;
}

.inv-delete-reason-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.inv-reason-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.inv-reason-group label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.inv-reason-group .req {
  color: #1570ef;
}

.inv-reason-select,
.inv-reason-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  background: #FFFFFF;
  color: #101828;
  font-size: 16px;
  outline: none;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  transition: all 0.2s;
}

.inv-reason-select:focus,
.inv-reason-input:focus {
  border-color: #84CAFF;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #EFF8FF;
}

.inv-delete-btn-primary {
  flex: 1 1;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #D92D20;
  background: #D92D20;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.inv-delete-btn-primary:hover {
  background: #B42318;
  border-color: #B42318;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 480px) {
  .inv-delete-main {
    width: calc(100% - 32px);
    margin: 16px;
    padding: 20px;
  }

  .inv-delete-actions {
    flex-direction: column-reverse;
  }

  .inv-cancel-btn,
  .inv-delete-btn {
    width: 100%;
  }
}
.searchbar-main {
  width: 100%;
  height: 50px;
  position: relative;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: none;
  background-color: #ffffff;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 12px;
}

.searchbar-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 360px;
}

.searchbar {
  box-sizing: border-box;
  border-radius: 8px;
  width: 100%;
  padding-left: 36px;
  padding-right: 40px;
  height: 40px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #111827;
  border: 1px solid #e9eaeb;
  background-color: #ffffff;
}

.searchbar:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
  position: absolute;
  left: 14px !important;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  width: 16px;
  height: 16px;
}

.shorcut {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}

.filter-chips-container {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
  margin-right: 16px;
  overflow-x: auto;
}

.filter-chip {
  background: #fff;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  display: flex;
  align-items: center;
  font-family: "Inter", sans-serif;
  color: #414651;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.filter-chip-remove {
  width: 20px;
  height: 20px;
  margin-left: 6px;
  cursor: pointer;
}

.filter-actions-container {
  display: flex;
  align-items: center;
}

.filter-button-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: #ffffff;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-button-wrapper:hover {
  background: #f9fafb;
}

.filter-icon {
  width: 20px;
  height: 20px;
}

.filter-button-text {
  background: none;
  border: none;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #344054;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter:hover {
  background-color: #f9fafb;
}

.filtericon {
  width: 20px;
  height: 20px;
}

.filter-count-badge {
  background: #F2F4F7;
  color: #344054;
  border-radius: 16px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .searchbar-main {
    flex-wrap: wrap;
    height: auto;
    padding: 12px;
  }


  .filter-chips-container {
    order: 3;
    width: 100%;
    margin: 12px 0 0 0;
  }


  .filter-actions-container {
    margin-left: auto;
  }
}
.advanced-filter-panel {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
  width: -webkit-fit-content;
  width: fit-content;
  min-width: 300px;
  min-height: 300px;
  max-height: 425px;
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.af-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 280px;
  overflow: auto;
}

.af-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.af-label {
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* Chips */
.af-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.af-chip {
  background-color: #ffffff;
  border: 1px solid #d0d5dd;
  color: #344054;
  padding: 4px 10px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  outline: none;
}

.af-chip:hover {
  background-color: #f9fafb;
}

.af-chip.selected {
  background-color: #EFF8FF;
  border-color: #B2DDFF;
  color: #175CD3;
}

.af-chip-close {
  font-size: 16px !important;
  color: #667085;
}

/* Checkbox Group */
.af-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 150px;
  overflow-y: auto;
}

.af-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}

.af-checkbox-input {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
  cursor: pointer;
}

/* Select */
.af-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.af-select {
  width: 100%;
  -webkit-appearance: none;
          appearance: none;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 14px;
  padding-right: 32px;
  font-size: 14px;
  color: #111827;
  cursor: pointer;
  outline: none;
}

.af-select:focus {
  border-color: #2e90fa;
  box-shadow: 0 0 0 4px rgba(46, 144, 250, 0.1);
}

.af-select.with-icon {
  padding-left: 36px;
}

.af-select-icon {
  position: absolute;
  left: 10px;
  color: #9ca3af;
  font-size: 18px !important;
  pointer-events: none;
}

.af-select-arrow {
  position: absolute;
  right: 10px;
  color: #9ca3af;
  pointer-events: none;
}

/* Date Range */
.af-date-range {
  display: flex;
  gap: 8px;
}

.af-date-input-wrapper {
  position: relative;
  flex: 1 1;
}

.af-date-input {
  width: 100%;
  -webkit-appearance: none;
          appearance: none;
  background-color: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 10px 14px;
  padding-right: 36px;
  font-size: 15px;
  height: 44px;
  color: #101828;
  outline: none;
  font-family: inherit;
}

.af-date-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  position: absolute;
  right: 0;
}

.af-date-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #667085;
  font-size: 18px !important;
  pointer-events: none;
}

/* Footer */
.af-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 20px;
  border-top: 1px solid #eaecf0;
}

.af-btn-reset {
  background: none;
  border: none;
  color: #475467;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.af-btn-reset:hover {
  color: #101828;
}

.af-btn-apply {
  background-color: #2F80ED;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s;
}

.af-btn-apply:hover {
  background-color: #2365c2;
}

/* Number Range */
.af-number-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.af-number-input {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  height: 44px;
  color: #101828;
  outline: none;
}

.af-number-input:focus {
  border-color: #2e90fa;
  box-shadow: 0 0 0 4px rgba(46, 144, 250, 0.1);
}

.af-range-separator {
  color: #667085;
  font-weight: 500;
}

/* Search Input */
.af-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.af-search-input {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 14px;
  padding-left: 40px;
  padding-right: 40px;
  font-size: 15px;
  height: 44px;
  color: #101828;
  outline: none;
}

.af-search-input:focus {
  border-color: #2e90fa;
  box-shadow: 0 0 0 4px rgba(46, 144, 250, 0.1);
}

.af-search-icon {
  position: absolute;
  left: 12px;
  color: #667085;
  font-size: 20px !important;
  pointer-events: none;
}

.af-search-clear {
  position: absolute;
  right: 12px;
  color: #98a2b3;
  font-size: 18px !important;
  cursor: pointer;
}

.af-search-clear:hover {
  color: #667085;
}

.af-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d0d5dd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.af-suggestion-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  color: #344054;
  transition: background 0.2s;
}

.af-suggestion-item:hover {
  background-color: #f9fafb;
}

.af-suggestion-item:not(:last-child) {
  border-bottom: 1px solid #f2f4f7;
}
/* Multi-select dropdown */
.af-multi-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}

.af-multi-option {
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: background 0.2s;
}

.af-multi-option:hover {
  background-color: #f3f4f6;
}


.pagination-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.9rem !important;
  font-family: "Inter", sans-serif !important;
  width: 100% !important;
  gap: 1rem !important;
  padding: 16px !important;
  border: 1px solid #e5e7eb !important;
  border-top: none !important;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px !important;
  margin-top: -1px !important;
  box-sizing: border-box !important;
}

.pagination-wrapper-left,
.pagination-wrapper-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
}

.pagination-wrapper-left {
  justify-content: flex-start !important;
}

.pagination-wrapper-right {
  justify-content: flex-end !important;
}

.pagination-wrapper-center {
  flex: 1 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}

.pagination-wrapper button {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  padding: 0.6rem 0.9rem !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  min-width: 40px !important;
  text-align: center !important;
}

.pagination-wrapper button:hover:not(:disabled) {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}

.pagination-wrapper button:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  background: #f9fafb !important;
}

.pagination-wrapper button.active {
  background: #d1d5db;
  color: #374151;
  border-color: #d1d5db;
  font-weight: 600;
}

.pagination-wrapper button.active:hover {
  background: #d1d5db;
  border-color: #d1d5db;
}

.pagination-wrapper button:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .pagination-wrapper {
    gap: 1rem;
    font-size: 0.8125rem;
    /* 13px */
  }

  .pagination-wrapper-left,
  .pagination-wrapper-right {
    width: 100%;
    justify-content: center;
    margin: 0;
    font-size: 0.8125rem;
    /* 13px */
  }

  .pagination-wrapper-center {
    order: -1;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .pagination-wrapper button {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
    /* 12px */
    min-width: 36px;
  }
}

@media (max-width: 480px) {
  .pagination-wrapper {
    font-size: 0.75rem;
    /* 12px */
  }

  .pagination-wrapper-left,
  .pagination-wrapper-right {
    font-size: 0.75rem;
    /* 12px */
  }

  .pagination-wrapper button {
    padding: 0.35rem 0.6rem;
    font-size: 0.6875rem;
    /* 11px */
    min-width: 32px;
  }

  .pagination-wrapper-center {
    gap: 0.2rem;
  }
}
.upload-card-outer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* Upload box - full width, taller for Figma design */
.upload-card-wrapper {
  width: 100%;
  min-height: 140px;
  background-color: #f9fafb;
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.upload-card-wrapper:hover,
.upload-card-wrapper.dragging {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.upload-card-wrapper.error {
  border-color: #ef4444;
  background-color: #fef2f2;
}

.upload-card-content {
  text-align: center;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
}

.upload-icon-wrapper {
  padding: 8px;
  border-radius: 50%;
  margin-bottom: 4px;
}

.upload-icon {
  width: 28px;
  height: 28px;
}

.upload-title {
  font-weight: 600;
  font-size: 14px;
  color: #175cd3;
  display: inline;
}

.upload-subtext {
  color: #6b7280;
  font-size: 13px;
  margin-top: 2px;
}

/* Upload file list */
.upload-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  box-sizing: border-box;
}

.file-icon {
  font-size: 12px;
  font-weight: 600;
  color: white;
  background-color: #3b82f6;
  padding: 4px 8px;
  border-radius: 4px;
  min-width: 38px;
  text-align: center;
}

.file-details {
  flex: 1 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  color: #111827;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.upload-complete {
  color: #10b981;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Progress bar */
.progress-bar {
  background-color: #e5e7eb;
  height: 6px;
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #3b82f6;
  width: 0%;
  transition: width 0.3s ease-in-out;
}

/* Progress text */
.file-progress-text {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  width: 40px;
  text-align: right;
}

/* Trash icon */
.file-delete {
  cursor: pointer;
  margin-left: 8px;
  display: flex;
  align-items: center;
  color: #9ca3af;
  transition: color 0.2s;
}

.file-delete:hover {
  color: #ef4444;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .upload-card-wrapper {
    min-height: 110px;
  }

  .upload-title {
    font-size: 0.875rem;
  }

  .upload-subtext {
    font-size: 0.75rem;
  }
}
.inventory-page-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
  overflow: hidden;
  min-height: 0;
}

.inventory-page-wrapper .user-management-card {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
  overflow: hidden;
}

.inventory-page-wrapper .table-container {
  flex: 1 1;
  /* Occupy remaining space */
  min-height: 0;
  /* Important for flex child with overflow */
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* Changed from visible */
  background: #fff;
  width: 100%;
  z-index: 1;
}

/* Pagination container styling - matches other pages */
.inventory-page-wrapper .table-container+.pagination-wrapper {
  background: #ffffff !important;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
}

.inventory-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff !important;
  gap: 8px;
}

.inventory-page-wrapper .custom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #374151;
  font-family: "Inter", sans-serif;
}

.inventory-page-wrapper .custom-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #f9fafb;
  z-index: 10;
  border-bottom: 1px solid #e5e7eb;
}

.inventory-page-wrapper .custom-table th {
  text-align: left;
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #535862;
  font-size: 14px;
  white-space: nowrap;
  vertical-align: middle;
  font-family: "Inter", sans-serif;
}

.inventory-page-wrapper .custom-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  color: #111827;
  vertical-align: middle;
}

.inventory-page-wrapper .custom-table tbody tr {
  background-color: #fff;
  transition: background-color 0.15s ease;
}

.inventory-page-wrapper .custom-table tbody tr:hover {
  background-color: #f9fafb;
}

/* Product Column */
.inventory-page-wrapper .product-name {
  font-weight: 500;
  color: #111827;
  font-size: 14px;
}

/* Status Badge */
.inventory-page-wrapper .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.inventory-page-wrapper .status-active {
  background-color: #d1fae5;
  color: #065f46;
}

.inventory-page-wrapper .status-inactive {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Price formatting */
.inventory-page-wrapper .price-value {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}

/* Expiry date styling */
.inventory-page-wrapper .expiry-date {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
  display: inline-block;
}

.inventory-page-wrapper .expiry-normal {
  color: #6b7280;
}

.inventory-page-wrapper .expiry-soon {
  color: #dc2626;
  font-weight: 600;
}

.inventory-page-wrapper .expiry-expired {
  color: #991b1b;
  font-weight: 600;
  text-decoration: line-through;
}

/* Actions column */
.inventory-page-wrapper .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.inventory-page-wrapper .icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.inventory-page-wrapper .icon-btn:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.inventory-page-wrapper .icon-btn.delete:hover {
  background-color: #fee2e2;
  color: #dc2626;
}

.inventory-page-wrapper .icon-btn.edit:hover {
  background-color: #dbeafe;
  color: #2563eb;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .inventory-page-wrapper .user-management-card {
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.75rem;
  }

  .inventory-page-wrapper .table-container {
    height: auto;
    max-height: 60vh;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .inventory-page-wrapper .custom-table {
    font-size: 13px;
    min-width: 700px;
  }

  .inventory-page-wrapper .custom-table th {
    font-size: 11px;
    padding: 10px 12px;
  }

  .inventory-page-wrapper .custom-table td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .inventory-page-wrapper .product-cell {
    gap: 10px;
  }

  .inventory-page-wrapper .product-image {
    width: 36px;
    height: 36px;
  }

  .inventory-page-wrapper .product-name {
    font-size: 13px;
  }

  .inventory-page-wrapper .product-brand {
    font-size: 11px;
  }

  .inventory-page-wrapper .product-sku {
    font-size: 10px;
  }

  .inventory-page-wrapper .actions {
    gap: 6px;
  }

  .inventory-page-wrapper .icon-btn {
    width: 28px;
    height: 28px;
    padding: 2px;
  }
}

@media (max-width: 480px) {
  .inventory-page-wrapper .user-management-card {
    padding: 0.75rem;
    margin-top: 0.5rem;
  }

  .inventory-page-wrapper .table-container {
    max-height: 50vh;
  }

  .inventory-page-wrapper .custom-table {
    font-size: 12px;
    min-width: 600px;
  }

  .inventory-page-wrapper .custom-table th {
    font-size: 10px;
    padding: 8px 10px;
  }

  .inventory-page-wrapper .custom-table td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .inventory-page-wrapper .product-cell {
    gap: 8px;
  }

  .inventory-page-wrapper .product-image {
    width: 32px;
    height: 32px;
  }

  .inventory-page-wrapper .product-name {
    font-size: 12px;
  }

  .inventory-page-wrapper .product-brand {
    font-size: 10px;
  }

  .inventory-page-wrapper .product-sku {
    font-size: 9px;
  }

  .inventory-page-wrapper .status-badge {
    padding: 2px 8px;
    font-size: 11px;
  }

  .inventory-page-wrapper .actions {
    gap: 4px;
  }

  .inventory-page-wrapper .icon-btn {
    width: 24px;
    height: 24px;
    padding: 1px;
  }
}
/* Inventory Table - Specific Styles Scoped to Inventory Page */

.inventory-page-wrapper .inventory-table-wrapper .data-table-wrapper {
  width: 100%;
  overflow-x: auto !important;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-overflow-scrolling: touch;
}

.inventory-page-wrapper .inventory-table-wrapper .data-table {
  width: 100%;
}

.inventory-page-wrapper .inventory-table-wrapper .table-responsive {
  width: 100%;
  overflow-x: auto !important;
}

/* Table Structure */
.inventory-page-wrapper .inventory-table-wrapper .data-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-family: "Inter", sans-serif;
  table-layout: auto;
  min-width: 1000px;
  display: table !important;
  white-space: nowrap;
}

/* Table Header */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead {
  background: #f3f4f6;
  border-bottom: 2px solid #d1d5db;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  display: table-header-group !important;
}

.inventory-page-wrapper .inventory-table-wrapper .data-table thead th {
  background: #f3f4f6;
  padding: 16px 18px;
  text-align: left;
  color: #374151;
  border-bottom: 2px solid #d1d5db;
  vertical-align: middle;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Table Body */
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody {
  background: #fff;
  display: table-row-group !important;
  width: 100% !important;
}

.inventory-page-wrapper .inventory-table-wrapper .data-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
  height: auto;
  display: table-row !important;
  width: auto !important;
}

.inventory-page-wrapper .inventory-table-wrapper .data-table tbody tr:hover {
  background-color: #f9fafb;
}

/* Table Cells */
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td {
  padding: 16px 18px;
  color: #111827;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Specific Column Widths for Inventory - Proportional sizing */
/* Column 1: Product (wider) - 28% */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead th:nth-child(1),
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td:nth-child(1) {
  width: 28% !important;
  min-width: 28% !important;
  max-width: 28% !important;
}

/* Column 2: Status (narrow) - 9% */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead th:nth-child(2),
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td:nth-child(2) {
  width: 9% !important;
  min-width: 9% !important;
  max-width: 9% !important;
}

/* Column 3: HSN (narrow) - 8% */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead th:nth-child(3),
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td:nth-child(3) {
  width: 8% !important;
  min-width: 8% !important;
  max-width: 8% !important;
}

/* Column 4: Category (medium) - 15% */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead th:nth-child(4),
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td:nth-child(4) {
  width: 15% !important;
  min-width: 15% !important;
  max-width: 15% !important;
}

/* Column 5: Price (medium) - 11% */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead th:nth-child(5),
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td:nth-child(5) {
  width: 11% !important;
  min-width: 11% !important;
  max-width: 11% !important;
}

/* Column 6: Unit Type (narrow) - 8% */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead th:nth-child(6),
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td:nth-child(6) {
  width: 8% !important;
  min-width: 8% !important;
  max-width: 8% !important;
}

/* Column 7: Stock Quantity (narrow) - 8% */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead th:nth-child(7),
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td:nth-child(7) {
  width: 8% !important;
  min-width: 8% !important;
  max-width: 8% !important;
}

/* Column 8: Expiry Date (narrow) - 6% */
.inventory-page-wrapper .inventory-table-wrapper .data-table thead th:nth-child(8),
.inventory-page-wrapper .inventory-table-wrapper .data-table tbody td:nth-child(8) {
  width: 6% !important;
  min-width: 6% !important;
  max-width: 6% !important;
  text-align: right;
  padding-right: 20px;
}

/* Product Cell with Image */
.inventory-page-wrapper .inventory-table-wrapper .product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.inventory-page-wrapper .inventory-table-wrapper .product-image {
  width: 45px;
  height: 45px;
  border-radius: 6px;
  object-fit: cover;
  background-color: #f3f4f6;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
}

.inventory-page-wrapper .inventory-table-wrapper .product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inventory-page-wrapper .inventory-table-wrapper .product-name {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-page-wrapper .inventory-table-wrapper .product-sku {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status Badge */
.inventory-page-wrapper .inventory-table-wrapper .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Expiry Date Styling */
.inventory-page-wrapper .inventory-table-wrapper .expiry-normal {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.inventory-page-wrapper .inventory-table-wrapper .expiry-soon {
  color: #dc2626;
  font-weight: 600;
  font-size: 14px;
}

.inventory-page-wrapper .inventory-table-wrapper .expiry-expired {
  color: #991b1b;
  font-weight: 600;
  text-decoration: line-through;
  font-size: 14px;
}

/* Price Styling */
.inventory-page-wrapper .inventory-table-wrapper .price-value {
  font-weight: 600;
  color: #111827;
  font-size: 14px;
}

/* Action Buttons */
.inventory-page-wrapper .inventory-table-wrapper .action-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.inventory-page-wrapper .inventory-table-wrapper .action-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.inventory-page-wrapper .inventory-table-wrapper .action-btn:hover {
  background-color: #e5e7eb;
  border-color: #d1d5db;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.inventory-page-wrapper .inventory-table-wrapper .action-btn img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Pagination Wrapper - Scoped */
.inventory-page-wrapper .pagination-wrapper {
  width: 100%;
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
}

/* Inventory Pagination Wrapper - Scoped */
.inventory-page-wrapper .inventory-pagination-wrapper {
  width: 100%;
  background: #ffffff !important;
  border: 1px solid #e5e7eb;
  border-top: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
}
.employee-mgmt-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.em-tabs-container {
  display: flex;
  gap: 32px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
  padding-bottom: 0;
  padding-left: 20px;
  border-radius: 8px;
}

.em-tab {
  background: none;
  border: none;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #667085;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.em-tab:hover {
  color: #111827;
}

.em-tab.active {
  color: #2563eb;
}

.em-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2563eb;
}

.em-tab-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.placeholder-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: #667085;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px dashed #d1d5db;
}

/* Status Badges */
.em-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.em-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.em-status-active {
  background: #ecfdf3;
  color: #039855;
}

.em-status-active .em-status-dot {
  background: #12b76a;
}

.em-status-inactive {
  background: #f2f4f7;
  color: #344054;
}

.em-status-inactive .em-status-dot {
  background: #667085;
}

.em-status-pending {
  background: #fff8eb;
  color: #b45309;
}

.em-status-pending .em-status-dot {
  background: #f79009;
}

/* Contact Details Styling */
.em-contact-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.em-contact-phone {
  font-size: 14px;
  color: #111827;
  font-weight: 500;
}

.em-contact-email {
  font-size: 13px;
  color: #667085;
}

/* Action Icons */
.em-action-btns {
  display: flex;
  gap: 8px;
}

.em-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: #667085;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.em-icon-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.em-icon-btn svg {
  font-size: 18px;
}

/* Modal Content & Grid */
.cd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.cd-modal-content {
  position: relative;
  z-index: 10000;
}

.em-hiring-modal {
  width: 800px !important;
}

.em-detail-modal {
  width: 700px !important;
}

.em-modal-body {
  padding: 24px !important;
}

.em-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px 24px;
  gap: 16px 24px;
}

.em-full-width-field {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}

.em-field-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 6px;
}

.em-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  resize: vertical;
}

.em-textarea:focus {
  outline: none;
  border-color: #d1e9ff;
  box-shadow: 0px 0px 0px 4px #f2f4f7;
}

/* Detail View Styles */
.em-header-with-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.em-header-with-status h2 {
  margin-bottom: 0 !important;
}

.em-detail-section {
  margin-bottom: 24px;
}

.em-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid #f2f4f7;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.em-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.em-detail-item label {
  display: block;
  font-size: 13px;
  color: #667085;
  margin-bottom: 4px;
}

.em-detail-item p {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.em-detail-text {
  font-size: 14px;
  color: #344054;
  line-height: 1.5;
}

/* Attachment Styles */
.em-attachment-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #fff;
}

.em-attachment-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.em-attachment-icon {
  width: 40px;
  height: 40px;
  background: #fef3f2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-attachment-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.em-attachment-size {
  font-size: 12px;
  color: #667085;
  margin: 0;
}

.em-text-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* Modal Footer Buttons */
.cd-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #eaecf0;
  background: #fff;
}

.cd-btn-cancel,
.cd-btn-save,
.cd-btn-approve {
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
}

.cd-btn-cancel {
  background: #fff;
  color: #344054;
  border-color: #d0d5dd;
}

.cd-btn-cancel:hover {
  background: #f9fafb;
  border-color: #cbd5e1;
}

.cd-btn-save {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.cd-btn-save:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.cd-btn-save:disabled,
.cd-btn-approve:disabled,
.cd-btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cd-btn-approve {
  border: none;
  background: #2563eb;
  color: #fff;
}

.cd-btn-approve:hover {
  background: #1d4ed8;
}

/* Table Width and Overflow Fix */
.em-table-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  /* Let table-responsive handle scroll */
}

.em-table-container .table-responsive table {
  table-layout: auto !important;
  min-width: 1500px !important;
}

.em-table-container .data-table thead th {
  white-space: nowrap !important;
  padding: 12px 16px !important;
}

.em-table-container .data-table tbody td {
  white-space: nowrap !important;
  padding: 12px 16px !important;
}

/* Figma parity - request flow */
.em-status-card {
  border: 1px solid #f2f4f7;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.em-status-card strong {
  font-size: 13px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.em-status-card span {
  font-size: 12px;
  color: #667085;
}

.em-status-review-meta {
  margin-left: auto;
  text-align: right;
}

.em-status-card-warning {
  background: #fffaeb;
  border-color: #fedf89;
}

.em-status-card-warning strong {
  color: #b54708;
}

.em-status-strip {
  padding: 16px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.em-request-code {
  margin: 2px 0 0;
  font-size: 13px;
  color: #667085;
}

.em-status-card-success {
  background: #ecfdf3;
  border-color: #abefc6;
}

.em-status-card-success strong {
  color: #067647;
}

.em-status-card-danger {
  background: #fef3f2;
  border-color: #fecdca;
}

.em-status-card-danger strong {
  color: #b42318;
}

.em-status-card-danger .em-status-review-meta,
.em-status-card-danger span {
  color: #b42318;
}

.em-upload-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f2f4f7;
  padding-top: 14px;
  margin-top: 6px;
}

.em-upload-label {
  font-size: 13px;
  color: #344054;
  font-weight: 500;
}

.em-mini-popup {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 340px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eaecf0;
  box-shadow: 0 18px 24px rgba(16, 24, 40, 0.12);
  z-index: 10001;
}

.em-reviewer-popup {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: 320px;
  z-index: 20000;
}

.em-mini-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #f2f4f7;
}

.em-mini-popup-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.em-mini-popup-body {
  padding: 14px;
}

.em-reviewer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.em-reviewer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #101828;
  cursor: pointer;
}

.em-reviewer-item input[type="radio"] {
  width: 12px;
  height: 12px;
  margin: 0;
}

.em-mini-label {
  display: block;
  font-size: 12px;
  color: #667085;
  margin-bottom: 6px;
}

.em-mini-info {
  margin-top: 10px;
  border: 1px dashed #d0d5dd;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #475467;
}

.em-mini-popup-footer {
  border-top: 1px solid #f2f4f7;
  padding: 12px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.em-reviewer-popup .em-mini-popup-footer .cd-btn-cancel,
.em-reviewer-popup .em-mini-popup-footer .cd-btn-save {
  flex: 1 1;
  text-align: center;
}

.em-danger-btn {
  background: #d92d20 !important;
  border-color: #d92d20 !important;
  color: #fff !important;
}

.em-danger-btn:hover {
  background: #b42318 !important;
  border-color: #b42318 !important;
}

.em-reject-popup {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: 360px;
}

.em-detail-footer {
  justify-content: flex-end;
}

.em-small-btn {
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

.em-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #475467;
  margin-bottom: 12px;
  display: block;
}

.em-info-block {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: hidden;
  padding: 12px 0;
}

.em-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 14px;
  border-bottom: none;
}

.em-info-row:last-child {
  border-bottom: 0;
}

.em-info-row span {
  color: #667085;
}

.em-info-row strong {
  color: #344054;
  font-weight: 500;
}

.em-boxed-text {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  margin: 0;
  font-size: 14px;
  color: #475467;
}

.em-rejection-note {
  border: 1px solid #fecdca;
  background: #fef3f2;
  border-radius: 8px;
  padding: 16px;
  color: #b42318;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.em-attachment-flat {
  border-radius: 6px;
  border-color: #eaecf0;
  padding: 8px 10px;
}

.em-attachment-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.em-icon-plain-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  cursor: pointer;
}

.em-icon-plain-btn:hover {
  background: #f2f4f7;
}

@media (max-width: 768px) {

  .em-hiring-modal,
  .em-detail-modal {
    width: calc(100vw - 20px) !important;
  }

  .em-form-grid,
  .em-detail-grid {
    grid-template-columns: 1fr;
  }

  .em-mini-popup {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }

  .em-rejection-note {
    font-size: 18px;
    line-height: 28px;
    padding: 12px 14px;
  }
}
.lr-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid transparent; /* Remove border if it looks cleaner, or add #e5e7eb */
}

.lr-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  font-family: "Inter", sans-serif;
}

.lr-details-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 24px;
  font-family: "Inter", sans-serif;
}

.lr-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.lr-detail-label {
  color: #6b7280;
}

.lr-detail-value {
  color: #111827;
  font-weight: 500;
  text-align: right;
}

.lr-form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  font-family: "Inter", sans-serif;
}

.lr-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lr-form-group label {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

.lr-required {
  color: #2e90fa; /* Matches the blue asterisk in Figma */
}

.lr-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

.lr-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lr-btn-cancel,
.lr-btn-reject,
.lr-btn-pending {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.lr-btn-cancel:hover,
.lr-btn-reject:hover,
.lr-btn-pending:hover {
  background-color: #f9fafb;
}

.lr-btn-approve {
  background-color: #d92d20; /* Solid red/orange */
  border: 1px solid #d92d20;
  color: #ffffff;
}

.lr-btn-approve:hover {
  background-color: #b42318;
}
.employee-mgmt-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.manage-salary-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.salary-form-card {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  flex: 1 1;
  overflow-y: auto;
}

.salary-section {
  margin-bottom: 24px;
}

.salary-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #111827;
}

.salary-component-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  grid-row-gap: 24px;
  row-gap: 24px;
}

.salary-divider {
  margin: 24px 0;
  border: none;
  border-top: 1px solid #e5e7eb;
}

.manage-salary-actions {
  display: flex;
  gap: 12px;
}

.manage-salary-radio-group {
  display: flex;
  gap: 16px;
  align-items: center;
  height: 40px;
}

.manage-salary-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #101828;
  font-weight: 500;
  cursor: pointer;
}

.manage-salary-form-label {
  display: block;
  margin-bottom: 8px;
}

/* =========================================
   Leave History Table UI Styles
========================================= */

.leave-history-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: hidden;
}

.leave-history-table th {
  background: #f9fafb;
  padding: 16px 24px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  border-bottom: 1px solid #eaecf0;
}

.leave-history-table td {
  padding: 20px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #475467;
  border-bottom: 1px solid #eaecf0;
}

.leave-history-table tr:last-child td {
  border-bottom: none;
}

.leave-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  background: #ffffff;
  border: 1px solid #eaecf0;
  color: #344054;
}

.leave-type-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.leave-type-cl .status-dot {
  background: #12b76a;
}

.leave-type-sl .status-dot {
  background: #f04438;
}

.leave-type-pl .status-dot {
  background: #2e90fa;
}

.manual-entry-modal-content {
  background: #ffffff;
  width: 480px;
  border-radius: 12px;
  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.manual-entry-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 16px 24px;
}

.manual-entry-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 4px 0;
}

.manual-entry-modal-subtitle {
  font-size: 14px;
  color: #475467;
  font-weight: 500;
  margin: 0;
}

.manual-entry-modal-body {
  padding: 0 24px 24px 24px;
  overflow-y: auto;
}

.manual-entry-modal-body .form-field {
  margin-bottom: 16px;
}

.manual-entry-status-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  border: 1px solid #eaecf0;
  background: #f9fafb;
}

.manual-entry-status-box .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #12b76a; /* Default to present green for now */
}

.attendance-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.attendance-search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 10px 14px;
  width: 320px;
  gap: 8px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.attendance-search-box input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1 1;
  font-size: 14px;
  color: #667085;
}

.attendance-shortcut {
  background: #f2f4f7;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  color: #475467;
  font-weight: 500;
}

.attendance-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}



/* Monthly Summary */
.attendance-summary-section {
  margin-bottom: 24px;
}

.attendance-summary-title {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 16px 0;
}

.attendance-summary-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: hidden;
}

.attendance-summary-table {
  width: 100%;
  border-collapse: collapse;
}

.attendance-summary-table th {
  background: #f9fafb;
  padding: 12px 24px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  border-bottom: 1px solid #eaecf0;
}

.attendance-summary-table td {
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #101828;
}

.em-tabs-container {
  display: flex;
  gap: 32px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
  padding-bottom: 0;
  padding-left: 20px;
  border-radius: 8px;
}

.em-tab {
  background: none;
  border: none;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #667085;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.em-tab:hover {
  color: #111827;
}

.em-tab.active {
  color: #2563eb;
}

.em-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2563eb;
}

.em-tab-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.placeholder-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: #667085;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px dashed #d1d5db;
}

/* Status Badges */
.em-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.em-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.em-status-active {
  background: #ecfdf3;
  color: #039855;
}

.em-status-active .em-status-dot {
  background: #12b76a;
}

.em-status-inactive {
  background: #f2f4f7;
  color: #344054;
}

.em-status-inactive .em-status-dot {
  background: #667085;
}

.em-status-pending {
  background: #fff8eb;
  color: #b45309;
}

.em-status-pending .em-status-dot {
  background: #f79009;
}

/* Contact Details Styling */
.em-contact-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.em-contact-phone {
  font-size: 14px;
  color: #111827;
  font-weight: 500;
}

.em-contact-email {
  font-size: 13px;
  color: #667085;
}

/* Action Icons */
.em-action-btns {
  display: flex;
  gap: 8px;
}

.em-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: #667085;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.em-icon-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.em-icon-btn svg {
  font-size: 18px;
}

/* Modal Content & Grid */
.em-hiring-modal {
  width: 800px !important;
}

.em-detail-modal {
  width: 700px !important;
}

.em-modal-body {
  padding: 24px !important;
}

.em-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px 24px;
  gap: 16px 24px;
}

.em-full-width-field {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}

.em-field-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 6px;
}

.em-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  resize: vertical;
}

.em-textarea:focus {
  outline: none;
  border-color: #d1e9ff;
  box-shadow: 0px 0px 0px 4px #f2f4f7;
}

/* Detail View Styles */
.em-header-with-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.em-header-with-status h2 {
  margin-bottom: 0 !important;
}

.em-detail-section {
  margin-bottom: 24px;
}

.em-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid #f2f4f7;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.em-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.em-detail-item label {
  display: block;
  font-size: 13px;
  color: #667085;
  margin-bottom: 4px;
}

.em-detail-item p {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.em-detail-text {
  font-size: 14px;
  color: #344054;
  line-height: 1.5;
}

/* Attachment Styles */
.em-attachment-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #fff;
}

.em-attachment-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.em-attachment-icon {
  width: 40px;
  height: 40px;
  background: #fef3f2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.em-attachment-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.em-attachment-size {
  font-size: 12px;
  color: #667085;
  margin: 0;
}

.em-text-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* Modal Footer Buttons */
.cd-btn-approve {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.cd-btn-approve:hover {
  background: #1d4ed8;
}

/* Table Width and Overflow Fix */
.em-table-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  /* Let table-responsive handle scroll */
}

.em-table-container .table-responsive table {
  table-layout: auto !important;
  min-width: 1500px !important;
}

.em-table-container .data-table thead th {
  white-space: nowrap !important;
  padding: 12px 16px !important;
}

.em-table-container .data-table tbody td {
  white-space: nowrap !important;
  padding: 12px 16px !important;
}

/* Figma parity - request flow */
.em-status-card {
  border: 1px solid #f2f4f7;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.em-status-card strong {
  font-size: 13px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.em-status-card span {
  font-size: 12px;
  color: #667085;
}

.em-status-review-meta {
  margin-left: auto;
  text-align: right;
}

.em-status-card-warning {
  background: #fffaeb;
  border-color: #fedf89;
}

.em-status-card-warning strong {
  color: #b54708;
}

.em-status-strip {
  padding: 16px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.em-request-code {
  margin: 2px 0 0;
  font-size: 13px;
  color: #667085;
}

.em-status-card-success {
  background: #ecfdf3;
  border-color: #abefc6;
}

.em-status-card-success strong {
  color: #067647;
}

.em-status-card-danger {
  background: #fef3f2;
  border-color: #fecdca;
}

.em-status-card-danger strong {
  color: #b42318;
}

.em-status-card-danger .em-status-review-meta,
.em-status-card-danger span {
  color: #b42318;
}

.em-upload-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f2f4f7;
  padding-top: 14px;
  margin-top: 6px;
}

.em-upload-label {
  font-size: 13px;
  color: #344054;
  font-weight: 500;
}

.em-mini-popup {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 340px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eaecf0;
  box-shadow: 0 18px 24px rgba(16, 24, 40, 0.12);
  z-index: 10001;
}

.em-reviewer-popup {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: 320px;
}

.em-mini-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #f2f4f7;
}

.em-mini-popup-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.em-mini-popup-body {
  padding: 14px;
}

.em-reviewer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.em-reviewer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #101828;
  cursor: pointer;
}

.em-reviewer-item input[type="radio"] {
  width: 12px;
  height: 12px;
  margin: 0;
}

.em-mini-label {
  display: block;
  font-size: 12px;
  color: #667085;
  margin-bottom: 6px;
}

.em-mini-info {
  margin-top: 10px;
  border: 1px dashed #d0d5dd;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #475467;
}

.em-mini-popup-footer {
  border-top: 1px solid #f2f4f7;
  padding: 12px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.em-reviewer-popup .em-mini-popup-footer .cd-btn-cancel,
.em-reviewer-popup .em-mini-popup-footer .cd-btn-save {
  flex: 1 1;
  text-align: center;
}

.em-danger-btn {
  background: #d92d20 !important;
  border-color: #d92d20 !important;
  color: #fff !important;
}

.em-danger-btn:hover {
  background: #b42318 !important;
  border-color: #b42318 !important;
}

.em-reject-popup {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: 360px;
}

.em-detail-footer {
  justify-content: flex-end;
}

.em-small-btn {
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

.em-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #475467;
  margin-bottom: 12px;
  display: block;
}

.em-info-block {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: hidden;
  padding: 12px 0;
}

.em-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 14px;
  border-bottom: none;
}

.em-info-row:last-child {
  border-bottom: 0;
}

.em-info-row span {
  color: #667085;
}

.em-info-row strong {
  color: #344054;
  font-weight: 500;
}

.em-boxed-text {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  margin: 0;
  font-size: 14px;
  color: #475467;
}

.em-rejection-note {
  border: 1px solid #fecdca;
  background: #fef3f2;
  border-radius: 8px;
  padding: 16px;
  color: #b42318;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.em-attachment-flat {
  border-radius: 6px;
  border-color: #eaecf0;
  padding: 8px 10px;
}

.em-attachment-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.em-icon-plain-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  cursor: pointer;
}

.em-icon-plain-btn:hover {
  background: #f2f4f7;
}

@media (max-width: 768px) {

  .em-hiring-modal,
  .em-detail-modal {
    width: calc(100vw - 20px) !important;
  }

  .em-form-grid,
  .em-detail-grid {
    grid-template-columns: 1fr;
  }

  .em-mini-popup {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }

  .em-rejection-note {
    font-size: 18px;
    line-height: 28px;
    padding: 12px 14px;
  }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;
	transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

.fleet-map-shell {
  width: 100%;
}

.fleet-map-container {
  width: 100%;
  height: 70vh;
  border-radius: 8px;
  border: 1px solid #eaecf0;
  overflow: hidden;
  background: #f8fafc;
  position: relative;
}

.fleet-map-canvas {
  width: 100%;
  height: 100%;
}

.fleet-map-div-icon {
  background: transparent;
  border: none;
}

.fleet-marker-pill {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 5px solid #1570ef;
  background: #fff;
  color: #1570ef;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.22);
  transition: transform 0.2s ease;
}

.fleet-marker-pill.is-selected {
  transform: scale(1.05);
}

.fleet-marker-pill.is-on-site {
  border-color: #12b76a;
  color: #12b76a;
}

.fleet-marker-pill.is-travelling {
  border-color: #1570ef;
  color: #1570ef;
}

.fleet-marker-pill.is-idle {
  border-color: #f79009;
  color: #f79009;
}

.fleet-marker-pill.is-offline {
  border-color: #98a2b3;
  color: #98a2b3;
}

.fleet-route-node {
  width: 36px;
  height: 36px;
  border: 5px solid #1570ef;
  border-radius: 999px;
  background: #ffffff;
  color: #1570ef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.2);
}

.fleet-map-popup-card {
  min-width: 220px;
}

.fleet-map-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.fleet-map-popup-row strong {
  font-size: 14px;
  font-weight: 600;
  color: #1d2939;
}

.fleet-map-popup-row span {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  color: #027a48;
  background: #ecfdf3;
}

.fleet-map-popup-card p {
  margin: 0 0 6px;
  color: #475467;
  font-size: 12px;
  line-height: 1;
}

.fleet-map-popup-card p:last-child {
  margin-bottom: 0;
}

.fleet-map-popup-card .task-link {
  color: #1570ef;
  font-weight: 600;
}

.fleet-map-popup .leaflet-popup-content-wrapper {
  border-radius: 10px;
  padding: 4px;
}

.fleet-map-popup .leaflet-popup-content {
  margin: 8px;
}

.fleet-map-popup .leaflet-popup-tip-container {
  display: none;
}

.fleet-map-tooltip {
  border: none;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.18);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
}

.fleet-map-controls {
  position: absolute;
  right: 12px;
  bottom: 20px;
  z-index: 999;
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.08);
}

.fleet-map-controls button {
  width: 24px;
  height: 24px;
  border: 1px solid #eaecf0;
  border-radius: 6px;
  background: #ffffff;
  color: #98a2b3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fleet-map-controls button:hover {
  color: #1570ef;
  border-color: #b2ddff;
}

@media (max-width: 1024px) {
  .fleet-marker-pill,
  .fleet-route-node {
    width: 34px;
    height: 34px;
    font-size: 14px;
    border-width: 4px;
  }

  .fleet-map-popup-row strong {
    font-size: 22px;
  }

  .fleet-map-popup-card p {
    font-size: 16px;
  }
}

.fleet-dashboard {
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-gap: 20px;
  gap: 20px;
  min-height: calc(100vh - 240px);
  height: calc(100vh - 240px);
  align-items: stretch;
}

.fleet-dashboard-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #eaecf0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.fleet-dashboard-left-scroll {
  flex: 1 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

.fleet-dashboard-left-scroll::-webkit-scrollbar {
  width: 5px;
}

.fleet-dashboard-left-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

.fleet-dashboard-left-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 8px;
}

.fleet-dashboard-left-scroll::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.sidebar-card {
  background: #ffffff;
  border-radius: 18px;
  padding-right: 10px;
}

.sidebar-card-header {
  margin-bottom: 8px;
}

.sidebar-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #102a43;
}

.sidebar-card-subtitle {
  font-size: 0.8rem;
  color: #6b7280;
}

.sidebar-card-fields {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.sidebar-field {
  margin-bottom: 0;
}

.status-pill-list {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.status-pill {
  flex: 1 1;
  min-width: 98px;
  text-align: center;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.status-pill.active {
  background: #1e3a5f;
  color: #ffffff;
  border-color: #1e3a5f;
}

.status-pill:hover {
  background: #eef2ff;
}

.technician-list {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
  min-height: 0;
}

.technician-list::-webkit-scrollbar {
  width: 5px;
}

.technician-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

.technician-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 8px;
}

.technician-list::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.fleet-dashboard-right {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eaecf0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Controls Section */
.dashboard-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #eaecf0;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.date-selector-container,
.branch-selector-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-selector-container label,
.branch-selector-container label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.branch-select {
  padding: 10px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #344054;
  background: white;
  transition: all 0.2s ease;
  font-family: inherit;
  width: 100%;
}

.branch-select:focus {
  outline: none;
  border-color: #84caff;
  box-shadow: 0 0 0 3px rgba(9, 100, 222, 0.1);
}

.ft-select-wrap {
  position: relative;
}

.branch-selector-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.branch-select {
  -webkit-appearance: none;
          appearance: none;
  padding-right: 34px;
  cursor: pointer;
}

.select-icon {
  position: absolute;
  right: 8px;
  top: 9px;
  font-size: 18px;
  color: #999;
  pointer-events: none;
}

/* Search Container */
.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.search-container:focus-within {
  border-color: #1976d2;
  background: white;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.search-icon {
  font-size: 16px;
  color: #999;
}

.search-input {
  flex: 1 1;
  border: none;
  background: transparent;
  padding: 8px 0;
  font-size: 13px;
  color: #333;
  font-family: inherit;
}

.search-input::placeholder {
  color: #bbb;
}

.search-input:focus {
  outline: none;
}

/* Status Tabs */
.status-tabs {
  display: flex;
  gap: 0;
  flex-direction: row;
  border-bottom: 1px solid #eaecf0;
  margin-bottom: 18px;
}

.status-tab {
  flex: 1 1;
  padding: 14px 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #475467;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
}

.status-tab:hover {
  color: #1e3a8a;
  background: rgba(15, 23, 42, 0.03);
}

.status-tab.active {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
  font-weight: 600;
}

.tab-text {
  font-size: 0.95rem;
}

/* Technician List */
.technician-list {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  min-height: 0;
}

.technician-list::-webkit-scrollbar {
  width: 5px;
}

.technician-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

.technician-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 8px;
}

.technician-list::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Technician Card */
.tech-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid #eef2f6;
  border-radius: 20px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tech-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

.tech-card.selected {
  border-left: 4px solid #1e3a5f;
  background: #f8fbff;
}

.tech-name-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.tech-name-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #102a43;
}

.tech-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.15);
}

.tech-status-dot.on-site {
  background: #16a34a;
}

.tech-status-dot.travelling {
  background: #0ea5e9;
}

.tech-status-dot.offline {
  background: #94a3b8;
}

.tech-status-dot.idle {
  background: #f59e0b;
}

.tech-status-pill {
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  text-transform: capitalize;
}

.tech-status-pill.on-site {
  background: #d1fae5;
  color: #047857;
}

.tech-status-pill.travelling {
  background: #dbeafe;
  color: #1d4ed8;
}

.tech-status-pill.offline {
  background: #f1f5f9;
  color: #475569;
}

.tech-status-pill.idle {
  background: #fef3c7;
  color: #92400e;
}

.tech-address {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  font-size: 0.82rem;
  color: #475569;
}

.tech-address span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tech-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #475569;
}

.tech-tag {
  background: #f1f5f9;
  color: #334155;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* Avatar Section */
.tech-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.tech-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #101828;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.avatar-text {
  font-size: 13px;
  font-weight: 700;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.status-indicator.on-site {
  background: #00c853;
}

.status-indicator.travelling {
  background: #1570ef;
  animation: pulse-dot 2s infinite;
}

.status-indicator.offline {
  background: #90a4ae;
}

.status-indicator.idle {
  background: #f79009;
}

@keyframes pulse-dot {
  0%,
  100% {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(79, 195, 247, 0.7);
  }
  50% {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(79, 195, 247, 0);
  }
}

/* Tech Info Section */
.tech-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-width: 0;
}

.tech-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.tech-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin: 0;
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-on-site {
  background: #ecfdf3;
  color: #027a48;
}

.badge-travelling {
  background: #eff8ff;
  color: #175cd3;
}

.badge-offline {
  background: rgba(144, 164, 174, 0.15);
  color: #90a4ae;
}

.badge-idle {
  background: #fffaeb;
  color: #b54708;
}

/* Tech Details */
.tech-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item {
  font-size: 11px;
  color: #666;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-item.task-id {
  color: #1570ef;
  font-weight: 500;
}

.ftd-back-btn {
  border: none;
  background: transparent;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.profile-controls {
  border-bottom: 1px solid #eaecf0;
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.profile-controls-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.profile-controls .form-field {
  margin-bottom: 0;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.summary-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-subtitle {
  font-size: 0.78rem;
  color: #667085;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 18px;
}

.summary-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.summary-card-top {
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 12px;
  margin-bottom: 12px;
}

.summary-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-card-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #ffffff;
  flex-shrink: 0;
}

.icon-distance {
  background: #eef2ff;
  color: #2563eb;
}

.icon-active {
  background: #ecfdf5;
  color: #16a34a;
}

.icon-tasks {
  background: #fff7ed;
  color: #d97706;
}

.icon-clockin {
  background: #eff6ff;
  color: #2563eb;
}

.summary-card-value-large {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
}

.timeline-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.08em;
}

.timeline-range {
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-event {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
}

.timeline-event-time {
  font-size: 0.78rem;
  color: #667085;
  min-width: 86px;
  white-space: nowrap;
}

.timeline-event-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-event-type {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1d4ed8;
  text-transform: uppercase;
}

.timeline-event-location {
  font-size: 0.86rem;
  color: #334155;
}

.timeline-event-meta {
  font-size: 0.8rem;
  color: #64748b;
}

.detail-text {
  margin: 0;
  color: #475467;
  font-size: 12px;
}

/* No Data */
.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
  font-size: 13px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .fleet-dashboard {
    grid-template-columns: 280px 1fr;
    gap: 16px;
    height: calc(100vh - 240px);
    max-height: calc(100vh - 200px);
  }

  .fleet-dashboard-left {
    max-height: 600px;
  }
}

@media (max-width: 768px) {
  .fleet-dashboard {
    grid-template-columns: 1fr;
    gap: 12px;
    height: auto;
    max-height: none;
  }

  .fleet-dashboard-left {
    max-height: 400px;
    padding: 12px;
  }

  .fleet-dashboard-right {
    min-height: 400px;
  }

  .technician-card {
    padding: 10px;
    gap: 10px;
  }

  .tech-avatar {
    width: 44px;
    height: 44px;
    font-size: 12px;
  }

  .tech-name {
    font-size: 12px;
  }

  .detail-item {
    font-size: 10px;
  }

  .summary-section {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .fleet-dashboard-left {
    max-height: 300px;
    padding: 8px;
    gap: 8px;
  }

  .fleet-dashboard-right {
    min-height: 300px;
  }

  .technician-card {
    padding: 8px;
    gap: 8px;
  }

  .tech-avatar {
    width: 40px;
    height: 40px;
    font-size: 11px;
  }

  .tech-header {
    flex-direction: column;
    gap: 4px;
  }

  .tech-name {
    font-size: 11px;
  }

  .status-badge {
    font-size: 10px;
    align-self: flex-start;
  }

  .detail-item {
    font-size: 9px;
  }

  .selector-group {
    flex-direction: column;
  }

  .summary-section {
    grid-template-columns: 1fr;
  }
}

.fleet-tracking-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ft-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #667085;
  position: relative;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.ft-tab:hover {
  color: #111827;
}

.ft-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  font-weight: 600;
}

.ft-tab .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.ft-tab .tab-label {
  display: flex;
}

.ft-tab-content {
  flex: 1 1;
  min-height: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .fleet-tracking-container {
    gap: 16px;
  }

  .ft-tab {
    padding: 10px 14px;
    font-size: 13px;
    gap: 6px;
  }

  .ft-tab .tab-icon {
    font-size: 16px;
  }

  .ft-tab .tab-label {
    display: none;
  }

  .ft-tab.active .tab-label,
  .ft-tab:hover .tab-label {
    display: flex;
  }

  .ft-tab-content {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .fleet-tracking-container {
    gap: 12px;
  }

  .ft-tab {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1 1;
    justify-content: center;
  }

  .ft-tab .tab-label {
    display: none;
  }

  .ft-tab .tab-icon {
    font-size: 14px;
  }
}

.performance-page-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: auto;
    padding-bottom: 60px; /* Add some padding so dropdown doesn't get cut off at the very bottom */
}

.performance-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1;
    min-height: 0;
    overflow-y: auto;
}

.performance-header {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.performance-back-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    width: -webkit-fit-content;
    width: fit-content;
    gap: 4px;
}

.performance-back-btn:hover {
    color: #111827;
}

.performance-title {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.performance-summary-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.summary-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.performance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.performance-summary-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.performance-summary-card:nth-child(4n) {
    border-right: none;
}
.performance-summary-card:nth-child(n+5) {
    border-bottom: none;
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.summary-card-value {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-left: 2px;
}

.performance-table-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.performance-table-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Allow word wrap for table headers in this module */
.performance-table-section .data-table thead th {
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
    vertical-align: middle;
    line-height: 1.3;
}

.performance-table-section .data-table thead th span {
    display: inline-flex !important;
    flex-wrap: wrap;
}

/* ==========================================
   RESPONSIVE STYLES
========================================== */

@media (max-width: 1024px) {
    .performance-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .performance-summary-card:nth-child(4n) {
        border-right: 1px solid #e5e7eb;
    }
    
    .performance-summary-card:nth-child(2n) {
        border-right: none;
    }
    
    .performance-summary-card:nth-child(n+5) {
        border-bottom: 1px solid #e5e7eb;
    }
    
    .performance-summary-card:nth-child(n+7) {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .performance-page-wrapper {
        padding: 16px;
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .performance-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .performance-summary-card:nth-child(2n) {
        border-right: none;
    }

    .performance-summary-card {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .performance-summary-card:last-child {
        border-bottom: none;
    }
}


.details-card-section {
    display: flex;
    flex-direction: column;
    /* overflow: hidden; */
}

.details-card-title {
    font-size: 24px;
    font-weight: 600;
    color: #101828;
    margin: 0;
    padding-bottom: 16px;
}

/* Grid Layout (e.g. Employee Information) */
.details-card-grid {
    background: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    gap: 14px;
}

.details-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

/* List Layout (e.g. Breakdown Cards) */
.details-card-list {
    background: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
}

.details-card-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

/* Typography */
.details-card-label {
    font-size: 14px;
    color: #475467;
    font-weight: 500;
    flex: 0 0 110px;
}

.details-card-value {
    font-size: 14px;
    color: #101828;
    font-weight: 500;
    flex: 1 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: right;
}

.details-card-value-component {
    display: block;
    text-align: right;
}

.details-card-value-component a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ep-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 40px;
}

.ep-back-btn {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    cursor: pointer;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

/* KPI Score Card Grid */
.ep-section {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    overflow: hidden;
}

.ep-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid #eaecf0;
}

.ep-profile-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
}

.ep-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.ep-kpi-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid #eaecf0;
    border-bottom: 1px solid #eaecf0;
}

.ep-kpi-card:nth-child(4n) {
    border-right: none;
}

.ep-kpi-card:nth-child(n+5) {
    border-bottom: none;
}

.ep-kpi-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 14px;
    font-weight: 500;
}

.ep-kpi-value {
    font-size: 20px;
    font-weight: 600;
    color: #101828;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Grid Layouts */
.ep-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
}

/* Revenue Card Override */
.ep-revenue-card .details-card-list {
    height: 100%;
}

/* Table Section */
.ep-table-section {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    overflow: hidden;
}

.ep-table-title {
    font-size: 16px;
    font-weight: 600;
    color: #101828;
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid #eaecf0;
}

/* Allow word wrap for table headers in this module */
.ep-table-section .data-table thead th {
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: break-word;
    vertical-align: middle;
    line-height: 1.3;
}

.ep-table-section .data-table thead th span {
    display: inline-flex !important;
    flex-wrap: wrap;
}

.ep-breakdown-item {
    display: flex;
    justify-content: space-between;
}

/* Responsive */
@media (max-width: 1024px) {
    .ep-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ep-kpi-card:nth-child(2n) {
        border-right: none;
    }

    .ep-kpi-card:nth-child(4n) {
        border-right: none;
    }

    .ep-kpi-card:nth-child(n+5) {
        border-bottom: 1px solid #eaecf0;
    }

    .ep-kpi-card:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .ep-two-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ep-kpi-grid {
        grid-template-columns: 1fr;
    }

    .ep-kpi-card {
        border-right: none !important;
        border-bottom: 1px solid #eaecf0 !important;
    }

    .ep-kpi-card:last-child {
        border-bottom: none !important;
    }
}
.upload-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(16, 24, 40, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.upload-modal-content {
    background: #ffffff;
    width: 480px;
    border-radius: 12px;
    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.upload-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 0 24px;
}

.upload-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
    margin: 0 0 4px 0;
}

.upload-modal-subtitle {
    font-size: 14px;
    color: #475467;
    margin: 0;
}

.upload-modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.upload-modal-close:hover {
    background: #f2f4f7;
}

.upload-modal-body {
    padding: 24px;
}

.upload-modal-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #344054;
    cursor: pointer;
    margin-top: 16px;
    width: auto;
}

.upload-modal-download-btn:hover {
    background: #f9fafb;
}

.upload-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid #eaecf0;
    background: #f9fafb;
}

.upload-modal-footer > button {
    flex: 1 1;
}

.upload-modal-footer > button:first-child {
    margin-right: 12px;
}

.upload-modal-footer > button:last-child {
    background: #d92d20;
    border-color: #d92d20;
    color: #ffffff;
}

.upload-modal-footer > button:last-child:hover {
    background: #b42318;
    border-color: #b42318;
}
.attendance-calendar-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 32px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #eaecf0;
}

.calendar-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px !important;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
}

.calendar-nav-btn:hover {
  background: #f9fafb;
}

.calendar-month-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #eaecf0;
  grid-gap: 1px;
  gap: 1px; /* Creates borders between cells */
}

.calendar-day-header {
  background: #f9fafb;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  text-transform: capitalize;
}

.calendar-cell {
  background: #ffffff;
  min-height: 100px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-cell:hover {
  background: #f9fafb;
}

.calendar-date {
  font-size: 14px;
  font-weight: 600;
  color: #101828;
}

.calendar-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  width: -webkit-fit-content;
  width: fit-content;
  border: 1px solid transparent;
}

.calendar-status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Status Colors */
.status-present {
  background: #ffffff;
  color: #344054;
  border-color: #eaecf0;
}
.status-present .status-dot {
  background: #12b76a;
}

.status-absent {
  background: #ffffff;
  color: #344054;
  border-color: #eaecf0;
}
.status-absent .status-dot {
  background: #f04438;
}

.status-leave {
  background: #ffffff;
  color: #344054;
  border-color: #eaecf0;
}
.status-leave .status-dot {
  background: #2e90fa;
}

.status-holiday {
  background: #ffffff;
  color: #344054;
  border-color: #eaecf0;
}
.status-holiday .status-dot {
  background: #667085;
}

.status-weekoff {
  background: #ffffff;
  color: #344054;
  border-color: #eaecf0;
}
.status-weekoff .status-dot {
  background: #f79009;
}
.branch-management-page .branch-table-container {
  margin-top: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow-x: auto;
}

/* Ensure pagination is always visible */
.branch-management-page .branch-table-container .pagination-container {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  gap: 8px;
  margin-top: auto;
}

/* Table Styles - Override DataTable defaults for Branch Management */
.branch-management-page .branch-table-container .data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
}

.branch-management-page .branch-table-container .data-table th,
.branch-management-page .branch-table-container .data-table td {
  padding: 12px 8px !important;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  color: #111827;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.branch-management-page .branch-table-container .data-table thead th {
  background: #f9fafb;
  color: #535862;
  padding: 14px 16px !important;
  border-bottom: 1px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  font-family: "Inter", sans-serif;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

/* Override tbody td styling */
.branch-management-page .branch-table-container .data-table thead th {
  padding: 14px 8px !important;
}

.branch-management-page .branch-table-container .data-table tbody td {
  padding: 12px 8px !important;
}

.branch-management-page .custom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #111827;
  table-layout: fixed;
  font-family: "Inter", sans-serif;
}

.branch-management-page .custom-table thead {
  display: table;
  width: 100%;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  table-layout: fixed;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.branch-management-page .custom-table th {
  text-align: left;

  font-family: "Inter", sans-serif;
  color: #6b7280;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  white-space: normal;
  display: table-cell;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.branch-management-page .custom-table tbody {
  display: table;
  width: 100%;
  background: #fff;
  table-layout: fixed;
}

.branch-management-page .custom-table tbody tr {
  display: table-row;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.branch-management-page .custom-table tbody tr:hover {
  background-color: #f9fafb;
}

.branch-management-page .custom-table td {
  padding: 12px 2px !important;
  border-bottom: 1px solid #f3f4f6;
  word-break: break-word;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  color: #111827;
  vertical-align: middle;
  display: table-cell;
}

/* Contact Info Cell */
.branch-management-page .contact-info-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.branch-management-page .contact-phone {
  font-weight: 500;
  color: #111827;
}

.branch-management-page .contact-email {
  font-size: 12px;
  color: #6b7280;
}

/* Location Cell - Multi-line support */
.branch-management-page .location-cell {
  max-width: 150px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  min-height: 60px;
  display: flex;
  align-items: center;
}

/* Actions Column */
.branch-management-page .actions-cell {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right !important;
  padding-right: 2px !important;
  padding-left: 0 !important;
  border-bottom: none !important;
  border-left: none !important;
}

.branch-management-page .branch-table-container .actions-cell {
  padding: 12px 8px !important;
  justify-content: flex-start !important;
  border-bottom: none !important;
  border-left: none !important;
}

.branch-management-page .action-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  padding: 0;
  margin: 0;
  gap: 0;
}

.branch-management-page .action-btn:hover {
  background-color: #dbeafe;
}

.branch-management-page .action-btn img {
  width: 16px;
  height: 16px;
  display: block;
}

/* Status Badge Override for Branch - Compact spacing */
.branch-management-page .branch-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.branch-management-page .status-active {
  background-color: #d1fae5;
  color: #065f46;
}

.branch-management-page .status-inactive {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Delete Dialog Styles */
.branch-management-page .delete-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(52, 64, 84, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.branch-management-page .delete-dialog {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08),
    0 8px 8px -4px rgba(16, 24, 40, 0.03);
}

.branch-management-page .delete-dialog-icon {
  width: 48px;
  height: 48px;
  background: #fee4e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.branch-management-page .delete-dialog-icon svg {
  color: #d92d20;
  width: 24px;
  height: 24px;
}

.branch-management-page .delete-dialog h3 {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 8px 0;
}

.branch-management-page .delete-dialog p {
  font-size: 14px;
  color: #667085;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.branch-management-page .delete-dialog-actions {
  display: flex;
  gap: 12px;
}

.branch-management-page .delete-dialog-actions button {
  flex: 1 1;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.branch-management-page .delete-dialog-actions .cancel-btn {
  background: #fff;
  border: 1px solid #d0d5dd;
  color: #344054;
}

.branch-management-page .delete-dialog-actions .cancel-btn:hover {
  background: #f9fafb;
}

.branch-management-page .delete-dialog-actions .delete-btn {
  background: #d92d20;
  border: none;
  color: #fff;
}

.branch-management-page .delete-dialog-actions .delete-btn:hover {
  background: #b42318;
}

/* Responsive */
@media (max-width: 1024px) {
  .branch-management-page .custom-table {
    font-size: 13px;
  }

  .branch-management-page .custom-table th,
  .branch-management-page .custom-table td {
    padding: 12px;
  }
}

@media (max-width: 768px) {
  .branch-management-page .branch-table-container {
    overflow-x: auto;
  }

  .branch-management-page .custom-table {
    min-width: 900px;
  }
}
/* Branch Management Table - Specific Styles */

.branch-management-page .branch-table-container .data-table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.branch-management-page .branch-table-container .data-table {
  flex: 1 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  min-height: 0;
}

.branch-management-page .branch-table-container .table-responsive {
  flex: 1 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Table Structure */
.branch-management-page .branch-table-container .data-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-family: "Inter", sans-serif;
  table-layout: auto;
  min-width: 1200px;
  display: table !important;
  white-space: nowrap;
}

/* Table Header */
.branch-management-page .branch-table-container .data-table thead {
  background: #f3f4f6;
  top: 0;
  z-index: 10;
  display: table-header-group !important;
}

.branch-management-page .branch-table-container .data-table thead th {
  background: #f3f4f6;
  padding: 12px 16px;
  text-align: left;
  color: #4b5563;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 13px;
}

/* Table Body */
.branch-management-page .branch-table-container .data-table tbody {
  background: #fff;
  display: table-row-group !important;
  width: 100% !important;
}

.branch-management-page .branch-table-container .data-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
  height: auto;
  display: table-row !important;
  width: auto !important;
}

.branch-management-page .branch-table-container .data-table tbody tr:hover {
  background-color: #f9fafb;
}

/* Table Cells */
.branch-management-page .branch-table-container .data-table tbody td {
  padding: 14px 16px;
  color: #1f2937;
  vertical-align: middle;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
}

/* Specific Column Widths for Branch - Removed to rely on JS columns config */

/* Overriding with specific padding and font sizes for a premium look */
.branch-management-page .branch-table-container .data-table thead th {
  padding: 12px 16px;
}

.branch-management-page .branch-table-container .data-table tbody td {
  padding: 14px 16px;
}
.role-user-badge {
    display: flex;
    align-items: center;
    padding: 2px 10px 2px 2px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    width: -webkit-fit-content;
    width: fit-content;
}

.role-badge-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    overflow: hidden;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 0 1px #d0d5dd;
}

.role-badge-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Roles List Showcase - Integrated from RoleManagement */
.rm-roles-list {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    margin-top: 0;
    overflow-y: auto;
    max-height: calc(100vh - 320px);
}

.rm-roles-list::-webkit-scrollbar {
    width: 6px;
}

.rm-roles-list::-webkit-scrollbar-track {
    background: #f9fafb;
}

.rm-roles-list::-webkit-scrollbar-thumb {
    background: #d0d5dd;
    border-radius: 10px;
}

.rm-roles-list::-webkit-scrollbar-thumb:hover {
    background: #98a2b3;
}

.rm-role-card {
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    border-bottom: 1px solid #eaecf0;
    transition: background-color 0.2s;
}

.rm-role-card:hover {
    background-color: #f9fafb;
}

.rm-role-card:last-child {
    border-bottom: none;
}

.rm-role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rm-role-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rm-role-name {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
    margin: 0;
}

.rm-role-badges {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rm-role-user-badge {
    display: flex;
    align-items: center;
    padding: 3px 10px 3px 3px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #344054;
    border: 1px solid #d0d5dd;
    background: #ffffff;
}

.rm-badge-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
    overflow: hidden;
    border: 1px solid #eaecf0;
}

.rm-badge-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rm-role-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
}

.rm-role-status-badge.active {
    background-color: #eff8ff;
    color: #175cd3;
    border: 1px solid #b2ddff;
}

.rm-role-status-badge.inactive {
    background-color: #fef3f2;
    color: #b42318;
    border: 1px solid #fee4e2;
}

.rm-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.rm-role-status-badge.active .rm-status-dot {
    background-color: #2e90fa;
}

.rm-role-status-badge.inactive .rm-status-dot {
    background-color: #f04438;
}

.rm-role-actions {
    display: flex;
    gap: 8px;
}

.rm-action-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.rm-action-btn:hover {
    background-color: #f3f4f6;
    color: #1570ef;
}

.rm-action-btn.delete:hover {
    background-color: #fef3f2;
    color: #b42318;
}

.rm-role-description {
    font-size: 14px;
    color: #667085;
    margin-bottom: 12px;
    line-height: 1.5;
}

.rm-role-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.rm-created-date {
    font-size: 12px;
    color: #98a2b3;
    font-weight: 400;
}

.rm-no-data {
    padding: 40px;
    text-align: center;
    color: #667085;
    font-size: 14px;
}

.rm-error-text {
    padding: 20px;
    color: #b42318;
    text-align: center;
}

.role-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    width: -webkit-fit-content;
    width: fit-content;
}

.role-status-badge.active {
    background-color: #eff8ff;
    color: #175cd3;
    border: 1px solid #b2ddff;
}

.role-status-badge.inactive {
    background-color: #fef3f2;
    color: #b42318;
    border: 1px solid #fee4e2;
}

.role-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.active .role-status-dot {
    background-color: #2e90fa;
}

.inactive .role-status-dot {
    background-color: #f04438;
}

.role-more-icon {
    color: #98a2b3;
    cursor: pointer;
}

/* Modal Specifics */
.role-modal-content {
    width: 900px !important;
    max-width: 95vw;
    height: 85vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

.role-modal-app-user {
    width: 500px !important;
}

.role-modal-body {
    padding: 24px;
    flex: 1 1;
    overflow-y: hidden;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.role-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
    margin-bottom: 24px;
}

.role-form-group {
    margin-bottom: 0;
    /* Reset since parent handles gap */
}

.role-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    margin-bottom: 6px;
}

.required {
    color: #1570ef;
    margin-left: 2px;
}

.role-input {
    width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
    color: #101828;
    outline: none;
    box-sizing: border-box;
}

.role-input:focus {
    border-color: #1570ef;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.role-select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #101828;
}

.role-select-box.open {
    border-color: #1570ef;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.role-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.role-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    z-index: 9999;
    padding: 4px;
}

.role-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    color: #344054;
    cursor: pointer;
    border-radius: 6px;
}

.role-dropdown-item:hover {
    background: #f9fafb;
}

.role-dropdown-item.selected {
    background: #f9fafb;
}

.role-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
}

.role-textarea {
    width: 100%;
    height: 100px;
    padding: 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    resize: none;
}

.role-app-user-section {
    padding: 16px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    margin-bottom: 24px;
}

.role-app-user-section.is-checked {
    background-color: #f9fafb;
}

.role-app-user-disabled-msg {
    color: #667085;
    font-size: 14px;
    padding: 12px 0;
}

.role-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    cursor: pointer;
}

.role-checkbox-label input {
    width: 16px;
    height: 16px;
    accent-color: #1570ef;
}

.role-help-text {
    margin: 4px 0 0 24px;
    font-size: 13px;
    color: #667085;
}

.rm-permissions-section {
    margin-top: 16px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    overflow: hidden;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.role-search-box-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    width: 240px;
}

.role-search-box-mini input {
    border: none;
    outline: none;
    font-size: 14px;
    flex: 1 1;
}

.role-search-kb {
    font-size: 12px;
    color: #98a2b3;
    padding: 2px 4px;
    border: 1px solid #eaecf0;
    border-radius: 4px;
}

.rm-permissions-table-container {
    border: 1px solid #eaecf0;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1 1;
    position: relative;
    background: #ffffff;
    min-height: 400px;
}

.role-permissions-table {
    width: 100%;
    border-collapse: collapse;
}

.rm-permissions-table th {
    background: #f9fafb;
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: #475467;
    border-bottom: 1px solid #eaecf0;
    white-space: nowrap;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
}

.role-mod-name {
    font-weight: 500;
    color: #344054;
    font-size: 14px;
    padding: 16px;
    text-align: left;
}

.rm-permissions-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eaecf0;
    text-align: center;
}

.rm-mod-name {
    text-align: left !important;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    padding-left: 16px !important;
    border-bottom: 1px solid #eaecf0;
}

.rm-permissions-table th:first-child,
.rm-permissions-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background-color: #ffffff;
    z-index: 10;
    min-width: 200px;
    border-right: 1px solid #eaecf0;
}

.rm-permissions-table thead th:first-child {
    top: 0;
    z-index: 30;
    background-color: #f9fafb;
}

/* Custom Toggle Switch for Permissions */
.rm-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.rm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rm-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f4f7;
    transition: .2s;
    border-radius: 20px;
}

.rm-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);
}

.rm-switch input:checked+.rm-slider {
    background-color: #1570ef;
}

.rm-switch input:checked+.rm-slider:before {
    transform: translateX(16px);
}

.rm-switch input:disabled + .rm-slider {
    cursor: not-allowed;
    background-color: #f2f4f7;
    opacity: 0.6;
}

.rm-switch input:checked:disabled + .rm-slider {
    background-color: #b2ccff;
}

.rm-switch input:disabled + .rm-slider:before {
    background-color: #f2f4f7;
}

.rm-switch input:checked:disabled + .rm-slider:before {
    background-color: #ffffff;
}

/* Modal Footer & Buttons */
.rm-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid #eaecf0;
}

.rm-selected-count {
    font-size: 14px;
    color: #6b7280;
}

.rm-footer-actions {
    display: flex;
    gap: 12px;
}

.rm-btn-cancel,
.rm-btn-submit {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
}

.rm-btn-cancel {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.rm-btn-submit {
    background: #1570ef;
    border: 1px solid #1570ef;
    color: white;
}

/* Request Receivers Styles (Synced with RoleManagement) */
.role-expandable-row {
    background-color: #fcfcfd;
}

.role-request-receivers-section {
    padding: 16px 16px 16px 32px;
    border-left: 2px solid #12b76a;
}

.role-multi-select-container {
    position: relative;
    max-width: 400px;
}

.role-multi-select-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    transition: all 0.2s ease;
}

.role-multi-select-input.open {
    border-color: #1570ef;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.role-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-placeholder {
    color: #667085;
    font-size: 14px;
}

.role-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #eff8ff;
    color: #175cd3;
    border: 1px solid #b2ddff;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.role-dropdown-icon {
    color: #667085;
    transition: transform 0.2s;
}

.role-dropdown-icon.open {
    transform: rotate(180deg);
}

.role-multi-select-dropdown {
    position: fixed;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    z-index: 99999;
    max-height: 200px;
    overflow-y: auto;
    padding: 0;
}

/* Custom scrollbar for the dropdown menu */
.role-multi-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.role-multi-select-dropdown::-webkit-scrollbar-thumb {
    background-color: #d0d5dd;
    border-radius: 10px;
}

.role-multi-select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.role-dropdown-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    color: #344054;
    cursor: pointer;
    transition: background-color 0.2s;
}

.role-dropdown-option:hover {
    background-color: #f9fafb;
    color: #101828;
}

.role-check-icon {
    color: #1570ef;
    font-size: 16px !important;
}

.role-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.role-approval-text {
    margin-top: 10px;
    font-size: 13px;
    color: #12b76a;
    /* Green text */
    font-weight: 500;
}

.role-edit-warning {
    margin-top: 16px;
    font-size: 13px;
    color: #f04438;
    font-weight: 500;
}

.role-input-readonly {
    background-color: #f9fafb;
    cursor: default;
    color: #344054;
}

.rm-switch-readonly {
    pointer-events: none;
}

.role-dropdown-icon.rotated {
    transform: rotate(180deg);
}

/* Delete Role Modal Specific Styles */
.delete-role-modal {
    width: 440px !important;
    text-align: left;
    padding: 32px !important;
}

.delete-modal-header-icon {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.icon-container-red {
    width: 48px;
    height: 48px;
    background-color: #FEE4E2;
    border: 8px solid #FEF3F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-role-modal .role-modal-body {
    padding-left: 0;
    padding-right: 0;
}

.cd-modal-header-compact {
    margin-bottom: 24px;
    text-align: left;
}

.cd-modal-header-compact h2 {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
    margin: 0 0 8px 0;
}

.delete-subtitle {
    font-size: 14px;
    color: #475467;
    margin: 0;
}

.cd-close-btn-abs {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: #667085;
}

.no-padding-top {
    padding-top: 0 !important;
}

.role-single-select-container {
    position: relative;
    text-align: left;
}

.role-single-select-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: white;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #101828;
}

.role-single-select-input.open {
    border-color: #1570EF;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.role-single-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #EAECF0;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    z-index: 1001;
    max-height: 200px;
    overflow-y: auto;
}

.role-form-group.horizontal {
    display: block;
    margin-bottom: 24px;
}

.role-form-group.horizontal .role-label {
    margin-bottom: 6px;
    display: block;
}

.delete-modal-footer {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.rm-btn-cancel-wide,
.rm-btn-delete-wide {
    flex: 1 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rm-btn-cancel-wide {
    background: white;
    border: 1px solid #D0D5DD;
    color: #344054;
}

.rm-btn-delete-wide {
    background: #D92D20;
    border: 1px solid #D92D20;
    color: white;
}

.rm-btn-delete-wide:hover {
    background: #B42318;
}

/* Stats Container */
.role-stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
    gap: 16px;
    margin-top: 0px;
    margin-bottom: 8px;
}

.role-stat-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 16px 24px;
    gap: 0px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.role-stat-label {
    font-size: 14px;
    color: #475467;
    font-weight: 500;
}

.role-stat-value {
    font-size: 28px;
    color: #101828;
    font-weight: 600;
}

/* Modal Shared Styles (cd- and rm-) */
.cd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.cd-modal-content {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
    overflow: hidden;
}

.cd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #eaecf0;
}

.cd-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #101828;
}

.cd-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #667085;
    padding: 0;
    display: flex;
    align-items: center;
}

.rm-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 80vh;
    overflow-y: auto;
}

.rm-form-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    gap: 16px;
}

.rm-app-user-toggle {
    margin-top: 4px;
    padding-bottom: 4px;
}

.rm-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    cursor: pointer;
}

.rm-help-text {
    margin-top: 4px;
    font-size: 14px;
    color: #475467;
    margin-left: 24px;
}

.rm-permissions-section {
    margin-top: 16px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    overflow: hidden;
}

.rm-permissions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f9fafb;
    border-bottom: 1px solid #eaecf0;
}

.rm-permissions-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #101828;
}

.rm-search-box {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    gap: 8px;
}

.rm-search-box input {
    border: none;
    outline: none;
    font-size: 14px;
    width: 120px;
}

.rm-search-kb {
    font-size: 12px;
    color: #667085;
    background: #f2f4f7;
    padding: 2px 4px;
    border-radius: 4px;
}

.rm-permissions-table-container {
    overflow-x: auto;
}

.rm-permissions-table {
    width: 100%;
    border-collapse: collapse;
}

.rm-permissions-table th {
    background-color: #f9fafb;
    padding: 12px 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #475467;
    border-bottom: 1px solid #eaecf0;
}

.rm-permissions-table td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid #eaecf0;
}

.rm-mod-name {
    text-align: left !important;
    font-weight: 500;
    color: #101828;
    font-size: 14px;
}

.rm-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.rm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rm-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f4f7;
    transition: .4s;
    border-radius: 20px;
    border: 1px solid #eaecf0;
}

.rm-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 1px;
    bottom: 1px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.rm-switch input:checked+.rm-slider {
    background-color: #1570ef;
    border-color: #1570ef;
}

.rm-switch input:checked+.rm-slider:before {
    transform: translateX(16px);
}

.rm-modal-footer {
    display: flex;
    justify-content: flex-end;
    /* Default to end */
    align-items: center;
    padding: 28px 24px;
    border-top: 1px solid #eaecf0;
    gap: 16px;
}

.rm-selected-count {
    margin-right: auto;
    /* Push this to the left */
    font-size: 14px;
    color: #475467;
}

.rm-footer-actions {
    display: flex;
    gap: 12px;
}

.rm-btn-cancel,
.rm-btn-submit {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rm-btn-cancel {
    background-color: #ffffff;
    border: 1px solid #d0d5dd;
    color: #344054;
}

.rm-btn-submit {
    background-color: #1570ef;
    border: none;
    color: #ffffff;
}

.rm-delete-modal {
    width: 400px;
    padding: 24px;
    text-align: center;
    overflow: visible;
}

/* Ensure modal container doesn't clip the dropdown menu */
.cd-modal-content.rm-delete-modal {
    overflow: visible !important;
}

.rm-delete-icon-bg {
    width: 48px;
    height: 48px;
    background-color: #fee4e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.rm-delete-title {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
    margin-bottom: 8px;
}

.rm-delete-text {
    font-size: 14px;
    color: #475467;
    margin-bottom: 24px;
}

.rm-reassign-section {
    text-align: left;
    margin-bottom: 24px;
}

.rm-reassign-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    margin-bottom: 6px;
}

.rm-reassign-dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}

.rm-reassign-dropdown.active {
    border-color: #1570ef;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.rm-blue-asterisk {
    color: #1570ef;
}

.rm-btn-delete {
    background-color: #d92d20;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex: 1 1;
}

.rm-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #f2f4f7;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    z-index: 9999;
    overflow: hidden;
    padding: 4px;
}

.rm-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    color: #344054;
    cursor: pointer;
    border-radius: 6px;
}

.rm-dropdown-item:hover {
    background-color: #f9fafb;
    color: #101828;
}

.rm-dropdown-item.active {
    background-color: #f9fafb;
    color: #1570ef;
    font-weight: 600;
}

.rm-check-blue {
    color: #1570ef;
    margin-left: 8px;
}

.rm-permissions-disabled {
    padding: 20px;
    background-color: #f9fafb;
    border: 1px dashed #d0d5dd;
    border-radius: 12px;
    text-align: center;
    color: #667085;
    font-size: 15px;
    font-weight: 500;
    margin: 16px 0;
}

@media (max-width: 768px) {
    .role-stats-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Tax Master Pattern Alignment */
.tax-table-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin-bottom: 12px;
}

.tax-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 480px;
}

.tax-search-input {
    width: 100%;
    height: 40px;
    padding: 0 45px 0 40px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 14px;
    color: #101828;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    outline: none;
}

.tax-search-shortcut {
    position: absolute;
    right: 12px;
    padding: 2px 6px;
    background: #fcfcfd;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    font-size: 12px;
    color: #667085;
    font-weight: 500;
}

.tax-filter-btn-wrap {
    position: relative;
}

.tax-filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    cursor: pointer;
    transition: all 0.2s;
}

.tax-filter-toggle-btn:hover {
    background: #f9fafb;
    border-color: #d0d5dd;
}

.tax-filter-toggle-btn.active-filters {
    background: #f0f9ff;
    border-color: #b2ddff;
    color: #175cd3;
}

.filter-count-badge {
    background: #1570ef;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.tax-filter-modal {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    margin-top: 8px;
    background: #fff;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 8px;
    border: 1px solid #F2F4F7;
    min-width: 320px;
    overflow: hidden;
    animation: dropdownIn 0.2s ease-out;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.role-table-wrapper.standard-table-container {
    margin-top: 0;
    position: relative;
    overflow: visible !important;
}

.standard-page-container.role-config-container {
    padding-top: 4px !important;
}

.role-config-container .page-header {
    margin-bottom: 12px !important;
    padding: 10px 16px !important;
}

.role-stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
    gap: 16px;
    margin-bottom: 12px;
}

.role-config-container .role-stat-card {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.role-stat-label {
    font-size: 13px;
    color: #667085;
    font-weight: 500;
}

.role-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #101828;
}

.role-config-container .role-stat-card h3 {
    margin: 0;
}

.role-user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.role-badge-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
}

.role-badge-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.role-management-page {
    padding: 0 24px 24px 24px;
    width: 100%;
    height: calc(100vh - 80px);
    /* Adjust based on header height */
    overflow-y: auto;
    box-sizing: border-box;
}

.rm-create-btn {
    background-color: #1570ef;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.rm-create-btn:hover {
    background-color: #1d4ed8;
}

/* Stats Container */
.rm-stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.rm-stat-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    padding: 24px;
    box-shadow: none;
}

.rm-stat-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rm-stat-label {
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}

.rm-stat-value {
    font-size: 30px;
    color: #111827;
    font-weight: 600;
    line-height: 1;
}

/* Roles List */
.rm-roles-list {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    box-shadow: none;
}

.rm-role-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-bottom: 1px solid #eaecf0;
}

.rm-role-card:last-child {
    border-bottom: none;
}

.rm-role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rm-role-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rm-role-name {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
    margin: 0;
}

.rm-role-badges {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rm-role-user-badge {
    display: flex;
    align-items: center;
    padding: 3px 10px 3px 3px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #344054;
    border: 1px solid #d0d5dd;
    background: #ffffff;
}

.rm-badge-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
    overflow: hidden;
    border: 1px solid #eaecf0;
}

.rm-badge-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rm-role-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
}

.rm-role-status-badge.active {
    background-color: #eff8ff;
    color: #175cd3;
    border: 1px solid #b2ddff;
}

.rm-role-status-badge.inactive {
    background-color: #fef3f2;
    color: #b42318;
    border: 1px solid #fee4e2;
}

.rm-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.active .rm-status-dot {
    background-color: #2e90fa;
}

.inactive .rm-status-dot {
    background-color: #f04438;
}

.rm-role-actions {
    display: flex;
    gap: 8px;
}

.rm-action-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rm-action-btn:hover {
    background-color: #f3f4f6;
    color: #4b5563;
}

.rm-role-description {
    font-size: 14px;
    color: #667085;
}

/* Modal Styling */
.rm-modal-content {
    width: 1100px !important;
    max-width: 95vw !important;
    height: 85vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

.rm-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1;
    min-height: 0;
    overflow-y: hidden; /* Prevent body scroll to allow table sticky headers */
}

.rm-form-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
    gap: 16px;
}

.rm-app-user-toggle {
    margin-top: 8px;
}

.rm-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
}

.rm-help-text {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    margin-left: 20px;
}

.rm-permissions-disabled {
    margin-top: 16px;
    padding: 24px;
    background-color: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    text-align: left;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
}

.rm-permissions-section {
    margin-top: 16px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    overflow: hidden;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rm-permissions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eaecf0;
    background-color: #f9fafb;
}

.rm-permissions-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.rm-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    padding: 6px 12px;
    gap: 8px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.rm-search-icon {
    font-size: 14px;
    color: #667085;
}

.rm-search-box input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #667085;
    padding: 0;
    width: 140px;
}

.rm-search-kb {
    font-size: 12px;
    color: #667085;
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    padding: 2px 4px;
    line-height: 1;
}

.rm-permissions-table-container {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1 1;
    position: relative;
    background: #ffffff;
    min-height: 400px;
}

.rm-permissions-table thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #f9fafb;
}

.rm-permissions-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    text-align: center;
}

.rm-permissions-table th {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    padding: 12px 8px;
    border-bottom: 1px solid #eaecf0;
    background-color: #ffffff;
}

.rm-permissions-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #eaecf0;
}

.rm-mod-name {
    text-align: left !important;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    padding-left: 16px !important;
}

.rm-permissions-table th:first-child,
.rm-permissions-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background-color: #ffffff;
    z-index: 10;
    min-width: 180px;
    text-align: left !important;
    padding-left: 16px !important;
    border-right: none !important;
    box-shadow: none !important;
}

.rm-permissions-table thead th:first-child {
    top: 0;
    z-index: 30; /* Ensure it stays above both rows and columns */
    background-color: #f9fafb; /* Match header background */
}

/* Toggle Switch Styles */
.rm-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.rm-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rm-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: .4s;
    border-radius: 20px;
}

.rm-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.rm-switch input:checked+.rm-slider {
    background-color: #1570ef;
}

.rm-switch input:checked+.rm-slider:before {
    transform: translateX(16px);
}

/* Receivers Styling */
.rm-receivers-row {
    background-color: #fcfcfd;
}

.rm-receivers-wrapper {
    padding: 0;
    transition: all 0.2s ease;
    text-align: left;
}

.rm-receivers-wrapper.expanded {
    padding-bottom: 5px;
}

.rm-receivers-box {
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    /* overflow: hidden; */
}

.rm-receivers-content {
    padding: 5px;
}

.rm-receivers-label {
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    display: block;
    margin-bottom: 8px;
}

.rm-receivers-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.rm-tag {
    display: inline-flex;
    align-items: center;
    background-color: #eff8ff;
    color: #175cd3;
    border: 1px solid #b2ddff;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.rm-receivers-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.rm-receivers-select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #101828;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    transition: all 0.2s ease;
}

.rm-receivers-select-box.open {
    border-color: #1570ef;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.rm-receivers-select-box .rm-placeholder {
    color: #667085;
}

.rm-dropdown-arrow {
    color: #667085;
    transition: transform 0.2s ease;
}

.rm-dropdown-arrow.open {
    transform: rotate(180deg);
}

.rm-receivers-dropdown-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    z-index: 99999;
    max-height: 250px;
    overflow-y: auto;
    padding: 8px 0;
}

/* Custom scrollbar for the dropdown menu */
.rm-receivers-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.rm-receivers-dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #d0d5dd;
    border-radius: 10px;
}

.rm-receivers-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.rm-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    color: #344054;
    cursor: pointer;
    transition: background-color 0.2s;
}

.rm-dropdown-item:hover {
    background-color: #f9fafb;
    color: #101828;
}

.rm-dropdown-item.selected {
    background-color: #f9fafb;
}

.rm-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.rm-receivers-footer-alert {
    background-color: #ecfdf3;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.rm-receivers-footer-alert p {
    margin: 0;
    font-size: 13px;
    color: #027a48;
    font-weight: 500;
}

.rm-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 24px;
    border-top: 1px solid #eaecf0;
    height: 72px;
}

.rm-selected-count {
    font-size: 14px;
    color: #6b7280;
}

.rm-footer-actions {
    display: flex;
    gap: 12px;
}

.rm-btn-cancel,
.rm-btn-submit {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.rm-btn-cancel {
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.rm-btn-submit {
    background: #1570ef;
    border: none;
    color: white;
}

.rm-edit-warning {
    margin-top: 24px;
    padding: 16px;
    background-color: #fff1f0;
    border: 1px solid #ffa39e;
    border-radius: 8px;
    color: #cf1322;
    font-size: 14px;
    font-weight: 500;
}

.rm-switch input:disabled + .rm-slider {
    cursor: not-allowed;
    background-color: #f2f4f7;
    opacity: 0.6;
}

.rm-switch input:checked:disabled + .rm-slider {
    background-color: #b2ccff;
}

.rm-switch input:disabled + .rm-slider:before {
    background-color: #f2f4f7;
}

.rm-switch input:checked:disabled + .rm-slider:before {
    background-color: #ffffff;
}

/* Delete Modal Styling */
.rm-delete-modal {
    width: 400px !important;
    padding: 24px;
    border-radius: 12px;
    text-align: left;
    background: white;
    overflow: visible !important;
    /* Allow dropdown to show */
}

.rm-delete-header {
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 20px;
}

.rm-delete-icon-bg {
    width: 48px;
    height: 48px;
    background-color: #fee4e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 8px solid #fef3f2;
}

.rm-delete-title {
    font-size: 18px;
    font-weight: 600;
    color: #101828;
    margin-bottom: 8px;
    text-align: left;
}

.rm-delete-text {
    font-size: 14px;
    color: #475467;
    margin-bottom: 24px;
    text-align: left;
}

.rm-reassign-section {
    text-align: left;
    margin-bottom: 24px;
}

.rm-reassign-label {
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    display: block;
    margin-bottom: 6px;
}

.rm-reassign-dropdown {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #101828;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    min-height: 44px;
    transition: all 0.2s ease;
}

.rm-reassign-dropdown.active {
    border-color: #1570ef;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.rm-blue-asterisk {
    color: #1570ef;
}

.rm-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #f2f4f7;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    z-index: 9999;
    overflow: hidden;
    padding: 4px;
}

.rm-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    color: #344054;
    cursor: pointer;
    border-radius: 6px;
}

.rm-dropdown-item:hover {
    background-color: #f9fafb;
    color: #101828;
}

.rm-dropdown-item.active {
    background-color: #f9fafb;
    color: #1570ef;
    font-weight: 600;
}

.rm-delete-body {
    overflow: visible;
}

.rm-check-blue {
    color: #1570ef;
    font-weight: bold;
    font-size: 16px;
}

.rm-delete-footer {
    display: flex;
    gap: 12px;
}

.rm-delete-footer button {
    flex: 1 1;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}

.rm-btn-delete {
    background-color: #d92d20;
    color: white;
    border: none;
}

.rm-btn-delete:hover {
    background-color: #b42318;
}

/* Role Name Searchable Select Styles */
.rn-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.rn-select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    cursor: text;
    font-size: 14px;
    color: #101828;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    transition: all 0.2s ease;
    min-height: 44px;
}

.rn-select-box.open {
    border-color: #1570ef;
    box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.rn-select-box input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 16px; 
    color: #101828;
}

.rn-select-box input::placeholder {
    color: #667085;
    font-weight: 400;
}

.rn-dropdown-menu {
    position: fixed;
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    z-index: 999999;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
    margin-top: 4px;
}

.rn-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    font-size: 16px;
    color: #101828;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.rn-dropdown-item:hover {
    background-color: #f9fafb;
}

.rn-dropdown-item.selected {
    background-color: #f9fafb;
}

.rn-dropdown-item span {
    font-weight: 400;
}

.rn-dropdown-item.selected span {
    font-weight: 500;
}

.rn-check-icon {
    color: #1570ef;
    font-size: 18px;
}

/* Cleanup Classes */
.rm-flex-1 {
    flex: 1 1;
}

.rm-relative {
    position: relative;
}

.rm-text-center {
    text-align: center;
}

.rm-error-text {
    color: #d92d20;
    font-size: 14px;
}

.rm-modal-body-fixed {
    padding: 0px 24px 0px 24px;
    text-align: left;
    background-color: #fcfcfd;
}

.rm-form-label-blue-star {
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    margin-bottom: 6px;
    display: block;
}

.rm-input-display-only {
    padding: 10px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #ffffff;
    color: #101828;
    font-size: 16px;
    text-align: left;
}

.rm-delete-btn-group {
    display: flex;
    gap: 12px;
}

.rm-delete-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.rm-centered-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rm-no-permissions-msg {
    padding: 16px;
    text-align: center;
    color: #6b7280;
}

/* Icon Classes to replace inline sx props */
.rm-close-icon {
    color: #98a2b3;
}

.rm-delete-dustbin-icon {
    color: #d92d20;
    font-size: 30px; /* Increased size to match reference image */
}

.rm-dropdown-arrow-icon {
    color: #667085;
}

.rm-check-icon-blue {
    font-size: 18px;
    color: #1570ef;
}

/* Main Wizard Container */
.add-user-page-wrapper {
  display: flex;
  flex-direction: column;
}

.wizard-container {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

/* Stepper UI */
.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  margin-bottom: 32px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  width: 130px;
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f2f4f7;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  border: 2px solid #eaecf0;
  z-index: 2;
}

.step-item.active .step-circle {
  background-color: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.step-item.completed .step-circle {
  background-color: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.step-label {
  font-size: 13px;
  font-weight: 500;
  color: #667085;
  text-align: center;
}

.step-item.active .step-label {
  color: #2563eb;
}

.step-item.completed .step-label {
  color: #344054;
}

.step-line {
  flex: 1 1;
  height: 2px;
  background-color: #eaecf0;
  margin: 0 -45px;
  margin-top: -24px;
  z-index: 1;
}

.step-line.completed-line {
  background-color: #2563eb;
}

/* Wizard Content Shared Styles */
.wizard-content {
  padding: 0 40px;
  flex: 1 1;
}

.wizard-content.view-mode input,
.wizard-content.view-mode select,
.wizard-content.view-mode textarea {
  pointer-events: none;
  background-color: #f9fafb;
  color: #667085;
}

.wizard-content.view-mode .toggle-switch input,
.wizard-content.view-mode .upload-card-wrapper,
.wizard-content.view-mode .upload-card-outer {
  pointer-events: none;
}

.wizard-content.view-mode .branch-multi-select,
.wizard-content.view-mode .branch-dropdown-menu,
.wizard-content.view-mode .branch-dropdown-item {
  pointer-events: none;
}

.wizard-content.view-mode .um-receivers-select-box,
.wizard-content.view-mode .um-dropdown-item,
.wizard-content.view-mode .um-tag-x,
.wizard-content.view-mode .um-dropdown-search {
  pointer-events: none;
}

.wizard-content.view-mode .um-receivers-select-box {
  background-color: #f9fafb;
  color: #667085;
}

.add-user-step-container {
  display: flex;
  flex-direction: column;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 24px;
  margin-top: 0;
}

/* .section-divider {
  border: 0;
  border-top: 1px solid #eaecf0;
  margin: 32px 0;
} */

/* Grids */
.step1-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
}

.salary-grid,
.bank-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
}

.incentive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
  align-items: end;
}

.overtime-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  /* aligns right fields */
}

.ot-config-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
}

/* Address Fields */
.address-section {
  display: flex;
  gap: 40px;
}

.address-column {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.address-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 16px;
}

.address-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.same-as-current-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.same-as-current-row .address-subtitle {
  margin-bottom: 0;
}

.same-as-current-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #344054;
  cursor: pointer;
}

.same-as-current-label input[type="checkbox"] {
  accent-color: #2563eb;
  width: 16px;
  height: 16px;
}

/* Currency Input Styling */
.input-with-currency {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.input-with-currency .form-field {
  width: 100%;
}

.input-with-currency .form-field input {
  padding-right: 48px;
}

.currency-label {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 14px;
  color: #667085;
  font-weight: 500;
  pointer-events: none;
}

/* App User Checkbox */
.app-user-toggle-container {
  margin-bottom: 24px;
}

.checkbox-with-subtitle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
  accent-color: #2563eb;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.checkbox-title {
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  display: block;
}

.checkbox-subtitle {
  font-size: 13px;
  color: #667085;
  margin: 4px 0 0 0;
}

/* Permissions Table */
.permissions-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9fafb;
  padding: 12px 24px;
  border: 1px solid #eaecf0;
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.table-title {
  font-size: 14px;
  font-weight: 600;
  color: #101828;
  margin: 0;
}

.search-box {
  position: relative;
  width: 200px;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #667085;
}

.search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 13px;
}

.permissions-table-wrapper {
  overflow-x: auto;
  border: 1px solid #eaecf0;
  border-radius: 0 0 8px 8px;
}

.permissions-table {
  width: 100%;
  border-collapse: collapse;
}

.permissions-table th {
  background: #f9fafb;
  padding: 12px 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #667085;
  border-bottom: 1px solid #eaecf0;
}

.permissions-table th:first-child {
  text-align: left;
}

.permissions-table td {
  padding: 16px 24px;
  text-align: center;
  border-bottom: 1px solid #f2f4f7;
}

.permissions-table td.module-name {
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #101828;
}

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

/* Toggles */
.applicable-toggles-row {
  display: flex;
  gap: 40px;
  margin-top: 24px;
}

.toggle-with-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 200px;
}

.compact-toggle {
  width: auto;
  gap: 12px;
}

.toggle-with-label span:first-child {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2f4f7;
  transition: .4s;
  border: 1px solid #d0d5dd;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
}

.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);
}

input:checked+.slider {
  background-color: #2563eb;
  border-color: #2563eb;
}

input:checked+.slider:before {
  transform: translateX(16px);
}

/* Footer & Actions */
.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px 0;
  border-top: 1px solid #eaecf0;
  margin-top: 40px;
}

.right-actions {
  display: flex;
  gap: 12px;
}

/* Overrides for Buttons inside the new wizard */
.wizard-footer .primary-btn,
.wizard-footer .secondary-btn {
  padding: 8px 20px;
  font-size: 14px;
  min-width: 100px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {

  .step1-grid,
  .salary-grid,
  .bank-grid,
  .incentive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {

  .step1-grid,
  .salary-grid,
  .bank-grid,
  .incentive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .address-section {
    flex-direction: column;
  }
}

/* Step 4: Leave Grids */
.leave-top-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
  align-items: end;
}

.input-with-label-suffix {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.input-with-label-suffix .form-field {
  width: 100%;
}

.input-with-label-suffix .form-field input {
  padding-right: 48px;
}

.suffix-label {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 14px;
  color: #667085;
  font-weight: 500;
  pointer-events: none;
}

/* Leave Toggles */
/* Toggle + max carry forward row */
.leave-toggle-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 20px 24px;
  gap: 20px 24px;
  margin: 28px 0;
  align-items: center;
}

.leave-toggle-box {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  padding: 16px 20px;
}

.leave-toggle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
}

.toggle-subtitle {
  display: block;
  font-size: 13px;
  color: #667085;
  margin-top: 4px;
}

/* Approval + dates */
.leave-approval-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
  align-items: end;
  margin-bottom: 20px;
}

.leave-date-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
  align-items: end;
}

/* Step 5: Docs Grids */
.identity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.upload-box-wrapper {
  display: flex;
  flex-direction: column;
}

.upload-box-label {
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 8px;
}

.uploader-container {
  height: 120px;
}

.pro-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px 24px;
  gap: 20px 24px;
  align-items: end;
  width: 100%;
}

.input-with-label-toggle {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.input-with-label-toggle .form-field {
  flex: 1 1;
}

.input-inline-toggle {
  margin-bottom: 8px;
}

.pro-toggle-box {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.pro-toggle-field {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pro-toggle-field .form-label {
  margin-bottom: 6px;
}

.pro-data-grid-secondary {
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 20px;
}

/* Split Section Layout for Wizard Steps */
.step-section {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.section-title-col {
  width: 200px;
  flex-shrink: 0;
}

.section-title-left {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin: 0;
}

.section-content-col {
  flex: 1 1;
}

.step-grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
}

.address-block-title {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-top: 0;
  margin-bottom: 16px;
}

.address-block-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 16px;
}

.add-margin-top {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reversing Footer Buttons */
.wizard-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #EAECF0;
  padding-bottom: 24px;
}

/* Fixes for Add User Layout - Suffixes */
.input-with-currency,
.input-with-label-suffix {
  position: relative;
  display: flex;
  flex-direction: column;
}

.input-with-currency .currency-label,
.input-with-label-suffix .suffix-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #667085;
  font-size: 14px;
  pointer-events: none;
}

/* Adjust the input padding inside these containers so text doesn't overlap to the suffix */
.input-with-currency input,
.input-with-label-suffix input {
  padding-right: 48px;
}

/* Branch fake tag styling for placeholder look */
.branch-fake-placeholder {
  display: flex;
  gap: 8px;
  align-items: center;
}

.branch-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: #EFF4FF;
  border-radius: 4px;
  font-size: 14px;
  color: #175CD3;
  border: 1px solid #D1E0FF;
}

.branch-tag .tag-close {
  cursor: pointer;
  font-size: 14px;
}

.branch-multi-select .form-input {
  height: auto !important;
  min-height: 44px;
  padding: 8px 12px !important;
  row-gap: 6px;
  flex-wrap: wrap;
  align-content: flex-start;
  box-sizing: border-box;
}

.branch-multi-select .branch-tag {
  white-space: nowrap;
  line-height: 20px;
}

.branch-multi-select input[type="text"] {
  min-width: 40px;
  flex: 1 1 40px;
}

/* Permissions Checkbox Fix */
.custom-checkbox-standard {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
}

/* Section divider fix */
.section-divider {
  border: none;
  border-top: 1px solid #EAECF0;
  margin: 16px 0;
  width: 100%;
}


/* Pixel Perfect Figma Fixes */
.toggle-switch input:checked+.slider {
  background-color: #1570ef !important;
  border-color: #1570ef !important;
}

.toggle-switch .slider {
  border-color: #E4E7EC !important;
}

.permissions-table th {
  font-size: 12px !important;
  color: #475467 !important;
  text-transform: capitalize;
}

.permissions-table td.module-name {
  font-size: 14px !important;
  color: #475467 !important;
}

/* Step 2: Request receivers row (match Role Management style) */
.um-receivers-td {
  padding: 12px 24px !important;
  border-bottom: 1px solid #eaecf0;
  background: #fcfcfd;
  text-align: left !important;
}

.um-receivers-box {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.um-receivers-content {
  padding: 12px;
}

.um-receivers-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  display: block;
  margin-bottom: 8px;
}

.um-req {
  color: #2563eb;
}

.um-receivers-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.um-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #eff8ff;
  color: #175cd3;
  border: 1px solid #b2ddff;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.um-tag-x {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #175cd3;
  opacity: 0.7;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}

.um-receivers-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.um-receivers-select-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #101828;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  transition: all 0.2s ease;
}

.um-receivers-select-box.open {
  border-color: #1570ef;
  box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.um-placeholder {
  color: #667085;
}

.um-dropdown-arrow {
  color: #667085;
  transition: transform 0.2s ease;
}

.um-dropdown-arrow.open {
  transform: rotate(180deg);
}

.um-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.um-receivers-dropdown-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  z-index: 99999;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px 0;
}

.um-dropdown-search-wrap {
  padding: 0 12px 8px 12px;
}

.um-dropdown-search {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #d0d5dd;
  padding: 0 12px;
  font-size: 14px;
}

.um-dropdown-search:focus {
  outline: none;
  border-color: #1570ef;
  box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.um-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: 14px;
  color: #344054;
  cursor: pointer;
  transition: background-color 0.2s;
}

.um-dropdown-item:hover {
  background-color: #f9fafb;
  color: #101828;
}

.um-dropdown-item.selected {
  background-color: #f9fafb;
}

.um-check {
  color: #1570ef;
  font-weight: 700;
}

.um-dropdown-empty {
  padding: 10px 16px;
  font-size: 13px;
  color: #667085;
}

/* Step 3 Figma Layout */
.step-grid-3-col-end {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
  align-items: flex-end;
}

.date-exchange-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  /* Make it span 2 columns of the main grid */
  grid-column: span 2;
}

.exchange-icon-container {
  display: flex;
  align-items: end;
  justify-content: center;
  height: 40px;
  color: #667085;
}

/* Salary step visual alignment (match reference) */
.add-user-page-wrapper .form-label {
  font-size: 12px;
  font-weight: 500;
  color: #475467;
  margin-bottom: 6px;
}

.add-user-page-wrapper .form-input,
.add-user-page-wrapper .form-select {
  font-size: 14px;
  height: 40px;
}

.add-user-page-wrapper .input-group>.addon-right {
  font-size: 13px;
  color: #667085;
  border-left: none;
  margin-left: 0;
  padding: 0;
  background: transparent;
}

.inline-toggle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 14px;
  min-height: 44px;
  background-color: #ffffff;
  box-sizing: border-box;
  width: 100%;
}

.inline-toggle-label {
  font-size: 14px;
  color: #344054;
  font-weight: 500;
}

.currency-suffix {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
  color: #667085;
  font-weight: 600;
}

.currency-select {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #667085;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
  padding: 0 18px 0 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath d=%27M6 8l4 4 4-4%27 stroke=%27%239AA1AD%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px 14px;
}

/* Start currency selector + amount input */
.currency-input-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.currency-start-select {
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 0 24px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #475467;
  background-color: #ffffff;
  -webkit-appearance: none;
          appearance: none;
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath d=%27M6 8l4 4 4-4%27 stroke=%27%239AA1AD%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  flex: 0 0 80px;
  box-sizing: border-box;
}

.currency-amount-input {
  flex: 1 1;
}

/* Tighten row spacing for Salary step */
.step-grid-3-col-end .form-field,
.date-exchange-row .form-field {
  margin-bottom: 0;
}

/* Remove seam between input and INR addon */
.input-group.has-addon-suffix>.main-input-wrapper>.form-input {
  border-right: 0;
}

.add-user-page-wrapper .input-group {
  gap: 0;
  position: relative;
  width: 100%;
}

.add-user-page-wrapper .input-group.has-addon-suffix>.addon-right {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  pointer-events: auto;
}

.add-user-page-wrapper .input-group.has-addon-suffix>.main-input-wrapper>.form-input {
  padding-right: 72px;
}

/* Keep suffix inside the input width (leave fields) */
.add-user-page-wrapper .input-group.has-addon-suffix>.addon-right {
  position: absolute !important;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  pointer-events: none;
  z-index: 2;
}

.add-user-page-wrapper .input-group.has-addon-suffix>.main-input-wrapper {
  width: 100%;
}

.add-user-page-wrapper .input-group.has-addon-suffix>.main-input-wrapper>.form-input {
  padding-right: 64px;
}

/* Leave fields: keep suffix inside input and restore full border */
.add-user-page-wrapper .leave-top-grid .input-group.has-addon-suffix>.main-input-wrapper>.form-input,
.add-user-page-wrapper .leave-toggle-row .input-group.has-addon-suffix>.main-input-wrapper>.form-input,
.add-user-page-wrapper .leave-approval-grid .input-group.has-addon-suffix>.main-input-wrapper>.form-input,
.add-user-page-wrapper .leave-date-grid .input-group.has-addon-suffix>.main-input-wrapper>.form-input {
  border-right: 1px solid #d1d5db !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  padding-right: 56px;
}

.add-user-page-wrapper .leave-top-grid .input-group.has-addon-suffix>.addon-right,
.add-user-page-wrapper .leave-toggle-row .input-group.has-addon-suffix>.addon-right,
.add-user-page-wrapper .leave-approval-grid .input-group.has-addon-suffix>.addon-right,
.add-user-page-wrapper .leave-date-grid .input-group.has-addon-suffix>.addon-right {
  position: absolute !important;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  pointer-events: none;
  z-index: 2;
}

.checkbox-label-previous {
  padding: 8px 0px 0px;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.checkbox-label-previous span {
  padding-left: 8px;
}

/* Step 2 — scrollable permissions table; thead stays sticky inside scroll area */
.wizard-content .step2-module-permissions.rm-permissions-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(640px, calc(100vh - 220px));
}

.wizard-content .step2-module-permissions .rm-permissions-table-container {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: min(520px, calc(100vh - 300px));
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wizard-content .step2-module-permissions .rm-permissions-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 22;
  background-color: #f9fafb;
  box-shadow: 0 1px 0 #eaecf0;
}

.wizard-content .step2-module-permissions .rm-permissions-table thead th:first-child {
  z-index: 32;
  background-color: #f9fafb;
}

.wizard-content .step2-module-permissions .rm-permissions-table th:first-child,
.wizard-content .step2-module-permissions .rm-permissions-table td:first-child {
  background-color: #ffffff;
}

.wizard-content .step2-module-permissions .rm-permissions-table thead th:first-child {
  background-color: #f9fafb;
}
/* Add/Edit Branch Page */
.add-branch-page {
  position: relative;
  width: 100%;
}

/* Branch Form Card */
.branch-form-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
}

/* === Grid Rows === */

/* 4-column row: Branch Name, 3 Letter Code, Email, Phone / Country, State, City, Pincode */
.branch-form-row.ab-row-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

/* 3-column row: Created By, Branch Type, Status */
.branch-form-row.ab-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

/* 2-column row: ... */

/* 1-column row: Address */
.branch-form-row.ab-row-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

/* Form Field */
.branch-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Field Label */
.field-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

.field-label .required {
  color: #f04438;
}

/* Field Input */
.field-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  color: #101828;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  font-family: inherit;
}

.field-input::placeholder {
  color: #667085;
}

.field-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.field-input.error {
  border-color: #f04438;
}

.field-input.readonly {
  background: #f9fafb;
  color: #667085;
  cursor: not-allowed;
}

/* Field Textarea */
.field-textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 14px;
  font-size: 14px;
  color: #101828;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}

.field-textarea::placeholder {
  color: #667085;
}

.field-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.field-textarea.error {
  border-color: #f04438;
}

/* Phone Input */
.phone-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  height: 40px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.phone-input-wrapper:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.phone-country-select {
  padding: 8px 4px 8px 10px;
  background: #fff;
  border: none;
  border-right: 1px solid #d0d5dd;
  font-size: 13px;
  color: #667085;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2712%27 height=%2712%27 viewBox=%270 0 20 20%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5 7.5L10 12.5L15 7.5%27 stroke=%27%23667085%27 stroke-width=%271.67%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  width: 50px;
  flex-shrink: 0;
}

.phone-prefix {
  padding: 8px 10px;
  background: #f9fafb;
  border-right: 1px solid #d0d5dd;
  font-size: 14px;
  color: #667085;
  white-space: nowrap;
  flex-shrink: 0;
}

.phone-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1 1;
  height: 100%;
}

.phone-input:focus {
  box-shadow: none !important;
}

/* Error Text */
.error-text {
  font-size: 12px;
  color: #f04438;
  margin-top: 2px;
}

/* Form Divider */
.form-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0 20px;
}

/* Responsive */
@media (max-width: 1024px) {
  .branch-form-row.ab-row-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .branch-form-row.ab-row-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .branch-form-row.ab-row-4,
  .branch-form-row.ab-row-3,
  .branch-form-row.ab-row-2 {
    grid-template-columns: 1fr;
  }
}
/* PAGE */

.branch-details-page {
  font-family: 'Inter', 'Roboto', sans-serif;
  font-size: 14px;
  color: #101828;
  background: #fff;
  height: calc(100vh - 70px);
  /* adjust based on your top navbar height */
  overflow-y: auto;
  padding-bottom: 20px;
}

/* HEADER */

.branch-details-header {
  padding: 16px 24px;
  border-bottom: 1px solid #EAECF0;
}

.back-btn {
  border: none;
  background: none;
  color: #667085;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 10px;
}

.header-title {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
  margin-bottom: 6px;
}

.header-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.header-meta span {
  color: #667085;
  font-weight: 500;
  margin-right: 6px;
}

/* STATUS BADGE */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EFF8FF;
  color: #175CD3;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 16px;
  width: -webkit-fit-content;
  width: fit-content;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #175CD3;
  border-radius: 50%;
}

/* TAB HEADER */

.tabs {
  display: flex;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid #EAECF0;
}

.tab {
  padding: 10px 0;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
  position: relative;
}

.tab.active {
  color: #008DFF;
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: #008DFF;
}

/* TAB BODY */

.tab-body {
  padding: 20px;
}

/* INFORMATION CARD */

.information-card {
  width: 560px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  overflow: hidden;
}

/* ROW */

.details-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #eaecf0;
}

/* Remove last border */

.details-row:last-child {
  border-bottom: none;
}

/* LABEL */

.details-label {
  font-size: 13px;
  font-weight: 600;
  color: #667085;
}

/* VALUE */

.details-value {
  font-size: 13px;
  font-weight: 500;
  color: #101828;
  line-height: 1.5;
  text-align: left;
}

/* IMPORTANT: Prevent stacking */

.details-row>div {
  width: 100%;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .information-card {
    width: 100%;
  }

  .details-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* USERS TABLE */

.users-table {
  width: 100%;
  height: 480px; /* Fixed height for the table section */
  display: flex;
  flex-direction: column;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* RESPONSIVE */

@media (max-width: 768px) {
  .information-card {
    width: 100%;
  }

  .details-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
  }

  .details-label {
    width: 100%;
    white-space: normal;
    margin-bottom: 4px;
  }

  .details-value {
    width: 100%;
  }
}
.pdp-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  height: 80vh;
}

.back-btn {
  background: none;
  border: none;
  color: #1a73e8;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 10px;
}

.pdp-header {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: "Inter", sans-serif;
  color: #535862;
}

.pdp-image {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.pdp-info h2 {
  margin: 0;
  font-size: 18px;
  font-family: "Inter", sans-serif;
}

.pdp-info p {
  margin: 4px 0;
  font-size: 14px;
  color: #666;
  font-family: "Inter", sans-serif;
}

.pdp-content {
  margin-top: 16px;
  height: "40vh !important";
  font-family: "Inter", sans-serif;
}

.info-card {
  border: 1px solid #e9eaeb;
  border-radius: 8px;
  padding: 10px;
  max-width: 500px;
  height: 450px;
  overflow-y: scroll;
  font-family: "Inter", sans-serif;
}
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.back-button:hover {
  color: #111827;
}

.back-button svg {
  font-size: 18px;
}

.info-row {
  display: flex;
  justify-content: flex-start;
  gap: 100px;
  padding: 18px 0;
  border-bottom: 1px solid #e9eaeb;
  font-family: "Inter", sans-serif;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 400;
  color: #535862;
  width: 150px;
  font-family: "Inter", sans-serif;
}

.info-value {
  font-weight: 600;
  color: #414651;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Inter", sans-serif;
}

@media (max-width: 768px) {
  .pdp-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.po-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  margin-top: 24px;
  border: 1px solid #E5E7EB;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}

/* Table Specifics */
.po-page-wrapper .standard-table-container thead th {
  background: #F9FAFB !important;
  color: #475467 !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  font-size: 12px !important;
  text-transform: none !important;
  border-bottom: 1px solid #EAECF0 !important;
}

.po-page-wrapper .standard-table-container td {
  padding: 16px 24px !important;
  font-size: 14px !important;
  color: #475467 !important;
  border-bottom: 1px solid #EAECF0 !important;
}

.po-page-wrapper .standard-table-container tr:hover {
  background-color: #F9FAFB !important;
}

/* Action icons style */
.po-page-wrapper .table-action-icon {
  color: #667085 !important;
  font-size: 18px !important;
}

/* Pagination */
.po-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 24px !important;
  background: #FFFFFF !important;
  border-top: 1px solid #EAECF0 !important;
}

/* Status Badge inside PO Dashboard */
.po-page-wrapper .status-badge.core-status-badge {
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 16px !important;
}

/* Layout Page Overrides */
.po-page-wrapper .page-header {
  margin-bottom: 0 !important;
}
/* Header */
.po-page-wrapper .header-actions {
  display: flex;
  gap: 12px;
}

.po-create-body {
  padding-bottom: 32px;
}

.po-section {
  margin-bottom: 20px;
}

.po-section-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: #101828;
  letter-spacing: 0.01em;
}

.po-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.po-section-head .po-section-title {
  margin-bottom: 0;
}

.po-add-item-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.po-add-item-outline:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

.po-span-2 {
  grid-column: span 2;
}

.po-grid-vendor {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.po-grid-tight-top {
  margin-top: 8px;
}

.po-summary-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
}

.po-items-table-wrap {
  border-radius: 8px;
  overflow: auto;
}

.po-items-table-wrap.po-overflow-visible {
  overflow: visible !important;
}

.po-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.po-items-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: #f9fafb;
  color: #475467;
  font-weight: 600;
  border-bottom: 1px solid #eaecf0;
  white-space: nowrap;
}

.po-items-table thead th.po-num {
  text-align: right;
}

.po-th-star {
  color: #175cd3;
  font-weight: 700;
}

.po-th-menu-icon {
  color: #98a2b3;
  vertical-align: middle;
}

.po-col-menu {
  width: 40px;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

.po-th-product {
  min-width: 200px;
}

.po-td-product .premium-select-container {
  min-width: 180px;
}

.po-items-table-wrap .po-line-input,
.po-items-table-wrap select.po-line-input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  color: #101828;
  outline: none;
  box-sizing: border-box;
}

.po-items-table-wrap .po-line-input:focus,
.po-items-table-wrap select.po-line-input:focus {
  border-color: #2e90fa;
  box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.15);
}

.po-items-table-wrap .po-td-product .premium-select-trigger {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d0d5dd;
  font-size: 13px;
}

.po-items-toolbar {
  margin-top: 16px;
}

.po-items-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #f2f4f7;
}

.po-items-table .po-num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.po-items-table .po-line-total {
  font-weight: 600;
  color: #101828;
}

.po-items-table .po-col-actions {
  width: 48px;
  text-align: center;
}

.po-items-tfoot td {
  padding: 12px;
  font-weight: 600;
  background: #fcfcfd;
  border-top: 1px solid #eaecf0;
  border-bottom: none;
}

.po-items-tfoot .po-num {
  text-align: right;
}

.po-items-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 20px;
}

.po-items-pagination .po-page-nav:first-child {
  justify-self: start;
}

.po-items-pagination .po-page-dots {
  justify-self: center;
}

.po-items-pagination .po-page-nav:last-child {
  justify-self: end;
}

.po-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #d0d5dd;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
}

.po-page-nav--ghost {
  background: #f9fafb;
  border-color: #e4e7ec;
  color: #667085;
}

.po-page-nav:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.po-page-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.po-page-num {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  color: #475467;
  cursor: pointer;
}

.po-page-num:hover {
  background: #f2f4f7;
}

.po-page-num.active {
  background: #eff8ff;
  border-color: #b2ddff;
  color: #1570ef;
  font-weight: 600;
}

.po-page-ellipsis {
  padding: 0 4px;
  color: #98a2b3;
  -webkit-user-select: none;
          user-select: none;
}

.po-page-wrapper .delete-line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  color: #667085;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.po-page-wrapper .delete-line-btn:hover {
  background: #fef3f2;
  border-color: #fecdca;
  color: #d92d20;
}

@media (max-width: 1024px) {
  .po-grid-vendor {
    grid-template-columns: 1fr;
  }
  .po-span-2 {
    grid-column: span 1;
  }
  .po-summary-fields {
    grid-template-columns: 1fr;
  }
}

/* Card */
.po-page-wrapper .po-card {
  background: #fff;
  border: 1px solid #e9eaeb;
  border-radius: 12px;
  padding: 20px;
}

/* Grid */
.po-page-wrapper .po-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 24px;
  gap: 20px 24px;
}

/* Table Container - Uses standard table-container styling from other tables */
.po-page-wrapper .table-container input,
.po-page-wrapper .table-container select {
  padding: 0 28px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  outline: none;
  width: 100%;
}

.po-page-wrapper .table-container input:focus,
.po-page-wrapper .table-container select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Action Buttons */
.po-page-wrapper .action-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.po-page-wrapper .table-edit-btn,
.po-page-wrapper .table-delete-btn {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.po-page-wrapper .table-edit-btn:hover,
.po-page-wrapper .table-delete-btn:hover {
  background-color: #e5e7eb;
  border-color: #d1d5db;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.po-page-wrapper .table-edit-btn img,
.po-page-wrapper .table-delete-btn img {
  width: 18px;
  height: 18px;
  display: block;
}

/* Summary */
.po-page-wrapper .summary-box {
  width: 360px;
  margin-left: auto;
  margin-top: 24px;
  border: 1px solid #e9eaeb;
  border-radius: 12px;
  padding: 16px;
}

.po-page-wrapper .summary-box h4 {
  margin-bottom: 12px;
}

.po-page-wrapper .summary-box table {
  width: 100%;
}

.po-page-wrapper .summary-box td {
  padding: 6px 0;
  font-size: 14px;
}

.po-page-wrapper .summary-box tr:last-child td {
  font-weight: 600;
}
.add-item-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #2E90FA;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.add-item-btn:hover {
  background-color: #1570EF;
}

.add-item-btn.secondary {
  background-color: #fff;
  color: #344054;
  border: 1px solid #D0D5DD;
}

.add-item-btn.secondary:hover {
  background-color: #F9FAFB;
}

/* Overrides generic .table-container input padding for PO line items (loaded later in file). */
.po-page-wrapper .table-container.po-items-table-wrap input.po-line-input,
.po-page-wrapper .table-container.po-items-table-wrap select.po-line-input {
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 8px;
  border-color: #d0d5dd;
}
.po-line-error {
  color: #d92d20;
  font-size: 11px;
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.2;
}

/* Purchase Order Detail Styles */

.pod-page-wrapper {
    background: #fff;
    min-height: 100vh;
    border: 1px solid #EAECF0;
    /* padding: 24px; */
    padding: 15px;
    border-radius: 10px;
}

.pod-container {
    /* max-width: 1400px; */
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    margin: 0 auto;
}

/* Header / PO Basic Info */
.pod-header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

.pod-header-left h1 {
    font-size: 24px;
    font-weight: 700;
    color: #101828;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
}

.pod-header-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pod-header-info-item {
    font-size: 14px;
    color: #475467;
    display: flex;
    gap: 8px;
}

.pod-header-info-item span:first-child {
    font-weight: 600;
    color: #344054;
    min-width: 100px;
}

.pod-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.pod-header-actions {
    display: flex;
    gap: 12px;
}

.pod-audit-summary {
    text-align: right;
    font-size: 13px;
    color: #667085;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Sections & Cards */
.pod-section {
    margin-bottom: 32px;
}

.pod-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #475467;
    margin-bottom: 16px;
    background: #F9FAFB;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #EAECF0;
    display: inline-block;
    letter-spacing: 0.05em;
}

.pod-card {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.pod-card-flush {
    padding: 0;
    overflow: hidden;
}

/* Grid Layouts */
.pod-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 32px;
    gap: 32px;
}

.pod-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
    gap: 32px;
}

.pod-info-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pod-info-label {
    font-size: 12px;
    font-weight: 500;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pod-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #101828;
}

/* Table Styles */
.pod-table {
    width: 100%;
    border-collapse: collapse;
}

.pod-table th {
    background: #F9FAFB;
    padding: 12px 24px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #475467;
    border-bottom: 1px solid #EAECF0;
    white-space: nowrap;
}

.pod-table td {
    padding: 16px 24px;
    border-bottom: 1px solid #EAECF0;
    font-size: 14px;
    color: #475467;
}

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

/* Summary Section */
.pod-summary-table-horizontal {
    width: 100%;
    border-collapse: collapse;
}

.pod-summary-table-horizontal th {
    background: #F9FAFB;
    padding: 12px 24px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #475467;
    border-bottom: 1px solid #EAECF0;
    text-transform: uppercase;
}

.pod-summary-table-horizontal td {
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #101828;
}

.pod-summary-table-horizontal .grand-total-header {
    color: #1D4ED8;
}

.pod-summary-table-horizontal .grand-total-cell {
    color: #1D4ED8;
    font-size: 18px;
    font-weight: 800;
}

/* Audit Trail Specific */
.pod-audit-trail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px;
}

.pod-btn-view-log {
    padding: 8px 16px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    cursor: pointer;
    transition: all 0.2s;
}

.pod-btn-view-log:hover {
    background: #F9FAFB;
}

.pod-btn-action-small {
    padding: 6px 16px;
    border: 1px solid #1D4ED8;
    background: #1D4ED8;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #FFF;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
    letter-spacing: 0.03em;
}

.pod-btn-action-small:hover {
    background: #1E40AF;
}

.pod-btn-action-small.secondary {
    background: #FFF;
    color: #344054;
    border: 1px solid #D0D5DD;
}

.pod-btn-action-small.secondary:hover {
    background: #F9FAFB;
}

/* Utility classes */
.text-right {
    text-align: right;
}

.mb-32 {
    margin-bottom: 32px;
}
.add-package-container {
  padding: 24px 32px;
  background-color: #fff;
  height: 41vh;
  margin-top: 20px;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  border: 1px solid hsl(220, 13%, 91%);
  border-radius: 16px;
}
.add-package-feild {
  display: flex;
  max-width: 75%;
  position: relative;
  left: 25%;
}
.add-package-feild input,
select {
  width: 360px;
  height: 40px;
  color: #717680;
}

.add-package-row1 {
  display: flex;
  flex-direction: row;
  gap: 30px;
}
.add-package-span {
  display: block;
  position: absolute;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: #181d27;
}
.add-package-row2 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  position: absolute;
  top: 100%;
}
.add-package-row2 select {
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.add-package-container select {
  width: 360px;
  height: auto;
  color: #717680;
  font-family: "Inter", sans-serif;
}
.add-package-row3 select {
  width: 0px;
  border: none !important;
  outline: none !important;
  position: relative;
  left: 268px;
  top: -39px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  padding-left: 60px !important;
  border-color: #ffffff !important;
}
.add-package-input {
  width: 360px;
  height: 40px;
  border-radius: 8px;
  color: #717680;
  font-family: "Inter", sans-serif;
  border: 1px solid #d5d7da;
}
.add-package-container label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #717680;
}
.add-package-row3 {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 195%;
}
.add-package-row4 select {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  top: -38px;
  width: 75px;
  left: 270px;
  border-style: none !important;
  border-color: #ffffff !important;
  border: none !important;
  outline: none !important;
}
.add-package-row4 option {
  width: 0px;
  color: #717680;
  font-family: "Inter", sans-serif;
}
.add-package-row4 {
  display: flex;
  position: absolute;
  top: 290%;
  gap: 30px;
  flex-direction: row;
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.para {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}
.new-task-added{
  display: block !important;
  }

.error-msg {
  color: #d9534f;
  margin-top: -6px;
  font-size: 12px;
}


/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Customer Management Styles */
.customer-mgmt-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.customer-view-page-scrollable {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 16px;
}

.customer-list-layout {
  display: flex;
  gap: 24px;
  padding: 0 24px 24px 24px;
  flex: 1 1;
  overflow: hidden;
}

.customer-list-layout-v2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 24px 0;
  flex: 1 1;
  overflow: hidden;
}

/* New Customer Table Controls matching Tax layout */
.customer-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #fff;
  border-bottom: 1px solid #eaecf0;
  gap: 16px;
}

.customer-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1;
  max-width: 400px;
}

.customer-search-icon {
  position: absolute;
  left: 12px;
  color: #667085;
  font-size: 20px;
}

.customer-search-input {
  width: 100%;
  padding: 8px 36px 8px 36px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.customer-search-input:focus {
  border-color: #175cd3;
  box-shadow: 0 0 0 4px #eef4ff;
}

.customer-search-shortcut {
  position: absolute;
  right: 12px;
  background: #f9fafb;
  border: 1px solid #eaecf0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  color: #667085;
}

.customer-filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customer-filter-btn-wrap {
  position: relative;
}

.customer-filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
}

.customer-filter-toggle-btn:hover {
  background: #f9fafb;
}

.customer-filter-modal {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1001;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  border: 1px solid #eaecf0;
  width: 350px;
  overflow: hidden;
}

.customer-filter-modal .filter-panel {
  border: none;
  box-shadow: none;
  max-width: 100%;
}

.customer-list-table-wrap-v2 {
  flex: 1 1;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eaecf0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.customer-list-table-wrap-v2 .data-table-wrapper {
  box-shadow: none;
  border-radius: 0;
  border: none;
  margin: 0;
  padding-top: 0;
}

.customer-list-filters {
  flex: 0 0 320px;
  height: -webkit-fit-content;
  height: fit-content;
}

.customer-list-table-wrap {
  flex: 1 1;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eaecf0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Add Customer Form Styles */
.customer-form-layout {
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 32px;
  margin-top: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  width: 100%;
  display: flex;
  flex-direction: column;
}

.form-section {
  margin-bottom: 24px;
}

.form-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 32px;
  padding: 12px 0;
  border-top: 1px solid #f2f4f7;
  border-bottom: 1px solid #d0d5dd;
  display: block;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px 24px;
  gap: 24px 24px;
  width: 100%;
  margin-top: 10px;
}

.customer-form-source-group {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-top: 8px;
}

/* Radio Labels */
.radio-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 4px;
}

/* Modernized Detail View Styles - Based on Reference */
.customer-detail-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #eaecf0;
  padding: 0; 
  border-radius: 10px;
  padding: 0px 16px;
  background: white;
  margin-bottom: 24px;
}

.customer-detail-tab {
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.customer-detail-tab.active {
  color: #175cd3;
  border-bottom-color: #175cd3;
}

.customer-view-main-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.customer-view-section {
  display: flex;
  flex-direction: column;
}

.customer-view-section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0%;
  color: rgba(24, 29, 39, 1);
  margin-bottom: 24px;
}

.customer-view-details-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  padding: 8px 0; /* Vertical padding inside card */
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); /* Optional subtle shadow like reference */
}

.view-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}

.view-info-item:last-child {
  border-bottom: none;
}

.view-info-label {
  color: rgba(83, 88, 98, 1);
  font-size: 14px;
  font-weight: 500;
}

.view-info-value {
  color: rgba(65, 70, 81, 1);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  max-width: 280px;
}

.view-info-link {
  color: #1570ef;
  text-decoration: none;
  word-break: break-all;
}

.view-info-link:hover {
  text-decoration: underline;
}

.customer-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 32px;
  gap: 32px;
  align-items: start;
}

/* Customer Modals */
.customer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 24px;
}

.customer-modal-close {
  border: none;
  background: transparent;
  font-size: 20px;
  color: #98a2b3;
  cursor: pointer;
  line-height: 1;
}

.customer-deactivate-modal {
  background: #ffffff;
  border-radius: 12px;
  width: min(420px, 92vw);
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  position: relative;
}

.customer-deactivate-content h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #101828;
}

.customer-deactivate-note {
  font-size: 13px;
  color: #667085;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.customer-deactivate-checklist {
  border: 1px solid #eaecf0;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}

.customer-deactivate-check-title {
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  margin-bottom: 8px;
}

.customer-deactivate-check-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #344054;
  padding: 6px 0;
}

.customer-deactivate-block {
  border: 1px solid #fecdca;
  background: #fff5f5;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 16px;
}

.customer-deactivate-block-title {
  color: #b42318;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.customer-deactivate-block-desc {
  color: #b42318;
  font-size: 12px;
  line-height: 1.4;
}

.customer-deactivate-btn {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #d92d20;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  cursor: pointer;
}

/* Status Badges */
.status-badge {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active { background: #ecfdf3; color: #027a48; }
.status-badge.inactive { background: #fef3f2; color: #b42318; }
.status-badge.pending { background: #fffaeb; color: #b54708; }

/* ── Buttons ──────────────────────────────── */
.base-btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-btn {
  background: #1570EF;
  color: white;
}

.primary-btn:hover {
  background: #175CD3;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.secondary-btn {
  background: white;
  border: 1px solid #D0D5DD;
  color: #344054;
}

.secondary-btn:hover {
  background: #F9FAF6;
  border-color: #D0D5DD;
}

.header-actions-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Deactivation Modal Enhancements */
.customer-deactivate-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.eligibility-check-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s;
}

.eligibility-check-row.error {
  background: #fffbfa;
  border-color: #fda29b;
  color: #b42318;
}

.eligibility-check-row.success {
  background: #f6fef9;
  border-color: #6ce9a6;
  color: #027a48;
}

.check-status-icon {
  font-size: 16px;
  font-weight: bold;
}

.blocked-alert-box {
  background: #fff6ed;
  border: 1px solid #fdba74;
  border-radius: 8px;
  padding: 14px;
  margin: 16px 0;
  text-align: center;
}

.blocked-alert-text {
  color: #c2410c;
  font-weight: 700;
  font-size: 14px;
}

.deactivation-blocked-note {
  font-size: 12px;
  color: #c2410c;
  margin-top: 4px;
  line-height: 1.4;
}

.customer-deactivate-reason-group {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.invoices-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 0;
}

.invoices-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 900px;
}

.invoices-page-wrapper .table-container thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.invoices-page-wrapper .table-container th {
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #535862 !important;
  text-transform: none !important;
  letter-spacing: 0px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  background: #f9fafb !important;
  font-family: "Inter", sans-serif !important;
  border-bottom: 2px solid #e5e7eb !important;
}

/* Table cells: rely on DataTable column widths; avoid nth-child rules (column count varies). */
.invoices-page-wrapper .customer-list-table-wrap-v2 .invoice-amount-cell {
  display: block;
  text-align: left;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoices-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
}

.invoices-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.invoices-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.invoices-page-wrapper .table-container tbody {
  display: table-row-group;
}

.invoices-page-wrapper .table-container td {
  padding: 14px 16px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.invoices-page-wrapper .status-badge {
  text-align: left !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .invoices-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .invoices-page-wrapper .table-container table {
    min-width: 800px;
  }

  .invoices-page-wrapper .table-container th,
  .invoices-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .invoices-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .invoices-page-wrapper .table-container table {
    min-width: 700px;
  }

  .invoices-page-wrapper .table-container th,
  .invoices-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .invoices-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .invoices-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .invoices-page-wrapper .table-container th,
  .invoices-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .invoices-page-wrapper .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}



.invoice-header-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.invoices-page-wrapper .page-header {
  margin-bottom: 0.5rem;
}

.invoice-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin: 0 0 8px;
}

.invoice-summary-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
}

.invoice-summary-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}

.invoice-summary-value {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.invoice-so-link {
  background: none;
  border: none;
  padding: 0;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}

.invoice-status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}
.invoices-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 0;
}

.invoices-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 900px;
}

.invoices-page-wrapper .table-container thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.invoices-page-wrapper .table-container th {
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #535862 !important;
  text-transform: none !important;
  letter-spacing: 0px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  background: #f9fafb !important;
  font-family: "Inter", sans-serif !important;
  border-bottom: 2px solid #e5e7eb !important;
}

/* Table cells: rely on DataTable column widths; avoid nth-child rules (column count varies). */
.invoices-page-wrapper .customer-list-table-wrap-v2 .invoice-amount-cell {
  display: block;
  text-align: left;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoices-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
}

.invoices-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.invoices-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.invoices-page-wrapper .table-container tbody {
  display: table-row-group;
}

.invoices-page-wrapper .table-container td {
  padding: 14px 16px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.invoices-page-wrapper .status-badge {
  text-align: left !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .invoices-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .invoices-page-wrapper .table-container table {
    min-width: 800px;
  }

  .invoices-page-wrapper .table-container th,
  .invoices-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .invoices-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .invoices-page-wrapper .table-container table {
    min-width: 700px;
  }

  .invoices-page-wrapper .table-container th,
  .invoices-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .invoices-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .invoices-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .invoices-page-wrapper .table-container th,
  .invoices-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .invoices-page-wrapper .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}



.invoice-header-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.invoices-page-wrapper .page-header {
  margin-bottom: 0.5rem;
}

.invoice-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin: 0 0 8px;
}

.invoice-summary-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
}

.invoice-summary-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}

.invoice-summary-value {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.invoice-so-link {
  background: none;
  border: none;
  padding: 0;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}

.invoice-status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.invoice-loading-hint {
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
}

.invoice-req-star {
  color: #1570ef;
}

/* Search and Filter Bar Padding */
.invoices-page-wrapper .searchbar-main {
    height: auto !important;
    padding: 16px 20px !important;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
/* SO No Hyperlink Styling */
.invoice-so-link {
  background: none;
  border: none;
  padding: 0;
  color: #1570ef;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: all 0.2s ease;
}

.invoice-so-link:hover {
  text-decoration: underline;
  color: #004eeb;
}

/* Shared shell for Module 21 finance read-only views — use with Layout + standard-page-container */
.finance-view-shell.standard-page-container {
  flex: 1 1;
  min-height: 0;
  box-sizing: border-box;
}

.finance-view-centered-message {
  max-width: 720px;
  margin: 3rem auto;
  padding: 2rem 1rem;
  text-align: center;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.5;
}

.invoice-detail-page-wrapper {
    /* padding: 24px 32px; */
    background-color: #f9fafb;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

.invoice-detail-container {
    display: flex;
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

/* Grid for the top sections */
.invoice-detail-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
}

.invoice-detail-middle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
}

/* Info Card Styling */
.invoice-info-card {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.invoice-info-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 12px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.info-label {
    color: #6b7280;
    font-weight: 400;
}

.info-value {
    color: #111827;
    font-weight: 500;
    text-align: right;
}

/* Badge for Status */
.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background-color: #fef9c3;
    color: #854d0e;
    border: 1px solid #fef08a;
}

/* Line Items and Tax Summary Container */
.invoice-items-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
}

/* Table Styling */
.view-table-container {
    overflow-x: auto;
}

.view-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.view-table th {
    background-color: #f9fafb;
    color: #6b7280;
    font-weight: 500;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.view-table td {
    padding: 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

/* Tax Summary Specifics */
.tax-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.tax-summary-row.total {
    border-top: 1px solid #e5e7eb;
    margin-top: 12px;
    padding-top: 16px;
    font-weight: 700;
    font-size: 16px;
    color: #2563eb;
}

/* Ledger and Audit Section */
.full-width-section {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header-row h3 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.ledger-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.invoice-so-link-inline {
    background: none;
    border: none;
    padding: 0;
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}

.ledger-view-btn {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 6px;
    border-radius: 6px;
    color: #667085;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ledger-view-btn:hover {
    background: #f2f4f7;
    color: #101828;
    border-color: #d0d5dd;
}

/* Audit Log Scrolling */
.audit-log-scroll-container {
    max-height: 350px; /* Approximately 5-6 rows */
    overflow-y: auto;
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.audit-log-scroll-container .view-table thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.audit-log-scroll-container .view-table {
    border: none;
}

/* Responsive */
@media (max-width: 1024px) {

    .invoice-detail-top-grid,
    .invoice-detail-middle-grid,
    .invoice-items-summary-grid {
        grid-template-columns: 1fr;
    }
}
.payments-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
}

.payments-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 1000px;
}

.payments-page-wrapper .table-container thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.payments-page-wrapper .table-container th {
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #535862 !important;
  text-transform: none !important;
  letter-spacing: 0px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  background: #f9fafb !important;
  font-family: "Inter", sans-serif !important;
  border-bottom: 2px solid #e5e7eb !important;
}

/* Column-specific widths for Payments Received table (7 columns) */
.payments-page-wrapper .table-container th:nth-child(1),
.payments-page-wrapper .table-container td:nth-child(1) {
  width: 14%;
  min-width: 110px;
  text-align: left;
  font-weight: 600;
  color: #111827;
}

.payments-page-wrapper .table-container th:nth-child(2),
.payments-page-wrapper .table-container td:nth-child(2) {
  width: 12%;
  min-width: 100px;
  text-align: left;
  color: #111827;
}

.payments-page-wrapper .table-container th:nth-child(3),
.payments-page-wrapper .table-container td:nth-child(3) {
  width: 18%;
  min-width: 140px;
  text-align: left;
  color: #111827;
}

.payments-page-wrapper .table-container th:nth-child(4),
.payments-page-wrapper .table-container td:nth-child(4) {
  width: 14%;
  min-width: 110px;
  text-align: right;
  color: #111827;
  font-weight: 500;
}

.payments-page-wrapper .table-container th:nth-child(5),
.payments-page-wrapper .table-container td:nth-child(5) {
  width: 14%;
  min-width: 110px;
  text-align: left;
  color: #6b7280;
  font-size: 12px;
}

.payments-page-wrapper .table-container th:nth-child(6),
.payments-page-wrapper .table-container td:nth-child(6) {
  width: 12%;
  min-width: 100px;
  text-align: center;
  font-size: 12px;
}

.payments-page-wrapper .table-container th:nth-child(7),
.payments-page-wrapper .table-container td:nth-child(7) {
  width: 16%;
  min-width: 120px;
  text-align: center;
}

.payments-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  width: 100%;
}

.payments-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.payments-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.payments-page-wrapper .table-container tbody {
  display: table-row-group;
}

.payments-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .payments-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .payments-page-wrapper .table-container table {
    min-width: 900px;
  }

  .payments-page-wrapper .table-container th,
  .payments-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .payments-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .payments-page-wrapper .table-container table {
    min-width: 850px;
  }

  .payments-page-wrapper .table-container th,
  .payments-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .payments-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .payments-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .payments-page-wrapper .table-container th,
  .payments-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* Pagination container styling */
.payments-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
.returns-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.returns-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 1000px;
}

.returns-page-wrapper .table-container thead {
  background: #ffffff !important;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.returns-page-wrapper .table-container th {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  vertical-align: middle;
  background: #ffffff !important;
  font-family: "Inter", sans-serif;
}

/* Column-specific widths for SalesReturns table (7 columns) */
.returns-page-wrapper .table-container th:nth-child(1),
.returns-page-wrapper .table-container td:nth-child(1) {
  width: 14%;
  min-width: 110px;
}

.returns-page-wrapper .table-container th:nth-child(2),
.returns-page-wrapper .table-container td:nth-child(2) {
  width: 13%;
  min-width: 100px;
}

.returns-page-wrapper .table-container th:nth-child(3),
.returns-page-wrapper .table-container td:nth-child(3) {
  width: 13%;
  min-width: 100px;
}

.returns-page-wrapper .table-container th:nth-child(4),
.returns-page-wrapper .table-container td:nth-child(4) {
  width: 13%;
  min-width: 110px;
}

.returns-page-wrapper .table-container th:nth-child(5),
.returns-page-wrapper .table-container td:nth-child(5) {
  width: 13%;
  min-width: 110px;
}

.returns-page-wrapper .table-container th:nth-child(6),
.returns-page-wrapper .table-container td:nth-child(6) {
  width: 18%;
  min-width: 140px;
}

.returns-page-wrapper .table-container th:nth-child(7),
.returns-page-wrapper .table-container td:nth-child(7) {
  width: 16%;
  min-width: 120px;
}

.returns-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  display: table;
  width: 100%;
}

.returns-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.returns-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.returns-page-wrapper .table-container tbody {
  display: table-row-group;
}

.returns-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.returns-page-wrapper .status-badge {
  font-size: 12px;
  font-weight: 600;
  text-align: left !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .returns-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .returns-page-wrapper .table-container table {
    min-width: 950px;
  }

  .returns-page-wrapper .table-container th,
  .returns-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .returns-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .returns-page-wrapper .table-container table {
    min-width: 850px;
  }

  .returns-page-wrapper .table-container th,
  .returns-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .returns-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .returns-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .returns-page-wrapper .table-container th,
  .returns-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .returns-page-wrapper .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Pagination container styling */
.returns-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
.vendors-page-wrapper.standard-page-container {
  padding: 10px 0px 24px;
  background: #fcfcfd;
  min-height: calc(100vh - 64px);
}

/* Page Header Adjustments */
.vendors-page-wrapper .page-header {
  margin-bottom: 8px;
}

.vendors-page-wrapper .page-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #101828;
  margin: 4px 0;
}

.vendors-page-wrapper .page-header p {
  font-size: 14px;
  color: #475467;
}

/* Table Container Styling */
.vendors-page-wrapper .standard-table-container {
  margin-top: 0;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  overflow: hidden;
}

.vendors-page-wrapper .data-table-wrapper {
  border: 1px solid #eaecf0;
  border-top: none;
  border-radius: 8px 8px 12px 12px;
  overflow: hidden;
  max-width: 100%;
}

.vendors-page-wrapper .table-responsive {
  overflow-x: auto !important;
  width: 100%;
}

.vendors-page-wrapper .data-table table {
  table-layout: auto !important;
  width: -webkit-max-content !important;
  width: max-content !important;
  min-width: 100%;
}

.vendors-page-wrapper .data-table thead th {
  background: #f9fafb;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #475467;
  text-transform: none;
  border-bottom: 1px solid #eaecf0;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.vendors-page-wrapper .data-table tbody td {
  padding: 16px;
  font-size: 14px;
  color: #475467;
  border-bottom: 1px solid #eaecf0;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Custom Cell Renderers */

/* Contract Pills */
.contract-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
}

.contract-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.contract-pill.annual::before {
  background-color: #175cd3;
}

.contract-pill.project::before {
  background-color: #b54708;
}

.contract-pill.one-time::before,
.contract-pill.one_time::before {
  background-color: #667085;
}

/* Rating Stars */
.rating-stars {
  display: flex;
  gap: 2px;
}

/* Pagination spacing */
.vendors-page-wrapper .pagination-wrapper {
  margin-top: 0;
  border: 1px solid #eaecf0;
  border-top: none;
  border-radius: 0 0 12px 12px;
}

/* Responsive Table */
@media (max-width: 1400px) {
  .vendor-filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-input-wrapper {
    max-width: 100%;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   Bills Dashboard (Screen 29.1) — Bills.css
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Table Container ──────────────────────────────────────────── */
.bills-page-wrapper .table-container {
  width: 100%;
  margin-top: 0;
}

.bills-page-wrapper .table-container .data-table-wrapper {
  border-radius: 10px;
}

/* ─── Summary Cards ────────────────────────────────────────────── */
.bill-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 14px;
  gap: 14px;
  margin: 0 0 12px;
}

.bill-summary-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.bill-summary-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.bill-summary-label {
  font-size: 12px;
  font-weight: 500;
  color: #667085;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.bill-summary-value {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
  line-height: 1.2;
}

/* ─── Action Buttons in Table ──────────────────────────────────── */
.bills-page-wrapper .action-btns {
  display: flex;
  gap: 2px;
  align-items: center;
}

.bills-page-wrapper .table-edit-btn,
.bills-page-wrapper .table-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bills-page-wrapper .table-edit-btn:hover {
  background: #f2f4f7;
}

.bills-page-wrapper .table-delete-btn:hover {
  background: #fef3f2;
}

.bills-page-wrapper .table-action-icon {
  font-size: 18px !important;
}

/* ─── Table Footer Summary ─────────────────────────────────────── */
.bills-page-wrapper .table-footer-label-row {
  background-color: #f9fafb !important;
}

.bills-page-wrapper .table-footer-label-row td {
  color: #475467 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-bottom: none !important;
  padding-top: 16px !important;
  padding-bottom: 8px !important;
}

.bills-page-wrapper .table-footer-value-row {
  background-color: #ffffff !important;
}

.bills-page-wrapper .table-footer-value-row td {
  color: #101828 !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  border-top: none !important;
  padding-top: 4px !important;
  padding-bottom: 16px !important;
}

/* ─── Pagination ───────────────────────────────────────────────── */
.bills-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}

/* ─── Responsive Design ────────────────────────────────────────── */
@media (max-width: 1200px) {
  .bill-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .bills-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .bills-page-wrapper .table-container th,
  .bills-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .bill-summary-cards {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .bills-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .bills-page-wrapper .table-container th,
  .bills-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .bills-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .bill-summary-cards {
    grid-template-columns: 1fr;
  }

  .bill-summary-card {
    padding: 14px 16px;
  }

  .bill-summary-value {
    font-size: 18px;
  }

  .bills-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .bills-page-wrapper .table-container th,
  .bills-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* ─── Status Legend ────────────────────────────────────────────── */
.status-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #eaecf0;
}

.legend-title {
  font-size: 13px;
  font-weight: 600;
  color: #344054;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475467;
}

.legend-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot.draft { background: #667085; }
.dot.pending { background: #F79009; }
.dot.paid { background: #12B76A; }
.dot.partial { background: #F64C00; }
.dot.overdue { background: #B42318; }
.dot.cancelled { background: #98A2B3; }

/* Bill confirm / ledger setup hint */
.bills-posting-hint {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #eff8ff;
  border: 1px solid #b2ddff;
  color: #194185;
  font-size: 14px;
  line-height: 1.5;
}

.bills-posting-hint code {
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
}

.vendor-credits-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.vendor-credits-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 950px;
}

.vendor-credits-page-wrapper .table-container thead {
  background: #ffffff !important;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.vendor-credits-page-wrapper .table-container th {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  vertical-align: middle;
  background: #ffffff !important;
  font-family: "Inter", sans-serif;
}

/* Column-specific widths for VendorCredits table (7 columns) */
.vendor-credits-page-wrapper .table-container th:nth-child(1),
.vendor-credits-page-wrapper .table-container td:nth-child(1) {
  width: 16%;
  min-width: 120px;
}

.vendor-credits-page-wrapper .table-container th:nth-child(2),
.vendor-credits-page-wrapper .table-container td:nth-child(2) {
  width: 14%;
  min-width: 100px;
}

.vendor-credits-page-wrapper .table-container th:nth-child(3),
.vendor-credits-page-wrapper .table-container td:nth-child(3) {
  width: 14%;
  min-width: 100px;
}

.vendor-credits-page-wrapper .table-container th:nth-child(4),
.vendor-credits-page-wrapper .table-container td:nth-child(4) {
  width: 16%;
  min-width: 120px;
}

.vendor-credits-page-wrapper .table-container th:nth-child(5),
.vendor-credits-page-wrapper .table-container td:nth-child(5) {
  width: 14%;
  min-width: 110px;
}

.vendor-credits-page-wrapper .table-container th:nth-child(6),
.vendor-credits-page-wrapper .table-container td:nth-child(6) {
  width: 16%;
  min-width: 120px;
}

.vendor-credits-page-wrapper .table-container th:nth-child(7),
.vendor-credits-page-wrapper .table-container td:nth-child(7) {
  width: 10%;
  min-width: 80px;
  text-align: left !important;
}

.vendor-credits-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  display: table;
  width: 100%;
}

.vendor-credits-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.vendor-credits-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.vendor-credits-page-wrapper .table-container tbody {
  display: table-row-group;
}

.vendor-credits-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.vendor-credits-page-wrapper .status-badge {
  font-size: 12px;
  font-weight: 600;
  text-align: left !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .vendor-credits-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .vendor-credits-page-wrapper .table-container table {
    min-width: 900px;
  }

  .vendor-credits-page-wrapper .table-container th,
  .vendor-credits-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .vendor-credits-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .vendor-credits-page-wrapper .table-container table {
    min-width: 800px;
  }

  .vendor-credits-page-wrapper .table-container th,
  .vendor-credits-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .vendor-credits-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .vendor-credits-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .vendor-credits-page-wrapper .table-container th,
  .vendor-credits-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .vendor-credits-page-wrapper .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Pagination container styling */
.vendor-credits-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
.invoice-field-error {
  color: #b91c1c;
  font-size: 12px;
  margin-top: 4px;
}

.invoice-tax-hint {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 12px;
}

.invoice-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  grid-column: 1 / -1;
}

.invoice-site-address-hint {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* Main container */
.add-invoice-page-wrapper {
  /* padding: 24px 32px; */
  background-color: #f9fafb;
  min-height: 180vh;
  font-family: "Inter", sans-serif;
}

/* Page Header Buttons */
.header-actions {
  display: flex;
  gap: 12px;
}

/* Card wrapper */
.invoice-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;

  padding: 0;
  margin-top: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sections */
.invoice-section {
  padding: 24px;
  border-bottom: 1px solid #f3f4f6;
}

.invoice-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
}

/* Grid layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.form-grid.two-cols {
  grid-template-columns: repeat(2, 1fr);
}

/* Creation Mode Radios */
.creation-mode-group {
  display: flex;
  gap: 24px;
  align-items: center;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}

.radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #2563eb;
}

/* Line Items Table */
.line-items-container {
  overflow: visible; /* Prevents clipping of the HSN dropdown */
  margin-top: 10px;
}

.line-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.line-items-table th {
  background-color: #f9fafb;
  color: #6b7280;
  font-weight: 500;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.line-items-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.line-items-table input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}

.item-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
}

.line-items-table .cell-check {
  width: 44px;
  text-align: center;
}

.invoice-line-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

.line-items-table .cell-sno {
  width: 40px;
  text-align: center;
}

.line-items-table .cell-type {
  width: 120px;
}

.line-items-table .cell-desc {
  min-width: 200px;
  max-width: 350px;
}

.line-items-table .cell-hsn {
  width: 160px;
}

.line-items-table .cell-hsn-svc {
  min-width: 260px;
  width: 280px;
  vertical-align: top;
  position: relative;
  z-index: 10; /* Ensure it stays above the next rows */
}

.invoice-hsn-svc-wrap {
  min-width: 240px;
  width: 100%;
}

.invoice-hsn-svc-wrap .premium-select-container {
  position: relative;
  z-index: 50; /* High enough to clear table borders and content */
  width: 100%;
}

.invoice-hsn-svc-wrap .premium-select-menu {
  max-height: 240px;
  overflow-y: auto;
}

.line-items-table .cell-qty {
  width: 80px;
}

.line-items-table .cell-uom {
  width: 80px;
}

.line-items-table .cell-rate {
  width: 120px;
}

.line-items-table .cell-discount {
  width: 100px;
}

.line-items-table .cell-tax {
  width: 80px;
}

.line-items-table .cell-amount {
  width: 120px;
  text-align: right;
  font-weight: 500;
}

.line-items-table .cell-action {
  width: 40px;
  text-align: center;
}

.invoice-flow-note {
  margin: 0 0 16px;
  padding: 12px 16px;
  font-size: 13px;
  color: #4b5563;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.invoice-panel {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 20px;
  background: #fafafa;
}

.invoice-source-panel .invoice-source-radios {
  margin-bottom: 16px;
}

.invoice-fetch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.invoice-fetch-grow {
  flex: 1 1;
  min-width: 220px;
}

.invoice-fetch-grow.lightweight {
  max-width: 320px;
}

.invoice-section-hint,
.invoice-section-sub {
  font-size: 12px;
  color: #6b7280;
  margin: 10px 0 0;
  line-height: 1.45;
}

.invoice-field-hint {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0 0;
}



.invoice-input-suffix {
  font-size: 13px;
  color: #6b7280;
  padding: 0 8px;
}

.invoice-display-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invoice-display-value {
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
}

.invoice-line-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.btn-add-item {
  margin-top: 0;
  background: none;
  border: 1px solid #e5e7eb;
  padding: 8px 16px;
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-remove-selected {
  background: #fff;
  border: 1px solid #fecaca;
  padding: 8px 16px;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-remove-selected:hover:not(:disabled) {
  background: #fef2f2;
}

.btn-remove-selected:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-add-item:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.btn-add-item-secondary {
  margin-top: 0;
  background: #fff;
  border: 1px dashed #d1d5db;
  padding: 8px 16px;
  border-radius: 8px;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
}

.btn-add-item-secondary:hover {
  border-color: #9ca3af;
  color: #374151;
}

.invoice-amount-input {
  width: 100%;
  min-width: 72px;
  max-width: 120px;
}

.invoice-amount-manual {
  border-color: #2563eb;
  background: #eff6ff;
}

.invoice-catalog-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.invoice-catalog-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
}

.invoice-catalog-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.invoice-catalog-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.invoice-catalog-modal-close {
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 0 4px;
}

.invoice-catalog-modal-close:hover {
  color: #111827;
}

.invoice-catalog-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.invoice-catalog-hint {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
}

/* Dynamic Catalog Box */
.invoice-catalog-detail-box {
  margin-top: 4px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.catalog-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e2e8f0;
}

.catalog-dynamic-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 12px;
}

.catalog-rate-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.invoice-catalog-modal-footer {
  padding: 12px 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #f3f4f6;
}

.delete-icon {
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s;
}

.delete-icon:hover {
  color: #ef4444;
}

/* Tax Breakdown Section Specifics */
.amount-in-words {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  margin-top: 4px;
}

/* Attachment Dropzone */
.attachment-dropzone {
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  background-color: #f9fafb;
  cursor: pointer;
  transition: all 0.2s;
}

.attachment-dropzone:hover {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.upload-icon {
  width: 32px;
  height: 32px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.upload-text {
  font-size: 14px;
  color: #374151;
}

.upload-text span {
  color: #2563eb;
  font-weight: 600;
}

.upload-subtext {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* Direct invoice: optional append lines from multiple customer SOs (still DIRECT on save) */
.invoice-direct-so-import {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.invoice-direct-so-import-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 8px;
  color: #111827;
}

.invoice-direct-so-import-note {
  margin-bottom: 12px !important;
}

.invoice-direct-so-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}

.invoice-direct-so-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.invoice-direct-so-row:last-child {
  border-bottom: none;
}

.invoice-direct-so-row input {
  margin-top: 2px;
}

.invoice-direct-so-actions {
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid.two-cols {
    grid-template-columns: 1fr;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

.add-vendor-container {
  padding: 0px !important;
  background-color: #f6f8fb;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vendor-form-content {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px 32px;
  margin-top: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  width: 100%;
  /* Flex 1 is provided by standard-form-scrollable in Layout.css, 
     but we'll ensure it flows correctly. */
  display: flex;
  flex-direction: column;
}

.form-section {
  margin-bottom: 40px;
}

.form-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 14px !important;
  /* Force space below the border */
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f4f7;
  display: block;
}

.form-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-areas: none !important;
  grid-gap: 12px 24px !important;
  gap: 12px 24px !important;
  /* Increased vertical gap slightly */
  width: 100% !important;
  margin-top: 10px;
  /* Extra breathing room from the border */
}

.header-actions {
  display: flex !important;
  gap: 16px !important;
  /* Explicit space between Cancel and Save/Update */
  align-items: center;
}

/* Ensure children (form fields) are treated as grid items and don't expand */
.form-grid>* {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: auto !important;
  grid-column: span 1 !important;
}

/* Adjust breakpoints */
@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Error Banner ────────────────────────────────────────────── */
.vendor-form-error {
  padding: 12px 16px;
  margin-top: 8px;
  background-color: #fef3f2;
  color: #b42318;
  border: 1px solid #fecdca;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.input-error-text {
  color: #d92d20;
  font-size: 11px;
  margin-top: -2px;
  font-weight: 500;
}

/* Radio Group and Stars Alignment */
.radio-group-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.radio-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054 !important;
  margin-bottom: 2px;
}

.rating-input {
  display: flex;
  gap: 4px;
  cursor: pointer;
}

.star-filled {
  color: #fdb022;
  font-size: 20px !important;
}

.star-outline {
  color: #d0d5dd;
  font-size: 20px !important;
}

/* ── File Upload ─────────────────────────────────────────────── */
.file-upload-field {
  grid-column: span 1;
}

.upload-dropzone {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  /* background: #fcfcfd; */
  cursor: pointer;
  transition: all 0.2s;
  min-height: 100px;
}

.upload-dropzone:hover {
  background: #f9fafb;
  border-color: #2563eb;
}

.upload-icon {
  color: #667085;
  font-size: 24px !important;
  margin-bottom: 4px;
}

.upload-link {
  color: #2563eb;
  font-weight: 600;
  cursor: pointer;
}

.upload-hint {
  display: block;
  font-size: 11px;
  color: #667085;
  margin-top: 4px;
}

.uploaded-file-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0;
}

.uploaded-file-name {
  font-size: 13px;
  color: #027a48;
  font-weight: 500;
}

.remove-file-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #fecdca;
  border-radius: 6px;
  background: #fef3f2;
  color: #b42318;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.remove-file-btn:hover {
  background: #fee4e2;
}

/* ── Product Config Table ────────────────────────────────────── */
.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f4f7;
  margin-bottom: 16px;
}

.add-product-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #2563eb;
  border-radius: 8px;
  background: #eff4ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.add-product-btn:hover {
  background: #dbeafe;
}

.product-config-table-wrapper {
  overflow-x: auto;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  margin-top: 8px;
}

.product-config-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1250px;
}

.product-config-table th {
  background: #f9fafb;
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  border-bottom: 1px solid #eaecf0;
  white-space: nowrap;
}

.product-config-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eaecf0;
  vertical-align: middle;
}

.table-cell-input,
.table-cell-select {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #101828;
  transition: border-color 0.15s;
}

.table-cell-input:focus,
.table-cell-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.table-cell-input::placeholder {
  color: #98a2b3;
}

.table-cell-input:disabled,
.table-cell-select:disabled {
  background: #f9fafb;
  color: #667085;
  cursor: not-allowed;
  border-color: #e5e7eb;
}

.table-cell-input.input-error,
.table-cell-select.input-error {
  border-color: #fda29b !important;
  background-color: #fffbfa !important;
  box-shadow: 0 0 0 2px rgba(240, 68, 56, 0.1) !important;
}

.delete-row-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #98a2b3;
  cursor: pointer;
  transition: all 0.15s;
}

.delete-row-btn:hover {
  background: #fef3f2;
  color: #b42318;
}

.empty-products-message {
  text-align: center;
  padding: 24px;
  color: #98a2b3;
  font-size: 14px;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
  margin-top: 8px;
}

/* ── Contract section animation ──────────────────────────────── */
.contract-section {
  animation: sectionSlideIn 0.25s ease-out;
}

@keyframes sectionSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form Field Adjustments */
.add-vendor-container .form-label {
  margin-bottom: 4px;
  font-size: 13.5px;
}

.add-vendor-container .form-input,
.add-vendor-container .form-select {
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d0d5dd;
  font-size: 13.5px;
  color: #101828;
}

.add-vendor-container .success-snackbar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #039855;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: snackSlideIn 0.3s ease-out;
}

@keyframes snackSlideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive */
@media (max-width: 1200px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .file-upload-field {
    grid-column: span 1;
  }

  .section-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
/* -- Custom Toggle Design -------------------------------------- */
.custom-toggle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 16px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  height: 40px;
  background: #fff;
  margin-top: 25px; /* Aligns box with inputs that have labels above */
  transition: all 0.2s;
  box-sizing: border-box;
}

.custom-toggle-box:hover:not(.disabled) {
  border-color: #2563eb;
  background: #fcfcfd;
}

.custom-toggle-box.disabled {
  background: #f9fafb;
  border-color: #e5e7eb;
  cursor: not-allowed;
  opacity: 0.8;
}

.toggle-label {
  font-size: 13.5px;
  font-weight: 500;
  color: #344054;
}

.custom-toggle-box .MuiSwitch-root {
  margin-right: -4px;
}


/* Main Wrapper */
.add-purchase-bill-wrapper {
  background-color: #f9fafb;
  width: 100%;
  font-family: "Inter", sans-serif;
}

/* Page Header Actions */
.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Form Container */
.bill-form-container {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-section {
  background-color: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaecf0;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

/* Radio Group Styling */
.radio-group-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-options {
  display: flex;
  gap: 16px;
  padding-top: 8px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #344054;
}

.radio-item input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Line Items Table */
.line-items-table-wrapper {
  overflow-x: auto;
  margin-top: 8px;
}

.line-items-table {
  width: 100%;
  border-collapse: collapse;
}

.line-items-table th {
  background-color: #f9fafb;
  padding: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #475467;
  text-align: left;
  border-bottom: 1px solid #eaecf0;
}

.line-items-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #eaecf0;
}

.table-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  outline: none;
  box-sizing: border-box;
}

.table-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.table-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.table-input-prefix {
  position: absolute;
  left: 10px;
  font-size: 14px;
  color: #667085;
}

.table-input-suffix {
  position: absolute;
  right: 10px;
  font-size: 14px;
  color: #667085;
}

.table-input.has-prefix {
  padding-left: 24px;
}

.table-input.has-suffix {
  padding-right: 24px;
}

/* Restructured Line Items */
.line-items-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 16px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    background: #fff;
}

.line-items-header {
    display: flex;
    background-color: #f9fafb;
    border-bottom: 1px solid #eaecf0;
    width: 100%;
}

.line-items-header > div {
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #475467;
    text-align: left;
}

.line-items-body {
    width: 100%;
}

.line-item-row {
    display: flex;
    border-bottom: 1px solid #eaecf0;
    width: 100%;
    align-items: center;
}

.line-item-row:last-child {
    border-bottom: none;
}

.line-item-row > div {
    padding: 12px 14px;
}

/* Column Widths - Expansive Layout */
.col-sr { width: 60px; flex-shrink: 0; text-align: center; font-size: 13px; color: #667085; }
.col-product { flex: 2 1; min-width: 200px; } /* Grows to fill space */
.col-hsn { width: 140px; flex-shrink: 0; }
.col-qty { width: 100px; flex-shrink: 0; }
.col-uom { width: 100px; flex-shrink: 0; }
.col-rate { width: 150px; flex-shrink: 0; }
.col-disc { width: 100px; flex-shrink: 0; }
.col-tax { width: 180px; flex-shrink: 0; }
.col-amount { width: 160px; flex-shrink: 0; font-size: 14px; font-weight: 600; color: #101828; text-align: right; }
.col-action { width: 60px; flex-shrink: 0; text-align: center; }

.line-items-header .col-amount { text-align: right; }

.row-delete-btn {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.row-delete-btn:hover {
    background: #f2f4f7;
    color: #475467;
}

.add-row-btn {
  margin-top: 16px;
  background: none;
  border: none;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.add-row-btn:hover {
  text-decoration: underline;
}

/* Attachments Layout */
.attachments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-gap: 24px;
  gap: 24px;
  align-items: flex-start;
}

.upload-box-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.remarks-container {
  grid-column: span 1;
}

/* Responsive */
@media (max-width: 1024px) {

  .form-grid-3,
  .attachments-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .form-grid-3,
  .attachments-grid {
    grid-template-columns: 1fr;
  }

  .header-actions {
    flex-wrap: wrap;
  }
}

/* Bill line tax column + aggregate (product taxes.taxDetails) */
.bill-line-tax-cell {
  vertical-align: top;
  font-size: 12px;
}

.bill-tax-total-pct {
  font-weight: 600;
  color: #101828;
}

.bill-tax-type-list {
  margin: 4px 0 0;
  padding-left: 16px;
  color: #475467;
  font-size: 11px;
}

.bill-tax-type-muted {
  color: #98a2b3;
  font-size: 12px;
}

.bill-tax-aggregate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.bill-tax-aggregate-table th,
.bill-tax-aggregate-table td {
  border: 1px solid #eaecf0;
  padding: 10px 12px;
  text-align: left;
}

.bill-tax-aggregate-table th {
  background: #f9fafb;
  font-weight: 600;
}

.bill-tax-aggregate-empty {
  color: #667085;
  font-size: 13px;
  margin: 0;
}

.bill-breakdown-gst-block {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eaecf0;
}

.bill-breakdown-gst-heading {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
}

.bill-breakdown-total-gst-row {
  margin-top: 16px;
}

.bill-breakdown-hint {
  margin: -8px 0 16px 0;
  font-size: 13px;
  color: #667085;
  line-height: 1.45;
}

.bill-breakdown-net-row {
  max-width: 100%;
}

/* AddSalesOrder.css */

.aso-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  overflow-y: auto;
}

.aso-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.aso-card {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  padding: 24px;
}

.aso-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
}

.aso-divider {
  border: 0;
  border-top: 1px solid #E5E7EB;
  margin: 0 0 24px 0;
}

.aso-form-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aso-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aso-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.aso-required {
  color: #0066FF; /* Blue asterisk based on reference, or typical red. Often it's blue in this project */
}

.aso-radio-group {
  display: flex;
  gap: 24px;
  align-items: center;
}

.aso-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.aso-radio-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #D1D5DB;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.aso-radio-label input[type="radio"]:checked {
  border-color: #0066FF;
  border-width: 5px; /* Creates the blue dot effect */
}

.aso-radio-text {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.aso-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.aso-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.aso-mt-4 {
  margin-top: 16px;
}

.aso-mt-6 {
  margin-top: 24px;
}

.aso-dynamic-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.aso-shortcut {
  background-color: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
}

/* New Line Items CSS */

.aso-section-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aso-section-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #E5E7EB;
}

.aso-table-wrapper {
  overflow-x: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background-color: #FAFAFA;
}

.aso-custom-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.aso-custom-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #4B5563;
  border-bottom: 1px solid #E5E7EB;
  white-space: nowrap;
}

.aso-custom-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: #374151;
  vertical-align: middle;
  border-bottom: 1px solid #E5E7EB;
}

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

.aso-product-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aso-product-img-placeholder,
.aso-product-img {
  width: 32px;
  height: 32px;
  background-color: #E5E7EB;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
}

.aso-product-img-placeholder {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%239CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle><polyline points=\"21 15 16 10 5 21\"></polyline></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.aso-flex-start {
  display: flex;
  justify-content: flex-start;
}

/* Dynamic Multi-Site & Service Styles */

.aso-site-card {
  border: 1px solid #1570EF;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  background: #ffffff;
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
}

.aso-site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F3F4F6;
}

.aso-site-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aso-remove-btn {
  color: #F04438;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s;
}

.aso-remove-btn:hover {
  background: #FEF3F2;
}

.aso-add-btn {
  background: #F2F4F7;
  color: #344054;
  border: 1px solid #D0D5DD;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.aso-add-btn:hover {
  background: #EAECF0;
}

.aso-service-block {
  margin-top: 20px;
  padding: 16px;
  background: #F9FAFB;
  border-radius: 8px;
}

.aso-chemical-section {
  margin-top: 16px;
  border-top: 1px dashed #D0D5DD;
  padding-top: 16px;
}

.aso-chemical-title {
  font-size: 14px;
  font-weight: 600;
  color: #475467;
  margin-bottom: 12px;
}

.aso-summary-card {
  margin-top: 32px;
  width: 100%;
}

.aso-summary-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  overflow: hidden;
}

.aso-summary-table th {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #667085;
  background: #F9FAFB;
  text-align: left;
  border-bottom: 1px solid #EAECF0;
  border-right: 1px solid #EAECF0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aso-summary-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: #101828;
  font-weight: 500;
  border-right: 1px solid #EAECF0;
}

.aso-summary-table th:last-child,
.aso-summary-table td:last-child {
  border-right: none;
}

.aso-summary-grand-total-cell {
  background: #F9FAFB;
}

td.aso-summary-grand-total-cell {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #101828 !important;
}

.aso-discount-group {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #D0D5DD;
  border-radius: 6px;
  width: -webkit-fit-content;
  width: fit-content;
  overflow: hidden;
  transition: border-color 0.2s;
}

.aso-discount-group:focus-within {
  border-color: #7F56D9;
  box-shadow: 0 0 0 4px #F4EBFF;
}

.aso-discount-group input.aso-table-input {
  border: none !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  width: 60px !important;
  height: 32px !important;
  outline: none !important;
  background: transparent !important;
  text-align: center;
}

.aso-discount-type-select {
  border: none !important;
  border-left: 1px solid #D0D5DD !important;
  padding: 0 8px !important;
  font-size: 13px !important;
  background: #F9FAFB !important;
  height: 32px !important;
  color: #475467 !important;
  cursor: pointer;
  outline: none !important;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
}

.aso-info-label {
  display: inline-block;
  background: #EFF8FF;
  color: #175CD3;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

.ra-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f9fafb;
}

.ra-content {
  overflow-y: auto;
}

.ra-actions {
  display: flex;
  gap: 12px;
}

.ra-reject-btn {
  background: #ffffff;
  color: #d32f2f;
  border: 1px solid #fda29b;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.ra-reject-btn:hover {
  background: #fef3f2;
}

.ra-hold-btn {
  background: #ffffff;
  color: #b54708;
  border: 1px solid #f79009;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.ra-hold-btn:hover {
  background: #fffaeb;
}

.ra-approve-btn {
  background: #1570ef;
  color: #ffffff;
  border: 1px solid #1570ef;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.ra-approve-btn:disabled,
.ra-reject-btn:disabled,
.ra-hold-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ra-approve-btn:hover {
  background: #175cd3;
}

.ra-box {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.ra-box-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaecf0;
}

.ra-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.ra-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.ra-dropdown-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.ra-dropdown-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.ra-dropdown-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.ra-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  margin-top: 4px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.ra-dropdown-item {
  padding: 10px 14px;
  font-size: 14px;
  color: #101828;
  cursor: pointer;
}

.ra-dropdown-item:hover {
  background: #f9fafb;
}

.ra-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ra-radio-group-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.ra-radio-options {
  display: flex;
  gap: 24px;
}

.ra-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #101828;
  cursor: pointer;
}

.ra-radio-label input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #1570ef;
}

.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }

/* Read-only field display */
.ra-read-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ra-read-label {
  font-size: 12px;
  font-weight: 500;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ra-read-value {
  font-size: 14px;
  font-weight: 500;
  color: #101828;
}

/* Items table */
.ra-items-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: hidden;
}

.ra-items-table th {
  text-align: left;
  padding: 10px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #eaecf0;
  font-size: 12px;
  font-weight: 600;
  color: #667085;
}

.ra-items-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f2f4f7;
  font-size: 13px;
  color: #344054;
}

.ra-items-table tr:last-child td {
  border-bottom: none;
}

/* Qty input in approval table */
.ra-qty-input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 13px;
  color: #101828;
  text-align: center;
}

.ra-qty-input:focus {
  outline: none;
  border-color: #1570ef;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.1);
}

/* Add Request Approval — extends shared RequestApproval card/grid tokens */

.ara-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Figma: Reject = outline primary blue */
.secondary-button.ara-reject-outline {
  color: #1570ef;
  border-color: #1570ef;
  background: #ffffff;
}

.secondary-button.ara-reject-outline:hover {
  background: #eff8ff;
  border-color: #175cd3;
  color: #175cd3;
}

/* Tighten form fields inside 3-column grids */
.ara-grid-3 .form-field {
  margin-bottom: 0;
}

.ara-span-2 {
  grid-column: span 2;
}

/* Third column intentionally empty (Figma request details row) */
.ara-grid-cell-spacer {
  min-height: 1px;
}

/* Compact selects/inputs inside DataTable cells */
.ara-table-cell-input {
  width: 100%;
  min-width: 64px;
}

.ara-table-cell-input .form-field {
  margin-bottom: 0;
}

.ara-table-cell-input .form-label {
  display: none;
}

.ara-table-cell-input .form-input,
.ara-table-cell-input .form-select {
  padding: 8px 10px;
  font-size: 13px;
}

.ara-product-table-wrap {
  margin-top: 16px;
}

.ara-product-table-wrap .data-table-wrapper {
  min-height: auto !important;
}

/* Status Badges */
.ara-status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ara-status-badge.status-green {
  background: #ecfdf3;
  color: #027a48;
}

.ara-status-badge.status-yellow {
  background: #fffaeb;
  color: #b54708;
}

/* Hold Button Styles */
.secondary-button.ara-hold-btn {
  background: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
}

.secondary-button.ara-hold-btn:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

/* Stock Type Selector (Matching User Image) */
.ara-type-selector {
  padding-bottom: 8px;
  border-bottom: 1px solid #f2f4f7;
}

.ara-type-chk-group {
  display: flex;
  gap: 24px;
  align-items: center;
}

.ara-type-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #344054;
  -webkit-user-select: none;
          user-select: none;
}

.ara-type-chk input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #1570ef;
}

/* Merged Table Styles */
.ara-product-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ara-product-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  flex-shrink: 0;
}

/* Dynamic Avatar Colors based on letter */
.avatar-b { background: #2e90fa; }
.avatar-c { background: #ee46bc; }
.avatar-p { background: #7a5af8; }
.avatar-s { background: #f79009; }
.avatar-i { background: #12b76a; }

.ara-product-details {
  display: flex;
  flex-direction: column;
}

.ara-product-name {
  font-weight: 600;
  color: #101828;
  font-size: 14px;
}

.ara-product-meta {
  font-size: 12px;
  color: #667085;
}

.ara-merged-qty-cell {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
}

.ara-req-val {
  font-weight: 500;
  color: #344054;
  min-width: 24px;
  text-align: center;
}

.ara-appr-input-wrap {
  flex: 1 1;
  max-width: 100px;
}

.merged-approval-table .data-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #475467;
}

.merged-approval-table .data-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}

.sod-page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 24px;
}

/* Tabs */
.sod-tabs-container {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid #E5E7EB;
  background-color: #fff;
  padding: 0 24px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  margin-top: 16px;
}

.sod-tab {
  padding: 16px 0;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.sod-tab:hover {
  color: #111827;
}

.sod-tab.active {
  color: #0066FF;
}

.sod-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #0066FF;
  border-radius: 2px 2px 0 0;
}

/* Tab Content */
.sod-tab-content {
  margin: 24px 0px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.sod-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

/* Execution & Delivery Status Tables */
.sod-grid-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sod-grid-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.sod-table-wrapper {
  overflow-x: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background-color: #ffffff;
}

.sod-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.sod-table th {
  text-align: left;
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 600;
  color: #4B5563;
  border-bottom: 1px solid #E5E7EB;
  background-color: #FAFAFA;
  white-space: nowrap;
}

.sod-table td {
  padding: 16px 24px;
  font-size: 14px;
  color: #4B5563;
  vertical-align: middle;
  border-bottom: 1px solid #E5E7EB;
}

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

.sod-text-right {
  text-align: right !important;
}

.sod-action-icon {
  color: #9CA3AF;
  cursor: pointer;
}

.sod-action-icon:hover {
  color: #4B5563;
}

/* Status Pills */
.sod-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #E5E7EB;
  background-color: #ffffff;
}

.sod-pill-icon {
  font-size: 12px;
}

/* Status Pill Colors (Can expand if needed) */
.sod-status-done {
  color: #374151;
}

.sod-status-planned {
  color: #374151;
}

.sod-status-pending {
  color: #374151;
}

.sod-status-in-transit {
  color: #374151;
}

.sod-link {
  color: #0066FF;
  text-decoration: none;
}

.sod-link:hover {
  text-decoration: underline;
}

/* Summary Section */
.sod-summary-section {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  padding: 24px;
}

.sod-summary-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
}

.sod-summary-divider {
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 16px;
}

.sod-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px;
  gap: 24px;
  background-color: #FAFAFA;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
}

.sod-summary-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sod-summary-label {
  font-size: 12px;
  font-weight: 600;
  color: #4B5563;
}

.sod-summary-value {
  font-size: 14px;
  color: #374151;
}

.sod-placeholder-card {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  padding: 48px;
  text-align: center;
  color: #6B7280;
}
/* CancelSaleOrderModal.css */
.csom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.csom-modal {
  background-color: #ffffff;
  border-radius: 12px;
  width: 480px;
  max-width: 90%;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.csom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E7EB;
}

.csom-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.csom-close-btn {
  background: none;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.csom-close-btn:hover {
  color: #4B5563;
}

.csom-body {
  padding: 24px;
}

.csom-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
  background-color: #FAFAFA;
  border-radius: 0 0 12px 12px;
}

.csom-footer-full {
  padding: 0 24px 24px 24px;
}

.csom-btn-outline {
  padding: 8px 16px;
  border: 1px solid #D1D5DB;
  background-color: #ffffff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.csom-btn-outline:hover {
  background-color: #F3F4F6;
}

.csom-btn-danger {
  padding: 8px 16px;
  background-color: #DC2626;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.csom-btn-danger:hover {
  background-color: #B91C1C;
}

.csom-btn-danger-full {
  width: 100%;
  padding: 12px;
  background-color: #DC2626;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.csom-btn-danger-full:hover {
  background-color: #B91C1C;
}

/* Step 2 Details Styling */
.csom-details-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.csom-detail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  font-size: 14px;
  color: #374151;
}

.csom-detail-label {
  font-weight: 500;
}

.csom-detail-value {
  font-weight: 400;
}

.csom-detail-section-title {
  font-weight: 600;
  color: #111827;
  margin-top: 8px;
  margin-bottom: 4px;
}

.csom-error-message {
  background-color: #FEF2F2;
  border-left: 4px solid #DC2626;
  padding: 12px;
  border-radius: 4px;
}

.csom-error-message strong {
  display: block;
  color: #991B1B;
  font-size: 14px;
  margin-bottom: 4px;
}

.csom-error-message p {
  color: #B91C1C;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}
.sales-order-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}

.sales-order-table-container {
    background: white;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    padding: 0;
    overflow: hidden;
}

/* Match the exact border color of DataTable if needed */
.sales-order-table-container .table-container {
    border: none;
    box-shadow: none;
}

/* Services Table Specific Styling - Scoped to Services Page */

.services-page-wrapper .services-table-wrapper {
  width: 100% !important;
  overflow-x: auto !important;
  /* Swipe enabled as per user request */
  overflow-y: visible !important;
}

.services-page-wrapper .services-table-wrapper .data-table {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.services-page-wrapper .services-table-wrapper .table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Reduce spacing between header and table */
.services-page-wrapper.standard-page-container {
  gap: 8px !important;
}

.services-page-wrapper .page-header {
  margin-bottom: 4px !important;
}

.services-page-wrapper .data-table {
  margin-top: 0 !important;
}

.services-page-wrapper .services-table-wrapper .data-table table {
  table-layout: auto !important;
  /* Allow natural sizing */
  width: 100% !important;
  min-width: 1100px !important;
}

/* Ensure consistent alignment */
.services-page-wrapper .services-table-wrapper .data-table thead th,
.services-page-wrapper .services-table-wrapper .data-table tbody td {
  text-align: left !important;
  padding: 14px 16px !important;
  white-space: nowrap !important;
}

/* Override the tbody display: block that breaks alignment */
.services-page-wrapper .services-table-wrapper .data-table tbody {
  display: table-row-group !important;
  width: 100% !important;
}

/* Override the tbody tr display: table that breaks alignment */
.services-page-wrapper .services-table-wrapper .data-table tbody tr {
  display: table-row !important;
  width: auto !important;
  margin-bottom: 0 !important;
}

.services-page-wrapper .services-table-wrapper .data-table thead {
  display: table-header-group !important;
}

.services-page-wrapper .services-table-wrapper .data-table thead th {
  font-family: "Inter", sans-serif;
  color: #535862;
}

/* Removed outdated nth-child column width CSS because column structure has changed; widths are now driven by DataTable JS config */

/* Pagination Sections - Scoped */
.services-page-wrapper .table-pagination-section {
  width: 100%;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
}

.services-page-wrapper .services-table-wrapper+.pagination-wrapper,
.services-page-wrapper .services-table-wrapper~.pagination-wrapper {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 8px;
}

/* Stacked Header and Cell */
.service-header-stacked {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.service-header-sub {
  font-size: 11px;
  color: #667085;
  font-weight: 400;
  margin-top: 2px;
}

.service-cat-cell {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.service-cat-main {
  font-weight: 500;
  color: #101828;
  font-size: 14px;
}

.service-cat-sub {
  font-size: 12px;
  color: #667085;
  font-weight: 400;
}

/* Price Type Badges */
.svc-price-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.svc-price-badge.fixed,
.svc-price-badge.area_based,
.svc-price-badge.inspection {
  background-color: #F9FAFB;
  color: #344054;
  border: 1px solid #EAECF0;
}

/* Status Badges */
.svc-status-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.svc-status-badge.active {
  background-color: #ECFDF3;
  color: #027A48;
}

.svc-status-badge.inactive {
  background-color: #F2F4F7;
  color: #344054;
}
/* Filter Panel Styles */
.filter-panel {
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: -webkit-fit-content;
  height: fit-content;
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}

.filter-panel-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eaecf0;
}

.filter-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
}

.filter-panel-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 480px;
  overflow-y: auto;
}

/* Filter Sections */
.filter-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Search Box */
.filter-search-container {
  position: relative;
  width: 100%;
}

.filter-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  outline: none;
  transition: all 0.2s;
}

.filter-search-input:focus {
  border-color: #84caff;
  box-shadow: 0px 0px 0px 4px #eff8ff;
}

.filter-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #667085;
}

/* Tags/Chips */
.filter-tags-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tag {
  padding: 4px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
  transition: all 0.2s;
  background: #ffffff;
}

.filter-tag:hover {
  background: #f9fafb;
}

.filter-tag.active {
  background: #eff8ff;
  border-color: #84caff;
  color: #175cd3;
}

/* List with Counts */
.filter-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.filter-list-count {
  font-size: 12px;
  color: #667085;
  background: #f9fafb;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

/* Star Rating */
.filter-rating-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
  background: #ffffff;
}

.filter-rating-item.active {
  background: #eff8ff;
  border-color: #84caff;
  color: #175cd3;
}

.filter-star-icon {
  color: #1570ef;
}

/* Date Range */
.filter-date-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-date-input-wrap {
  position: relative;
  flex: 1 1;
}

.filter-date-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
}

.filter-calendar-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #667085;
}

/* Slider/Range */
.filter-range-container {
  padding: 0 8px;
}

.filter-range-label {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1570ef;
}

.filter-slider {
  width: 100%;
  accent-color: #1570ef;
  height: 4px;
  background: #eaecf0;
  border-radius: 2px;
  cursor: pointer;
}

/* Toggles */
.filter-toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.filter-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.filter-slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2f4f7;
  transition: .4s;
  border-radius: 20px;
}

.filter-slider-round:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);
}

input:checked+.filter-slider-round {
  background-color: #1570ef;
}

input:checked+.filter-slider-round:before {
  transform: translateX(16px);
}

/* Checkboxes */
.filter-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

.filter-checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.filter-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  accent-color: #1570ef;
}

/* Footer Buttons */
.filter-panel-footer {
  padding: 16px;
  border-top: 1px solid #eaecf0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-btn-reset {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
}

.filter-btn-apply {
  background: #1570ef;
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.filter-btn-apply:hover {
  background: #175cd3;
}

/* MultiSelect Dropdown Specific */
.multiselect-wrap {
  position: relative;
  width: 100%;
}

.multiselect-trigger {
  width: 100%;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #101828;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.multiselect-selected-text {
  color: #101828;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
}

.multiselect-placeholder {
  color: #667085;
}

.multiselect-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  z-index: 1000;
  padding: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.multiselect-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.multiselect-item:hover {
  background: #f9fafb;
}

.multiselect-item.selected {
  background: #f9fafb;
}

.filter-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.active-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #eff8ff;
  border: 1px solid #84caff;
  color: #175cd3;
  padding: 2px 8px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.active-chip .remove-chip {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.multiselect-item.focused {
  background: #F9FAFB;
  outline: 2px solid #2B5FE7;
  outline-offset: -2px;
}
.multiselect-search-container {
  position: -webkit-sticky;
  position: sticky;
  top: -4px;
  background: #ffffff;
  padding: 8px;
  border-bottom: 1px solid #eaecf0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}

.multiselect-search-input {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  color: #101828;
}

.multiselect-search-input:focus {
  border-color: #84caff;
  box-shadow: 0px 0px 0px 3px #eff8ff;
}

.svc-multi-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.svc-multi-box {
  position: relative;
  min-height: 44px;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.svc-multi-box.open,
.svc-multi-box:focus-within {
  border-color: #2B5FE7;
  box-shadow: 0 0 0 3px rgba(43, 95, 231, 0.12);
}

.svc-chips-row {
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.svc-placeholder {
  font-size: 14px;
  color: #98A2B3;
}

.svc-chip {
  background: #EFF8FF;
  border: 1px solid #B2DDFF;
  border-radius: 16px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #175CD3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.svc-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: #175CD3;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
}

.svc-chip-x:hover {
  color: #D92D20;
}

.svc-arrow {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.svc-arrow.flipped {
  transform: rotate(180deg);
}

/* Dropdown */
.svc-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}

.svc-dd-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: #98A2B3;
}

.svc-dd-option {
  padding: 10px 14px;
  font-size: 14px;
  color: #344054;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.1s;
}

.svc-dd-option:hover {
  background: #F9FAFB;
}

.svc-dd-option.selected {
  background: #EEF4FF;
  color: #2B5FE7;
  font-weight: 600;
}

.svc-dd-add-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #175CD3;
  cursor: pointer;
  border-top: 1px solid #EAECF0;
  background: #F9FAFB;
}

.svc-dd-add-custom:hover {
  background: #EFF8FF;
}

.svc-dd-option.focused {
  background: #F9FAFB;
  outline: 2px solid #2B5FE7;
  outline-offset: -2px;
}

.svc-dd-add-custom.focused {
  background: #EFF8FF;
  outline: 2px solid #2B5FE7;
  outline-offset: -2px;
}

.tax-page-wrapper .searchbar-main {
  display: none;
}

.tax-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #ffffff;
  border-bottom: 1px solid #eaecf0;
  border-radius: 12px 12px 0 0;
}

.tax-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 350px;
}

.tax-search-icon {
  position: absolute;
  left: 12px;
  color: #667085;
  font-size: 20px;
}

.tax-search-input {
  width: 100%;
  height: 44px;
  padding: 0 45px 0 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.tax-search-input::placeholder {
  color: #667085;
}

.tax-search-shortcut {
  position: absolute;
  right: 12px;
  padding: 2px 6px;
  background: #fcfcfd;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font-size: 12px;
  color: #667085;
  font-weight: 500;
}

.tax-filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}



.date-picker-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
}

.tax-calendar-icon {
  color: #667085;
  font-size: 20px;
  margin-right: 8px;
}

.tax-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border: 1px solid #eaecf0;
}

.tax-page-wrapper .table-container table {
  width: 100%;
  border-collapse: collapse;
}

.tax-page-wrapper .table-container thead th {
  background: #fcfcfd;
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: #475467;
  border-bottom: 1px solid #eaecf0;
  text-transform: none;
  font-family: inherit;
}

.tax-page-wrapper .table-container td {
  padding: 16px;
  font-size: 14px;
  color: #101828;
  border-bottom: 1px solid #eaecf0;
  vertical-align: middle;
}

.tax-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
}

.tax-page-wrapper .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* Action Heading alignment unified */
.tax-page-wrapper .table-container th:last-child {
  text-align: center;
}

.tax-page-wrapper .table-container td:last-child .action-btns {
  justify-content: center;
}

/* Pagination container styling */
.tax-page-wrapper .pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}

.hsn-page-wrapper .searchbar-main {
  display: none;
}

.hsn-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #ffffff;
  border-bottom: 1px solid #eaecf0;
  border-radius: 12px 12px 0 0;
}

.hsn-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 350px;
}

.hsn-search-icon {
  position: absolute;
  left: 12px;
  color: #667085;
  font-size: 20px !important;
}

.hsn-search-input {
  width: 100%;
  height: 44px;
  padding: 0 45px 0 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.hsn-search-input::placeholder {
  color: #475467;
}

.hsn-search-shortcut {
  position: absolute;
  right: 12px;
  padding: 2px 6px;
  background: #fcfcfd;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font-size: 12px;
  color: #667085;
  font-weight: 500;
}

.hsn-filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hsn-error-text {
  color: #ef4444;
  font-size: 14px;
  margin-top: 8px;
  font-weight: 500;
}

.hsn-calendar-icon {
  color: #667085;
  font-size: 20px !important;
}

.date-picker-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
}
.multi-select-placeholder {
  color: #475467;
  background-color: #ffffff;
  font-size: 14px;
  flex: 1 1;
}



/* Branch Multi-select Styles */
.branch-multi-select {
  position: relative;
}

.multi-select-trigger {
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  align-items: center;
  cursor: pointer;
  border-color: #D0D5DD;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  background-color: #fff;
  transition: all 0.2s ease;
}

.multi-select-trigger.has-selection {
  padding: 6px 12px;
}

.multi-select-trigger.is-open {
  border-color: #1570ef;
  box-shadow: 0 0 0 4px #EFF4FF;
}

.multi-select-trigger.is-view {
  cursor: not-allowed;
  background-color: #f9fafb;
}

.multi-select-placeholder {
  color: #667085;
  background-color: #ffffff;
  font-size: 14px;
  flex: 1 1;
}

.multi-select-spacer {
  flex: 1 1;
}

.branch-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #EFF4FF;
  border: 1px solid #B2CCFF;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 500;
  color: #175CD3;
}

.tag-close-icon {
  cursor: pointer;
  color: #175CD3;
  font-size: 14px;
  transition: opacity 0.2s;
}

.tag-close-icon:hover {
  opacity: 0.7;
}

.branch-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}

.branch-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 14px;
  color: #344054;
  cursor: pointer;
  transition: all 0.1s;
  border-radius: 6px;
}

.branch-dropdown-item:hover {
  background: #f9fafb;
}

.branch-dropdown-item.selected {
  background: #EFF4FF;
  color: #175CD3;
  font-weight: 500;
}

.check-icon-dropdown {
  color: #1570ef;
  font-size: 16px;
}

.chevron-icon {
  color: #667085;
  transition: transform 0.2s;
  font-size: 18px;
}

.chevron-icon.rotate {
  transform: rotate(180deg);
}

/* Redesigned Form Styles */
.hsn-form-card {
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #eaecf0;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.hsn-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

/* Enforce uniform height for perfect alignment */
.hsn-form-grid .form-input,
.hsn-form-grid .form-select,
.hsn-form-grid .hsn-radio-group {
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
}

.hsn-form-grid .multi-select-trigger {
  min-height: 44px !important;
  height: auto !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

/* Radio Button Group Styles */
.hsn-radio-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hsn-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #344054;
  cursor: pointer;
  font-weight: 500;
}

.hsn-radio-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #D0D5DD;
  position: relative;
  transition: all 0.2s ease;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  outline: none;
  flex-shrink: 0;
}

.hsn-radio-label input[type="radio"]:checked {
  border-color: #1570EF;
  background-color: #fff;
}

.hsn-radio-label input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1570EF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

.hsn-radio-label input[type="radio"]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

.hsn-radio-label:hover input[type="radio"]:not(:disabled) {
  border-color: #1570ef;
}


/* Form Helper Classes */
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 8px;
  display: block;
}

.required {
  color: #1570ef;
  font-weight: 500;
  margin-left: 2px;
}

.hsn-form-view .form-field {
  opacity: 0.8;
}

.hsn-view-meta {
  margin-top: 24px;
  padding-top: 0;
}

.custom-date-container {
  position: relative;
}

.custom-calendar-icon {
  position: absolute;
  right: 12px;
  top: 13px; /* Centered: (44px input height - 18px icon height) / 2 */
  color: #98A2B3;
  font-size: 18px !important;
  pointer-events: none;
  z-index: 1;
}

/* Ensure date inputs also respect the height and padding */
.hsn-page-wrapper input[type="date"] {
  height: 44px !important;
  width: 100%;
  display: inline-flex;
  align-items: center;
  padding-right: 40px !important;
  box-sizing: border-box;
}

/* Hide the default browser calendar icon but keep it clickable */
.hsn-page-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 10px;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
  opacity: 0; /* Hidden but clickable */
}

/* ─────────────────────────────────────────────
   AddServices.css  –  Figma 12.2 Add Service Form
───────────────────────────────────────────── */

/* Page wrapper – must use standard-page-container pattern */
.svc-page-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
  overflow: hidden;
  min-height: 0;
  background: #F9FAFB;
}

/* Loading screen */
.svc-loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 16px;
  color: #667085;
}

/* Header action buttons */
.svc-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ─── Scrollable area (standard-form-scrollable does the overflow) ─── */
.svc-scroll-area {
  padding: 0 0 40px 0;
}

/* Inner max-width wrapper */
.svc-content {
  max-width: 100%;
  margin: 0;
}

/* White card */
.svc-card {
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  overflow: visible;
  width: 100%;
}

/* ─── Sections ─── */
.svc-section {
  padding: 28px 32px;
  border-bottom: 1px solid #EAECF0;
}

.svc-section.no-border {
  border-bottom: none;
}

.svc-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #181D27;
  line-height: 100%;
  padding-bottom: 16px;
  border-bottom: 1px solid #EAECF0;
  margin: 0 0 24px 0;
}

.svc-section-title.no-mb {
  margin-bottom: 0;
}

.svc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* ─── Typography helpers ─── */
.svc-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 6px;
}

.svc-required {
  color: #2B5FE7;
}

/* Ensure components like InputField also show blue asterisks in this page */
.svc-page-wrapper .required {
  color: #2B5FE7 !important;
}

.svc-sub-title {
  font-size: 13px;
  font-weight: 600;
  color: #101828;
  margin: 0;
}

.svc-empty-hint {
  font-size: 13px;
  color: #98A2B3;
  margin: 0;
}

/* ─── Add link button ─── */
.svc-add-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #2B5FE7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.svc-add-link:hover {
  text-decoration: underline;
}

/* ─── Delete button ─── */
.svc-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #98A2B3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s;
  height: 44px;
  /* Matches input box height */
}

.svc-del-btn:hover {
  color: #D92D20;
}

/* ─── Grid layouts ─── */
.svc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
  align-items: flex-start;
}

.svc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.svc-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

/* Species row: 2 fields + delete btn */
.svc-grid-2-del {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-gap: 16px;
  gap: 16px;
  align-items: flex-end;
}

/* Margin helpers */
.mt-24 {
  margin-top: 20px;
}

.mt-16 {
  margin-top: 14px;
}

/* ─── Checkbox / Radio rows ─── */
.svc-checkbox-row,
.svc-radio-row {
  display: flex;
  gap: 24px;
  align-items: center;
  height: 44px;
}

.svc-check-item,
.svc-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #344054;
  font-weight: 500;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.svc-check-item input[type="checkbox"],
.svc-radio-item input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #2B5FE7;
  cursor: pointer;
  flex-shrink: 0;
}

/* ─── Duration field (label + combined input+badge) ─── */
.svc-duration-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.svc-duration-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
}

.svc-duration-input {
  flex: 1 1;
  min-width: 0;
  height: 100%;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  outline: none;
  padding: 0 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: #101828;
  background: #FFFFFF;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.svc-duration-input:focus {
  border-color: #2B5FE7;
  box-shadow: 0 0 0 3px rgba(43, 95, 231, 0.12);
}

.svc-duration-input::-webkit-inner-spin-button,
.svc-duration-input::-webkit-outer-spin-button {
  opacity: 0.5;
}

.svc-duration-select {
  width: 110px;
  height: 100%;
  flex-shrink: 0;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #667085;
  white-space: nowrap;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L5 5L9 1%27 stroke=%27%23667085%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.svc-duration-select:focus {
  border-color: #2B5FE7;
  box-shadow: 0 0 0 3px rgba(43, 95, 231, 0.12);
}

.svc-duration-select:hover {
  background-color: #F2F4F7;
}

/* ─── Multi Select Chips ─── */
.svc-multi-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.svc-multi-box {
  position: relative;
  min-height: 44px;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.svc-multi-box.open,
.svc-multi-box:focus-within {
  border-color: #2B5FE7;
  box-shadow: 0 0 0 3px rgba(43, 95, 231, 0.12);
}

.svc-chips-row {
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.svc-placeholder {
  font-size: 14px;
  color: #98A2B3;
}

.svc-chip {
  background: #EFF8FF;
  border: 1px solid #B2DDFF;
  border-radius: 16px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #175CD3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.svc-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: #175CD3;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
}

.svc-chip-x:hover {
  color: #D92D20;
}

.svc-arrow {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.svc-arrow.flipped {
  transform: rotate(180deg);
}

/* Dropdown */
.svc-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}

.svc-dd-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: #98A2B3;
}

.svc-dd-option {
  padding: 10px 14px;
  font-size: 14px;
  color: #344054;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.1s;
}

.svc-dd-option:hover {
  background: #F9FAFB;
}

.svc-dd-option.selected {
  background: #EEF4FF;
  color: #2B5FE7;
  font-weight: 600;
}

.svc-dd-add-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #2B5FE7;
  border-top: 1px solid #EAECF0;
  cursor: pointer;
}

.svc-dd-add-custom:hover {
  background: #F9FAFB;
}

/* ─── Chemicals / Products Table ─── */
.svc-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.svc-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.svc-table th {
  background: #F9FAFB;
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: #475467;
  border-bottom: 1px solid #EAECF0;
  white-space: nowrap;
}

.svc-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #EAECF0;
  vertical-align: middle;
}

.svc-product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-product-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.svc-table-input {
  width: 80px;
  padding: 7px 10px;
  border: 1px solid #D0D5DD;
  border-radius: 6px;
  font-size: 13px;
  color: #344054;
  outline: none;
  transition: border-color 0.15s;
}

.svc-table-input.wide {
  width: 280px;
}

.svc-table-input:focus {
  border-color: #2B5FE7;
  box-shadow: 0 0 0 2px rgba(43, 95, 231, 0.1);
}

.svc-tfoot-row td {
  background: #F9FAFB;
  font-weight: 600;
  font-size: 13px;
}

.svc-tfoot-label {
  text-align: right;
  color: #344054;
  padding-right: 14px;
}

.svc-tfoot-val {
  color: #101828;
}

/* ── 5. Pricing Configuration ── */
.svc-pricing-detailed {
  border-top: 1px solid #F2F4F7;
  padding-top: 16px;
}

.svc-pricing-group {
  width: 100%;
}

.svc-pricing-group-2 {
  margin-top: 24px;
}

.svc-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.svc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.svc-pricing-card {
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.svc-pricing-card.compact {
  padding: 20px 24px;
  max-width: 800px;
}

.svc-block-title {
  font-size: 20px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 24px 0;
}

.svc-price-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.svc-field-label {
  font-size: 13px;
  font-weight: 500;
  color: #475467;
}

.svc-currency-input {
  position: relative;
  display: flex;
  align-items: center;
}

.svc-currency-symbol {
  position: absolute;
  left: 12px;
  color: #667085;
  font-size: 14px;
}

.svc-currency-input .svc-table-input {
  padding-left: 28px !important;
  width: 100%;
}

.svc-input-del {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #98A2B3;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.svc-input-del:hover {
  color: #D92D20;
}

.svc-block-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: #667085;
  padding-bottom: 8px;
}

.svc-btn-save {
  background: #2B5FE7;
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

.svc-btn-save:hover {
  background: #1F4BC1;
}

.svc-btn-remove {
  background: white;
  color: #344054;
  border: 1px solid #D0D5DD;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

.svc-btn-remove:hover {
  background: #F9FAFB;
}

.svc-check-row {
  display: flex;
  gap: 24px;
  height: 44px;
  align-items: center;
}

/* ─── Responsive ─── */
@media (max-width: 1200px) {
  .svc-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .svc-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .svc-scroll-area {
    padding: 12px 0 40px;
  }

  .svc-section {
    padding: 16px;
  }

  .svc-grid-3,
  .svc-grid-4,
  .svc-grid-2,
  .svc-grid-2-del {
    grid-template-columns: 1fr;
  }
}

/* ─── Product Search Dropdown ─── */
.svc-search-td {
  position: relative;
  z-index: 10001; /* Higher than table headers */
}

.svc-table-scroll {
  width: 100%;
  overflow: visible !important; /* Prevent clipping of absolute dropdowns */
}

.svc-product-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  z-index: 99999; /* Extremely high to stay on top */
  max-height: 250px;
  overflow-y: auto;
  width: 350px;
}

.svc-drop-item {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid #F9FAFB;
}

.svc-drop-item:last-child {
  border-bottom: none;
}

.svc-drop-item:hover {
  background: #F9FAFB;
}

.svc-drop-main {
  font-size: 14px;
  font-weight: 500;
  color: #101828;
}

.svc-drop-sub {
  font-size: 12px;
  color: #667085;
}

.svc-relative {
  position: relative;
}

.svc-t-cost {
  font-weight: 600;
  color: #101828;
  font-size: 14px;
}

.svc-product-info {
  display: flex;
  flex-direction: column;
}

.svc-product-name {
  font-weight: 500;
  color: #101828;
  font-size: 13px;
}

.svc-search-icon {
  pointer-events: none;
  z-index: 5;
}

/* ─── Validation Errors ─── */
.svc-error-message {
  color: #D92D20;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}

.input-error {
  border-color: #D92D20 !important;
}

.svc-multi-box.error {
  border-color: #D92D20 !important;
}
/* src/Pages/Services/ViewService.css */

.view-service-scrollable {
  background-color: #fcfcfc;
  padding: 30px;
}

.view-section-wrapper {
  margin-bottom: 24px;
}

.view-main-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 30px;
}

.view-section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
}

.view-section-title.no-mb {
  margin-bottom: 0;
}

/* The Bordered Box */
.view-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Key-Value Row Alignment */
.view-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 0;
}

.view-kv-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  min-width: 150px;
}

.view-kv-value {
  font-size: 14px;
  color: #1e293b;
  font-weight: 500;
  text-align: right;
  flex: 1 1;
  padding-left: 20px;
}

/* 2-Column Grid for boxes */
.view-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 24px;
}

.view-table-wrapper {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.view-table {
  width: 100%;
  border-collapse: collapse;
}

.view-table th {
  background-color: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.view-table td {
  padding: 12px 16px;
  color: #1e293b;
  font-size: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.view-product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.view-product-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 4px;
}

.view-table-total-row td {
  background-color: #ffffff;
  padding: 16px;
  font-weight: 700;
  color: #1e293b;
  font-size: 16px;
  border-top: 1.5px solid #e2e8f0;
  border-bottom: none;
}

.view-total-label {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.view-total-value {
  text-align: left;
}

/* Audit Timeline Refinements */
.audit-table-box {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 4px;
}

.audit-compact-table {
  width: 100%;
  border-collapse: collapse;
}

.audit-compact-table th {
  font-size: 12px;
  color: #94a3b8;
  padding: 12px;
  text-align: left;
  background: #f8fafc;
  border-radius: 8px;
}

.audit-compact-table td {
  font-size: 13px;
  color: #334155;
  padding: 16px 12px;
  border-bottom: 1px solid #f1f5f9;
}

/* Header Actions */
.view-service-action-row {
  display: flex;
  gap: 12px;
}

/* Specific alignments from screenshot */
.pricing-group-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

@media (max-width: 1024px) {
  .view-section-grid {
    grid-template-columns: 1fr;
  }
}

/* Add Tax Page */
.add-tax-page {
  padding: 24px;
  background: #fdfdfd;
  min-height: 100vh;
}

.tax-form-card {
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin-top: 24px;
}

/* Custom Status Radio Group */
.custom-status-radio-group {
  display: flex;
  gap: 24px;
  align-items: center;
  /* margin-top: 6px removed to align with standard inputs */
  height: 44px;
  box-sizing: border-box;
}

.status-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.radio-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #D0D5DD;
  position: relative;
  transition: all 0.2s ease;
  background: #fff;
}

.status-radio-item.active .radio-circle {
  border-color: #1570EF;
}

.radio-inner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1570EF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

.status-radio-item.active .radio-inner-dot {
  transform: translate(-50%, -50%) scale(1);
}

.radio-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.form-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #344054 !important;
  margin-bottom: 6px !important;
}


/* Premium Dropdown Styles in AddTax */
.premium-select-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.premium-select-trigger {
  height: 44px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
  /* margin-top: 6px removed to align with standard inputs */
}

.premium-select-container.active .premium-select-trigger {
  border-color: #1570EF;
  box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.premium-select-value {
  font-size: 14px;
  color: #101828;
}

.premium-chevron-icon {
  color: #667085;
  transition: transform 0.2s;
}

.premium-chevron-icon.rotate {
  transform: rotate(180deg);
}

.premium-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #E4E7EC;
  border-radius: 8px;
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  z-index: 100;
  padding: 4px;
}

.premium-select-option {
  padding: 10px 12px;
  font-size: 14px;
  color: #344054;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s;
}

.premium-select-option:hover {
  background: #F9FAF9;
}

.premium-select-option.selected {
  background: #F9FAF9;
  color: #1570EF;
  font-weight: 500;
}

.premium-check-icon {
  font-size: 18px !important;
  color: #1570EF;
}


/* Override InputField internal labels if they differ */
.add-tax-page .form-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.tax-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px 20px;
  gap: 12px 20px;
  align-items: start;
}

.tax-form-secondary {
  margin-top: 16px;
}

/* Unified Grid System - Always 4 Columns */
.tax-form-view {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tax-status-field {
  display: flex;
  flex-direction: column;
}

.tax-status-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  height: 40px;
  padding: 0 14px;
  background: #ffffff;
}

.tax-status-text {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.tax-error {
  display: block;
  margin-top: 4px;
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
}

/* Force uniform field heights */
.add-tax-page .form-input,
.add-tax-page .premium-select-trigger {
  height: 44px !important;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}

.tax-field-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.custom-date-container {
  position: relative;
}

/* Hide the default browser calendar icon but keep it clickable */
.add-tax-page input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 10px;
  padding: 10px;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  /* Hidden but clickable */
}

.custom-calendar-icon {
  position: absolute;
  right: 12px;
  top: 13px; /* Centered in 44px input: (44-18)/2 = 13px */
  color: #101828;
  font-size: 20px !important;
  pointer-events: none;
  z-index: 1;
}

/* Ensure date inputs also respect the height */
.add-tax-page input[type="date"] {
  height: 44px !important;
  line-height: 44px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 40px 0 14px !important;
  font-size: 15px;
  color: #475467;
  display: flex !important;
  align-items: center !important;
}
/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  display: flex;

  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

.staff-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.staff-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 950px;
}

.staff-page-wrapper .table-container thead {
  background: #ffffff !important;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.staff-page-wrapper .table-container th {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  vertical-align: middle;
  background: #ffffff !important;
  font-family: "Inter", sans-serif;
}

/* Column-specific widths for Staff table (7 columns) */
.staff-page-wrapper .table-container th:nth-child(1),
.staff-page-wrapper .table-container td:nth-child(1) {
  width: 14%;
  min-width: 100px;
}

.staff-page-wrapper .table-container th:nth-child(2),
.staff-page-wrapper .table-container td:nth-child(2) {
  width: 16%;
  min-width: 120px;
}

.staff-page-wrapper .table-container th:nth-child(3),
.staff-page-wrapper .table-container td:nth-child(3) {
  width: 18%;
  min-width: 150px;
}

.staff-page-wrapper .table-container th:nth-child(4),
.staff-page-wrapper .table-container td:nth-child(4) {
  width: 15%;
  min-width: 130px;
}

.staff-page-wrapper .table-container th:nth-child(5),
.staff-page-wrapper .table-container td:nth-child(5) {
  width: 14%;
  min-width: 100px;
}

.staff-page-wrapper .table-container th:nth-child(6),
.staff-page-wrapper .table-container td:nth-child(6) {
  width: 14%;
  min-width: 110px;
}

.staff-page-wrapper .table-container th:nth-child(7),
.staff-page-wrapper .table-container td:nth-child(7) {
  width: 9%;
  min-width: 80px;
  text-align: left !important;
}

.staff-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  display: table;
  width: 100%;
}

.staff-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.staff-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.staff-page-wrapper .table-container tbody {
  display: table-row-group;
}

.staff-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.staff-page-wrapper .status-badge {
  font-size: 12px;
  font-weight: 600;
  text-align: left !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .staff-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .staff-page-wrapper .table-container table {
    min-width: 900px;
  }

  .staff-page-wrapper .table-container th,
  .staff-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .staff-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .staff-page-wrapper .table-container table {
    min-width: 800px;
  }

  .staff-page-wrapper .table-container th,
  .staff-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .staff-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .staff-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .staff-page-wrapper .table-container th,
  .staff-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .staff-page-wrapper .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Pagination container styling */
.staff-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  display: flex;

  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}
.mycus {
  position: relative;
  margin-top: -105px;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}
.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #111827;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

.editable-table {
  margin-top: 1rem;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  height: auto;
}

.editable-table table {
  width: 100%;
  height: auto;
  border-collapse: collapse;
  table-layout: fixed; /* ✅ Keeps all columns aligned */
}

.editable-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #6b7280;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-size: 12px;
}

.editable-table tbody {
  display: block; /* ✅ scrollable container */
  max-height: 46vh;
  overflow-y: auto;
  width: 100%;
  font-family: "Inter", sans-serif;
}

.editable-table thead,
.editable-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* ✅ ensures alignment */
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

.editable-table th,
.editable-table td {
  padding: 12px 14px;
  text-align: left; /* ✅ everything left */
  border-bottom: 1px solid #f0f2f5;
  font-size: 13px;
  vertical-align: middle;
  font-family: "Inter", sans-serif;
  color: #333333;
}
.editable-table input {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  outline: none;
}

.product-line,
.brand-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cell-icon.small {
  width: 14px;
  height: 14px;
  opacity: 0.7; /* makes the brand icon feel lighter */
}

.sub-line {
  font-size: 0.85rem;
  color: #6b7280; /* gray-500 for subtitle */
  margin-left: 47px;
}
.product-title,
.sub-line {
  display: flex;
  align-items: center; /* ✅ ensures text aligns to icon center */
}
.product-line {
  display: flex;
  align-items: center; /* ✅ vertically centers icon with text */
  gap: 8px;
}

.cell-icon {
  width: 40px; /* adjust size as needed */
  height: 40px;
  display: flex;
  align-items: center;
  justify-items: center;
  object-fit: contain;
}
tfoot .total-row {
  background: #f9fafb; /* light background */
  font-weight: 600;
  color: #111827;
}

tfoot .total-row td {
  border-top: 2px solid #e5e7eb;
  padding: 0.9rem 1rem;
}

.add-row {
  text-align: left;
  padding: 10px;
  height: 0 !important;
  margin-bottom: 0 !important;
}
.add-row td {
  border: none !important;
}
.add-btn {
  width: 141px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d5d7da;
  font-family: "Inter", sans-serif;
  background-color: #ffffff;
  font-weight: 600;
  color: #414651;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .editable-table th,
  .editable-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.8125rem; /* 13px */
  }

  .editable-table th {
    font-size: 0.8125rem; /* 13px */
  }

  .editable-table input {
    font-size: 16px; /* Keep at 16px to prevent iOS zoom */
    padding: 8px 10px;
  }

  .sub-line {
    font-size: 0.75rem; /* 12px */
  }

  .add-btn {
    width: 100%;
    font-size: 0.8125rem; /* 13px */
  }
}

@media (max-width: 480px) {
  .editable-table th,
  .editable-table td {
    padding: 0.6rem 0.4rem;
    font-size: 0.75rem; /* 12px */
  }

  .editable-table th {
    font-size: 0.75rem; /* 12px */
  }

  .editable-table input {
    font-size: 16px; /* Keep at 16px */
    padding: 6px 8px;
  }

  .sub-line {
    font-size: 0.6875rem; /* 11px */
  }

  .add-btn {
    height: 36px;
    font-size: 0.75rem; /* 12px */
  }
}

.container-1 {
  max-width: 1990px !important;
  margin: 0 auto !important;
}

.quick-card {
  border-radius: 12px;
  transition: 0.3s;
}
.quick-card:hover {
  background: #f8f9fa;
}

.task-card {
  border-radius: 12px;
}

.task-scroll {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 5px;
}

.task-scroll::-webkit-scrollbar {
  width: 6px;
}

.task-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.color-white {
  color: #fff !important;
}

.h4 {
  font-size: 30px;
}

.icon {
  font-size: 15px !important;
}

.inventory-chart-wrapper {
  height: 300px;
}

.service-performance {
  background: #fff;
  border: 1px solid #e5e7eb;
}

.branch-selector .search-icon {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
}

.tab-btn {
  border: 1px solid #e5e7eb;
  border-radius: 4 px;
  padding: 6px 14px;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s ease-in-out;
}

.tab-btn:hover {
  background: #f3f4f6;
}

.tab-btn.active {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

.metric-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metrics-grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem; /* space between cards */
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.metric-card-wrapper {
  /* display: flex;   */
  width: 100%;
}

.chart-section {
  background: #fff;
  border: 1px solid #e5e7eb;
}

.progress-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 20px;
  width: 100%;
  height: 250px;
  /* max-width: 580px; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.progress-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #1f2937;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-label {
  font-size: 12px;
  color: #6b7280;
}

.progress-bar-track {
  flex-grow: 1;
  height: 10px;
  background: #e5e7eb;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 50px;
  position: relative;
  transition: width 0.4s ease;
}

.progress-tooltip {
  position: absolute;
  top: -50px;
  right: -25px;
  background: #1e293b;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.progress-tooltip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #1e293b;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

.progress-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 2px;
}

.progress-value {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}


.icon-wrapper1 {
  display: block;
  align-items: start;
  justify-content: start;
  height: 41px;
  /* border-radius: 50%; */
  font-size: 18px; /* or 1.125rem */
  color: inherit;
}

.action-icon {
  background-color: #E6F2FF; /* light blue bg */
  color: #0066FF; /* blue icon color */
}

.critical-icon {
  background-color: #FFF1F0; /* light red bg */
  color: #FF4D4F; /* red icon color */
}

.reminder-icon {
  background-color: #FFF8E1; /* light orange bg */
  color: #FFA500; /* orange icon color */
}

.reminder{
  background-color: #DC6803;
}


.btnDanger{
  background-color: #D92D20 !important;
}

.dangerRed {
  color: #F04438;
}

.next-btn {
  background-color: #fff;
  color: #000;
}

.previous {
  border: 1px solid #d5d7da;
}

/* .container1 {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 1rem;
  transition: all 0.3s ease;
} */



@media (min-width: 1400px) {
  .container {
    max-width: 100% !important;
  }
}

@media (max-width: 776px) {
  .h4 {
    font-size: 22px !important;
  }
  .tab-group button{
    width: 100% ;
  }
  .task-scroll{
    font-size: 15px;
  }
}
.reminder {
  background-color: #0d6efd; /* your button color */
  color: white;
  border: none;
}

.reminder:hover {
  color: black !important;   /* ← make text black on hover */
  background-color: #cfe2ff; /* optional: lighter background */
}

.new-sales-task-view{
  border: 1px solid #dadada;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
/* TaskDetail.css - Premium Modern Design */
.task-detail-wrapper {
  background-color: #f9fafb;
  min-height: 100vh;
  padding-bottom: 40px;
}

.task-detail-grid-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.task-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.task-grid-row:last-child {
  margin-bottom: 40px;
}

.task-detail-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  border: 1px solid #f3f4f7;
  height: -webkit-fit-content;
  height: fit-content;
}

.task-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 20px 0;
  font-family: 'Inter', sans-serif;
}

.task-info-list_new {
  display: flex;
  flex-direction: column;
}

.task-info-item_new {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f7;
}

.task-info-item_new.no-border {
  border-bottom: none;
  padding-bottom: 4px;
}

.task-info-item_new:last-child {
  border-bottom: none;
}

.task-info-item_new span {
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
  min-width: 140px;
}

.task-info-item_new strong {
  font-size: 13px;
  color: #111827;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.task-link {
  color: #2563eb;
  text-decoration: none;
}

.task-link:hover {
  text-decoration: underline;
}

/* Badges */
.task-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: capitalize;
}

.badge-completed { background-color: #ecfdf5; color: #059669; }
.badge-pending { background-color: #fef3c7; color: #92400e; }
.badge-in-progress { background-color: #eff6ff; color: #2563eb; }

.priority-normal { background-color: #f3f4f6; color: #4b5563; }
.priority-high { background-color: #fef2f2; color: #991b1b; }

/* Photo Box */
.photo-audit-box {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 16px 0;
  position: relative;
}

.photo-audit-left {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.pdf-icon-circle {
  width: 38px;
  height: 38px;
  background: #fef2f2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
}

.photo-audit-labels {
  display: flex;
  flex-direction: column;
}

.photo-audit-labels .main-label {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.photo-audit-labels .sub-label {
  font-size: 11px;
  color: #6b7280;
}

.photo-audit-actions {
  display: flex;
  gap: 8px;
}

.photo-action-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

.photo-action-btn.primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.avatar-overlay {
  position: absolute;
  top: -12px;
  left: 20px;
  width: 24px;
  height: 24px;
  background: #db2777;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #fff;
}

/* Stars */
.task-stars {
  display: flex;
  gap: 6px;
  color: #9ca3af;
  align-items: center;
}

.task-star-svg {
  width: 18px;
  height: 18px;
  transition: all 0.2s ease;
}

.task-star-svg.active {
  fill: #fbbf24;
  stroke: #fbbf24;
}

.task-star-svg.inactive {
  fill: none;
  stroke: #9ca3af;
}

/* Tables */
.task-table-wrapper_new {
  border-radius: 10px;
  border: 1px solid #f3f4f7;
  overflow: hidden;
}

.task-custom-table_view {
  width: 100%;
  border-collapse: collapse;
}

.task-custom-table_view th {
  background: #f9fafb;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  text-align: left;
}

.task-custom-table_view td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  border-top: 1px solid #f3f4f7;
}

.task-product-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-product-img {
  width: 28px;
  height: 28px;
  background: #f9fafb;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-custom-table_view.audit td {
  font-size: 12px;
}

.no-data {
  text-align: center;
  color: #9ca3af;
  padding: 24px !important;
}

/* Stats Row */
.log-header-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.log-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.log-stat-item span {
  font-size: 12px;
  color: #6b7280;
}

.log-stat-item strong {
  font-size: 13px;
  color: #111827;
}

@media (max-width: 1024px) {
  .task-grid-row {
    grid-template-columns: 1fr;
  }
}

.tracking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(17, 24, 39, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.tracking-modal-content {
    background: #ffffff;
    border-radius: 12px;
    width: 650px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.tracking-modal-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid transparent;
}

.tracking-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
}

.back-btn:hover {
    background: #f3f4f6;
}

.tracking-modal-title h3 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.tracking-calendar-section {
    padding: 0 20px 12px;
}

.tracking-date-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.tracking-date-nav span {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.tracking-date-nav button {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracking-week-strip {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.tracking-day-cell {
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 4px;
    flex: 1 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.tracking-day-cell.active {
    background: #ebf5ff;
}

.tracking-day-cell .day-name {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
}

.tracking-day-cell .day-number {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50%;
}

.tracking-day-cell.active .day-number {
    background: #2563eb;
    color: #ffffff;
}

.tracking-tabs-section {
    display: flex;
    gap: 16px;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
}

.tracking-tab {
    background: none;
    border: none;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tracking-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.tracking-body-section {
    display: flex;
    height: 380px;
    background: #f9fafb;
}

.tracking-list-pane {
    width: 300px;
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tracking-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tracking-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.tracking-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.tracking-row:last-child {
    margin-bottom: 0;
}

.tracking-icon {
    color: #9ca3af;
    flex-shrink: 0;
    margin-top: 2px;
}

.tracking-row p {
    font-size: 12px;
    color: #4b5563;
    margin: 0;
    line-height: 1.4;
}

.tracking-map-pane {
    flex: 1 1;
    border-left: 1px solid #e5e7eb;
}
.live-tracking-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
}

.live-tracking-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 1000px;
}

.live-tracking-page-wrapper .table-container thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.live-tracking-page-wrapper .table-container th {
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #535862 !important;
  text-transform: none !important;
  letter-spacing: 0px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  background: #f9fafb !important;
  font-family: "Inter", sans-serif !important;
  border-bottom: 2px solid #e5e7eb !important;
}

/* Column-specific widths for Live Tracking table (9 columns) */
.live-tracking-page-wrapper .table-container th:nth-child(1),
.live-tracking-page-wrapper .table-container td:nth-child(1) {
  width: 10%;
  min-width: 80px;
  text-align: center;
}

.live-tracking-page-wrapper .table-container th:nth-child(2),
.live-tracking-page-wrapper .table-container td:nth-child(2) {
  width: 14%;
  min-width: 120px;
}

.live-tracking-page-wrapper .table-container th:nth-child(3),
.live-tracking-page-wrapper .table-container td:nth-child(3) {
  width: 12%;
  min-width: 130px;
}

.live-tracking-page-wrapper .table-container th:nth-child(4),
.live-tracking-page-wrapper .table-container td:nth-child(4) {
  width: 11%;
  min-width: 100px;
}

.live-tracking-page-wrapper .table-container th:nth-child(5),
.live-tracking-page-wrapper .table-container td:nth-child(5) {
  width: 12%;
  min-width: 100px;
}

.live-tracking-page-wrapper .table-container th:nth-child(6),
.live-tracking-page-wrapper .table-container td:nth-child(6) {
  width: 11%;
  min-width: 100px;
}

.live-tracking-page-wrapper .table-container th:nth-child(7),
.live-tracking-page-wrapper .table-container td:nth-child(7) {
  width: 11%;
  min-width: 100px;
}

.live-tracking-page-wrapper .table-container th:nth-child(8),
.live-tracking-page-wrapper .table-container td:nth-child(8) {
  width: 10%;
  min-width: 80px;
}

.live-tracking-page-wrapper .table-container th:nth-child(9),
.live-tracking-page-wrapper .table-container td:nth-child(9) {
  width: 9%;
  min-width: 80px;
  text-align: center;
}

.live-tracking-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  width: 100%;
}

.live-tracking-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.live-tracking-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.live-tracking-page-wrapper .table-container tbody {}

.live-tracking-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.status-badge {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .live-tracking-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .live-tracking-page-wrapper .table-container table {
    min-width: 900px;
  }

  .live-tracking-page-wrapper .table-container th,
  .live-tracking-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .live-tracking-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .live-tracking-page-wrapper .table-container table {
    min-width: 800px;
  }

  .live-tracking-page-wrapper .table-container th,
  .live-tracking-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .live-tracking-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .live-tracking-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .live-tracking-page-wrapper .table-container th,
  .live-tracking-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Pagination container styling */
.live-tracking-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
/* Issue Description Cell - Truncate and Show on Hover */
.help-support-page-wrapper .issue-description-cell {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  word-wrap: break-word;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
  cursor: help;
  transition: all 0.2s ease;
}

.help-support-page-wrapper .issue-description-cell:hover {
  -webkit-line-clamp: unset;
  line-clamp: initial;
  background-color: #f9fafb;
  padding: 8px;
  border-radius: 4px;
  z-index: 10;
  position: relative;
}

/* Priority Text */
.help-support-page-wrapper .priority-text {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

/* Status Chip */
.help-support-page-wrapper .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.help-support-page-wrapper .status-chip .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Table Container Adjustments */
.help-support-page-wrapper .table-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-top: 0;
}

/* Ensure columns are properly spaced */
.help-support-page-wrapper .table-container table {
  word-break: break-word;
}

.help-support-page-wrapper .table-container th {
  font-weight: 600;
  font-size: 12px;
  color: #374151;
  background-color: #f9fafb;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.help-support-page-wrapper .table-container td {
  padding: 12px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
}

.help-support-page-wrapper .table-container tr:hover {
  background-color: #fafafa;
}

/* Responsive */
@media (max-width: 1024px) {
  .help-support-page-wrapper .issue-description-cell {
    max-width: 200px;
  }
}

@media (max-width: 768px) {
  .help-support-page-wrapper .issue-description-cell {
    max-width: 150px;
    font-size: 12px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .help-support-page-wrapper .table-container th,
  .help-support-page-wrapper .table-container td {
    padding: 8px;
    font-size: 12px;
  }
}

/* Pagination container styling */
.help-support-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
.document-rejected-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #ffffff;
  min-height: 100vh;
  padding: 80px 0;
  width: 70vw;
}

.document-rejected-card {
  width: 70vw;
  max-width: 1000px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rejected-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.rejected-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #dc2626;
}

.rejected-header p {
  color: #6b7280;
  font-size: 16px;
}

.rejected-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
}

.rejected-file {
  display: flex;
  align-items: center;
  background: #f9fafb;
  border-radius: 8px;
  padding: 14px 20px;
  margin-bottom: 12px;
}

.pdf-icon {
  width: 28px;
  height: 28px;
  margin-right: 12px;
}

.file-info .file-name {
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.file-info span {
  font-size: 14px;
  color: #6b7280;
}

.rejection-reason {
  background-color: #fff1f2;
  border: 1px solid #ef4444;
  color: #dc2626;
  border-radius: 8px;
  padding: 16px;
  margin-top: 24px;
  font-size: 15px;
}

.rejection-reason strong {
  display: block;
  margin-bottom: 8px;
  color: #b91c1c;
}

.upload-tips {
  background-color: #E9EBEF80;
  border-radius: 8px;
  padding: 16px;
  margin-top: 24px;
}

.upload-tips ul {
  margin: 8px 0 0 18px;
}

.upload-tips li {
  margin-bottom: 6px;
  color: #374151;
}

.reupload-btn-container {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
}

.reupload-btn {
  background-color: #1570EF;
  color: #fff;
  font-size: 15px;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.rejected-icon {
  color: #dc2626;
  font-size: 36px !important;
}

.pdf-icon {
  color: #374151;
  font-size: 28px !important;
  margin-right: 12px;
}

.reupload-btn svg {
  font-size: 22px;
}

.reupload-btn:hover {
  background-color: #1d4ed8;
}
.doc-flow-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ─── Success Card ─────────────────────────── */
.document-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: 40px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.success-icon-container {
  margin-bottom: 20px;
}

.success-icon {
  font-size: 72px !important;
  color: #22c55e !important;
}

.document-success-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.document-success-card p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

/* ─── Verification Pending Overlay ─────────── */
.pending-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.pending-modal {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 32px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.pending-icon-wrap {
  margin-bottom: 16px;
}

.pending-icon {
  font-size: 52px !important;
  color: #f59e0b !important;
}

.pending-modal h3 {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.pending-modal p {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

.pending-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 16px;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
}

.pending-close-btn:hover {
  color: #374151;
}
.reupload-page {
    width: 100%;
}

.reupload-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.reupload-card h2 {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 24px;
}

/* ─── File List ─────────────────────────────── */
.reupload-file-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reupload-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    background: #fff;
}

.reupload-file-item.rejected {
    border-color: #fecaca;
    background: #fff5f5;
}

.reupload-pdf-icon {
    font-size: 28px !important;
    flex-shrink: 0;
}

.reupload-pdf-icon.blue {
    color: #1570EF !important;
}

.reupload-pdf-icon.red {
    color: #ef4444 !important;
}

.reupload-file-info {
    flex: 1 1;
    min-width: 0;
}

.reupload-file-name {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reupload-progress-bar {
    background: #e5e7eb;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}

.reupload-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.reupload-file-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reupload-delete-icon {
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s;
}

.reupload-delete-icon:hover {
    color: #ef4444;
}

/* ─── Submit Button ─────────────────────────── */
.reupload-submit-btn {
    background-color: #1570EF;
    color: white;
    border: none;
    padding: 12px 48px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    min-width: 200px;
}

.reupload-submit-btn:hover {
    background-color: #1251c5;
}

.field-error {
    color: #dc2626;
    font-size: 0.8rem;
    display: block;
    margin-top: 4px;
}
.sidebar-container {
  min-width: 220px;
  background-color: #f9fafc;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 32px;
  border-right: 1px solid #e5e7eb;
  box-sizing: border-box;
}

/* Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboard-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 40px 0 0;
}

.logo-img {
  height: 36px;
  width: 36px;
  object-fit: contain;
}

.logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #1a4dd8;
}

/* Steps Section */
.sidebar-steps {
  flex: 1 1;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sidebar-step {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.sidebar-step.active {
  opacity: 1;
}

.icon-box {
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.icon-box img {
  width: 20px;
  height: 20px;
}

.step-text {
  display: flex;
  flex-direction: column;
}

.step-title {
  font-weight: 600;
  font-size: 16px;
  color: #111827;
  margin: 0;
}

.step-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 2px 0 0;
}

/* Connector Line */
.sidebar-line {
  height: 40px;
  width: 1.5px;
  background-color: #e5e7eb;
  margin: 12px 0 12px 20px;
}

/* Footer */
.sidebar-footer {
  display: flex;
  align-items: left;
  gap: 8px;
  /* space between icon and text */
  padding: 0px 0px;
  margin-top: auto;
  color: #6b7280;
  /* subtle grey text */
  font-size: 14px;
}

.mail-icon {
  width: 36;
  height: 36px;
  flex-shrink: 0;
}

.footer-email {
  white-space: nowrap;
  color: #6b7280;
}

/* Ensure no underline on the links in the sidebar */
.sidebar-link {
  text-decoration: none;
  /* Removes underline */
  color: inherit;
  /* Ensures that the color of the link inherits from its parent */
}

/* Optional: Style the hover state for better UX */
.sidebar-link:hover {
  color: #007bff;
  /* Change this to your preferred hover color */
}

.sidebar-link-disabled {
  cursor: not-allowed;
  opacity: 0.65;
  -webkit-user-select: none;
          user-select: none;
}

.sidebar-link.sidebar-link-disabled:hover {
  color: inherit;
}

/* Responsiveness */
@media (max-width: 900px) {
  .sidebar-container {
    min-width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding: 24px;
  }

  .sidebar-steps {
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
  }

  .sidebar-step {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .sidebar-line {
    width: 40px;
    height: 1.5px;
    margin: 24px 0 0 0;
  }

  .step-subtitle {
    display: none;
    /* Hide subtitle on mobile for space */
  }
}
.company-info-content {
  flex: 1 1;
  min-width: 0;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f9fafc;
  min-height: 100vh;
}

.Information-form-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  margin: 0;
}

.upload-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.upload-label span {
  color: #ef4444;
}

.company-info-content h2 {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.product-form-fields {
  width: 100%;
}

/* Two-column layout for upload rows */
.upload-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.upload-col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(50% - 12px);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Submit button container */
.upload-submit-col {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(50% - 12px);
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.save-button {
  background-color: #1570EF;
  color: white;
  border: none;
  width: 100%;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}

.save-button:hover {
  background-color: #1251c5;
}

.nav-arrows button {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-arrows button:hover {
  background: #f9fafc;
}

@media (max-width: 768px) {
  .company-info-content {
    padding: 24px;
  }

  .Information-form-card {
    padding: 20px;
  }

  .upload-row {
    flex-direction: column;
  }

  .upload-col,
  .upload-submit-col {
    flex: 1 1 100%;
  }

  .upload-submit-col {
    justify-content: stretch;
  }

  .save-button {
    width: 100%;
  }
}

.field-error {
  color: #dc2626;
  font-size: 0.8rem;
  display: block;
  margin-top: 4px;
}
/* .date-range-picker {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 20px;
  display: flex;
  gap: 20px;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 1000;
}

.quick-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  border-right: 1px solid #e5e7eb;
  padding-right: 20px;
}

.quick-option {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: background 0.2s;
}

.quick-option:hover {
  background: #f3f4f6;
}

.calendars {
  display: flex;
  gap: 30px;
}

.calendar {
  width: 280px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 600;
}

.calendar-header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  color: #6b7280;
}

.calendar-header button:hover {
  background: #f3f4f6;
  border-radius: 4px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.calendar-weekdays div {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  font-size: 14px;
  transition: all 0.2s;
}

.calendar-day:hover {
  background: #f3f4f6;
}

.calendar-day.other-month {
  color: #d1d5db;
}

.calendar-day.selected {
  background: #3b82f6;
  color: white;
  font-weight: 600;
}

.calendar-day.in-range {
  background: #dbeafe;
  color: #1e40af;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 15px;
}

.date-inputs input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
}

.picker-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 15px;
  border-top: 1px solid #e5e7eb;
  margin-top: 15px;
}

.btn-cancel, .btn-apply {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel {
  background: white;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.btn-cancel:hover {
  background: #f9fafb;
}

.btn-apply {
  background: #3b82f6;
  border: none;
  color: white;
}

.btn-apply:hover {
  background: #2563eb;
} */

/* .date-range-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.date-range-picker {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  overflow: hidden;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}

.quick-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  background: #f9fafb;
  padding: 16px 8px;
  overflow-y: auto;
}

.quick-option {
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  transition: background 0.2s;
  color: #374151;
  white-space: nowrap;
}

.quick-option:hover {
  background: #e5e7eb;
}

.calendars-container {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow: hidden;
}

.calendars {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.calendar {
  min-width: 280px;
  max-width: 320px;
  flex: 1;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 15px;
}

.calendar-header button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 12px;
  color: #6b7280;
  border-radius: 6px;
  transition: background 0.2s;
}

.calendar-header button:hover {
  background: #f3f4f6;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}

.calendar-weekdays div {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  padding: 6px 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  font-size: 13px;
  transition: all 0.2s;
  color: #1f2937;
  padding: 8px;
}

.calendar-day:hover {
  background: #f3f4f6;
}

.calendar-day.other-month {
  color: #d1d5db;
}

.calendar-day.selected {
  background: #3b82f6;
  color: white;
  font-weight: 600;
}

.calendar-day.in-range {
  background: #dbeafe;
  color: #1e40af;
  border-radius: 0;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 16px;
  flex-wrap: wrap;
}

.date-inputs input {
  flex: 1;
  min-width: 150px;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background: #f9fafb;
}

.date-inputs span {
  color: #9ca3af;
}

.picker-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  margin-top: 16px;
  flex-wrap: wrap;
}

.btn-cancel, .btn-apply {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-cancel {
  background: white;
  border: 1px solid #d1d5db;
  color: #374151;
}

.btn-cancel:hover {
  background: #f9fafb;
}

.btn-apply {
  background: #3b82f6;
  color: white;
}

.btn-apply:hover {
  background: #2563eb;
}


@media (max-width: 768px) {
  .date-range-picker {
    flex-direction: column;
    max-height: 95vh;
  }

  .quick-options {
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    min-width: auto;
  }

  .calendars {
    gap: 20px;
  }

  .calendar {
    min-width: 100%;
  }

  .calendars-container {
    padding: 16px;
  }
}

@media (max-width: 640px) {
  .date-range-picker-overlay {
    padding: 10px;
  }

  .calendar {
    min-width: 260px;
  }

  .calendar-day {
    font-size: 12px;
    padding: 6px;
  }

  .date-inputs {
    flex-direction: column;
    align-items: stretch;
  }

  .date-inputs input {
    min-width: 100%;
  }

  .picker-actions {
    justify-content: stretch;
  }

  .btn-cancel, .btn-apply {
    flex: 1;
  }
} */

.date-picker-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: transparent;
}

.date-range-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  z-index: 1000;
  overflow: hidden;
}

.quick-options {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  border-right: 1px solid #e5e7eb;
  padding: 12px 0;
  min-width: 130px;
}

.quick-option {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
  color: #374151;
  white-space: nowrap;
}

.quick-option:hover {
  background: #f0f0f0;
}

.calendars-section {
  display: flex;
  flex-direction: column;
}

.calendars {
  display: flex;
  gap: 24px;
  padding: 20px 24px 16px 24px;
}

.calendar {
  width: 280px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14px;
  color: #111827;
}

.calendar-header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 10px;
  color: #6b7280;
  border-radius: 6px;
  transition: background 0.15s;
  line-height: 1;
}

.calendar-header button:hover {
  background: #f3f4f6;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.calendar-weekdays div {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 0;
  text-transform: uppercase;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
  gap: 1px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  color: #111827;
  border-radius: 4px;
  position: relative;
}

.calendar-day:hover:not(.other-month) {
  background: #f3f4f6;
}

.calendar-day.other-month {
  color: #d1d5db;
  cursor: default;
}

.calendar-day.today {
  font-weight: 600;
  color: #2563eb;
}

.calendar-day.selected {
  background: #3b82f6;
  color: white;
  font-weight: 600;
}

.calendar-day.in-range {
  background: #dbeafe;
  color: #1e40af;
  border-radius: 0;
}

.calendar-day.in-range:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.calendar-day.in-range:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.date-range-footer {
  border-top: 1px solid #e5e7eb;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.date-inputs input {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: white;
  color: #374151;
  width: 140px;
  outline: none;
}

.date-inputs input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-inputs .arrow {
  color: #9ca3af;
  font-size: 14px;
}

.picker-actions {
  display: flex;
  gap: 8px;
}

.btn-cancel, .btn-apply {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  outline: none;
}

.btn-cancel {
  background: white;
  border: 1px solid #d1d5db;
  color: #374151;
}

.btn-cancel:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.btn-apply {
  background: #3b82f6;
  color: white;
}

.btn-apply:hover {
  background: #2563eb;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .date-range-picker {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
  }

  .calendars {
    flex-direction: column;
    gap: 16px;
  }

  .date-range-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .date-inputs {
    flex-direction: column;
  }

  .date-inputs input {
    width: 100%;
  }

  .picker-actions {
    width: 100%;
  }

  .btn-cancel, .btn-apply {
    flex: 1 1;
  }
}
/* .filter-wrapper {
  margin-bottom: 20px;
}

.selected-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  padding: 6px 12px;
  background: #eef2ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tag span {
  cursor: pointer;
  font-weight: bold;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.filter-btn {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 8px;
  cursor: pointer;
}

.dropdown {
  position: absolute;
  margin-top: 5px;
  padding: 15px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  z-index: 9;
}

.apply-btn {
  margin-top: 10px;
  padding: 8px 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.dropdown-item {
  padding: 8px 10px;
  cursor: pointer;
}
.dropdown-item:hover {
  background: #f3f4f6;
} */


/* .performance-filters {
  margin-bottom: 20px;
}

.filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.filter-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #3b82f6;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  color: #1e40af;
}

.filter-tag button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #3b82f6;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-all-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
}

.filters-button-group {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.filter-dropdown-wrapper {
  position: relative;
}

.filter-btn,
.filters-main-btn {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-btn:hover,
.filters-main-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.bonus-dropdown {
  position: absolute;
  top: 45px;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  z-index: 100;
  padding: 8px 0;
}

.bonus-option {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.bonus-option:hover {
  background: #f3f4f6;
}



.dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: transparent;
}

.bonus-dropdown {
  position: absolute;
  top: 45px;
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  z-index: 100;
  padding: 8px 0;
} */

.performance-filters {
  margin-bottom: 20px;
}

.filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0;
}

.filter-tags-section {
  flex: 1 1;
}

.filter-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #1e40af;
}

.filter-tag button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #3b82f6;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.filter-tag button:hover {
  color: #1e40af;
}

.clear-all-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  padding: 6px 8px;
}

.clear-all-btn:hover {
  color: #374151;
}

.filters-button-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.filter-dropdown-wrapper {
  position: relative;
}

.filter-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: transparent;
}

.filter-btn,
.filters-main-btn {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  white-space: nowrap;
}

.filter-btn:hover,
.filters-main-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.date-filter-btn {
  justify-content: space-between;
  min-width: 240px;
}

.date-filter-btn .close-icon {
  color: #9ca3af;
  font-size: 18px;
  font-weight: 400;
}

.filter-icon {
  font-size: 14px;
}

.bonus-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  z-index: 999;
  padding: 4px 0;
  border: 1px solid #e5e7eb;
}

.bonus-option {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
  color: #374151;
}

.bonus-option:hover {
  background: #f3f4f6;
}

@media (max-width: 768px) {
  .filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filters-button-group {
    width: 100%;
    flex-wrap: wrap;
  }

  .date-filter-btn {
    min-width: auto;
    flex: 1 1;
  }
}
/* ─── Page Layout ─────────────────────────────── */
.company-info-page {
  display: flex;
  min-height: 100vh;
  background-color: #f9fafc;
  overflow-x: hidden;
}

/* Sidebar is handled by Sidebar.css — layout just needs flex row */

/* ─── Main Content Area ───────────────────────── */
.company-info-content {
  flex: 1 1;
  padding: 22px 48px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #f9fafc;
  min-width: 0;
  /* prevents flex child from overflowing */
}

.Information-form-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.Information-form-card h2 {
  font-size: 22px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

/* ─── Nav Arrows ──────────────────────────────── */
.nav-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}

.nav-arrows button {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-arrows button:hover {
  background: #f0f4ff;
}

/* ─── Form Fields ─────────────────────────────── */
.product-form-fields {
  width: 100%;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.form-row>* {
  flex: 1 1 200px;
  min-width: 0;
}

/* ─── Save Button ─────────────────────────────── */
.save-button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.save-button {
  background-color: #1570EF;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  max-width: 360px;
}

.save-button:hover {
  background-color: #1251c5;
}

.product-form-fields {
  gap: 0px !important;
}

.company-info-page .form-row {
  margin-bottom: 4px;
}

.company-info-page .form-row .form-textarea {
  min-height: 60px !important;
}

.save-button-container .save-button {
  max-width: 100%;
}

/* ─── Mobile (stacks vertically) ─────────────── */
@media (max-width: 768px) {
  .company-info-content {
    padding: 24px 20px;
  }

  .Information-form-card {
    padding: 20px;
  }
}
/* ─── Layout ──────────────────────────────────── */
.company-info-page {
  display: flex;
  height: 100vh;
  background-color: #F9FAFB;
}

.sub-content {
  flex: 1 1;
  padding: 40px 64px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* ─── Header Arrows (Far Right) ───────────────── */
.sub-nav-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 24px;
}

.sub-nav-arrows button {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667085;
  transition: all 0.2s;
}

.sub-nav-arrows button:hover:not(:disabled) {
  background: #F2F4F7;
  border-color: #D0D5DD;
}

.sub-nav-arrows button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Main Content Container ──────────────────── */
.sub-main-container {
  max-width: 1000px;
  margin: 0 auto;
}

.sub-card {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
}

.sub-title {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
  margin-bottom: 24px;
  margin-top: 0;
}

/* ─── Top Selection Split ────────────────────── */
.sub-selection-row {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.sub-selection-left {
  flex: 1 1;
  max-width: 400px;
}

/* ─── Custom Plan Dropdown ────────────────────── */
.sub-plan-wrap {
  position: relative;
}

.sub-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  display: block;
  margin-bottom: 8px;
}

.sub-label span {
  color: #2563EB;
  margin-left: 2px;
}

.sub-plan-dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1.5px solid #2563EB;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  color: #101828;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s;
}

.sub-chevron {
  color: #667085;
  font-size: 14px;
}

.sub-plan-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.1);
  z-index: 100;
  overflow: hidden;
}

.sub-plan-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
}

.sub-plan-option:hover {
  background: #F9FAFB;
}

.sub-plan-option.selected {
  background: #F2F8FF;
}

.sub-plan-option-name {
  font-size: 14px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 2px;
}

.sub-plan-option-desc {
  font-size: 12px;
  color: #667085;
  line-height: 1.4;
}

/* ─── Plan Details Card (Right) ───────────────── */
.sub-selection-right {
  flex: 1.2 1;
}

.sub-details-title {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 8px;
}

.sub-details-box {
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  border-radius: 8px;
  padding: 20px;
  min-height: 100px;
}

.sub-details-desc {
  font-size: 14px;
  font-weight: 600;
  color: #1D4ED8;
  margin-bottom: 16px;
  line-height: 1.5;
}

.sub-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px 32px;
  gap: 12px 32px;
}

.sub-detail-item {
  display: flex;
  flex-direction: column;
}

.sub-detail-label {
  font-size: 12px;
  color: #2563EB;
  margin-bottom: 4px;
}

.sub-detail-value {
  font-size: 16px;
  font-weight: 700;
  color: #1D4ED8;
}

/* ─── Counters Row ────────────────────────────── */
.sub-counters-row {
  display: flex;
  gap: 48px;
  margin-bottom: 32px;
}

.sub-counter-header {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 12px;
}

.sub-counter-header span {
  color: #2563EB;
  margin-left: 2px;
}

.sub-counter-controls {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
}

.sub-cnt-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D0D5DD;
  background: #fff;
  cursor: pointer;
  color: #667085;
  transition: all 0.2s;
}

.sub-cnt-btn:first-child {
  border-radius: 8px 0 0 8px;
}

.sub-cnt-btn:last-child {
  border-radius: 0 8px 8px 0;
}

.sub-cnt-btn:hover {
  background: #F9FAFB;
}

.sub-cnt-val {
  width: 56px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #D0D5DD;
  border-bottom: 1px solid #D0D5DD;
  font-size: 16px;
  font-weight: 500;
  color: #101828;
}

/* ─── Content Split (Bottom) ─────────────────── */
.sub-split-bottom {
  display: flex;
  gap: 24px;
}

/* Left: Default Allocation */
.sub-alloc-card {
  flex: 1 1;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 24px;
}

.sub-alloc-title {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 24px;
}

.sub-alloc-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sub-alloc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-alloc-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #344054;
}

.sub-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
}

.sub-badge.green {
  background: #ECFDF3;
  color: #039855;
}

.sub-badge.blue {
  background: #F0F9FF;
  color: #026AA2;
}

.sub-alloc-footer {
  margin-top: 48px;
  display: flex;
  gap: 8px;
  color: #039855;
  font-size: 14px;
  line-height: 1.4;
}

/* Right: Summary */
.sub-summary-card {
  flex: 1.1 1;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.sub-sum-tabs {
  display: flex;
  padding: 4px;
  background: #F2F4F7;
  border-radius: 8px;
  margin: 16px 16px 0;
  gap: 2px;
}

.sub-sum-tab {
  flex: 1 1;
  padding: 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #475467;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sub-sum-tab.active {
  background: #fff;
  color: #101828;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.sub-save-tag {
  background: #ECFDF3;
  color: #027A48;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
}

.sub-sum-content {
  padding: 24px 20px;
  flex: 1 1;
}

.sub-sum-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sub-sum-item-name {
  font-size: 15px;
  font-weight: 600;
  color: #344054;
  margin-bottom: 4px;
}

.sub-sum-item-calc {
  font-size: 13px;
  color: #667085;
}

.sub-sum-item-price {
  font-size: 15px;
  font-weight: 600;
  color: #101828;
}

.sub-sum-divider {
  height: 1px;
  background: #E5E7EB;
  margin: 16px 0;
}

.sub-sum-subtotal {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 15px;
  color: #344054;
}

.sub-sum-gst {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 15px;
  color: #344054;
}

.sub-sum-final {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
  font-size: 20px;
  font-weight: 700;
  color: #101828;
}

.sub-sum-actions {
  padding: 16px 20px 24px;
  display: flex;
  gap: 12px;
}

.sub-btn-breakdown {
  flex: 1 1;
  height: 44px;
  border: 1px solid #D0D5DD;
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
}

.sub-btn-pay {
  flex: 1 1;
  height: 44px;
  border: none;
  background: #2563EB;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.sub-btn-pay:hover {
  background: #1D4ED8;
}

.sub-btn-pay:disabled {
  background: #93C5FD;
  cursor: not-allowed;
}

/* ─── Global blue focus for dropdown ──────────── */
.sub-plan-dropdown:hover {
  border-color: #2563EB;
}

/* Range input container */
.add-plan-date-range-container {
  margin-top: 16px;
  background: #F9FAFB;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.add-plan-form-row {
  display: flex;
  gap: 16px;
}

.add-plan-form-group {
  flex: 1 1;
}

.add-plan-form-group label {
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  margin-bottom: 6px;
  display: block;
}

.add-plan-input-with-icon input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #D0D5DD;
  border-radius: 6px;
  font-size: 14px;
}

.add-plan-error {
  color: #D92D20;
  font-size: 12px;
  margin-top: 4px;
}

/* ─── BREAKDOWN MODAL ─────────────────────────── */
.breakdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.breakdown-modal {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 560px;
  box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.1);
}

@media (max-width: 1024px) {
  .sub-selection-row {
    flex-direction: column;
  }
  .sub-selection-left {
    max-width: none;
  }
}

@media (max-width: 800px) {
  .sub-split-bottom {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .sub-counters-row {
    flex-direction: column;
    gap: 24px;
  }
}
.breakdown-table th {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  background-color: #FAFAFA;
}

.breakdown-table td {
  font-size: 14px;
  color: #374151;
  padding: 14px 12px;
  border-bottom: 1px solid #f3f4f6;
}

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

/* Totals */
.breakdown-totals {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.breakdown-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #374151;
  margin-bottom: 10px;
}

.breakdown-total-row.gst span:first-child {
  color: #1570EF;
}

.breakdown-total-row.gst span:last-child {
  color: #374151;
}

.breakdown-total-row.final {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  margin-top: 4px;
}
.purchased-list-page {
    padding: 0;
    width: 100%;
}

.pl-table-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    padding: 0;
    margin-top: 16px;
    overflow: hidden;
}

.pl-filter-wrapper {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.pl-table-container {
    padding: 0;
    overflow-x: auto;
    width: 100%;
}

.pl-table-container table {
    min-width: 1500px;
    /* Force minimum width to trigger scroll when needed */
}

/* Status Badges */
.pl-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.pl-status-active {
    background-color: #ecfdf5;
    color: #065f46;
}

.pl-status-expired,
.pl-status-inactive {
    background-color: #fef2f2;
    color: #991b1b;
}

.pl-status-pending {
    background-color: #fffbeb;
    color: #92400e;
}

.pl-status-expiring-soon {
    background-color: #fef1e8;
    color: #d97706;
}

.pl-plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    background-color: #fff;
    border: 1px solid #e5e7eb;
}

.pl-plan-professional {
    color: #2563eb;
}

.pl-plan-professional .pl-dot {
    background-color: #2563eb;
}

.pl-plan-enterprise {
    color: #8b5cf6;
}

.pl-plan-enterprise .pl-dot {
    background-color: #8b5cf6;
}

.pl-plan-basic {
    color: #ec4899;
}

.pl-plan-basic .pl-dot {
    background-color: #ec4899;
}

.pl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

/* Status dots */
.pl-status-active .pl-dot {
    background-color: #10b981;
}

.pl-status-expiring-soon .pl-dot {
    background-color: #f59e0b;
}

.pl-status-expired .pl-dot {
    background-color: #ef4444;
}

.pl-purchase-btn {
    background-color: #1570ef;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pl-purchase-btn:hover {
    background-color: #1d4ed8;
}
.pl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(17, 24, 39, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.pl-modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 650px;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.pl-modal-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #eaecf0;
}

.pl-modal-titles h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.pl-sub-id {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
    display: block;
}

.pl-close-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-close-btn:hover {
    background: #f3f4f6;
    border-radius: 4px;
}

.pl-modal-body {
    padding: 24px;
    overflow-y: auto;
}

.pl-status-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
}

.banner-active {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.banner-expired {
    background-color: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.banner-expiring-soon {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.banner-pending {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.banner-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.banner-icon {
    font-size: 18px !important;
}

.pl-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 32px;
    gap: 32px;
}

.pl-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pl-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    margin: 0 0 8px 0;
}

.pl-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.pl-label {
    color: #6b7280;
}

.pl-value {
    color: #111827;
    font-weight: 500;
    text-align: right;
}

.pl-blue-text {
    color: #2563eb;
}

.pl-blue-text-bold {
    color: #2563eb;
    font-weight: 700;
}

.pl-green-text {
    color: #10b981;
}

.pl-subtotal {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eaecf0;
}

.pl-final-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eaecf0;
    background-color: #f9fafb;
    padding: 12px;
    border-radius: 6px;
}

.pl-section-divider {
    height: 1px;
    background-color: #eaecf0;
    margin: 24px 0;
}

.pl-modal-footer {
    padding: 24px;
    border-top: 1px solid #eaecf0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background-color: #f9fafb;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.pl-btn-outline {
    padding: 10px 16px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.pl-btn-outline:hover {
    background-color: #f3f4f6;
}

.pl-btn-primary {
    padding: 10px 16px;
    background-color: #1570ef;
    border: 1px solid #1570ef;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.pl-btn-primary:hover {
    background-color: #1d4ed8;
}
.dqm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 24, 40, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: 'Inter', sans-serif;
}

.dqm-container {
  width: 440px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 
              0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: dqm-fade-in 0.2s ease-out;
}

@keyframes dqm-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.dqm-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #98A2B3;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.dqm-icon-wrapper {
  margin-bottom: 16px;
}

.dqm-icon-circle {
  width: 48px;
  height: 48px;
  background: #FEF3F2;
  border: 8px solid #FFF1F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dqm-title {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 8px 0;
}

.dqm-description {
  font-size: 14px;
  line-height: 20px;
  color: #475467;
  margin: 0 0 24px 0;
}

.dqm-form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dqm-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.dqm-label .required {
  color: #1570EF;
}

.dqm-select, .dqm-input {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 14px;
  color: #101828;
  outline: none;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  transition: all 0.2s;
}

.dqm-select:focus, .dqm-input:focus {
  border-color: #84CAFF;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #EFF8FF;
}

.dqm-footer {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.dqm-btn-cancel {
  flex: 1 1;
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  color: #344054;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  transition: background 0.2s;
}

.dqm-btn-cancel:hover {
  background: #F9FAF8;
}

.dqm-btn-delete {
  flex: 1 1;
  height: 44px;
  background: #D92D20;
  border: 1px solid #D92D20;
  border-radius: 8px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  transition: background 0.2s;
}

.dqm-btn-delete:hover {
  background: #B42318;
  border-color: #B42318;
}

.dqm-btn-delete:disabled {
  background: #FDA29B;
  border-color: #FDA29B;
  cursor: not-allowed;
}

/* ── Quotation Management Dashboard Styles ────────────────────────── */

.quotation-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 8px 2px;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.kpi-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  border-color: #d0d5dd;
}

.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
}

.kpi-card:nth-child(1)::before { background: linear-gradient(90deg, #175cd3, #53b1fd); }
.kpi-card:nth-child(2)::before { background: linear-gradient(90deg, #039855, #6ce9a6); }
.kpi-card:nth-child(3)::before { background: linear-gradient(90deg, #f79009, #fec84b); }
.kpi-card:nth-child(4)::before { background: linear-gradient(90deg, #7a5af8, #b692f6); }

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.kpi-title {
  color: #475467;
  font-size: 14px;
  font-weight: 600;
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-icon svg { font-size: 20px; }

.kpi-icon.total { background: #eff4ff; color: #175cd3; }
.kpi-icon.rate { background: #ecfdf3; color: #039855; }
.kpi-icon.value { background: #fffaeb; color: #f79009; }
.kpi-icon.avg { background: #f4f3ff; color: #7a5af8; }

.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: #101828;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.kpi-trend.up { color: #039855; }
.kpi-trend.down { color: #d92d20; }
.kpi-trend svg { font-size: 16px; }
.kpi-trend span { color: #475467; }

/* Alerts */
.dashboard-alert {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid transparent;
}

.dashboard-alert.critical { background: #fef3f2; border-color: #fee4e2; color: #b42318; }
.dashboard-alert.warning { background: #fffaeb; border-color: #fef0c7; color: #b54708; }
.dashboard-alert.info { background: #f0f9ff; border-color: #e0f2fe; color: #026aa2; }

.alert-icon { font-size: 24px !important; }
.alert-content { font-size: 14px; line-height: 1.5; font-weight: 500; }

/* Charts & Tables Grid */
.charts-grid, .operational-tables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

@media (max-width: 1024px) {
  .charts-grid, .operational-tables-grid {
    grid-template-columns: 1fr;
  }
}

.chart-card, .table-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  display: flex;
  flex-direction: column;
}

.chart-header, .table-header {
  padding: 20px 24px;
  border-bottom: 1px solid #eaecf0;
}

.chart-header h3, .table-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.chart-header p, .table-header p {
  font-size: 14px;
  color: #475467;
  margin: 4px 0 0;
}

.chart-body, .table-body {
  padding: 24px;
}

.dashboard-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
  color: #667085;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f2f4f7;
  border-top: 3px solid #175cd3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Custom Table Overrides */
.table-card .standard-table-container {
  margin-top: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.table-card .data-table-header {
  display: none; /* Hide internal table header as we have card header */
}

/* Toggle Switch */
.view-mode-toggle {
  display: flex;
  background: #f2f4f7;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
}

.toggle-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  background: transparent;
}

.toggle-btn.active {
  background: #ffffff;
  color: #101828;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* ────────────────────────────────────────────────────────────────────────── */

.quotation-page-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
  overflow: hidden;
  min-height: 0;
}

.quotation-page-wrapper .searchbar-main {
  display: none;
}

/* Table Controls - mounted as table first row */
.quotation-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 2px 16px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
}

.quotation-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 350px;
}

.quotation-search-icon {
  position: absolute;
  left: 12px;
  color: #667085;
  font-size: 20px;
}

.quotation-search-input {
  width: 100%;
  height: 44px;
  padding: 0 45px 0 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.quotation-search-input::placeholder {
  color: #667085;
}

.quotation-search-shortcut {
  position: absolute;
  right: 12px;
  padding: 2px 6px;
  background: #fcfcfd;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font-size: 12px;
  color: #667085;
  font-weight: 500;
}

.quotation-filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f2f4f7 !important;
  color: #344054 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 10px !important;
  padding: 0 6px !important;
  margin-left: 6px !important;
  border: 1px solid #d0d5dd !important;
}

.filter-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  transition: all 0.2s;
}

.filter-trigger-btn:hover {
  background: #f9fafb;
}

.source-pill,
.type-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  border: 1px solid #eaecf0;
  color: #344054;
}

.source-pill::before,
.type-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  background: #d0d5dd;
}

.source-from-lead::before {
  background: #2e90fa;
}

.source-customer::before {
  background: #f79009;
}

.source-new::before {
  background: #7f56d9;
}

.type-service::before {
  background: #2e90fa;
}

.type-product::before {
  background: #f79009;
}

.type-combined::before {
  background: #7f56d9;
}

/* Action column center alignment */
.quotation-page-wrapper .table-container th:last-child {
  text-align: center;
}

.quotation-page-wrapper .table-container td:last-child .action-btns {
  justify-content: center;
}

.quotation-page-wrapper .table-container {
  flex: 1 1;
  width: 100%;
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.05);
}

.quotation-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: fixed;
  min-width: 1100px;
}

/* Eliminate DataTable's duplicated inner container styling to remove spacing */
.quotation-page-wrapper .table-container .data-table-wrapper {
  box-shadow: none !important;
  border-radius: 0 !important;
}

.quotation-page-wrapper .table-container thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.quotation-page-wrapper .table-container th {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  vertical-align: middle;
  background: #f9fafb;
  font-family: "Inter", sans-serif;
  border-bottom: 2px solid #e5e7eb;
}

/* Column-specific styling for Quotation table */
.quotation-page-wrapper .table-container td:nth-child(1) {
  text-align: left;
  font-weight: 600;
  color: #111827;
}

.quotation-page-wrapper .table-container td:nth-child(2) {
  text-align: left;
  color: #111827;
}

.quotation-page-wrapper .table-container td:nth-child(3) {
  text-align: left;
  color: #6b7280;
  font-size: 12px;
}

.quotation-page-wrapper .table-container td:nth-child(4) {
  text-align: left;
  color: #111827;
}

.quotation-page-wrapper .table-container td:nth-child(5) {
  text-align: right;
  color: #111827;
  font-weight: 500;
}

.quotation-page-wrapper .table-container td:nth-child(6) {
  text-align: center;
  color: #6b7280;
  font-size: 12px;
}

.quotation-page-wrapper .table-container td:nth-child(7) {
  text-align: center;
  font-size: 12px;
}

.quotation-page-wrapper .table-container td:nth-child(8) {
  text-align: center;
  font-size: 13px;
}

.quotation-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
}

.quotation-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.quotation-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.quotation-page-wrapper .table-container tbody {
  /* Default table-row-group */
}

.quotation-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .quotation-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .quotation-page-wrapper .table-container table {
    min-width: 1000px;
  }

  .quotation-page-wrapper .table-container th,
  .quotation-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .quotation-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .quotation-page-wrapper .table-container table {
    min-width: 900px;
  }

  .quotation-page-wrapper .table-container th,
  .quotation-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .quotation-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .quotation-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .quotation-page-wrapper .table-container th,
  .quotation-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* Pagination container styling */
.quotation-page-wrapper .pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}



@media (max-width: 768px) {
  .quotation-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .quotation-page-wrapper .table-container table {
    min-width: 900px;
  }

  .quotation-page-wrapper .table-container th,
  .quotation-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .quotation-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .quotation-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .quotation-page-wrapper .table-container th,
  .quotation-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* Pagination container styling */
.quotation-page-wrapper .pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
.quotation-filter-popover {
  position: absolute;
  top: 110%;
  right: 0;
  width: 320px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  font-family: 'Inter', sans-serif;
}

.filter-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eaecf0;
}

.filter-label-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #101828;
}

.filter-icon {
  font-size: 20px !important;
  color: #667085;
}

.filter-count {
  background: #f2f4f7;
  color: #344054;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 16px;
}

.filter-close-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.filter-close-btn:hover {
  background: #f9fafb;
}

.filter-close-btn:focus-visible {
  outline: 2px solid #1570ef;
  outline-offset: 2px;
}

.filter-close-x {
  font-size: 20px !important;
  color: #98a2b3;
  transition: color 0.2s;
}

.filter-close-btn:hover .filter-close-x {
  color: #344054;
}

.filter-scroll-content {
  padding: 16px;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Chips */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  /* Ensure buttons inherit Inter */
}

.filter-chip:hover {
  background: #f9fafb;
  border-color: #d0d5dd;
}

.filter-chip:focus-visible {
  outline: 2px solid #1570ef;
  outline-offset: 2px;
}

.filter-chip.active {
  background: #eff8ff;
  color: #175cd3;
  border-color: #b2ddff;
}

.filter-chip.active:hover {
  background: #d1e9ff;
}

.filter-chip .chip-x {
  font-size: 14px !important;
  color: #175cd3;
}

/* Dropdowns & Search */
.filter-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #b2ddff;
  /* Active border like in reference */
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 0px 0px 4px #eff8ff;
  cursor: text;
}

.inner-search-icon {
  font-size: 18px !important;
  color: #667085;
}

.selected-tag {
  flex: 1 1;
  font-size: 14px;
  font-weight: 500;
  color: #101828;
}

.expand-icon {
  font-size: 20px !important;
  color: #667085;
}

.filter-dropdown-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  margin-top: -4px;
}

.dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background: #f9fafb;
}

.dropdown-item.active {
  background: #f9fafb;
  color: #101828;
}

.dropdown-item .check-icon {
  font-size: 18px !important;
  color: #1570ef;
}

/* Range Inputs */
.filter-range-inputs {
  display: flex;
  gap: 12px;
}

.range-input-wrap {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.range-input-wrap input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  color: #101828;
  width: 100%;
}

.range-input-wrap input::placeholder {
  color: #98a2b3;
}

.range-icon {
  font-size: 18px !important;
  color: #667085;
}

.currency-prefix {
  font-size: 14px;
  font-weight: 500;
  color: #667085;
}

/* Footer */
.filter-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-top: 1px solid #eaecf0;
}

.reset-all-btn {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #475467;
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}

.reset-all-btn:hover {
  color: #101828;
}

.apply-filters-btn {
  padding: 10px 16px;
  background: #1570ef;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  transition: background 0.2s;
}

.apply-filters-btn:hover {
  background: #125eca;
}
/* GMA Management Main Layout Wrapper */
.gma-page-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 0;
  box-sizing: border-box;
  background-color: var(--background-light);
}

.gma-page-wrapper .searchbar-main {
  display: none;
}

/* Custom Tabs System */
.gma-tabs-container {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid #eaecf0;
  padding: 0 24px;
  margin-top: 10px;
  background: white;
  border-radius: 12px 12px 0 0;
}

.gma-tab-btn {
  background: none;
  border: none;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 500;
  color: #667085;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  transition: all 0.2s ease;
}

.gma-tab-btn:hover {
  color: #101828;
}

.gma-tab-btn.active {
  color: #1570ef;
  font-weight: 600;
}

.gma-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1570ef;
  border-radius: 2px 2px 0 0;
}

/* Table Controls - mounted as table first row under tabs */
.gma-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 8px 24px;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-bottom: none;
  box-sizing: border-box;
}

.gma-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 350px;
}

.gma-search-icon {
  position: absolute;
  left: 12px;
  color: #667085;
  font-size: 20px !important;
}

.gma-search-input {
  width: 100%;
  height: 44px;
  padding: 0 45px 0 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  font-family: inherit;
}

.gma-search-input::placeholder {
  color: #667085;
}

.gma-search-input:focus {
  outline: none;
  border-color: #1570ef;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.gma-search-shortcut {
  position: absolute;
  right: 12px;
  padding: 2px 6px;
  background: #fcfcfd;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font-size: 12px;
  color: #667085;
  font-weight: 500;
}

.gma-filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gma-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  transition: all 0.2s;
  font-family: inherit;
}

.gma-filter-btn:hover {
  background: #f9fafb;
}

.gma-filter-icon {
  font-size: 18px !important;
  color: #667085;
}

/* Action column center alignment */
.gma-page-wrapper .table-container th:last-child {
  text-align: center;
}

.gma-page-wrapper .table-container td:last-child .action-btns {
  justify-content: center;
}

.gma-page-wrapper .table-container.gma-table-container {
  flex: 1 1;
  width: 100%;
  background: #fff;
  border: 1px solid #eaecf0;
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.05);
}

.gma-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 1100px;
}

.gma-page-wrapper .table-container thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.gma-page-wrapper .table-container th {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  vertical-align: middle;
  background: #f9fafb;
  font-family: "Inter", sans-serif;
  border-bottom: 2px solid #e5e7eb;
}

/* Eliminate DataTable's duplicated inner container styling to remove spacing */
.gma-page-wrapper .table-container .data-table-wrapper {
  box-shadow: none !important;
  border-radius: 0 !important;
}

.gma-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
}

.gma-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.gma-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

/* Status Legend */
.gma-status-legend {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 16px 24px;
  background: #ffffff;
  border-top: 1px solid #eaecf0;
  border-radius: 0 0 12px 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475467;
  font-weight: 500;
}

.legend-item span {
  white-space: nowrap;
}

.add-gma-wrapper {
  padding-bottom: 40px;
}

/* Master Container */
.gma-master-form-container {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1);
}

.gma-form-section {
  padding: 0 24px 12px;
}

.gma-form-section:first-child {
  padding-top: 24px;
}

.section-header {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(24, 29, 39, 1);
  margin-bottom: 20px;
  padding: 16px 0;
  margin-top: 12px;
  border-top: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gma-form-section:first-child .section-header {
  margin-top: 0;
  border-top: none;
}

.sub-section-header {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(24, 29, 39, 1);
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 12px 0;
  border-top: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-section-header.first-sub {
  border-top: none;
  margin-top: 0;
}

.add-link-btn {
  color: #1570ef;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
}

.add-link-btn:hover {
  text-decoration: underline;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

.form-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.table-wrapper {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: visible !important;
  /* Removed overflow: hidden to prevent clipping absolute dropdowns */
  position: relative;
  z-index: auto;
}

.table-header-row {
  display: grid;
  padding: 12px 16px;
  background: #fbfcfd;
  border-bottom: 1px solid #eaecf0;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}

.table-body-row {
  display: grid;
  padding: 12px 16px;
  border-bottom: 1px solid #eaecf0;
  font-size: 14px;
  color: #344054;
  align-items: center;
}

.table-body-row:last-child {
  border-bottom: none;
}

.cost-table-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: rgba(24, 29, 39, 1);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.grid-cols-5 {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 16px;
}

.grid-cols-9 {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
}

/* =========================================
   Approver Modal Overlay Styling
========================================= */
.approver-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2147483647;
  font-family: 'Inter', sans-serif;
}

.approver-modal-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  padding: 24px;
  box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
}

.approver-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
  margin-top: 0;
  margin-bottom: 8px;
}

.approver-modal-desc {
  font-size: 14px;
  color: #475467;
  line-height: 1.5;
  margin-bottom: 24px;
}

.approver-modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.approver-red-btn {
  background-color: #d92d20 !important;
  border-color: #d92d20 !important;
  color: #fff !important;
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.approver-red-btn:hover {
  background-color: #b42318 !important;
}

/* Floating Toast Notification */
.gma-toast-wrapper {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  min-width: 250px;
  animation: slideDownToast 0.3s ease-out;
}

@keyframes slideDownToast {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.readonly-text {
  font-size: 14px;
  font-weight: 500;
  color: #667085;
}

.input-like-display {
  display: flex;
  align-items: center;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #f9fafb;
  min-height: 44px;
}

/* Common form fields overriding */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.form-input,
.form-select {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #101828;
  outline: none;
  transition: all 0.2s;
  background: #fff;
}

.form-input:focus,
.form-select:focus {
  border-color: #1570ef;
  box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.form-input:disabled {
  cursor: not-allowed;
  color: #667085;
}

.radio-group-horizontal {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 16px;
}

.summary-row {
  display: grid;
  padding: 12px 16px;
  border-top: 1px solid #eaecf0;
  font-size: 14px;
  font-weight: 600;
  color: #101828;
  background: #fcfcfd;
}

/* Badges */
.badge-service {
  background: #eff8ff;
  color: #175cd3;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge-service::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #175cd3;
}

.badge-qualified {
  background: #ecfdf3;
  color: #027a48;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge-qualified::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #12b76a;
}

/* =========================================
   View Mode Refinements (Quotation Style)
========================================= */
.view-gma-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 0;
  /* Controlled by inline style per row */
}

/* ── Mini View Tables (inside Per Site, Site Summary, Audit Trail) ── */
.mini-view-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}

.mini-view-table thead tr {
  background: #f9fafb;
}

.mini-view-table th {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  text-align: left;
  border-bottom: 1px solid #eaecf0;
}

.mini-view-table th.text-right,
.mini-view-table td.text-right {
  text-align: right;
}

.mini-view-table td {
  padding: 10px 12px;
  color: #344054;
  font-size: 13px;
  border-bottom: 1px solid #f2f4f7;
}

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

.view-section-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Fixed syntax error and restored minimal gap */
}

.view-section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: 0%;
  color: rgba(24, 29, 39, 1);
  margin: 0;
  padding: 0;
  border-left: none !important;
  padding-left: 0 !important;
  display: block;
}

.view-section-title::before {
  display: none !important;
  /* Remove any potential pseudo-elements */
}

.view-page-section {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  padding: 16px 24px;
  margin: 0;
  /* Zero out all margins */
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f2f4f7;
}

.info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  font-size: 14px;
  color: #667085;
  font-weight: 500;
}

.info-row .value {
  font-size: 14px;
  color: #344054;
  font-weight: 600;
  text-align: right;
}

.info-row.highlight-row {
  background: #fef3f2;
  margin: 12px -24px -16px;
  padding: 16px 24px;
  border-radius: 0 0 10px 10px;
  border-top: 2.5px solid #fda29b;
}

.info-row.highlight-row .label {
  font-weight: 700;
  color: #b42318;
}

.info-row.highlight-row .value {
  font-size: 18px;
  font-weight: 800;
  color: #b42318;
}

@media (max-width: 1024px) {
  .view-gma-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ── Inline-style extractions: View pages ──────────────────── */
.page-action-row {
  display: flex;
  gap: 12px;
}

.view-grid-row {
  margin-bottom: 20px;
}

.view-grid-row--top-align {
  align-items: start;
}

.view-col-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.view-page-section--flush {
  padding: 0;
}

.section-table-header-label {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13px;
  color: #344054;
  border-bottom: 1px solid #eaecf0;
}

.mini-view-table .total-row {
  background: #f9fafb;
  font-weight: 700;
}

.section-summary-footer {
  padding: 12px 16px;
  border-top: 1px solid #eaecf0;
}

.section-summary-footer--sm {
  padding: 8px 16px 12px;
  border-top: 1px solid #eaecf0;
}

.info-row--pt {
  padding-top: 8px;
}

.value--bold {
  font-weight: 700;
}

.per-site-sub-section {
  padding: 12px 16px 0;
}

.per-site-sub-section--bordered {
  padding: 12px 16px 0;
  border-top: 1px solid #f2f4f7;
}

.per-site-sub-section--doc {
  padding: 12px 16px;
  border-top: 1px solid #f2f4f7;
}

.per-site-sub-header {
  font-weight: 600;
  font-size: 14px;
  color: #101828;
  margin-bottom: 8px;
}

.per-site-sub-header--sm {
  font-weight: 600;
  font-size: 14px;
  color: #101828;
  margin-bottom: 4px;
}

.sub-section-label {
  padding: 12px 16px 0;
  border-top: 1px solid #eaecf0;
}

.sub-section-label-text {
  font-weight: 600;
  font-size: 13px;
  color: #344054;
  margin-bottom: 8px;
}

.mini-view-table--mb {
  margin-bottom: 12px;
}

.approval-kv-inner {
  padding: 0 16px;
}

.info-row--relative {
  position: relative;
}

.remarks-truncated {
  max-width: 180px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.remarks-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  padding: 12px 16px;
  width: 240px;
  font-size: 13px;
  line-height: 1.6;
  color: #344054;
  z-index: 100;
  font-family: Inter, sans-serif;
}

.approval-submit-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.approval-submit-btn {
  background: #1570ef;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 14px;
  font-family: Inter, sans-serif;
  cursor: pointer;
}

.remarks-input {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  color: #344054;
  width: 220px;
  outline: none;
}

.gma-secondary-fields-section {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px dashed #eaecf0;
  align-items: end;
}

.gma-secondary-fields-section .form-label {
  color: #667085;
  font-size: 12px;
  margin-bottom: 4px;
}

.gma-secondary-fields-section .form-input {
  background: #fbfcfd;
  border-color: #f2f4f7;
  font-size: 13px;
  padding: 8px 12px;
  min-height: 38px;
}

.gma-secondary-fields-section .form-input:focus {
  background: #fff;
  border-color: #1570ef;
}

/* Site Card Styling */
.site-card-active {
  border: 2px solid #1570ef !important;
  box-shadow: 0px 4px 12px rgba(21, 112, 239, 0.1) !important;
  margin-left: 12px;
  margin-right: 12px;
  background: #fff;
  transition: all 0.3s ease;
}

.site-badge-new {
  background: #1570ef;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  margin-left: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 4px rgba(21, 112, 239, 0.2);
}

.site-header-new {
  border-bottom: 1px solid #d1e9ff !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.site-header-standard {
  border-bottom: 1px solid #eaecf0 !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
/* Add Quotation Styles */
.quotation-form-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.quotation-form-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 32px;
  margin-top: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
}

.quotation-form-section {
  margin-bottom: 0px;
}

.quotation-form-section:last-child {
  margin-bottom: 0;
}

.quotation-section-title {
  font-family: "Inter", sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: rgba(24, 29, 39, 1);
  line-height: 100%;
  letter-spacing: 0%;
  margin-top: 32px;
  margin-bottom: 20px;
  padding-top: 24px;
  border-top: 1px solid #eaecf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quotation-form-section:first-child .quotation-section-title {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.quotation-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px 32px;
  gap: 24px 32px;
  width: 100%;
}

.quotation-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px 32px;
  gap: 24px 32px;
  width: 100%;
}

/* Badge Box for Read-only fields */
.badge-input-box {
  background: #f9fafb;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  width: 100%;
}

/* Internal Badge override to match the "pill inside box" look */
.badge-input-box .status-badge {
  background-color: #ffffff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  height: 28px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #344054 !important;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important;
}

/* Ensure the dot is visible and correctly sized */
.badge-input-box .status-badge::before {
  width: 6px !important;
  height: 6px !important;
  margin-right: 2px;
}

/* Force Blue Dot for EVERY Lead Type value */
.lead-type-badge-container .status-badge::before {
  background-color: #2e90fa !important;
}

/* Force Green Dot for EVERY Lead Status value */
.lead-status-badge-container .status-badge::before {
  background-color: #12b76a !important;
}

/* Radio Labels (Legacy logic removal as using MUI) */
.source-selection-group {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 4px 0;
}

/* MUI Customization to match brand color if needed */
.MuiRadio-root.Mui-checked {
  color: #1570ef !important;
}

.MuiFormControlLabel-label {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #344054 !important;
}

/* Location Blocks */
.location-manager-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.location-block {
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
  background: #fcfcfd;
  margin-bottom: 24px;
  position: relative;
}

.location-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #d0d5dd;
}

.location-title {
  font-size: 14px;
  font-weight: 600;
  color: #475467;
}

.remove-location-btn {
  color: #d92d20;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.remove-location-btn:hover {
  background: #fef3f2;
}

/* Service Configuration Modal/Inline */
.service-config-block {
  border: 1.5px solid #d1e9ff;
  background: #f5faff;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.service-config-header {
  font-size: 13px;
  font-weight: 700;
  color: #175cd3;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* Pricing Summary Styles */
.pricing-summary-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 40px;
  gap: 40px;
  margin-top: 24px;
}

.location-breakdown-table {
  width: 100%;
  border-collapse: collapse;
}

.location-breakdown-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  padding: 12px;
  border-bottom: 1px solid #eaecf0;
}

.location-breakdown-table td {
  padding: 12px;
  font-size: 14px;
  color: #344054;
  border-bottom: 1px solid #f2f4f7;
}

.final-pricing-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
}

.pricing-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f2f4f7;
}

.pricing-row:last-of-type {
  border-bottom: none;
}

.pricing-row.grand-total {
  border-top: 2px solid #eaecf0;
  margin-top: 12px;
  padding-top: 16px;
}

.price-label {
  font-size: 14px;
  color: #667085;
}

.price-value {
  font-size: 14px;
  font-weight: 600;
  color: #101828;
}

.grand-total .price-label {
  font-size: 16px;
  font-weight: 700;
  color: #101828;
}

.grand-total .price-value {
  font-size: 20px;
  font-weight: 700;
  color: #175cd3;
}

.table-cell-input, .table-cell-select {
  width: 100%;
  height: 36px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  color: #101828;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s;
}

.table-cell-input:focus, .table-cell-select:focus {
  border-color: #175cd3;
  box-shadow: 0 0 0 4px rgba(23, 92, 211, 0.1);
}

.table-grand-total {
  font-size: 16px;
  font-weight: 700;
  color: #175cd3;
}

.table-input-small {
  width: 80px;
}

.table-select-container.mini {
  min-width: 120px;
}

.summary-table thead th {
  font-size: 11px;
  text-transform: uppercase;
}

/* Footer Actions */
.quotation-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #eaecf0;
}

/* Service Selection Table Styles */
.service-table-wrapper {
  margin-top: 12px;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: visible;
}

.service-selection-table {
  width: 100%;
  border-collapse: collapse;
}

.service-selection-table thead th {
  background: #f9fafb;
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  border-bottom: 1px solid #eaecf0;
  white-space: nowrap;
}

.service-selection-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid #f2f4f7;
  background: #ffffff;
}

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

.table-select-container {
  min-width: 180px;
}

/* Specific cell styles */
.table-placeholder-text {
  color: #98a2b3;
  font-size: 14px;
}

.table-val-text {
  color: #344054;
  font-size: 14px;
}

.table-total-text {
  color: #101828;
  font-size: 14px;
  font-weight: 600;
}

.table-row-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.row-action-icon {
  font-size: 16px;
  cursor: pointer;
  color: #667085;
  transition: color 0.2s;
}

.row-action-icon.edit:hover {
  color: #175cd3;
}

.row-action-icon.delete:hover {
  color: #d92d20;
}

.add-another-service-btn {
  width: 100%;
  padding: 12px;
  background: #ffffff;
  border: none;
  color: #175cd3;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  padding-left: 16px;
  border-top: 1px solid #eaecf0;
  transition: background 0.2s;
}

.add-another-service-btn:hover {
  background: #f9fafb;
}

.quotation-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.upload-box {
  border: 1px dashed #d0d5dd;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  min-height: 120px;
}

.upload-box:hover {
  background: #f9fafb;
  border-color: #d0d5dd;
}

.upload-box-icon {
  font-size: 32px;
  color: #667085;
  margin-bottom: 12px;
  padding: 6px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #eaecf0;
}

.upload-box-text {
  font-size: 14px;
  color: #475467;
  font-weight: 500;
}

.upload-box-text span {
  color: #175cd3;
  font-weight: 600;
}

.upload-box-subtext {
  font-size: 11px;
  color: #667085;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 1200px) {
  .quotation-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .quotation-form-grid {
    grid-template-columns: 1fr;
  }
  .pricing-summary-grid {
    grid-template-columns: 1fr;
  }
}

.error-message {
  color: #f04438;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
  display: block;
}

.input-error {
  border-color: #f04438 !important;
  background-color: #fef3f2 !important;
}

.view-quotation-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px;
    background: #fcfcfd;
}

.view-quotation-content {
    flex: 1 1;
    overflow-y: auto;
    padding: 24px 0 40px;
}

/* Header Actions */
.view-header-actions {
    display: flex;
    gap: 12px;
}

/* Status Progress Section (Transparent) */
.status-progress-section {
    padding: 20px 0 32px;
    margin-bottom: 24px;
}

.status-timeline-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 900px;
    margin: 0 auto 12px;
}

.step-v2 {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.step-point {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #eaecf0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Completed Step */
.step-v2.completed .step-point {
    background: #1570ef;
    border-color: #1570ef;
    color: #ffffff;
    width: 26px;
    height: 26px;
}

/* Active Step (Halo/Glow Effect) */
.step-v2.active .step-point {
    border-color: #1570ef;
    box-shadow: 0 0 0 6px rgba(21, 112, 239, 0.3);
    background: #1570ef;
    width: 26px;
    height: 26px;
}

.step-v2.active .dot {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
}

/* Inactive/Future Step dot */
.step-v2 .dot {
    width: 8px;
    height: 8px;
    background: #eaecf0;
    border-radius: 50%;
}

.step-point .check {
    font-size: 14px;
    font-weight: bold;
}

.step-text {
    font-size: 13px;
    font-weight: 700;
    color: #98a2b3; /* Muted for inactive */
    margin-top: 4px;
}

.step-v2.completed .step-text,
.step-v2.active .step-text {
    color: #475467; /* Bold/Darker for active/completed */
}

/* Connectors */
.step-connector {
    position: absolute;
    top: 13px;
    left: calc(50% + 14px);
    width: calc(100% - 28px);
    height: 2px;
    background: #f2f4f7;
    z-index: -1;
}

.step-connector.completed {
    background: #1570ef;
    height: 2px;
}

/* Metadata Card */
.status-metadata-card {
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    padding: 16px 24px;
    max-width: 100%;
    margin-top: 24px;
}

.status-metadata {
    display: flex;
    gap: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #98a2b3;
}

.status-metadata .divider {
    color: #eaecf0;
    font-weight: 400;
}

/* 2-Column Grid */
.view-quotation-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
    margin-bottom: 24px;
}

/* Master Main Wrapper (The single card with border) */
.view-quotation-main-wrapper {
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1);
}

.section-content-bordered {
    border: 1px solid #f2f4f7;
    border-radius: 8px;
    padding: 16px 20px;
    background: #ffffff;
}

.section-content-bordered.no-padding {
    padding: 0;
}

.card-title {
    padding: 0 0 16px; 
    font-family: 'Inter', sans-serif;
    line-height: 32px;
    letter-spacing: 0%;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #101828;
    margin: 0 !important;
    padding-bottom: 8px !important;
}

.card-content {
    /* No longer used as primary container */
}

.view-quotation-details-card .details-card-list {
    border: 1px solid #f2f4f7;
    border-radius: 8px;
    padding: 12px 16px;
    gap: 0;
    box-shadow: none;
}

.view-quotation-details-card .details-card-item {
    padding: 8px 0;
    border-bottom: 1px solid #f9fafb;
}

.view-quotation-details-card .details-card-item:last-child {
    border-bottom: none;
}

.view-quotation-details-card .details-card-label {
    font-size: 16px;
    color: #475467;
    font-weight: 500;
}

.view-quotation-details-card .details-card-value {
    font-size: 16px;
    color: #101828;
    font-weight: 600;
}

.client-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #eaecf0;
    border-radius: 6px;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    line-height: 1.2;
}

.client-type-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2e90fa;
}

.client-type-new::before {
    background: #f79009;
}

.client-map-link {
    color: #1570ef;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f9fafb;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row .label {
    font-size: 15px;
    color: #667085;
    font-weight: 500;
}

.info-row .label.highlight-label {
    color: #344054;
    font-weight: 700;
}

.info-row .value {
    font-size: 15px;
    color: #101828;
    font-weight: 600;
}

/* Full Width Card Below (Merged into main-wrapper) */
.view-quotation-full-card {
    /* Removed border/padding - now inside main-wrapper */
}

/* Reused & Refined Table Styles */
.view-section-title {
    font-weight: 700;
    font-size: 18px;
    color: #101828;
    background: #f9fafb;
    padding: 12px 20px;
    border-radius: 8px;
    border-left: 4px solid #1570ef;
    margin-bottom: 24px;
}

.view-details-table th {
    background: #ffffff;
    padding: 14px 24px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #475467;
    text-transform: uppercase;
    border-bottom: 1px solid #eaecf0;
}

.view-details-table td {
    padding: 18px 24px;
    font-size: 14px;
    color: #101828;
    border-bottom: 1px solid #f2f4f7;
}

.sub-header-text {
    font-size: 16px;
    font-weight: 700;
    color: #344054;
    margin-bottom: 12px;
}

.service-location-card {
    padding: 18px 20px;
}

.service-block-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #101828;
    margin-bottom: 14px;
}

.service-meta-list {
    margin-bottom: 14px;
}

.service-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.service-meta-label {
    font-size: 15px;
    color: #475467;
    font-weight: 500;
}

.service-meta-label-strong {
    font-weight: 700;
    color: #101828;
}

.service-meta-value {
    font-size: 15px;
    color: #344054;
    font-weight: 600;
    text-align: right;
}

.service-branch-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #eaecf0;
    border-radius: 5px;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
}

.service-branch-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2e90fa;
}

.service-map-link {
    color: #1570ef;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-mini-table-wrapper {
    margin-bottom: 16px;
    border: 1px solid #f2f4f7;
    border-radius: 8px;
    overflow: hidden;
}

.mini-view-table {
    width: 100%;
    border-collapse: collapse;
}

.mini-view-table th {
    background: #f9fafb;
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #475467;
    text-transform: uppercase;
    border-bottom: 1px solid #f2f4f7;
}

.mini-view-table td {
    padding: 12px 16px;
    font-size: 13px;
    color: #101828;
    border-bottom: 1px solid #f9fafb;
}

.location-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1.5px solid #f2f4f7;
    font-weight: 700;
    font-size: 14px;
    color: #475467;
}

.location-subtotal-row .amount {
    color: #101828;
    font-size: 15px;
}

/* Attachment Styles */
.attachment-card-bordered {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 12px;
}

.file-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pdf-icon-placeholder {
    width: 44px;
    height: 52px;
    background: #fef3f2;
    border: 1px solid #fee4e2;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b42318;
    font-size: 10px;
    font-weight: 800;
}

.file-info-flat .file-name-bold {
    font-size: 14px;
    font-weight: 700;
    color: #101828;
    margin-bottom: 4px;
}

.file-info-flat .file-date {
    font-size: 12px;
    color: #667085;
}

.info-row.highlight {
    background: #f9fafb;
    padding: 16px;
    margin: 8px -20px -16px; /* Bleed into section-content-bordered */
    border-radius: 0 0 8px 8px;
    border-top: 2px solid #eaecf0;
}

.info-row.highlight .label {
    font-weight: 800;
    color: #101828;
}

.info-row.highlight .value {
    font-size: 18px;
    font-weight: 800;
    color: #101828;
}

.link-text {
    color: #1570ef !important;
    text-decoration: underline;
    cursor: pointer;
}

.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-4 { margin-top: 24px; }


/* Responsive */
@media (max-width: 1024px) {
    .view-quotation-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Overlay */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
}

/* Container */
.dialog-container {
  background: #ffffff;
  border-radius: 12px;
  width: 780px;
  max-width: 95%;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.25s ease-in-out;
  font-family: "Inter", system-ui, sans-serif;
  color: #1a1a1a;
}

/* Header */
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 20px;
}

.dialog-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #111827;
}

/* Close button */
.close-btn {
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
  color: #6b7280;
  transition: 0.2s ease;
}

.close-btn:hover {
  color: #111827;
}

/* Meta Section */
.dialog-meta {
  display: flex;
  gap: 50px;
  margin-top: 12px;
}

.dialog-meta p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.dialog-meta strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

/* Status badge */
.status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-badge.active {
  background: #eaf3ff;
  color: #1e88e5;
}

.status-badge.inactive {
  background: #fdecea;
  color: #d32f2f;
}

.status-badge.expired {
  background: #fff8e1;
  color: #b7791f;
}

/* History Table */
.dialog-section {
  margin-top: 28px;
}

.dialog-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  background: #fafafa;
}

.history-table th {
  background: #f9fafb;
  font-weight: 500;
  font-size: 13px;
  color: #6b7280;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.history-table td {
  font-size: 14px;
  color: #111827;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}

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

/* Summary Section */
.summary-section {
  border-top: 1px solid #e5e7eb;
  margin-top: 30px;
  padding-top: 18px;
}

.summary-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #111827;
}

.summary-cards {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.summary-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  flex: 1 1;
  text-align: center;
  min-width: 180px;
}

.summary-card p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

.summary-card h4 {
  margin-top: 6px;
  color: #111827;
  font-size: 16px;
  font-weight: 600;
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .status-badge {
    font-size: 9px; /* 12px */
    padding: 0.2rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .status-badge {
    font-size: 9px; /* 11px */
    padding: 0.15rem 0.4rem;
  }
}
/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}
.upload-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
}

.upload-row > * {
  width: 100%;
}
/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  width: 100%;
  max-width: 100%;
}


.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}
.forinputfeildbills {
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: relative;
}
.custom input {
  height: 40px;
  width: 300px;
  color: #717680;
  font-weight: 400;
  font-family: "Inter", sans-serif;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

.invoice-container {
  font-family: 'Inter', sans-serif;
  background: #fff;
  max-width: 900px;
  margin: 30px auto;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 40px 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  color: #222;
  overflow-y: auto;
  height: 95vh; /* ensures scrolling for long invoices */
}

/* ---------- HEADER WITH LOGO & TITLE ---------- */
.invoice-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.invoice-logo img {
  width: 60px;
  height: 60px;
  border-radius: 12px;
}

.invoice-title {
  font-size: 22px;
  font-weight: 600;
  color: #000;
}

/* ---------- HEADER DETAILS ---------- */
.invoice-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.invoice-header > div {
  width: 30%;
  min-width: 250px;
}

.invoice-header h2 {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  margin-bottom: 6px;
}

.invoice-header p {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}

/* ---------- PRODUCT TABLE ---------- */
.product-table {
  margin-bottom: 30px;
}

.product-table table {
  width: 100%;
  border-collapse: collapse;
}

.product-table th {
  font-size: 13px;
  font-weight: 600;
  background-color: #fafafa;
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.product-table td {
  font-size: 13px;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  color: #333;
}

.product-table td:first-child {
  font-weight: 500;
  color: #000;
}

/* ---------- ORDER SUMMARY ---------- */
.order-summary {
  width: 100%;
  max-width: 350px;
  margin-left: auto;
  font-size: 13px;
}

.order-summary h2 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

.summary-item.total {
  border-top: 2px solid #000;
  margin-top: 10px;
  padding-top: 6px;
  font-weight: 700;
}

/* ---------- PAYMENT INFO ---------- */
.payment-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid #e5e5e5;
  margin-top: 40px;
  padding-top: 20px;
}

.payment-info div {
  width: 45%;
  min-width: 260px;
}

.payment-info h2 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.payment-info p {
  font-size: 13px;
  color: #333;
}

/* ---------- SIGNATURE ---------- */
.signature {
  margin-top: 40px;
  text-align: left;
}

.signature p {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.signature h3 {
  font-family: 'Dancing Script', cursive;
  font-size: 24px;
  color: #000;
}

/* ---------- FOOTER ---------- */
.footer-note {
  background-color: #fafafa;
  border-top: 1px solid #e5e5e5;
  padding: 15px;
  font-size: 12px;
  color: #555;
  text-align: left;
  border-radius: 0 0 8px 8px;
  margin-top: 30px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .invoice-container {
    padding: 20px;
    height: auto;
  }

  .invoice-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .invoice-header {
    flex-direction: column;
  }

  .invoice-header > div {
    width: 100%;
  }

  .payment-info {
    flex-direction: column;
  }

  .order-summary {
    max-width: 100%;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}

.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}
.textarea {
  resize: vertical;
  padding: 8px 12px;
  min-height: 80px;
  max-height: 200px;
  width: 300px;
}
/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 8px 14px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 8px 14px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}
.forinputfeildvendors {
  display: flex;
  flex-direction: row;
  gap: 20px;
  position: relative;
}
.custom input {
  height: 40px;
  width: 300px;
  color: #717680;
  font-weight: 400;
  font-family: "Inter", sans-serif;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

.actions {
  display: flex;
  gap: 16px;
}
.purchase-orders-card {
  padding: 24px 32px;
  height: 71vh;
  margin-top: 20px;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}
.purchase-orders-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}
.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}
.custom-con {
  margin-top: 30px;
}
.custom-field input {
  width: 132px;
}
.cus-row-for {
  height: 64px;
}
.summary-box {
  margin-top: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: white;
  overflow: hidden;
  width: 526px;
  font-family: "Inter", sans-serif;
  height: 100%;
  position: relative;
  left: 71.5%;
}

.summary-box h3 {
  font-size: 16px;
  background-color: #fafafa;
  height: 44px;
  border-color: #e9eaeb;
  font-weight: 600;
  color: #535862;
  display: flex;
  align-items: center;
  padding-left: 3%;
  font-family: "Inter", sans-serif;
}

.summary-table {
  width: 100%;
  height: auto;
  border-collapse: collapse;
  table-layout: fixed; /* ✅ Keeps all columns aligned */
}

.summary-table td {
  padding: 0.9rem 1rem;
  text-align: left; /* ✅ everything left */
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.95rem;
  vertical-align: middle;
  font-family: "Inter", sans-serif;
  color: #414651;
  font-weight: 600;
}

.summary-table td:first-child {
  font-weight: 400;
  color: #535862;
  font-family: "Inter", sans-serif;
}
.summary-table td:last-child {
  font-weight: 600;
  color: #414651;
  font-family: "Inter", sans-serif;
}
.summary-table th {
  background: #f9fafb;
  font-weight: 400;
  color: #414651;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.new-task-added{
  display: block !important;
  } 

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.new-task-added{
  display: block !important;
  }  

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Single column field */
.form-row .single-col {
  width: 25%;
  flex-shrink: 0;
}

.form-row .single-col .form-field {
  flex: none !important;
}

.form-row .single-col input,
.form-row .single-col select {
  width: 100%;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Contract Management Module Styles */
.contract-mgmt-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f9fafb;
}

/* List Page */
.contract-list-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #ffffff;
  border-bottom: 1px solid #eaecf0;
}

.contract-search-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
}

.contract-search-input {
  flex: 1 1;
  padding: 8px 14px 8px 36px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  outline: none;
  background: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23667085%27 stroke-width=%272%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ccircle cx=%2711%27 cy=%2711%27 r=%278%27/%3E%3Cpath d=%27M21 21l-4.35-4.35%27/%3E%3C/svg%3E") no-repeat 12px center;
}

.contract-list-table-wrap {
  flex: 1 1;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eaecf0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contract-list-content {
  flex: 1 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
}

/* Add Contract Form */
.contract-form-layout {
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

/* View Contract */
.contract-detail-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid #eaecf0;
  padding: 0 24px;
  background: #ffffff;
}

.contract-detail-tab {
  padding: 16px 4px;
  font-size: 14px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}

.contract-detail-tab.active {
  color: #175cd3;
  border-bottom-color: #175cd3;
}

.contract-detail-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: auto;
}

.contract-detail-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
}

.contract-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  gap: 40px;
}

.contract-info-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contract-info-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px solid #f2f4f7;
}

.contract-info-item:last-child {
  border-bottom: none;
}

.contract-info-label {
  color: #667085;
  font-weight: 500;
  min-width: 160px;
}

.contract-info-value {
  color: #101828;
  font-weight: 500;
  text-align: right;
}

/* Payment Schedule Table */
.payment-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}

.payment-schedule-table th {
  background: #f9fafb;
  color: #667085;
  font-weight: 600;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid #eaecf0;
}

.payment-schedule-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f2f4f7;
  color: #344054;
}

.payment-schedule-table tr:last-child td {
  border-bottom: none;
}

/* Scope of Work Section */
.scope-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid #f2f4f7;
  font-size: 14px;
}

.scope-label {
  font-weight: 500;
  color: #667085;
}

.scope-value {
  color: #101828;
}

/* Filter Panel */
.contract-filter-modal {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 350px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.12);
  z-index: 500;
  display: flex;
  flex-direction: column;
}

.contract-filter-modal .filter-panel {
  border: none;
  box-shadow: none;
  max-width: 100%;
}

/* Link style */
.contract-link {
  color: #1570ef;
  text-decoration: underline;
}
.contract-actions-compact .actions-cell {
  width: 110px;
  min-width: 110px;
  text-align: center;
  padding-right: 8px;
}

.contract-actions-compact .action-btns {
  justify-content: center;
  padding-right: 0;
  gap: 6px;
}

.contract-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.contract-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #e4e7ec;
  background: #f9fafb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #667085;
  cursor: pointer;
}

.contract-action-btn.danger {
  color: #f04438;
  border-color: #fecdca;
  background: #fff5f5;
}

.contract-search-wrap {
  flex: 0 0 350px;
  max-width: 350px;
}

/* Terminate Modal */
.contract-terminate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 24px;
}

.contract-terminate-modal {
  width: min(520px, 95vw);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.contract-terminate-header {
  padding: 18px 20px;
  border-bottom: 1px solid #eaecf0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contract-terminate-header h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #101828;
}

.contract-terminate-header p {
  margin: 0;
  font-size: 12px;
  color: #667085;
}

.contract-terminate-close {
  border: none;
  background: transparent;
  font-size: 20px;
  color: #98a2b3;
  cursor: pointer;
}

.contract-terminate-body {
  padding: 18px 20px;
}

.terminate-summary {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #344054;
}

.terminate-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.terminate-warning-block {
  margin: 12px 0;
  font-size: 13px;
  color: #344054;
}

.terminate-warning-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.terminate-warning-block ul {
  margin: 6px 0 0 18px;
  padding: 0;
  color: #667085;
}

.terminate-eligibility {
  margin: 12px 0;
  font-size: 13px;
  color: #344054;
}

.terminate-eligibility-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.terminate-eligibility-item {
  margin-bottom: 6px;
}

.terminate-eligibility-action {
  color: #667085;
}

.terminate-form {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.contract-terminate-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid #eaecf0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.contract-terminate-confirm {
  background: #d92d20;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
/* Alert Banner */
.alert-banner {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.alert-banner.warning {
  background: #fffbfa;
  border: 1px solid #fda29b;
  color: #b42318;
}

.alert-banner p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #667085;
}

/* Statistics Grid */
.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.summary-stat-box {
  background: #fff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: #667085;
  font-weight: 500;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
}

/* Mini Table for Payment Lines */
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.mini-table th {
  background: #f9fafb;
  color: #475467;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #eaecf0;
}

.mini-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f2f4f7;
  color: #344054;
}

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

.billing-summary-table-wrap {
  border: 1px solid #eaecf0;
  border-radius: 10px;
  overflow: hidden;
}

.billing-summary-table-head,
.billing-summary-table-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.billing-summary-table-head {
  background: #f9fafb;
}

.billing-summary-table-head span {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #667085;
  border-right: 1px solid #eaecf0;
}

.billing-summary-table-row span {
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  border-right: 1px solid #f2f4f7;
}

.billing-summary-table-head span:last-child,
.billing-summary-table-row span:last-child {
  border-right: none;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #667085;
  font-size: 14px;
}

.contract-terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.contract-fg-details-card .details-card-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
}

.contract-fg-details-card .details-card-list {
  padding: 16px;
  gap: 10px;
}

.contract-fg-details-card .details-card-item {
  padding-bottom: 6px;
  border-bottom: 1px solid #f2f4f7;
}

.contract-fg-details-card .details-card-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contract-fg-scope-card .details-card-list {
  padding: 16px;
}

@media (max-width: 1100px) {
  .contract-terms-grid {
    grid-template-columns: 1fr;
  }
}

/* Modernized ViewContract Styles */
.cv-tab-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cv-section {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  margin-bottom: 8px;
}

.cv-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #101828;
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f4f7;
  margin-bottom: 20px;
  text-transform: none; /* Removed uppercase for a more premium look in cards */
}

.cv-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px 40px;
  gap: 24px 40px;
}

.cv-info-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cv-info-label {
  font-size: 12px;
  font-weight: 500;
  color: #667085;
}

.cv-info-value {
  font-size: 14px;
  font-weight: 600;
  color: #101828;
}

/* Scope of Work Hierarchy */
.cv-scope-container {
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.cv-site-item {
  border-bottom: 1px solid #eaecf0;
}

.cv-site-item:last-child {
  border-bottom: none;
}

.cv-site-header {
  padding: 16px 20px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

.cv-site-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cv-site-id-name {
  font-size: 14px;
  font-weight: 700;
  color: #101828;
}

.cv-site-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: #475467;
}

.cv-site-financials {
  display: flex;
  gap: 24px;
  padding-top: 4px;
  font-size: 13px;
}

.cv-financial-val {
  font-weight: 600;
  color: #101828;
}

.cv-site-services {
  padding: 8px 0 8px 40px;
}

.cv-service-item {
  padding: 12px 20px;
  border-left: 2px solid #eaecf0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cv-service-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 12px;
  height: 2px;
  background: #eaecf0;
}

.cv-service-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #101828;
}

.cv-service-meta {
  font-size: 13px;
  color: #667085;
}

/* Payment Section */
.cv-payment-summary {
  display: flex;
  gap: 40px;
  margin-bottom: 16px;
}

.cv-payment-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  overflow: hidden;
}

.cv-payment-table th {
  background: #f9fafb;
  padding: 10px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #667085;
  border-bottom: 1px solid #eaecf0;
}

.cv-payment-table td {
  padding: 12px 16px;
  font-size: 13px;
  color: #344054;
  border-bottom: 1px solid #f2f4f7;
}

.cv-payment-table tr:last-child td {
  border-bottom: none;
}

/* SLA Notes */
.cv-sla-notes {
  background: #fefcfb;
  border: 1px solid #ffede5;
  border-radius: 12px;
  padding: 20px;
}

.cv-sla-title {
  font-size: 14px;
  font-weight: 700;
  color: #101828;
  margin-bottom: 8px;
}

.cv-sla-text {
  font-size: 14px;
  line-height: 1.6;
  color: #475467;
  font-style: italic;
}
/* Variance Styling */
.input-with-warning {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variance-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf3;
  color: #027a48;
  width: -webkit-fit-content;
  width: fit-content;
}

.variance-tag.high-variance {
  background: #fff9f5;
  color: #c4320a;
  border: 1px solid #fedf89;
}

.variance-alert {
  font-weight: 700;
  color: #d92d20;
}
/* Multi-Checkbox Group */
.multi-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  min-height: 44px;
  align-items: center;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1570ef;
}

/* Dynamic Site & Service Configuration */
.site-config-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f4f7;
}

.site-title {
  font-size: 16px;
  font-weight: 700;
  color: #101828;
}

.remove-site-btn {
  color: #d92d20;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.site-info-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
}

.site-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-info-label {
  font-size: 12px;
  color: #667085;
  font-weight: 500;
}

.site-info-value {
  font-size: 13px;
  color: #101828;
  font-weight: 600;
}

.service-config-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  padding: 20px;
  margin-top: 16px;
  position: relative;
  border-left: 4px solid #1570ef;
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.service-title {
  font-size: 14px;
  font-weight: 700;
  color: #1570ef;
}

.remove-service-btn {
  color: #d92d20;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
}

.add-service-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1570ef;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 1px dashed #1570ef;
  padding: 10px 16px;
  border-radius: 8px;
  width: 100%;
  justify-content: center;
  margin-top: 16px;
  transition: all 0.2s;
}

.add-service-btn:hover {
  background: #f5faff;
}

.site-footer-value {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #f2f4f7;
  font-size: 14px;
  font-weight: 700;
  color: #101828;
}

/* Main container */
.ledger-edit-page-wrapper {
  /* padding: 24px 32px; */
  background-color: #f9fafb;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
}

/* Card wrapper */
.ledger-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  max-height: calc(100vh - 340px);
  overflow-y: auto;
  margin-top: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sections */
.ledger-section {
  padding: 24px;
  border-bottom: 1px solid #f3f4f6;
}

.ledger-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 24px;
}

/* Grid layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.grid-span-2 {
  grid-column: span 2;
}

/* One grid column: same width as Ledger name / Account group; preset under field */
.ledger-code-cell {
  min-width: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ledger-code-cell .form-field {
  width: 100%;
  margin-bottom: 0;
}

.ledger-code-cell__preset .secondary-button {
  width: 100%;
}

@media (min-width: 769px) {
  .ledger-code-cell__preset .secondary-button {
    width: auto;
    align-self: flex-start;
  }
}

/* Client-facing tips (Add Ledger) */
.ledger-posting-tips {
  margin-top: 20px;
  padding: 14px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafbfc;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

.ledger-posting-tips summary {
  cursor: pointer;
  font-weight: 600;
  color: #111827;
  outline: none;
  margin-left: -4px;
}

.ledger-posting-tips__lead {
  margin: 12px 0 0;
}

.ledger-posting-tips__list {
  margin: 12px 0 0;
  padding-left: 1.25rem;
}

.ledger-posting-tips__list li {
  margin-bottom: 8px;
}

.ledger-posting-tips__list code {
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #111827;
}

.ledger-posting-tips__footer {
  margin: 14px 0 0;
  font-size: 13px;
  color: #6b7280;
}

/* Radio Group Styling */
.radio-group {
  display: flex;
  gap: 24px;
  align-items: center;
  height: 42px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

/* TDS Section specialized checkbox */
.checkbox-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
}

.checkbox-field input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

/* Responsive */
@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .grid-span-2 {
    grid-column: span 1;
  }
}

.voucher-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.voucher-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 850px;
}

.voucher-page-wrapper .table-container thead {
  background: #ffffff !important;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.voucher-page-wrapper .table-container th {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  vertical-align: middle;
  background: #ffffff !important;
  font-family: "Inter", sans-serif;
}

/* Column-specific widths for Voucher table (6 columns) */
.voucher-page-wrapper .table-container th:nth-child(1),
.voucher-page-wrapper .table-container td:nth-child(1) {
  width: 16%;
  min-width: 120px;
}

.voucher-page-wrapper .table-container th:nth-child(2),
.voucher-page-wrapper .table-container td:nth-child(2) {
  width: 18%;
  min-width: 130px;
}

.voucher-page-wrapper .table-container th:nth-child(3),
.voucher-page-wrapper .table-container td:nth-child(3) {
  width: 18%;
  min-width: 130px;
}

.voucher-page-wrapper .table-container th:nth-child(4),
.voucher-page-wrapper .table-container td:nth-child(4) {
  width: 16%;
  min-width: 120px;
}

.voucher-page-wrapper .table-container th:nth-child(5),
.voucher-page-wrapper .table-container td:nth-child(5) {
  width: 17%;
  min-width: 130px;
}

.voucher-page-wrapper .table-container th:nth-child(6),
.voucher-page-wrapper .table-container td:nth-child(6) {
  width: 15%;
  min-width: 100px;
  text-align: center;
}

.voucher-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  display: table;
  width: 100%;
}

.voucher-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.voucher-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.voucher-page-wrapper .table-container tbody {
  display: table-row-group;
}

.voucher-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.voucher-page-wrapper .status-badge {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .voucher-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .voucher-page-wrapper .table-container table {
    min-width: 800px;
  }

  .voucher-page-wrapper .table-container th,
  .voucher-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .voucher-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .voucher-page-wrapper .table-container table {
    min-width: 700px;
  }

  .voucher-page-wrapper .table-container th,
  .voucher-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .voucher-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .voucher-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .voucher-page-wrapper .table-container th,
  .voucher-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .voucher-page-wrapper .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Pagination container styling */
.voucher-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

.trail-balance-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.trail-balance-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 850px;
}

.trail-balance-page-wrapper .table-container thead {
  background: #ffffff !important;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.trail-balance-page-wrapper .table-container th {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  vertical-align: middle;
  background: #ffffff !important;
  font-family: "Inter", sans-serif;
}

/* Column-specific widths for TrailBalance table (6 columns) */
.trail-balance-page-wrapper .table-container th:nth-child(1),
.trail-balance-page-wrapper .table-container td:nth-child(1) {
  width: 16%;
  min-width: 100px;
}

.trail-balance-page-wrapper .table-container th:nth-child(2),
.trail-balance-page-wrapper .table-container td:nth-child(2) {
  width: 18%;
  min-width: 130px;
}

.trail-balance-page-wrapper .table-container th:nth-child(3),
.trail-balance-page-wrapper .table-container td:nth-child(3) {
  width: 16%;
  min-width: 120px;
}

.trail-balance-page-wrapper .table-container th:nth-child(4),
.trail-balance-page-wrapper .table-container td:nth-child(4) {
  width: 16%;
  min-width: 110px;
}

.trail-balance-page-wrapper .table-container th:nth-child(5),
.trail-balance-page-wrapper .table-container td:nth-child(5) {
  width: 18%;
  min-width: 130px;
}

.trail-balance-page-wrapper .table-container th:nth-child(6),
.trail-balance-page-wrapper .table-container td:nth-child(6) {
  width: 16%;
  min-width: 120px;
}

.trail-balance-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  display: table;
  width: 100%;
}

.trail-balance-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.trail-balance-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.trail-balance-page-wrapper .table-container tbody {
  display: table-row-group;
}

.trail-balance-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.trail-balance-page-wrapper .status-badge {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .trail-balance-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .trail-balance-page-wrapper .table-container table {
    min-width: 800px;
  }

  .trail-balance-page-wrapper .table-container th,
  .trail-balance-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .trail-balance-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .trail-balance-page-wrapper .table-container table {
    min-width: 700px;
  }

  .trail-balance-page-wrapper .table-container th,
  .trail-balance-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .trail-balance-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .trail-balance-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .trail-balance-page-wrapper .table-container th,
  .trail-balance-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .trail-balance-page-wrapper .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Pagination container styling */
.trail-balance-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
.journal-voucher-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.journal-voucher-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 850px;
}

.journal-voucher-page-wrapper .table-container thead {
  background: #ffffff !important;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.journal-voucher-page-wrapper .table-container th {
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #535862;
  text-transform: none;
  letter-spacing: 0px;
  white-space: nowrap;
  vertical-align: middle;
  background: #ffffff !important;
  font-family: "Inter", sans-serif;
}

/* Column-specific widths for JournalVoucher table (6 columns) */
.journal-voucher-page-wrapper .table-container th:nth-child(1),
.journal-voucher-page-wrapper .table-container td:nth-child(1) {
  width: 16%;
  min-width: 100px;
}

.journal-voucher-page-wrapper .table-container th:nth-child(2),
.journal-voucher-page-wrapper .table-container td:nth-child(2) {
  width: 18%;
  min-width: 130px;
}

.journal-voucher-page-wrapper .table-container th:nth-child(3),
.journal-voucher-page-wrapper .table-container td:nth-child(3) {
  width: 16%;
  min-width: 120px;
}

.journal-voucher-page-wrapper .table-container th:nth-child(4),
.journal-voucher-page-wrapper .table-container td:nth-child(4) {
  width: 16%;
  min-width: 110px;
}

.journal-voucher-page-wrapper .table-container th:nth-child(5),
.journal-voucher-page-wrapper .table-container td:nth-child(5) {
  width: 18%;
  min-width: 130px;
}

.journal-voucher-page-wrapper .table-container th:nth-child(6),
.journal-voucher-page-wrapper .table-container td:nth-child(6) {
  width: 16%;
  min-width: 120px;
}

.journal-voucher-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  display: table;
  width: 100%;
}

.journal-voucher-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.journal-voucher-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.journal-voucher-page-wrapper .table-container tbody {
  display: table-row-group;
}

.journal-voucher-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.journal-voucher-page-wrapper .status-badge {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .journal-voucher-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .journal-voucher-page-wrapper .table-container table {
    min-width: 800px;
  }

  .journal-voucher-page-wrapper .table-container th,
  .journal-voucher-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .journal-voucher-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .journal-voucher-page-wrapper .table-container table {
    min-width: 700px;
  }

  .journal-voucher-page-wrapper .table-container th,
  .journal-voucher-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .journal-voucher-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .journal-voucher-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .journal-voucher-page-wrapper .table-container th,
  .journal-voucher-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .journal-voucher-page-wrapper .status-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Pagination container styling */
.journal-voucher-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 75%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* =========================================================
   Petty Cash Management — Global
   ========================================================= */
.petty-cash-page-wrapper {
  font-family: "Inter", sans-serif;
}

/* ── Tabs ─────────────────────────────────────────────── */
.petty-cash-page-wrapper .page-header {
  margin-bottom: 0.2rem;
}

.petty-cash-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  margin: 0 0 8px;
  padding: 0 4px;
  flex-shrink: 0;
}

.petty-cash-tab {
  background: none;
  border: none;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  position: relative;
  font-family: inherit;
}

.petty-cash-tab:hover { color: #374151; }

.petty-cash-tab.active {
  color: #2563eb;
  font-weight: 600;
}

.petty-cash-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: #2563eb;
  border-radius: 2px 2px 0 0;
}

/* ── Table cell helpers ───────────────────────────────── */
.petty-cash-request-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #2563eb;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.petty-cash-request-link:hover { text-decoration: underline; }

.petty-cash-wrap-id {
  white-space: normal !important;
  word-break: break-all !important;
  display: block !important;
  line-height: 1.4 !important;
  max-width: 100%;
}

.petty-cash-employee-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}

.petty-cash-employee-name {
  font-weight: 500;
  color: #111827;
  font-size: 14px;
}

.petty-cash-employee-company {
  font-size: 12px;
  color: #6b7280;
}

.petty-cash-category-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
}

.petty-cash-category-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.petty-cash-prior-approval {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.petty-cash-prior-approval.yes { color: #12b76a; }
.petty-cash-prior-approval.no  { color: #f04438; }

.petty-cash-prior-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.petty-cash-page-wrapper .table-container {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* =========================================================
   My Request Panel
   ========================================================= */
.petty-cash-my-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  gap: 14px;
}

/* Metric Cards */
.petty-cash-metric-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .petty-cash-metric-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .petty-cash-metric-cards { grid-template-columns: 1fr; }
}

.petty-cash-metric-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-height: 72px;
}

.petty-cash-metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.petty-cash-metric-icon--total    { background: #eff6ff; color: #2563eb; }
.petty-cash-metric-icon--approved { background: #ecfdf3; color: #12b76a; }
.petty-cash-metric-icon--pending  { background: #fffaeb; color: #f79009; }
.petty-cash-metric-icon--rejected { background: #fef3f2; color: #f04438; }

.petty-cash-metric-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.petty-cash-metric-label {
  font-size: 12px;
  font-weight: 500;
  color: #667085;
}

.petty-cash-metric-value {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

/* Toolbar (search + optional filters; Create is on Add/Edit page header with Back) */
.petty-cash-my-toolbar {
  display: block;
  max-width: min(520px, 100%);
}

.petty-cash-my-search-wrap {
  position: relative;
  min-width: 0;
}

.petty-cash-my-search {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 52px 0 40px;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #111827;
  background: #fff;
}

.petty-cash-my-search::placeholder { color: #98a2b3; }

.petty-cash-my-search:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.petty-cash-my-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.petty-cash-my-search-k {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 20px;
  pointer-events: none;
}

.petty-cash-my-filters {
  display: flex;
  align-items: end;
  gap: 12px;
}

.petty-cash-my-field-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  color: #667085;
  flex: 1 1;
}

.petty-cash-my-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: #374151;
  background: #fff;
  cursor: pointer;
}

.petty-cash-my-select:focus {
  outline: none;
  border-color: #3b82f6;
}

/* Page header: Create + Back (Add/Edit) */
.petty-cash-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .petty-cash-header-actions {
    width: 100%;
    justify-content: stretch;
    flex-direction: column-reverse;
  }

  .petty-cash-header-actions .primary-button,
  .petty-cash-header-actions .secondary-button {
    width: 100%;
  }
}

/* =========================================================
   Add / Edit Form
   ========================================================= */
.petty-cash-form-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.petty-cash-form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.petty-cash-form-section + .petty-cash-form-section {
  border-top: 1px solid #f3f4f6;
  padding-top: 24px;
}

.petty-cash-form-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* Supporting Documents — Figma: title + divider, 2-column grid */
.petty-cash-supporting-section {
  gap: 0;
}

.petty-cash-supporting-section-head {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eaecf0;
}

.petty-cash-supporting-section-head .petty-cash-form-section-title {
  margin: 0;
}

.petty-cash-supporting-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .petty-cash-supporting-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.petty-cash-supporting-col--upload {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* One Bill/Receipts region: drop zone, shared file list, + Upload More → same `receiptFiles` */
.petty-cash-receipts-upload-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.petty-cash-supporting-col--upload .petty-cash-file-list {
  margin-top: 10px;
}

.petty-cash-supporting-col--justify {
  min-width: 0;
}

.petty-cash-file-drop.petty-cash-file-drop--supporting {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fafafa;
  padding: 28px 16px;
  min-height: 152px;
  gap: 8px;
}

.petty-cash-file-drop.petty-cash-file-drop--supporting:hover {
  border-color: #d0d5dd;
  background: #f5f6f7;
}

.petty-cash-file-drop-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f2f4f7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.petty-cash-file-drop-cloud {
  font-size: 24px;
  color: #667085;
}

.petty-cash-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

@media (max-width: 900px) {
  .petty-cash-form-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .petty-cash-form-grid { grid-template-columns: 1fr; }
}

.petty-cash-form-grid--full {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 700px) {
  .petty-cash-form-grid--full { grid-template-columns: 1fr; }
}

.petty-cash-form-grid--single {
  grid-template-columns: 1fr;
}

/* Add Request page — in-card header (Figma) */
.petty-cash-add-page {
  padding: 0 4px;
}

/* Single card: shadow + padding like Figma; spacing between header block and form sections */
.petty-cash-form-card.petty-cash-add-form-card {
  margin-top: 0;
  padding: 28px 32px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  gap: 24px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .petty-cash-form-card.petty-cash-add-form-card {
    padding: 20px 16px;
  }
}

/* Back + title row + divider — one group (avoids double gap vs. card flex gap) */
.petty-cash-add-card-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  /* padding-bottom: 20px; */
  margin: 0;
}

.petty-cash-add-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  cursor: pointer;
  margin: 0;
  align-self: flex-start;
  font-family: inherit;
  line-height: 1.4;
}

.petty-cash-add-back:hover {
  color: #374151;
}

.petty-cash-add-back:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

.petty-cash-add-back-icon {
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  margin-right: 2px;
}

.petty-cash-add-back:hover .petty-cash-add-back-icon {
  color: #6b7280;
}

.petty-cash-add-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: none;
}

.petty-cash-add-page-title-block {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.petty-cash-add-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #101828;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.petty-cash-add-page-subtitle {
  font-size: 0.95rem;
  color: #667085;
  margin: 0.35rem 0 0;
  line-height: 1.35;
  font-weight: 400;
}

.petty-cash-add-page-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Global Button.css forces width:100% below 768px — keep header row inline like Figma */
.petty-cash-add-page-actions .primary-button,
.petty-cash-add-page-actions .secondary-button {
  width: auto;
  max-width: none;
  min-height: 40px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: none;
}

.petty-cash-add-page-actions .secondary-button {
  color: #101828;
  border-color: #d0d5dd;
  font-weight: 500;
}

.petty-cash-add-page-actions .secondary-button:hover {
  transform: none;
  background-color: #f9fafb;
  border-color: #d0d5dd;
  box-shadow: none;
}

.petty-cash-add-page-actions .primary-button,
.petty-cash-add-page-actions .primary-button:hover,
.petty-cash-add-page-actions .primary-button:active {
  transform: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .petty-cash-add-page-actions .primary-button,
  .petty-cash-add-page-actions .secondary-button {
    width: auto;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .petty-cash-add-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .petty-cash-add-page-actions {
    width: 100%;
    justify-content: stretch;
    white-space: normal;
  }

  .petty-cash-add-page-actions .secondary-button,
  .petty-cash-add-page-actions .primary-button {
    flex: 1 1;
    min-width: 0;
  }
}

.petty-cash-form-field-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.petty-cash-payment-mode-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.petty-cash-payment-mode-radios .petty-cash-radio-label {
  margin-bottom: 0;
}

.petty-cash-preapproval-yesno {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.petty-cash-preapproval-yesno .petty-cash-radio-label {
  margin-bottom: 0;
}

.petty-cash-file-label-link {
  color: #2563eb;
  font-weight: 500;
}

.petty-cash-file-drop--error {
  border-color: #f04438 !important;
  background: #fef3f2;
}

.petty-cash-upload-more {
  margin-top: 4px;
  padding: 8px 14px;
  border: 1px solid #d5d7da;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #101828;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
}

.petty-cash-supporting-col--upload .petty-cash-upload-more {
  margin-top: 12px;
}

.petty-cash-upload-more:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

/* Pre-approval checkbox */
.petty-cash-preapproval-row {
  display: flex;
  align-items: center;
}

.petty-cash-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.petty-cash-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

/* File Upload */
.petty-cash-file-upload {
  display: block;
  cursor: pointer;
}

.petty-cash-file-input {
  display: none;
}

.petty-cash-file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}

.petty-cash-file-drop:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.petty-cash-file-drop--sm { padding: 14px 24px; flex-direction: row; }

.petty-cash-file-icon { font-size: 22px; }

.petty-cash-file-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.petty-cash-file-hint {
  font-size: 11px;
  color: #9ca3af;
}

.petty-cash-file-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.petty-cash-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
}

.petty-cash-file-name { font-weight: 500; color: #111827; flex: 1 1; }

.petty-cash-file-size { color: #9ca3af; font-size: 12px; }

.petty-cash-file-remove {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #ef4444;
  cursor: pointer;
  padding: 0 2px;
}

/* Form Actions */
.petty-cash-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}

/* =========================================================
   Modal / Dialog
   ========================================================= */
.petty-cash-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above app sidebar (~1999–2001) and header chrome so submit modal is visible */
  z-index: 10050;
  padding: 16px;
}

.petty-cash-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.petty-cash-modal--wide { max-width: 560px; }

.petty-cash-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.petty-cash-modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.petty-cash-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
}

.petty-cash-modal-close:hover { color: #111827; }

.petty-cash-modal-body {
  padding: 16px 24px;
  overflow-y: auto;
  flex: 1 1;
}

.petty-cash-modal-loading-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: #2563eb;
}

.petty-cash-modal-desc {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px;
}

.petty-cash-modal-desc-bold {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 16px;
}

.petty-cash-recipients-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recipient-option-all {
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 4px;
}

.petty-cash-recipient-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 4px 12px;
  transition: opacity 0.2s;
}

.petty-cash-recipient-list.disabled {
  opacity: 0.6;
}

.recipient-name {
  font-size: 14px;
  color: #374151;
}

.no-recipients-found {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}

.petty-cash-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #f3f4f6;
}

/* Radio / Checkbox within modal */
.petty-cash-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  margin-bottom: 10px;
}

.petty-cash-role-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.petty-cash-role-option { margin-bottom: 0; }

/* Decision tabs */
.pc-decision-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pc-decision-tab {
  flex: 1 1;
  min-width: 100px;
  padding: 8px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.15s;
}

.pc-decision-tab--approve.active { border-color: #12b76a; color: #12b76a; background: #ecfdf3; }
.pc-decision-tab--reject.active  { border-color: #f04438; color: #f04438; background: #fef3f2; }
.pc-decision-tab--return.active  { border-color: #f79009; color: #f79009; background: #fffaeb; }

/* =========================================================
   Detail Page
   ========================================================= */
.petty-cash-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 16px;
  color: #6b7280;
  font-size: 14px;
}

.petty-cash-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: pc-spin 0.8s linear infinite;
}

@keyframes pc-spin { to { transform: rotate(360deg); } }

/* Status banner */
.pc-status-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 13px;
}

.pc-status-banner--mockup {
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 16px 20px;
}

.pc-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pc-status-label {
  font-weight: 600;
  color: #6b7280;
}

.pc-status-id   { font-weight: 700; color: #111827; font-size: 15px; letter-spacing: -0.01em; }
.pc-status-submitted { color: #6b7280; }
.pc-status-to   { color: #6b7280; }

/* Header actions */
.pc-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Detail grid */
.pc-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .pc-detail-grid { grid-template-columns: 1fr; }
}

/* Section card */
.pc-detail-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
}

.pc-detail-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: none;
}

.pc-detail-card-title::after {
  content: "";
  flex: 1 1;
  height: 1px;
  background: #eaecf0;
}

.pc-detail-row {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #f9fafb;
  font-size: 13px;
}

.pc-detail-row:last-child { border-bottom: none; }

.pc-detail-label {
  flex: 0 0 155px;
  color: #6b7280;
  font-weight: 500;
}

.pc-detail-value {
  flex: 1 1;
  color: #111827;
  word-break: break-word;
}

/* Attachments */
.pc-attachment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pc-attachment-list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.pc-attachment-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: #f9fafb;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #eaecf0;
}

.pc-attachment-icon { font-size: 14px; }

.pc-attachment-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.pc-attachment-link:hover { text-decoration: underline; }

.pc-attachment-notes { color: #9ca3af; font-size: 12px; }

/* Sub-sections for combined cards */
.pc-status-sub-section {
  display: flex;
  flex-direction: column;
}

.pc-status-divider {
  height: 1px;
  background: #f3f4f6;
  margin: 12px 0;
}

/* Audit log */
.pc-audit-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.pc-audit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pc-audit-item {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  position: relative;
}

.pc-audit-item:last-child { border-bottom: none; }

.pc-audit-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
  margin-top: 4px;
}

.pc-audit-content { flex: 1 1; min-width: 0; }

.pc-audit-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 13px;
}

.pc-audit-action { font-weight: 600; color: #111827; }
.pc-audit-actor  { color: #374151; }
.pc-audit-time   { color: #9ca3af; font-size: 11px; margin-left: auto; }

.pc-audit-remarks {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

/* Add / edit petty cash — workflow lock + fieldset reset */
.petty-cash-form-locked-banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  color: #92400e;
  font-size: 14px;
  line-height: 1.45;
}

.petty-cash-add-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.petty-cash-detail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.petty-cash-detail-content {
  padding: 4px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.petty-cash-modal-header h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.petty-cash-modal-subtitle {
  font-weight: 500;
  color: #4b5563;
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.confirm-send-btn button {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

.confirm-send-btn button:hover {
  background-color: #b91c1c !important;
}



/* ------------------------------
   Global Styles
------------------------------ */
.crm-page-wrapper {
  overflow: auto;
  font-family: "Inter", sans-serif;
  color: #111827;
  background: #fff;
}

.crm-page-wrapper .crm-container,
.crm-page-wrapper .crm-table-container,
.crm-page-wrapper .addcrm-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-family: system-ui;
}

/* ------------------------------
   Header & Button
------------------------------ */
.crm-page-wrapper .crm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.crm-page-wrapper .add-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.crm-page-wrapper .add-btn:hover {
  background: #1d4ed8;
}

.crm-page-wrapper .menu-btn {
  border: none;
  background-color: white;
  font-size: 18px;
  color: #A4A7AE;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* ------------------------------
   Stat Cards
------------------------------ */
.crm-page-wrapper .crm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.crm-page-wrapper .stat-card {
  /* background: #f8fafc; */
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #d9d9d9;
}

.crm-page-wrapper .stats-card {
  /* background: #f8fafc; */
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #d9d9d9;
}

.crm-page-wrapper .stats-card p,
.crm-page-wrapper .stats-card span {
  color: #535862;
}

.crm-page-wrapper .stats-card h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 0.4rem;
}


.crm-page-wrapper .stat-card h3 {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

/* ------------------------------
   Charts Section
------------------------------ */
.crm-page-wrapper .charts-row,
.crm-page-wrapper .bar-chart-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.crm-page-wrapper .chart-card,
.crm-page-wrapper .bar-chart-section {
  flex: 1 1 45%;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #d9d9d9;
}

/* ------------------------------
   Table Section
------------------------------ */
.crm-page-wrapper .table-section {
  background: #f9fafb;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

.crm-page-wrapper .table-section table,
.crm-page-wrapper .crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.crm-page-wrapper .table-section th,
.crm-page-wrapper .crm-table th {
  text-align: left;
  background: #f9fafb;
  padding: 0.75rem;
  font-weight: 600;
  color: #535862;
  border-bottom: 1px solid #e5e7eb;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.crm-page-wrapper .table-section td,
.crm-page-wrapper .crm-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
}

.crm-page-wrapper .crm-table tr:hover {
  background: #f9fafb;
}

/* ------------------------------
   Filters & Search
------------------------------ */
.crm-page-wrapper .crm-table-header {
  display: block;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.crm-page-wrapper .crm-table-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  padding-bottom: 1.5rem;
}

.crm-page-wrapper .crm-table-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.crm-page-wrapper .search-input {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  width: 280px;
}

.crm-page-wrapper .filter-buttons {
  display: flex;
  gap: 0.5rem;
}

.crm-page-wrapper .filter-chip,
.crm-page-wrapper .filter-btn {
  border: none;
  border-radius: 8px;
  background: #f3f4f6;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s ease-in-out;
}

.crm-page-wrapper .filter-chip:hover,
.crm-page-wrapper .filter-btn:hover {
  background: #e5e7eb;
}

.crm-page-wrapper .filter-icon {
  font-size: 0.9rem;
}

/* ------------------------------
   Pagination
------------------------------ */
.crm-page-wrapper .pagination1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
}

.crm-page-wrapper .page-btn,
.crm-page-wrapper .page-number {
  border: 1px solid #d1d5db !important;
  border-radius: 6px;
  background: #fff;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #717680;
  transition: background 0.2s ease-in-out;
}

.crm-page-wrapper .page-number {
  border: none !important;
}

.crm-page-wrapper .fw-bolder {
  font-weight: 500 !important;
}

.crm-page-wrapper .page-btn:disabled,
.crm-page-wrapper .page-number:disabled {
  color: #9ca3af;
  /* background: #f9fafb; */
  cursor: not-allowed;
}

.crm-page-wrapper .page-number.active {
  background: #FAFAFA;
  color: #414651;
}

/* ------------------------------
   Duplicate Contact Suggestions
------------------------------ */
.crm-page-wrapper .section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.crm-page-wrapper .contact-card {
  border: 1px solid #fca5a5;
  background: #fffafa;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crm-page-wrapper .contact-card1 {
  border: 1px solid #FEDF89;
  background: #FFFCF5;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crm-page-wrapper .contact-info {
  flex: 1 1;
  display: flex;
  justify-content: space-between;
  /* align-items: flex-start; */
  align-items: center;
}

.crm-page-wrapper .contact-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0px;
}

.crm-page-wrapper .qualified {
  border: 1px solid gray;
  font-size: 12px;
}

.crm-page-wrapper .contact-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 6px;
}

.crm-page-wrapper .contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-page-wrapper .contact-message {
  font-size: 0.85rem;
  color: #dc2626;
}

.crm-page-wrapper .contact-actions {
  display: flex;
  gap: 0.5rem;
}

.crm-page-wrapper .btn-review,
.crm-page-wrapper .btn-merge,
.crm-page-wrapper .btn-merge1 {
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease-in-out;
}

.crm-page-wrapper .btn-merge1 {
  padding: 6px 10px;
}

.crm-page-wrapper .btn-merge1 span {
  color: #FFFFFF;
}

.crm-page-wrapper .watch {
  color: #A4A7AE;
}

.crm-page-wrapper .btn-review {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.crm-page-wrapper .btn-review:hover {
  background: #f9fafb;
}

.crm-page-wrapper .btn-merge,
.crm-page-wrapper .btn-merge1 {
  background: #2563eb;
  color: #fff;
  border: none;
}

.crm-page-wrapper .btn-merge:hover {
  background: #1e40af;
}

/* ------------------------------
   Responsive
------------------------------ */
@media (max-width: 768px) {

  .crm-page-wrapper .crm-header,
  .crm-page-wrapper .crm-table-header,
  .crm-page-wrapper .contact-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .crm-page-wrapper .search-input {
    width: 100%;
  }

  .crm-page-wrapper .charts-row {
    flex-direction: column;
  }
}

.crm-page-wrapper .addcrm-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
}

.crm-page-wrapper .chart-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  flex: 1 1 45%;
  min-width: 340px;
}

.crm-page-wrapper .chart-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

.crm-page-wrapper .chart-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.crm-page-wrapper .chart-legend {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.crm-page-wrapper .legend-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #374151;
}

.crm-page-wrapper .legend-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

@media (max-width: 768px) {
  .crm-page-wrapper .addcrm-dashboard {
    flex-direction: column;
  }

  .crm-page-wrapper .chart-card {
    flex: 1 1 100%;
  }

  .crm-page-wrapper .chart-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

.crm-page-wrapper .lead-funnel-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
  font-family: "Inter", sans-serif;
}

.crm-page-wrapper .funnel-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
}

.crm-page-wrapper .funnel-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

.crm-page-wrapper .funnel-chart-container {
  position: relative;
}

.crm-page-wrapper .funnel-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.crm-page-wrapper .funnel-stage {
  text-align: left;
}

.crm-page-wrapper .funnel-stage h4 {
  font-size: 0.9rem;
  color: #374151;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.crm-page-wrapper .funnel-stage p {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
}

.crm-page-wrapper .funnel-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.crm-page-wrapper .metric-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 1rem 1.5rem;
  flex: 1 1 30%;
  min-width: 280px;
  border: 1px solid #d6d3d3;
}

.crm-page-wrapper .metric-card h4 {
  font-size: 0.95rem;
  color: #111827;
  margin-bottom: 0.25rem;
}

.crm-page-wrapper .metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

.crm-page-wrapper .progress-bar {
  height: 6px;
  background: #bedcff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.crm-page-wrapper .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb);
  border-radius: 4px;
}

.crm-page-wrapper .metric-subtext {
  font-size: 0.8rem;
  color: #6b7280;
}

@media (max-width: 768px) {
  .crm-page-wrapper .funnel-stats {
    flex-direction: column;
    align-items: flex-start;
  }

  .crm-page-wrapper .funnel-metrics {
    flex-direction: column;
  }
}

.crm-page-wrapper .followup-dashboard {
  margin: 2rem 0;
  font-family: "Inter", sans-serif;
  color: #111827;
}

.crm-page-wrapper .trend-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.crm-page-wrapper .trend-header {
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.crm-page-wrapper .trend-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.crm-page-wrapper .filter-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #535862;
}

.crm-page-wrapper .filter-btn:hover {
  border-color: #d1d5db;
  background-color: #f9fafb;
}

.crm-page-wrapper .filter-btn.active {
  background: #f3f4f6;
  color: #111827;
  border-color: #d1d5db;
  font-weight: 600;
}

/* Unified Time Range Filter Wrapper */
.crm-page-wrapper .time-range-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 1.5rem;
}

.crm-page-wrapper .time-range-filters .filter-btn {
  margin: 0;
}

/* Unified Card Borders */
.crm-page-wrapper .crm-card,
.crm-page-wrapper .chart-card,
.crm-page-wrapper .summary-card,
.crm-page-wrapper .stats-card,
.crm-page-wrapper .stat-card,
.crm-page-wrapper .table-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.crm-page-wrapper .summary-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.crm-page-wrapper .summary-card1 {
  flex: 1 1 45%;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.crm-page-wrapper .summary-card1 h4 {
  font-size: 18px;
  color: #374151;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.crm-page-wrapper .follow-up-text {
  font-size: 14px;
  color: #475467;
}

.crm-page-wrapper .summary-value {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.4rem;
}

.crm-page-wrapper .summary-subtext {
  font-size: 1rem;
  color: #6b7280;
}

.crm-page-wrapper .followup-section {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.crm-page-wrapper .calendar-card,
.crm-page-wrapper .followup-list {
  background: #fff;
  border-radius: 12px;
  /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); */
  /* padding: 1.5rem; */
  flex: 1 1 45%;
}

.crm-page-wrapper .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.crm-page-wrapper .calendar-header span {
  font-weight: 600;
}

.crm-page-wrapper .calendar-nav button {
  border: none;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.crm-page-wrapper .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 4px;
  gap: 4px;
  text-align: center;
  font-size: 0.85rem;
  color: #374151;
}

.crm-page-wrapper .day-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #6b7280;
}

.crm-page-wrapper .day-cell {
  padding: 0.5rem 0;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.crm-page-wrapper .day-cell.today {
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

.crm-page-wrapper .followup-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 0;
}

.crm-page-wrapper .followup-item:last-child {
  border-bottom: none;
}

.crm-page-wrapper .followup-info h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.crm-page-wrapper .followup-name {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.crm-page-wrapper .followup-desc {
  font-size: 0.85rem;
  color: #9ca3af;
}

.crm-page-wrapper .followup-time {
  text-align: right;
}

.crm-page-wrapper .followup-time span {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
}

.crm-page-wrapper .priority-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.crm-page-wrapper .priority-badge.high {
  background: #fee2e2;
  color: #dc2626;
}

.crm-page-wrapper .priority-badge.medium {
  background: #fef3c7;
  color: #d97706;
}

.crm-page-wrapper .address h4 {
  font-size: 20px;
}

.crm-page-wrapper .pt {
  background-color: #EFF8FF;
  border-radius: 50%;
  padding: 13px 15px;
  color: #175CD3;
  font-size: 18px;
}

.crm-page-wrapper .pest {
  border: 1px solid #E9EAEB;
  background-color: #FAFAFA;
  padding: 2px 8px;
  font-size: 14px;
}

.crm-page-wrapper .text-gray {
  color: #A4A7AE !important;
}

.crm-page-wrapper .text-gray-600 {
  color: #535862 !important;
}

.crm-page-wrapper .top-companies-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}

.crm-page-wrapper .chart-wrapper {
  height: 280px;
}

.crm-page-wrapper .search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
}

.crm-page-wrapper .search-icon {
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 25px;
  color: #9ca3af;
  pointer-events: none;
}

.crm-page-wrapper .search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  /* space for icon */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
}

.crm-page-wrapper .search-input::placeholder {
  color: #9ca3af;
}

.crm-page-wrapper .search-input:focus {
  border-color: #3b82f6;
}



@media (max-width: 768px) {

  .summary-row,
  .followup-section {
    flex-direction: column;
  }
}

.addcrm-container {
  font-family: "Inter", sans-serif;
  color: #111827;
  margin: 1.5rem 0;
}

.section-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

.section-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

/* Overdue Cards */
.overdue-card {
  background: #fff7f7;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.followup-main {
  flex: 1 1;
}

.followup-main h4 {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.followup-name {
  color: #374151;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.followup-desc {
  color: #6b7280;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.followup-due {
  color: #b91c1c;
  font-size: 0.85rem;
}

.overdue-days {
  font-weight: 500;
  color: #dc2626;
}

.followup-actions {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.btn-light {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

.btn-primary {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

/* Priority Badges */
.priority-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  margin-left: 4px;
}

.priority-badge.high {
  background: #FEF3F2;
  color: #B42318;
  border: 1px solid #FECDCA;
}

.priority-badge.medium {
  background: #FFFAEB;
  color: #B54708;
  border: 1px solid #FEDF89;
}

/* Completed Section */
.completed-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.completed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.completed-date {
  color: #15803d;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.followup-outcome,
.followup-next {
  font-size: 0.85rem;
  color: #374151;
}

.status-badge1.completed {
  background: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 2px 8px;
}

.btn-outline {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

/* Score */
/* .score-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid;
}

.score-badge.hot {
  background: #fff1f2;
  color: #e11d48;
  border-color: #fecdd3;
}

.score-badge.warm {
  background: #fff7ed;
  color: #ea580c;
  border-color: #fed7aa;
}

.score-badge.cold {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
} */

/* Card */
.leads-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}

/* Header */
.leads-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.leads-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

/* Search + filters */
.leads-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  /* padding: 8px 12px; */
  border-radius: 8px;
  width: 320px;
}

.search-box input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
}

.filter-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-chip {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  color: #374151;
  background-color: #ffffff;
  font-weight: 600;
}

.filter-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

/* Table */
.crm-table {
  width: 100%;
  border-collapse: collapse;
}

.crm-table th {
  font-size: 14px;
  color: #535862;
  text-align: left;
  padding: 12px 10px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
}

.crm-table td {
  padding: 14px 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 14px;
  color: #111827;
}

.text-right {
  text-align: right;
}

/* Contact */
.contact-cell {
  display: flex;
  flex-direction: column;
}

.contact-name {
  font-weight: 500;
}

.contact-email {
  font-size: 12px;
  color: #6b7280;
}

/* Badges */
.status-badge1 {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid;
  font-weight: 500;
}

.status-badge1,
.status-badge2 {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  text-transform: capitalize;
  gap: 6px;
  font-family: "Inter", sans-serif;
}

.status-badge2.qualified,
.status-badge1.contacted,
.status-badge1.new,
.status-badge2.lost {
  border: 1px solid #D5D7DA;
  border-radius: 6px;
}

.status-badge2::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}

.status-badge2.qualified::before {
  background-color: #22c55e;
}

.status-badge2.lost::before {
  background-color: #f04438;
}

/* Score */
.score-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid;
}

.score-badge.hot {
  background: #fff1f2;
  color: #e11d48;
  border-color: #fecdd3;
}

.score-badge.warm {
  background: #fff7ed;
  color: #ea580c;
  border-color: #fed7aa;
}

.score-badge.cold {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

/* Engagement */
.engagement {
  font-weight: 500;
}



.pagination span,
.pagination button {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
}

.pagination .active {
  background: #f1f5f9;
  font-weight: 600;
  background-color: #FAFAFA;
}


.section-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e6e8ec;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #1f2937;
}

/* Completed Card */
.completed-card {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  border-radius: 12px;
  background: #f4fbf6;
  border: 1px solid #b7ebc6;
  margin-bottom: 16px;
}

.followup-content {
  flex: 1 1;
}

/* Top row */
.top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.followup-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.followup-name {
  font-size: 14px;
  color: #6b7280;
}

.completed-date {
  font-size: 13px;
  color: #16a34a;
  margin-top: 4px;
}

/* Divider */
.divider {
  height: 1px;
  background: #c7ead3;
  margin: 10px 0 5px;
}

/* Bottom details */
.details-row {
  font-size: 14px;
  color: #374151;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.details-row p {
  margin: 4px 0;
}

/* Status Badge */
.status-badge1.completed {
  background: #e8f9ef;
  color: #16a34a;
  border: 1px solid #86efac;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

/* Actions */
.followup-actions {
  display: flex;
  align-items: center;
}

.btn-outline {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 14px;
  cursor: pointer;
}

.btn-outline:hover {
  background: #f9fafb;
}

/* ContactModule.css */

.contact-module-wrapper {
  min-height: 100vh;
  background-color: #f9fafb;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Header Styles */
.module-title {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.btn-add-customer {
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-add-customer:hover {
  background-color: #1d4ed8;
}

.btn-add-customer .plus-icon {
  font-size: 20px;
  line-height: 1;
}

/* Date Tabs */
.date-tabs-container {
  display: flex;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.date-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background-color: #f9fafb;
  border: none;
  border-right: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-tab:last-child {
  border-right: none;
}

.date-tab:hover {
  background-color: #f3f4f6;
}

.date-tab.active {
  background-color: white;
  color: #111827;
}

/* Date Range Display */
.date-range-display {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d1d5db;
  padding: 0px 16px;
  border-radius: 8px;
  font-weight: 600;
}

.date-range-text {
  font-size: 14px;
  color: #374151;
}

.date-range-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  transition: color 0.2s ease;
}

.date-range-close:hover {
  color: #111827;
}

.close-icon {
  display: block;
  width: 16px;
  height: 16px;
}

/* Edit Dates Button */
.btn-edit-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: white;
  border: 1px solid #d1d5db;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-edit-dates:hover {
  background-color: #f9fafb;
}

.calendar-icon {
  font-size: 18px;
  line-height: 1;
}

/* Stats Cards */
.stat-card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.stat-subvalue {
  font-size: 18px;
  color: #9ca3af;
}

.stat-percentage {
  font-size: 14px;
  color: #6b7280;
  margin-left: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 2px 6px;
}

/* Chart Cards */
.chart-card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 24px;
}

/* Chart Container */
.chart-container {
  height: 280px;
}

.pie-chart,
.donut-chart {
  width: 100%;
  height: 100%;
}

.chart-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tooltip-text {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  white-space: nowrap;
}

/* Chart Legend */
.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-label {
  font-size: 14px;
  color: #374151;
}

.up {
  font-size: 12px;
  line-height: 6px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .stat-card {
    padding: 16px;
  }

  .stat-value {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .module-title {
    font-size: 20px;
  }

  .date-tabs-container {
    flex-wrap: wrap;
  }

  .chart-container {
    width: 220px;
    height: 220px;
  }

  .d-flex.gap-3 {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .stat-value {
    font-size: 24px;
  }

  .chart-card {
    padding: 16px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .followup-card {
    flex-direction: column;
    gap: 0.8rem;
  }

  .followup-actions {
    justify-content: flex-start;
  }
}
/* CRM Dashboard Tabs - One Unified Container */
.crm-page-wrapper .crm-tabs-container {
  margin-bottom: 16px;
  margin-top: 0;
  padding: 0;
  position: relative;
  z-index: 10;
}

.crm-page-wrapper .crm-tabs-group {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  padding: 6px;
  overflow: hidden;
}

.crm-page-wrapper .crm-tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  border-radius: 6px;
}

.crm-page-wrapper .crm-tab-item:hover {
  color: #4b5563;
}

.crm-page-wrapper .crm-tab-item.active {
  background-color: #e5e7eb;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.crm-page-wrapper .crm-tab-item .tab-icon {
  font-size: 14px;
  display: flex;
  align-items: center;
  color: inherit;
  min-width: 16px;
}

.crm-page-wrapper .crm-tab-item .tab-label {
  font-weight: 600;
  color: inherit;
}

.crm-page-wrapper .crm-tab-item .tab-count {
  font-weight: 700;
  color: inherit;
  margin-left: 4px;
  font-size: 13px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .crm-page-wrapper .crm-tabs-group {
    gap: 6px;
    padding: 5px;
  }

  .crm-page-wrapper .crm-tab-item {
    padding: 9px 14px;
    font-size: 12px;
    gap: 6px;
  }

  .crm-page-wrapper .crm-tab-item .tab-icon {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .crm-page-wrapper .crm-tabs-group {
    width: 100%;
    gap: 5px;
    padding: 5px;
  }

  .crm-page-wrapper .crm-tab-item {
    padding: 8px 12px;
    font-size: 11px;
    gap: 4px;
    flex: 1 1;
    justify-content: center;
  }

  .crm-page-wrapper .crm-tab-item .tab-icon {
    font-size: 12px;
  }

  .crm-page-wrapper .crm-tab-item .tab-count {
    margin-left: 2px;
    font-size: 11px;
  }
}
.add-lead-page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 24px;
}

.add-lead-form-container {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 24px 24px 80px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  padding-bottom: 4px;
}

.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.form-row-full {
  width: 100%;
}

.section-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .form-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {

  .form-grid-4,
  .form-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {

  .form-grid-4,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Edit Mode Additions */
.edit-lead-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.edit-lead-id-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.edit-lead-id-container h2 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.edit-lead-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  font-size: 13px;
  color: #6b7280;
}

.edit-lead-meta-row {
  display: flex;
  gap: 4px;
}

.edit-lead-meta-val {
  color: #374151;
  font-weight: 500;
}

.status-lock-banner {
  background-color: #fffbeb;
  /* yellow-50 */
  border: 1px solid #fde68a;
  /* yellow-200 */
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.status-lock-banner-text {
  font-size: 14px;
  color: #b45309;
  /* yellow-700 */
}

.status-lock-banner-text strong {
  font-weight: 600;
}

.audit-note-banner {
  background-color: #f8fafc;
  /* slate-50 */
  border: 1px solid #e2e8f0;
  /* slate-200 */
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.audit-note-banner-text {
  font-size: 14px;
  color: #334155;
  /* slate-700 */
}

.audit-note-banner-text strong {
  font-weight: 600;
  color: #0f172a;
}
.view-lead-page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 24px;
}

.view-lead-content-container {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 24px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Summary Header */
.view-lead-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.view-lead-summary-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.pill-qualified {
  background-color: #fef9c3; /* yellow-100 */
  color: #a16207; /* yellow-800 */
  border: 1px solid #fef08a; /* yellow-200 */
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pill-qualified::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #eab308; /* yellow-500 */
}

/* Summary Details */
.view-lead-summary-details {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.summary-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1;
}

.lead-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #4b5563; /* gray-600 */
}

.summary-label {
  color: #6b7280; /* gray-500 */
  min-width: 160px;
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.summary-value {
  font-weight: 100;
  font-size: 10px;
  color: #181f2e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pill-urgent {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fee2e2;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.pill-due {
  background-color: #fef9c3;
  color: #ca8a04;
  border: 1px solid #fef08a;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Tabs */
.view-lead-tabs {
  display: flex;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.view-lead-tab {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.view-lead-tab:hover {
  color: #374151;
}

.view-lead-tab.active {
  color: #2563eb; /* blue-600 */
  border-bottom: 2px solid #2563eb;
}

/* Content Grids */
.view-lead-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.view-lead-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 24px;
  gap: 24px;
}

/* Latest Activity */
.latest-activity-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.latest-activity-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.activity-card {
  background-color: #eff6ff; /* blue-50 */
  border: 1px solid #bfdbfe; /* blue-200 */
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1d4ed8; /* blue-700 */
  font-size: 13px;
  font-weight: 600;
}

.activity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-content {
  font-size: 14px;
  color: #374151; /* gray-700 */
  line-height: 1.5;
  margin-left: 24px; /* Align with text, not icon */
}

/* Action Buttons Row */
.action-buttons-row {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.action-btn-outline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn-outline:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.action-btn-icon {
  color: #6b7280;
  display: flex;
  align-items: center;
}

/* Responsive */
@media (max-width: 992px) {
  .view-lead-summary-details {
    flex-direction: column;
    gap: 12px;
  }
  
  .view-lead-grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .action-buttons-row {
    flex-direction: column;
  }
  
  .summary-label {
    min-width: 120px;
  }
}

/* Follow-up Log */
.followup-log-container {
  display: flex;
  flex-direction: column;
}

.followup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
}

.followup-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.followup-count {
  font-size: 12px;
  color: #4b5563;
  background-color: #f3f4f6;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.fup-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fup-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fup-lead-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  padding: 16px;
}

.fup-lead-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.fup-lead-id {
  font-weight: 700;
  color: #0f172a;
}

.fup-lead-name {
  font-size: 14px;
  color: #334155;
  margin-top: 2px;
}

.fup-meta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.pill {
  background: #e0e7ff;
  color: #1d4ed8;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 12px;
}

.pill-muted {
  background: #f1f5f9;
  color: #475569;
}

.fup-lead-actions {
  display: flex;
  align-items: flex-start;
}

.fup-lead-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.fup-lead-info-grid .label {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.add-follow-up-page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 24px;
}

.add-fup-form-container {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 24px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Summary Header section */
.add-fup-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.add-fup-summary-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.pill-new {
  background-color: #eff6ff; /* blue-50 */
  color: #1d4ed8; /* blue-700 */
  border: 1px solid #bfdbfe; /* blue-200 */
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pill-new::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #3b82f6; /* blue-500 */
}

.fup-meta-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #4b5563; /* gray-600 */
}

.fup-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fup-meta-label {
  color: #6b7280; /* gray-500 */
}

.fup-meta-value {
  color: #374151; /* gray-700 */
  font-weight: 500;
}

.pill-service {
  background-color: #eff6ff; /* blue-50 */
  color: #3b82f6; /* blue-500 */
  border: 1px solid #bfdbfe; /* blue-200 */
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Section Styling */
.fup-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fup-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  padding-bottom: 4px;
}

.fup-grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.fup-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  max-width: 50%;
}

.fup-row-full {
  width: 100%;
}

.fup-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0;
}

/* Custom Radio Cards */
.schedule-radio-group {
  display: flex;
  gap: 16px;
}

.schedule-radio-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  flex: 1 1;
  max-width: 300px;
  transition: all 0.2s;
  background: white;
}

.schedule-radio-card.active {
  border-color: #3b82f6;
  background-color: #f8fafc;
}

.schedule-radio-card input[type="radio"] {
  margin-top: 4px;
  accent-color: #3b82f6;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.schedule-radio-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-radio-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.schedule-radio-desc {
  font-size: 12px;
  color: #6b7280;
}

/* Error highlighting for Lost Reason container */
.lost-reason-container {
  background-color: #fff1f2; /* red-50 */
  border: 1px solid #fecdd3; /* red-200 */
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}

.lost-reason-container label {
  color: #dc2626; /* red-600 */
}

/* Responsive */
@media (max-width: 1200px) {
  .fup-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .fup-grid-3 > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .fup-grid-2 {
    max-width: 100%;
  }
  .schedule-radio-group {
    flex-direction: column;
  }
  .schedule-radio-card {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .fup-grid-3, .fup-grid-2 {
    grid-template-columns: 1fr;
  }
}

.followup-detail-page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 24px;
}

.followup-detail-container {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 24px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header Summary */
.fud-summary-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fud-summary-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.fud-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.fud-meta-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #4b5563; /* gray-600 */
}

.fud-meta-label {
  color: #6b7280; /* gray-500 */
  min-width: 140px;
  display: inline-block;
}

.fud-meta-value {
  font-weight: 500;
  color: #374151; /* gray-700 */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tabs */
.fud-tabs {
  display: flex;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.fud-tab {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.fud-tab:hover {
  color: #374151;
}

.fud-tab.active {
  color: #2563eb; /* blue-600 */
  border-bottom: 2px solid #2563eb;
}

/* Sections */
.fud-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fud-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

/* Read-only Text Area / Box */
.fud-readonly-box {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  background-color: #ffffff;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
  min-height: 80px;
}

/* Status Updated Banner */
.fud-status-banner {
  background-color: #f8fafc; /* slate-50 */
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 8px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1d4ed8; /* blue-700 */
  width: -webkit-fit-content;
  width: fit-content;
}

.fud-status-arrow {
  color: #9ca3af;
}

/* Pills */
.fud-pill-call {
  background-color: #eff6ff; /* blue-50 */
  color: #3b82f6; /* blue-500 */
  border: 1px solid #bfdbfe; /* blue-200 */
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.fud-pill-prev {
  background-color: #eff6ff; /* blue-50 */
  color: #3b82f6; /* blue-500 */
  border: 1px solid #bfdbfe; /* blue-200 */
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fud-pill-prev::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #3b82f6; /* blue-500 */
}

.fud-pill-qualified {
  background-color: #fef9c3; /* yellow-100 */
  color: #a16207; /* yellow-800 */
  border: 1px solid #fef08a; /* yellow-200 */
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fud-pill-qualified::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #eab308; /* yellow-500 */
}

/* Next Follow-up Info Box */
.fud-info-box {
  background-color: #f9fafb; /* gray-50 */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
  gap: 32px;
}

.fud-info-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fud-info-label {
  font-size: 13px;
  color: #6b7280;
}

.fud-info-val {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* Audit History Table */
.fud-audit-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  border-style: hidden; /* Hide outer border for rounded corners wrapper */
  box-shadow: 0 0 0 1px #e5e7eb;
}

.fud-audit-table td {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  font-size: 14px;
  color: #374151;
}

.fud-audit-table tr:last-child td {
  border-bottom: none;
}

.fud-audit-table td:first-child {
  width: 30%;
  color: #6b7280;
}

.fud-audit-table td:last-child {
  text-align: right;
}

.fud-audit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.fud-audit-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fud-audit-list li::before {
  content: "•";
  color: #374151;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 992px) {
  .fud-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .fud-info-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .fud-audit-table td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    padding: 12px 16px;
  }
  
  .fud-audit-list {
    align-items: flex-start;
  }
  
  .fud-audit-table td:first-child {
    border-bottom: none;
    padding-bottom: 4px;
    font-weight: 600;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden; /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1; /* take remaining height */
  overflow-y: auto; /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}
.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}
.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 15%;
  min-width: 140px;
}

.product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}
.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}
.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}
.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}
.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.button-secondary:hover {
  background-color: #e5e7eb;
}
.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }
  .upload-section,
  .product-form-fields {
    max-width: 100%;
  }
  .form-row {
    flex-direction: column;
  }
}

body {
  overflow: auto;
  font-family: "Inter", sans-serif;
  color: #111827;
  background: #fff;
}

.addCustomerContainer {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
  padding: 20px;
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Header */
.addCustomerHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.breadcrumb {
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 4px;
}

.pageTitle {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.pageSubtitle {
  color: #6b7280;
  font-size: 13px;
  margin-top: 4px;
}

/* Buttons */
.headerButtons {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancelBtn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.cancelBtn:hover {
  background: #f9fafb;
}

.saveBtn {
  background: #2563eb;
  color: #fff;
}

.saveBtn:hover {
  background: #1e40af;
}

/* Form */
.formContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

.formGroup {
  display: flex;
  flex-direction: column;
}

.formGroup label {
  font-size: 13px;
  color: #374151;
  font-weight: 600;
  margin-bottom: 6px;
}

.formGroup input,
.formGroup select {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: all 0.2s ease;
}

.formGroup input:focus,
.formGroup select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.formGroup input::placeholder {
  color: #9ca3af;
}

/* Responsive */
@media (max-width: 1024px) {
  .formContainer {
    grid-template-columns: repeat(2, 1fr);
  }

  .fullWidth {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .addCustomerHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .formContainer {
    grid-template-columns: 1fr;
  }

  .fullWidth {
    grid-column: span 1;
  }
}


/* second comp*/

.productTableContainer {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 16px;
  font-family: "Inter", system-ui, sans-serif;
}

.productTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.productTable thead th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f1f1;
}

.productTable tbody td {
  padding: 8px 12px;
  vertical-align: middle;
}

.productTable tbody tr {
  background-color: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.03);
  transition: background 0.2s ease;
}

.productTable tbody tr:hover {
  background-color: #f9fafb;
}

.productNameCell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.productNameCell img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  object-fit: contain;
  background: #f9fafb;
}

.productTitle {
  font-weight: 600;
  color: #111827;
}

.productBrand {
  font-size: 12px;
  color: #6b7280;
}

.productTable input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.productTable input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Totals Row */
.tableTotals td {
  font-weight: 600;
  color: #111827;
  border-top: 1px solid #f1f1f1;
  padding-top: 12px;
}

/* Add Product Button */
.addProductContainer {
  padding-top: 12px;
}

.addProductBtn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.addProductBtn:hover {
  background: #f9fafb;
  border-color: #2563eb;
  color: #2563eb;
}

/* Delete Button */
.deleteBtn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.deleteBtn:hover {
  color: #dc2626;
  transform: scale(1.15);
}

/* Service Table Styles */
.serviceTableContainer {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 16px;
  font-family: "Inter", system-ui, sans-serif;
}

.serviceTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-bottom: 20px;
}

.serviceTable thead th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f1f1;
}

.serviceTable tbody td {
  padding: 8px 12px;
  vertical-align: middle;
}

.serviceTable tbody tr {
  background-color: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.03);
  transition: background 0.2s ease;
}

.serviceTable tbody tr:hover {
  background-color: #f9fafb;
}

.serviceNameCell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.serviceNameCell img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  object-fit: contain;
  background: #f9fafb;
}

.serviceTable input,
.serviceTable select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.serviceTable input:focus,
.serviceTable select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Discount Container */
.discountContainer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 20px 0;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.discountContainer label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  min-width: 120px;
}

.discountInput {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  min-width: 120px;
  outline: none;
  transition: border-color 0.2s ease;
}

.discountInput:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Service Totals Table */
.serviceTotalsTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  background: #f9fafb;
  border-radius: 8px;
  overflow: hidden;
}

.serviceTotalsTable tbody tr {
  display: flex;
  gap: 20px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.serviceTotalsTable td {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #111827;
}

.serviceTotalsTable strong {
  font-weight: 600;
  color: #374151;
  font-size: 13px;
}

/* Add Service Button */
.addServiceContainer {
  padding-top: 12px;
}

.addServiceBtn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.addServiceBtn:hover {
  background: #f9fafb;
  border-color: #2563eb;
  color: #2563eb;
}
body {
  overflow: auto;
  font-family: "Inter", sans-serif;
  color: #111827;
  background: #fff;
}

.addCustomerContainer {
  background: #fff;
  border-radius: 10px;
  box-shadow: none;
  padding-top: 10;
  margin: 0;
  border: 1px solid #e5e7eb;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* Buttons */
.headerButtons {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancelBtn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.cancelBtn:hover {
  background: #f9fafb;
}

.saveBtn {
  background: #2563eb;
  color: #fff;
}

.saveBtn:hover {
  background: #1e40af;
}

/* Form */
.formContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 32px;
  padding: 0 24px;
}

.formGroup {
  display: flex;
  flex-direction: column;
}

.formGroup label,
.formGroupPhone label {
  font-size: 13px;
  color: #374151;
  font-weight: 600;
  margin-bottom: 6px;
}

.formGroup input,
.formGroup select,
.formGroupPhone .phoneInputGroup {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.phoneInputGroup {
  display: flex;
  gap: 8px;
  border: none;
  padding: 0 !important;
}

.phoneInputGroup .countryCode {
  width: 80px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 8px;
  font-size: 14px;
  color: #111827;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.phoneInputGroup .countryCode:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.phoneInputGroup input {
  flex: 1 1;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: all 0.2s ease;
}

.phoneInputGroup input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.formGroup input:focus,
.formGroup select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Required field indicator */
.formGroup label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Error state */
.formGroup.error input,
.formGroup.error select {
  border-color: #ef4444;
  background-color: #fff5f5;
}

.formGroup.error input:focus,
.formGroup.error select:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.formGroup .errorText {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.formGroup.error .errorText {
  display: block;
}

.formGroup input::placeholder {
  color: #9ca3af;
}

/* Product Table */
.productTableContainer {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  font-family: "Inter", system-ui, sans-serif;
  margin-bottom: 32px;
  overflow: hidden;
}

.productTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.productTable thead {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.productTable thead th {
  text-align: left;
  padding: 14px 16px;
  border-right: 1px solid #e5e7eb;
  white-space: nowrap;
  vertical-align: middle;
}

.productTable thead th:last-child {
  border-right: none;
}

.productTable tbody td {
  padding: 14px 16px;
  vertical-align: middle;
  border-right: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}

.productTable tbody td:last-child {
  border-right: none;
}

.productTable tbody tr {
  background-color: #ffffff;
  transition: background-color 0.15s ease;
}

.productTable tbody tr:hover {
  background-color: #f9fafb;
}

.productNameCell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.productNameCell img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  object-fit: contain;
  background: #f9fafb;
}

.productTitle {
  font-weight: 600;
  color: #111827;
}

.productBrand {
  font-size: 12px;
  color: #6b7280;
}

.productTable input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: all 0.2s ease;
  background: #ffffff;
}

.productTable input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
  background: #ffffff;
}

.productTable input::placeholder {
  color: #9ca3af;
}

/* Totals Row */
.tableTotals {
  background: #f9fafb;
  font-weight: 600;
  color: #111827;
}

.tableTotals td {
  padding: 12px 16px;
  border-top: 2px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

/* Add Product Button */
.addProductContainer {
  padding-top: 16px;
  text-align: right;
}

.addProductBtn {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Inter", sans-serif;
}

.addProductBtn:hover {
  background: #f9fafb;
  border-color: #2563eb;
  color: #2563eb;
}

/* Delete Button */
.deleteBtn {
  background: transparent;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #9ca3af;
}

.deleteBtn:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}


/* Service Table Styles */
.serviceTableContainer {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 20px;
  font-family: "Inter", system-ui, sans-serif;
  margin-bottom: 32px;
}

.serviceTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-bottom: 20px;
}

.serviceTable thead th {
  text-align: left;
  color: #6b7280;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f1f1;
}

.serviceTable tbody td {
  padding: 8px 12px;
  color: #111827;
  vertical-align: middle;
}

.serviceTable tbody tr {
  background-color: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.03);
  transition: background 0.2s ease;
}

.serviceTable tbody tr:hover {
  background-color: #f9fafb;
}

.serviceNameCell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.serviceNameCell img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  object-fit: contain;
  background: #f9fafb;
}

.serviceTable input,
.serviceTable select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.serviceTable input:focus,
.serviceTable select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Discount Container */
.discountContainer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 20px 0;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.discountContainer label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  min-width: 120px;
}

.discountInput {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  min-width: 120px;
  outline: none;
  transition: border-color 0.2s ease;
}

.discountInput:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Service Totals Table */
.serviceTotalsTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  background: #f9fafb;
  border-radius: 8px;
  overflow: hidden;
}

.serviceTotalsTable tbody tr {
  display: flex;
  gap: 20px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.serviceTotalsTable td {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #111827;
}

.serviceTotalsTable strong {
  font-weight: 600;
  color: #374151;
  font-size: 13px;
}

/* Add Service Button */
.addServiceContainer {
  padding-top: 16px;
}

.addServiceBtn {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.addServiceBtn:hover {
  background: #f9fafb;
  border-color: #2563eb;
  color: #2563eb;
}

/* Responsive */
@media (max-width: 1024px) {
  .formContainer {
    grid-template-columns: repeat(2, 1fr);
  }

  .fullWidth {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .addCustomerHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .formContainer {
    grid-template-columns: 1fr;
  }

  .fullWidth {
    grid-column: span 1;
  }

  .headerButtons {
    flex-direction: column;
    width: 100%;
  }

  .headerButtons .btn {
    width: 100%;
  }
}
.customer-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.customer-page-wrapper .table-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: auto;
  min-width: 1200px;
}

.customer-page-wrapper .table-container thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}

.customer-page-wrapper .table-container th {
  padding: 14px 16px !important;
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #535862 !important;
  text-transform: none !important;
  letter-spacing: 0px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  background: #f9fafb !important;
  font-family: var(--font-family-primary) !important;
  border-bottom: 2px solid #e5e7eb !important;
}

/* Column-specific widths for Customer table */
.customer-page-wrapper .table-container th:nth-child(1),
.customer-page-wrapper .table-container td:nth-child(1) {
  width: 70px;
  min-width: 70px;
  text-align: left !important;
  font-weight: 600;
}

.customer-page-wrapper .table-container th:nth-child(2),
.customer-page-wrapper .table-container td:nth-child(2) {
  width: 140px;
  min-width: 140px;
  text-align: left !important;
  color: #111827;
}

.customer-page-wrapper .table-container th:nth-child(3),
.customer-page-wrapper .table-container td:nth-child(3) {
  width: 130px;
  min-width: 130px;
  text-align: left !important;
  color: #6b7280;
}

.customer-page-wrapper .table-container th:nth-child(4),
.customer-page-wrapper .table-container td:nth-child(4) {
  width: 150px;
  min-width: 150px;
  text-align: left !important;
  color: #111827;
}

.customer-page-wrapper .table-container th:nth-child(5),
.customer-page-wrapper .table-container td:nth-child(5) {
  width: 120px;
  min-width: 120px;
  text-align: left !important;
  color: #6b7280;
}

.customer-page-wrapper .table-container th:nth-child(6),
.customer-page-wrapper .table-container td:nth-child(6) {
  width: 100px;
  min-width: 100px;
  text-align: left !important;
  color: #4b5563;
  font-size: 12px;
}

.customer-page-wrapper .table-container th:nth-child(7),
.customer-page-wrapper .table-container td:nth-child(7) {
  width: 75px;
  min-width: 75px;
  text-align: left !important;
  padding: 14px 12px;
  font-size: 12px;
}

.customer-page-wrapper .table-container th:nth-child(8),
.customer-page-wrapper .table-container td:nth-child(8) {
  width: 80px;
  min-width: 80px;
  text-align: left !important;
  padding: 14px 8px;
}

.customer-page-wrapper .table-container th:nth-child(9),
.customer-page-wrapper .table-container td:nth-child(9) {
  width: 105px;
  min-width: 105px;
  text-align: left !important;
  font-size: 12px;
}

.customer-page-wrapper .table-container th:nth-child(10),
.customer-page-wrapper .table-container td:nth-child(10) {
  width: 75px;
  min-width: 75px;
  text-align: left !important;
}

.customer-page-wrapper .table-container th:nth-child(11),
.customer-page-wrapper .table-container td:nth-child(11) {
  width: 110px;
  min-width: 110px;
  text-align: left !important;
  white-space: nowrap;
  padding: 14px 12px;
}

.customer-page-wrapper .table-container tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  /* display: table; */
  width: 100%;
}

.customer-page-wrapper .table-container tbody tr:hover {
  background-color: #f9fafb;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.02);
}

.customer-page-wrapper .table-container tbody tr:last-child {
  border-bottom: none;
}

.customer-page-wrapper .table-container td {
  padding: 14px 16px;
  font-size: 13px;
  color: #111827;
  vertical-align: middle;
  word-break: break-word;
}

/* Status Badge Styling */
.customer-page-wrapper .status-badge {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.customer-page-wrapper .status-badge.active {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.customer-page-wrapper .status-badge.inactive {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Customer Type Badge */
.customer-page-wrapper .type-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.customer-page-wrapper .type-badge.product {
  background-color: #dbeafe;
  color: #0c4a6e;
  border: 1px solid #7dd3fc;
}

.customer-page-wrapper .type-badge.service {
  background-color: #f3e8ff;
  color: #6b21a8;
  border: 1px solid #d8b4fe;
}

/* Action Icons */
.customer-page-wrapper .action-icon {
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  padding: 6px;
  border-radius: 4px;
}

.customer-page-wrapper .action-icon:hover {
  color: #111827;
  background-color: #f3f4f6;
}

/* Contact Info Cell */
.customer-page-wrapper .contact-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.customer-page-wrapper .contact-cell .email {
  font-size: 12px;
  color: #6b7280;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .customer-page-wrapper .table-container {
    padding: 16px;
    overflow-x: auto;
  }

  .customer-page-wrapper .table-container table {
    min-width: 1000px;
  }

  .customer-page-wrapper .table-container th,
  .customer-page-wrapper .table-container td {
    padding: 12px 12px;
    font-size: 12px;
  }

  /* Reduce column widths for tablet */
  .customer-page-wrapper .table-container th:nth-child(2),
  .customer-page-wrapper .table-container td:nth-child(2) {
    width: 120px;
    min-width: 120px;
  }

  .customer-page-wrapper .table-container th:nth-child(4),
  .customer-page-wrapper .table-container td:nth-child(4) {
    width: 130px;
    min-width: 130px;
  }
}

@media (max-width: 768px) {
  .customer-page-wrapper .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .customer-page-wrapper .table-container table {
    min-width: 900px;
  }

  .customer-page-wrapper .table-container th,
  .customer-page-wrapper .table-container td {
    padding: 10px 10px;
    font-size: 11px;
  }

  .customer-page-wrapper .table-container th {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .customer-page-wrapper .table-container {
    padding: 8px;
    border-radius: 6px;
  }

  .customer-page-wrapper .table-container th,
  .customer-page-wrapper .table-container td {
    padding: 6px 8px;
    font-size: 10px;
  }

  .customer-page-wrapper .status-badge,
  .customer-page-wrapper .type-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* Pagination container styling */
.customer-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-top: none;
  background: #ffffff !important;
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  gap: 8px;
}
/* Document section styles */
.document-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    background: #fff;
}

.document-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.document-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.document-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.document-title {
    font-size: 14px;
    font-weight: 500;
    color: #101828;
}

.document-delete-icon {
    color: #9ca3af;
    cursor: pointer;
}

.document-date {
    font-size: 12px;
    color: #667085;
}

.document-actions {
    display: flex;
    gap: 12px;
}

.document-btn-outline {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    cursor: pointer;
}

.document-btn-primary {
    padding: 8px 16px;
    background: #2563EB;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 768px) {
    .document-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .document-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
/* Profile Form Card */
.profile-form-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
}

/* Section Styling */
.form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.form-group label .required {
  color: #ef4444;
  margin-left: 2px;
}

.profile-input {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  transition: all 0.2s ease;
}

.profile-input:focus {
  outline: none;
  border-color: #c98f53;
  box-shadow: 0 0 0 3px rgba(201, 143, 83, 0.1);
}

.profile-input::placeholder {
  color: #9ca3af;
}

/* Toggle Switch */
.toggle-switch-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
}

/* Custom Toggle CSS */
.custom-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.custom-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e7eb;
  transition: .3s;
  border-radius: 20px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

input:checked+.toggle-slider {
  background-color: #2563eb;
}

input:focus+.toggle-slider {
  box-shadow: 0 0 1px #2563eb;
}

input:checked+.toggle-slider:before {
  transform: translateX(16px);
}

/* File Upload Box */
.file-upload-box {
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.2s ease;
  height: 120px;
}

.file-upload-box:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.file-upload-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  color: #6b7280;
}

.file-upload-text {
  font-size: 14px;
  color: #374151;
  margin-bottom: 4px;
}

.file-upload-text span {
  color: #2563eb;
  font-weight: 500;
}

.file-upload-hint {
  font-size: 12px;
  color: #6b7280;
}

/* Uploaded File Box */
.uploaded-file-box {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
  height: 120px;
}

.file-icon-pdf {
  width: 40px;
  height: 40px;
  background: #eff6ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}

.uploaded-file-details {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uploaded-file-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.uploaded-file-meta {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 8px;
}

.uploaded-file-meta .status {
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 4px;
}

.progress-bar-container {
  width: 100%;
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.progress-bar-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 3px;
}

.progress-text {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
  margin-left: 8px;
}

/* Currency Input Wrapper */
.currency-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.currency-input-wrapper .profile-input {
  padding-left: 32px;
  padding-right: 64px;
}

.currency-symbol {
  position: absolute;
  left: 14px;
  color: #6b7280;
  font-size: 14px;
}

.currency-dropdown {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid #d1d5db;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
  background: #f9fafb;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.onboarding-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: #fff;
  padding: 4px 8px;
  border-radius: 16px;
  border: 1px solid #d1d5db;
}

.onboarding-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.readonly-input-container {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  color: #6b7280;
  font-size: 14px;
}

.input-ui-fix {
  padding: 0.75rem 2rem 1rem !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .form-grid,
  .form-grid-2 {
    grid-template-columns: 1fr;
  }

  .profile-form-card {
    padding: 16px;
  }
}

/* Local Validation Styles */
.field-error-wrapper.has-error .form-label,
.field-error-wrapper.has-error label {
  color: #e53935 !important;
  font-weight: 700 !important;
}

.field-error-wrapper.has-error .form-input,
.field-error-wrapper.has-error .form-select,
.field-error-wrapper.has-error .price-combined-input,
.field-error-wrapper.has-error select,
.field-error-wrapper.has-error input {
  border: 1.5px solid #e53935 !important;
  background-color: #fff6f6 !important;
}

.error-message {
  color: #e53935 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  display: block !important;
}

/* PriceField UI Fixes */
.price-combined-input {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 44px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background-color: #fff !important;
  width: 100% !important;
}

.price-combined-input:focus-within {
  border-color: #1570ef !important;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.1) !important;
}

.field-error-wrapper.has-error .price-combined-input {
  border-color: #e53935 !important;
  background-color: #fff6f6 !important;
}

.currency-dropdown,
.currency-dropdown-right {
  display: flex !important;
  align-items: center !important;
  background-color: #fff !important;
  height: 100% !important;
}

.currency-dropdown {
  background-color: #f9fafb !important;
  border-right: 1px solid #d1d5db !important;
}

.currency-dropdown-right {
  border-left: 1px solid #d1d5db !important;
}

.currency-dropdown select,
.currency-dropdown-right select {
  height: 32px !important;
  border: none !important;
  background-color: transparent !important;
  font-size: 14px !important;
  padding: 0 32px 0 12px !important;
  cursor: pointer !important;
  outline: none !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  color: #374151 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23667085%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}

.price-field-input {
  flex: 1 1 !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
  font-size: 14px !important;
  padding: 0 12px !important;
  background-color: transparent !important;
}
.user-profile-container {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding-bottom: 40px;
}

.user-profile-main-content-wrapper {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.user-profile-header-actions {
    display: flex;
    gap: 12px;
}

.user-profile-back-btn {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    cursor: pointer;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.user-profile-edit-btn {
    padding: 8px 16px;
    background: #2563EB;
    border: 1px solid #2563EB;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.user-profile-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
}

.user-profile-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.user-profile-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
}

.user-profile-company-logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid #eaecf0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.user-profile-company-logo img {
    width: 50px;
    height: 50px;
}

.document-list {
    padding: 14px 24px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
}

.document-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.document-row:last-child {
    margin-bottom: 0;
}

.document-label {
    color: #667085;
    font-size: 14px;
    width: 30%;
}

.document-content {
    width: 70%;
    display: flex;
    justify-content: flex-end;
}

.document-item-wrapper {
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: flex-end;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
}

.checkbox-input {
    width: 16px;
    height: 16px;
}

.section-header-strong {
    color: #101828;
    font-size: 16px;
}

.handle-css-label {
    width: 100% !important;
}

@media (max-width: 1024px) {
    .user-profile-two-columns {
        grid-template-columns: 1fr;
    }
}
.receipt-page-wrapper .add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden;
  /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

.receipt-page-wrapper .product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1;
  /* take remaining height */
  overflow-y: auto;
  /* scroll inside */
}

.receipt-page-wrapper .product-form-card::-webkit-scrollbar {
  width: 8px;
}

.receipt-page-wrapper .product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}

.receipt-page-wrapper .product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

.receipt-page-wrapper .product-form-grid {
  display: flex;
  gap: 0px;
  align-items: flex-start;
}

.receipt-page-wrapper .upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.receipt-page-wrapper .product-form-fields {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.receipt-page-wrapper .upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}

.receipt-page-wrapper .upload-card:hover {
  border-color: #3b82f6;
}

.receipt-page-wrapper .form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.receipt-page-wrapper .form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.receipt-page-wrapper .form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}

.receipt-page-wrapper .form-field input,
.receipt-page-wrapper .form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}

.receipt-page-wrapper .form-field input:focus,
.receipt-page-wrapper .form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

.receipt-page-wrapper .form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

.receipt-page-wrapper .price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.receipt-page-wrapper .price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

.receipt-page-wrapper .price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

.receipt-page-wrapper input[type="date"] {
  font-family: inherit;
}

.receipt-page-wrapper .checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

.receipt-page-wrapper .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.receipt-page-wrapper .button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.receipt-page-wrapper .button-primary:hover {
  background-color: #1d4ed8;
}

.receipt-page-wrapper .invoice-summary-card {
  margin-top: 24px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.receipt-page-wrapper .invoice-summary-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.receipt-page-wrapper .invoice-summary-table thead {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.receipt-page-wrapper .invoice-summary-table thead th {
  color: #6b7280;
  padding: 14px 20px;
  text-align: left;
  white-space: nowrap;
}

.receipt-page-wrapper .invoice-summary-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.receipt-page-wrapper .invoice-summary-table tbody td {
  color: #111827;
  padding: 18px 20px;
  text-align: left;
  white-space: nowrap;
}

.receipt-page-wrapper .invoice-summary-table tbody tr:last-child {
  border-bottom: none;
}

.receipt-page-wrapper .button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.receipt-page-wrapper .button-secondary:hover {
  background-color: #e5e7eb;
}

.receipt-page-wrapper .upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

@media (max-width: 768px) {
  .receipt-page-wrapper .product-form-grid {
    flex-direction: column;
  }

  .receipt-page-wrapper .upload-section,
  .receipt-page-wrapper .product-form-fields {
    max-width: 100%;
  }

  .receipt-page-wrapper .form-row {
    flex-direction: column;
  }
}
/* -------------------------
   Card Wrapper
-------------------------- */
.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  /* -------------------------
     Form Layout
  -------------------------- */
  .form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }
  
  /* Grid rows */
  .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-gap: 16px;
    gap: 16px;
    width: 100%;
  }
  
  /* Prevent overflow from inputs */
  .form-row > * {
    width: 100%;
    min-width: 0;
  }
  
  /* Force all fields to be fluid */
  .form-row input,
  .form-row select,
  .form-row textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .branch-field {
    width: 300px;
    max-width: 100%;
  }
  
  
  /* -------------------------
     Snackbar
  -------------------------- */
  .snackbar.success {
    position: fixed;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: #16a34a;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 8px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  /* -------------------------
     Responsive
  -------------------------- */
  @media (max-width: 768px) {
    .card {
      padding: 16px;
    }
  }
  
  @media (max-width: 480px) {
    .form-row {
      grid-template-columns: 1fr;
    }
  }
  
/* Main container */
.add-product-container {
  padding: 24px 32px;
  background-color: #f9fafb;
  height: 85vh;
  overflow: hidden;
  /* prevent outer scroll */
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
}

/* Card wrapper with internal scroll */
.product-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  flex: 1 1;
  /* take remaining height */
  overflow-y: auto;
  /* scroll inside */
}

/* Scrollbar style */
.product-form-card::-webkit-scrollbar {
  width: 8px;
}

.product-form-card::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 4px;
}

.product-form-card::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

/* Grid layout */
.product-form-grid {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.upload-section {
  flex: 3 1;
  max-width: 25%;
  min-width: 240px;
}

.product-form-fields1 {
  flex: 9 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 100%;
}

/* Upload card */
.upload-card {
  width: 100%;
  height: 240px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background-color: #fff;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: border 0.2s ease;
}

.upload-card:hover {
  border-color: #3b82f6;
}

/* Row of fields */
.form-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.form-row .form-field {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

/* Labels & inputs */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  color: #414651;
}

.form-field input,
.form-field select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 14px;
  color: #717680;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  transition: border 0.2s ease;
}

.form-field input:focus,
.form-field select:focus {
  border-color: #3b82f6;
  outline: none;
}

/* Required indicator */
.form-field label::after {
  content: attr(data-required);
  color: #ef4444;
  margin-left: 4px;
  font-weight: bold;
}

/* Price input */
.price-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.price-input select {
  border: none;
  padding: 10px 12px;
  background-color: #f9fafb;
  font-size: 14px;
  color: #111827;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

.price-input input {
  flex: 1 1;
  padding: 10px 12px;
  border: none;
  font-size: 14px;
  color: #111827;
}

/* Date input */
input[type="date"] {
  font-family: inherit;
}

/* Checkbox style */
.checkbox-row {
  margin-top: -12px;
  padding-left: 2px;
  font-size: 14px;
  color: #374151;
}

/* Buttons row */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Primary button */
.button-primary {
  padding: 10px 24px;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.button-primary:hover {
  background-color: #1d4ed8;
}

/* Secondary button */
.button-secondary {
  padding: 10px 24px;
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.button-secondary:hover {
  background-color: #e5e7eb;
}

.upload-section p {
  color: #181d27;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Responsive layout */
@media (max-width: 768px) {
  .product-form-grid {
    flex-direction: column;
  }

  .upload-section,
  .product-form-fields1 {
    max-width: 100%;
  }

  .form-row {
    flex-direction: column;
  }
}
.upload-subtitle {
  font-size: 16px;
  color: #667085;
  margin-bottom: 32px;
}

.doc-upload-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.doc-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.doc-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.upload-btn-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}

.custom-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #fff;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  transition: background-color 0.2s;
  height: 44px;
}

.custom-upload-btn:hover {
  background-color: #f9fafb;
}

.upload-btn-container.large {
  width: 100%;
}

.custom-upload-btn.large {
  flex-direction: column;
  height: auto;
  padding: 20px;
  border: 1px dashed #D0D5DD;
  background-color: #fff;
}

.upload-icon-circle {
  width: 48px;
  height: 48px;
  background-color: #f2f4f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.upload-text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-action-text {
  font-size: 14px;
  color: #1570EF;
  font-weight: 600;
}

.upload-action-text .grey-text {
  color: #667085;
  font-weight: 400;
}

.upload-hint {
  font-size: 12px;
  color: #667085;
  margin-top: 4px;
}

.file-name {
  font-size: 12px;
  color: #12B76A;
  font-weight: 500;
}

.file-attached {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #12B76A;
  font-weight: 500;
  margin-top: 8px;
}
/* SalaryAndLeaveConfig.css */

.salary-leave-config-container table thead th {
    padding: 14px 16px !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #535862 !important;
    background: #f9fafb !important;
    border-bottom: 2px solid #e5e7eb !important;
}

.salary-leave-config-container table tbody td {
    padding: 14px 16px !important;
    color: #111827 !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.salary-leave-config-container .page-header {
    margin-bottom: 8px !important;
}

/* Filter Tags */
.filter-tags-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    transition: all 0.2s ease;
}

.filter-tag:hover {
    border-color: #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-tag-label {
    font-weight: 500;
}

.filter-tag-remove {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: color 0.2s ease;
}

.filter-tag-remove:hover {
    color: #ef4444;
}

/* Table Container */
.salary-table-wrapper {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 100%;
    height: auto;
}

/* Override DataTable defaults for scrollable content */
.salary-table-wrapper .table-responsive {
    max-height: 400px !important;
    overflow-y: auto !important;
    min-height: 200px;
}

/* Ensure header stays visible while scrolling */
.salary-table-wrapper table thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f9fafb;
}

/* Role Cell */
.role-cell {
    display: flex;
    align-items: center;
}

.role-name {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #535862;
    font-size: 14px;
    line-height: 20px;
}

/* Salary Type Badge */
.salary-type-badge {
    padding: 2px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #535862;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 20px;
}

/* Salary Amount */
.salary-amount {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #535862;
    font-weight: 400;
    line-height: 20px;
}

/* Leave Approval */
.leave-approval-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #535862;
    font-weight: 400;
    line-height: 20px;
}

/* Table Header Customization */
.salary-table-wrapper table thead th {
    background: #f9fafb;
    color: #535862;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    text-transform: none;
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.salary-table-wrapper table tbody td {
    padding: 10px 16px;
    color: #535862;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.salary-table-wrapper table tbody tr {
    transition: background-color 0.2s ease;
}

.salary-table-wrapper table tbody tr:hover {
    background-color: #f9fafb;
}

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

/* Action Icons */
.salary-table-wrapper .action-icons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.salary-table-wrapper .action-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #9ca3af;
}

.salary-table-wrapper .action-icon:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.salary-table-wrapper .action-icon svg {
    width: 18px;
    height: 18px;
}

/* Search and Filter Bar */
.salary-table-wrapper .table-controls {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.salary-table-wrapper .search-input-wrapper {
    flex: 1 1;
    max-width: 400px;
    position: relative;
}

.salary-table-wrapper .search-input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

.salary-table-wrapper .search-input:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.salary-table-wrapper .filter-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.salary-table-wrapper .filter-button:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

.salary-table-wrapper .filter-button svg {
    width: 18px;
    height: 18px;
}

/* Pagination */
.salary-table-wrapper .pagination {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e5e7eb;
}

.salary-table-wrapper .pagination-info {
    font-size: 14px;
    color: #6b7280;
}

.salary-table-wrapper .pagination-controls {
    display: flex;
    gap: 8px;
}

.salary-table-wrapper .pagination-button {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.salary-table-wrapper .pagination-button:hover:not(:disabled) {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

.salary-table-wrapper .pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.salary-table-wrapper .pagination-button.active {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .salary-table-wrapper {
        overflow-x: auto;
    }
    
    .salary-table-wrapper table {
        min-width: 1200px;
    }
}

@media (max-width: 768px) {
    .salary-leave-config-container {
        padding: 16px;
    }
    
    .filter-tags-container {
        gap: 8px;
    }
    
    .filter-tag {
        padding: 6px 10px;
        font-size: 13px;
    }
    
    .salary-table-wrapper .table-controls {
        flex-direction: column;
        gap: 12px;
    }
    
    .salary-table-wrapper .search-input-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .filter-tags-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .salary-table-wrapper table thead th,
    .salary-table-wrapper table tbody td {
        padding: 12px;
        font-size: 13px;
    }
}

/* Cleanup Classes */
.sl-centered-cell {
    display: flex;
    justify-content: center;
}

.sl-error-text {
    color: #d92d20;
    margin: 10px 0;
}
/* Global Font Family */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* AddRoleConfiguration.css */

.add-role-config-container {
    background: #f9fafb;
    /* padding: 24px 80px 100px 80px; */
    /* min-height: 100vh; */
    overflow-y: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.add-role-config-container::-webkit-scrollbar {
    width: 6px;
}

.add-role-config-container::-webkit-scrollbar-track {
    background: transparent;
}

.add-role-config-container::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.add-role-config-container::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* For Firefox */
.add-role-config-container {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/* ERP Employee Form - Main Container */
.erp-employee-form-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 32px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* Form Section - Two Column Layout */
.erp-form-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-gap: 40px;
  gap: 40px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e7eb;
}

.erp-form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.erp-section-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0%;
  color: #111827;
  margin: 0;
  padding-top: 4px;
}

.erp-section-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Form Rows and Fields */
.erp-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 0;
}

.erp-align-items-center {
  align-items: center;
}

.erp-form-field {
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

.erp-form-field-half {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 8px);
}

.erp-form-field-third {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.333% - 11px);
}

.erp-form-field-quarter {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(25% - 12px);
}

/* Labels */
.erp-field-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
  display: block;
}

.erp-required-asterisk {
  color: #1570EF;
  margin-left: 2px;
}

/* Text Inputs */
.erp-text-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-text-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-text-input::placeholder {
  color: #9ca3af;
}

/* Date Input Specific Styling */
input[type="date"].erp-text-input {
  color: #6b7280;
}

input[type="date"].erp-text-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

/* Select Inputs */
.erp-select-input {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2714%27 height=%278%27 viewBox=%270 0 14 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L7 7L13 1%27 stroke=%27%23A4A7AE%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-select-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dropdown with Tag */
.erp-dropdown-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 10px 6px 8px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  min-height: 42px;
  gap: 6px;
}

.erp-selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 2px 3px 2px 8px;
  background: #EFF8FF;
  border: 1px solid #B2DDFF;
  border-radius: 16px;
  font-size: 13px;
  color: #1e40af;
}

.erp-empty-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  width: 28px;
  height: 28px;
}

.erp-tag-remove-btn {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin-left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.erp-tag-remove-btn:hover {
  color: #1e40af;
}

.erp-empty-tag .erp-tag-remove-btn {
  color: #6b7280;
  font-size: 20px;
  width: 20px;
  height: 20px;
  margin: 0;
}

.erp-dropdown-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #A4A7AE;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.erp-dropdown-arrow svg {
  display: block;
}

/* Custom Dropdown */
.erp-custom-dropdown {
  position: relative;
  width: 100%;
}

.erp-dropdown-trigger {
  width: 100%;
  padding: 10px 15px 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.erp-dropdown-trigger:hover {
  border-color: #9ca3af;
}

.erp-dropdown-trigger:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-dropdown-arrow-icon {
  color: #A4A7AE;
  margin-left: auto;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Dropdown Menu */
.erp-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
}

.erp-dropdown-item {
  padding: 14px 16px;
  font-size: 16px;
  color: #111827;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  margin-bottom: 4px;
  border: 2px solid transparent;
  background-color: #ffffff;
}

.erp-dropdown-item:last-child {
  margin-bottom: 0;
}

/* Hover state - blue border for all items */
.erp-dropdown-item:hover {
  border-color: #3b82f6;
  background-color: #ffffff;
}

/* Selected state - no blue border, just checkmark */
.erp-dropdown-item-selected {
  background-color: #ffffff;
  border-color: transparent;
  color: #111827;
}

.erp-dropdown-item-selected:hover {
  border-color: #3b82f6;
  background-color: #ffffff;
}

.erp-checkmark {
  color: #3b82f6;
  font-weight: 600;
  font-size: 20px;
}

/* Currency Input */
.erp-currency-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-currency-input-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-currency-symbol {
  font-size: 14px;
  color: #6b7280;
  margin-right: 6px;
}

.erp-currency-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #111827;
  background: transparent;
  padding: 0;
}

.erp-currency-code {
  font-size: 13px;
  color: #6b7280;
  margin-left: 8px;
  font-weight: 400;
}

/* Number Input */
.erp-number-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-number-input-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-number-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #111827;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}

.erp-number-input::-webkit-outer-spin-button,
.erp-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.erp-input-suffix {
  font-size: 13px;
  color: #6b7280;
  margin-left: 8px;
}

/* Radio Buttons */
.erp-radio-group {
  display: flex;
  gap: 24px;
  align-items: center;
}

.erp-radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.erp-radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #3b82f6;
}

.erp-radio-text {
  font-size: 14px;
  color: #374151;
  margin-left: 8px;
  font-weight: 400;
}

/* Toggle Switch */
.erp-toggle-field {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.333% - 11px);
  transition: all 0.2s ease;
}

.erp-toggle-field:hover {
  border-color: #9ca3af;
}

.erp-toggle-field:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-toggle-field-inline {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 8px);
}

.erp-toggle-field-inline-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px; /* Match standard input height */
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.erp-toggle-field-inline-content:hover {
  border-color: #9ca3af;
}

.erp-toggle-field-inline-content:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-toggle-field-with-description {
  flex: 1 1;
  justify-content: space-between;
}

.erp-toggle-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.erp-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.erp-toggle-description {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.erp-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.erp-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.erp-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.3s;
  border-radius: 24px;
}

.erp-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.erp-toggle-switch input:checked + .erp-toggle-slider {
  background-color: #3b82f6;
}

.erp-toggle-switch input:checked + .erp-toggle-slider:before {
  transform: translateX(20px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .add-role-config-container {
    padding: 24px 40px;
  }
  
  .erp-form-section {
    grid-template-columns: 160px 1fr;
    gap: 24px;
  }
  
  .erp-form-row {
    flex-wrap: wrap;
  }
  
  .erp-form-field-half,
  .erp-form-field-third,
  .erp-form-field-quarter {
    flex: 0 0 100%;
  }
}

@media (max-width: 768px) {
  .add-role-config-container {
    padding: 16px;
  }
  
  .erp-employee-form-container {
    padding: 20px;
  }
  
  .erp-form-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .erp-radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .erp-toggle-field {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .erp-toggle-field-inline {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}








/* Error Styling */
.erp-input-error {
  border-color: #f04438 !important;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1) !important;
}

.erp-error-message {
  font-size: 12px;
  color: #f04438;
  margin-top: 4px;
  font-weight: 400;
}

/* Global Font Family */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* EditRoleConfiguration.css */

.edit-role-config-container {
    background: #f9fafb;
    /* padding: 24px 80px 100px 80px; */
    /* min-height: 100vh; */
    overflow-y: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.edit-role-config-container::-webkit-scrollbar {
    width: 6px;
}

.edit-role-config-container::-webkit-scrollbar-track {
    background: transparent;
}

.edit-role-config-container::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.edit-role-config-container::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* For Firefox */
.edit-role-config-container {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/* ERP Employee Form - Main Container */
.erp-employee-form-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 32px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* Form Section - Two Column Layout */
.erp-form-section {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-gap: 40px;
  gap: 40px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e7eb;
}

.erp-form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.erp-section-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0%;
  color: #111827;
  margin: 0;
  padding-top: 4px;
}

.erp-section-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Form Rows and Fields */
.erp-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 0;
}

.erp-align-items-center {
  align-items: center;
}

.erp-form-field {
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

.erp-form-field-half {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 8px);
}

.erp-form-field-third {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.333% - 11px);
}

.erp-form-field-quarter {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(25% - 12px);
}

/* Labels */
.erp-field-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
  display: block;
}

.erp-required-asterisk {
  color: #1570EF;
  margin-left: 2px;
}

/* Text Inputs */
.erp-text-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-text-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-text-input::placeholder {
  color: #9ca3af;
}

/* Date Input Specific Styling */
input[type="date"].erp-text-input {
  color: #6b7280;
}

input[type="date"].erp-text-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

/* Select Inputs */
.erp-select-input {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2714%27 height=%278%27 viewBox=%270 0 14 8%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1L7 7L13 1%27 stroke=%27%23A4A7AE%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-select-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dropdown with Tag */
.erp-dropdown-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 6px 10px 6px 8px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  min-height: 42px;
  gap: 6px;
}

.erp-selected-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 2px 3px 2px 8px;
  background: #EFF8FF;
  border: 1px solid #B2DDFF;
  border-radius: 16px;
  font-size: 13px;
  color: #1e40af;
}

.erp-empty-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  width: 28px;
  height: 28px;
}

.erp-tag-remove-btn {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin-left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.erp-tag-remove-btn:hover {
  color: #1e40af;
}

.erp-empty-tag .erp-tag-remove-btn {
  color: #6b7280;
  font-size: 20px;
  width: 20px;
  height: 20px;
  margin: 0;
}

.erp-dropdown-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #A4A7AE;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.erp-dropdown-arrow svg {
  display: block;
}

/* Custom Dropdown */
.erp-custom-dropdown {
  position: relative;
  width: 100%;
}

.erp-dropdown-trigger {
  width: 100%;
  padding: 10px 15px 10px 12px;
  font-size: 14px;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.erp-dropdown-trigger:hover {
  border-color: #9ca3af;
}

.erp-dropdown-trigger:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-dropdown-arrow-icon {
  color: #A4A7AE;
  margin-left: auto;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Dropdown Menu */
.erp-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
}

.erp-dropdown-item {
  padding: 14px 16px;
  font-size: 16px;
  color: #111827;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  margin-bottom: 4px;
  border: 2px solid transparent;
  background-color: #ffffff;
}

.erp-dropdown-item:last-child {
  margin-bottom: 0;
}

/* Hover state - blue border for all items */
.erp-dropdown-item:hover {
  border-color: #3b82f6;
  background-color: #ffffff;
}

/* Selected state - no blue border, just checkmark */
.erp-dropdown-item-selected {
  background-color: #ffffff;
  border-color: transparent;
  color: #111827;
}

.erp-dropdown-item-selected:hover {
  border-color: #3b82f6;
  background-color: #ffffff;
}

.erp-checkmark {
  color: #3b82f6;
  font-weight: 600;
  font-size: 20px;
}

/* Currency Input */
.erp-currency-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-currency-input-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-currency-symbol {
  font-size: 14px;
  color: #6b7280;
  margin-right: 6px;
}

.erp-currency-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #111827;
  background: transparent;
  padding: 0;
}

.erp-currency-code {
  font-size: 13px;
  color: #6b7280;
  margin-left: 8px;
  font-weight: 400;
}

/* Number Input */
.erp-number-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.erp-number-input-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-number-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #111827;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}

.erp-number-input::-webkit-outer-spin-button,
.erp-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.erp-input-suffix {
  font-size: 13px;
  color: #6b7280;
  margin-left: 8px;
}

/* Radio Buttons */
.erp-radio-group {
  display: flex;
  gap: 24px;
  align-items: center;
}

.erp-radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.erp-radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #3b82f6;
}

.erp-radio-text {
  font-size: 14px;
  color: #374151;
  margin-left: 8px;
  font-weight: 400;
}

/* Toggle Switch */
.erp-toggle-field {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.333% - 11px);
  transition: all 0.2s ease;
}

.erp-toggle-field:hover {
  border-color: #9ca3af;
}

.erp-toggle-field:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-toggle-field-inline {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(50% - 8px);
}

.erp-toggle-field-inline-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px; /* Match standard input height */
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.erp-toggle-field-inline-content:hover {
  border-color: #9ca3af;
}

.erp-toggle-field-inline-content:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.erp-toggle-field-with-description {
  flex: 1 1;
  justify-content: space-between;
}

.erp-toggle-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.erp-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.erp-toggle-description {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.erp-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.erp-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.erp-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.3s;
  border-radius: 24px;
}

.erp-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.erp-toggle-switch input:checked + .erp-toggle-slider {
  background-color: #3b82f6;
}

.erp-toggle-switch input:checked + .erp-toggle-slider:before {
  transform: translateX(20px);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .edit-role-config-container {
    padding: 24px 40px;
  }
  
  .erp-form-section {
    grid-template-columns: 160px 1fr;
    gap: 24px;
  }
  
  .erp-form-row {
    flex-wrap: wrap;
  }
  
  .erp-form-field-half,
  .erp-form-field-third,
  .erp-form-field-quarter {
    flex: 0 0 100%;
  }
}

@media (max-width: 768px) {
  .edit-role-config-container {
    padding: 16px;
  }
  
  .erp-employee-form-container {
    padding: 20px;
  }
  
  .erp-form-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .erp-radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .erp-toggle-field {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .erp-toggle-field-inline {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
}
/* Error Styling */
.erp-input-error {
  border-color: #f04438 !important;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1) !important;
}

.erp-error-message {
  font-size: 12px;
  color: #f04438;
  margin-top: 4px;
  font-weight: 400;
}

/* Global Font Family */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.view-role-config-container {
  background: #f9fafb;
  /* padding: 24px; */
  box-sizing: border-box;
}

/* Back Button */
.view-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  padding: 0;
  margin-bottom: 16px;
  transition: color 0.15s;
}

.view-back-btn:hover {
  color: #111827;
}

/* ── ONE outer main card — everything inside ── */
.view-main-card {
  background: #ffffff;
  overflow-y: auto;
  /* 
    100vh 
    - 139px (top header bar) 
    - 24px (container padding top)
    - 36px (back button height + margin)
    - 24px (container padding bottom)
    - 60px (footer)
  */
  max-height: calc(100vh - 230px);
  box-sizing: border-box;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.view-main-card::-webkit-scrollbar {
  width: 6px;
}

.view-main-card::-webkit-scrollbar-track {
  background: transparent;
}

.view-main-card::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.view-main-card::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* For Firefox */
.view-main-card {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

/* Header inside main card */
.view-header-section {
  padding: 24px;
  border-bottom: 1px solid #E9EAEB;
}

.view-role-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 14px 0;
}

.view-header-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.view-header-meta p {
  margin: 0;
  font-size: 14px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-meta-label {
  font-weight: 400;
  color: #374151;
}

.view-meta-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Tab bar directly inside main card (no sub-card wrapper for tab itself) ── */
.view-tab-bar-wrapper {
  padding: 0 24px;
  border-bottom: 1px solid #E9EAEB;
  border-radius: 10px;
}

.view-tab-bar {
  display: inline-flex;
  align-items: center;
}

.view-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  padding: 14px 0;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.view-tab--active {
  color: #1570EF;
  border-bottom-color: #1570EF;
}

.view-tab:hover:not(.view-tab--active) {
  color: #374151;
}

/* Tab content directly inside main card */
.view-tab-content {
  /* padding: 32px 24px; */
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: #f9fafb;
}

/* Section */
.view-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.view-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #4b5563;
  margin: 0;
}

.view-tab-content .view-section .view-section-title {
  padding: 12px 24px !important;
  margin-bottom: 18px !important;
}

/* Inner data card per section */
.view-data-card {
  border: 1px solid #E9EAEB;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  padding: 8px 0;
}

/* Two-column grid */
.view-data-grid {
  display: grid;
  grid-template-columns: minmax(auto, 450px) minmax(auto, 450px);
  justify-content: start;
}

.view-data-grid--single {
  grid-template-columns: 1fr;
}

/* Info Row */
.view-info-row {
  display: grid;
  grid-template-columns: 240px 2fr;
  align-items: center;
  padding: 16px 24px;
  background: #ffffff;
}

.view-info-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 400;
}

.view-info-value {
  font-size: 14px;
  color: #111827;
  font-weight: 600;
  text-align: left;
}

.view-info-value--red {
  color: #ef4444;
}

/* Badges */
.view-applicable-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: fit-content;
  justify-self: start;
}

.view-applicable-badge--yes {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.view-applicable-badge--no {
  background: #f9fafb;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* Responsive */
@media (max-width: 768px) {
  .view-role-config-container {
    padding: 16px;
  }

  .view-tab-content {
    padding: 12px;
    gap: 12px;
  }

  .view-data-grid {
    grid-template-columns: 1fr;
  }

  .view-info-row {
    grid-template-columns: 1fr 1fr;
    padding: 12px 16px;
  }
}
/* ProductManagement.css */

.pm-page-wrapper .searchbar-main {
  display: none;
}

.pm-page-wrapper .table-container {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border: 1px solid #eaecf0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pm-table-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #ffffff;
  border-bottom: 1px solid #eaecf0;
  flex-shrink: 0;
}

.pm-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 350px;
}

.pm-search-icon {
  position: absolute;
  left: 12px;
  color: #667085;
  font-size: 20px !important;
}

.pm-search-input {
  width: 100%;
  height: 44px;
  padding: 0 45px 0 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.pm-search-input::placeholder {
  color: #667085;
}

.pm-search-shortcut {
  position: absolute;
  right: 12px;
  padding: 2px 6px;
  background: #fcfcfd;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
  font-size: 12px;
  color: #667085;
  font-weight: 500;
}

.pm-filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-filter-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 16px;
  height: 44px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}

.pm-filter-trigger-btn:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

.pm-filter-trigger-btn.active {
  background: #fcfcfd;
  border-color: #84caff;
  box-shadow: 0px 0px 0px 4px #eff8ff;
}

.pm-filter-icon {
  font-size: 20px !important;
  color: #344054;
}

.pm-filter-text {
  font-size: 14px;
  font-weight: 600;
  color: #344054;
}

.pm-filter-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f4f7;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  min-width: 22px;
  padding: 0 4px;
  height: 22px;
  font-size: 12px;
  font-weight: 500;
  color: #344054;
  margin-left: 4px;
}

/* Reset Button */
.pm-reset-btn {
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #667085;
  cursor: pointer;
  padding: 0 8px;
  transition: color 0.2s;
}

.pm-reset-btn:hover {
  color: #101828;
  text-decoration: underline;
}

.pm-product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pm-product-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  object-fit: contain;
  padding: 4px;
  flex-shrink: 0;
}

.pm-product-initial {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #1570ef 0%, #004eeb 100%);
  border: 1px solid rgba(21, 112, 239, 0.35);
  -webkit-user-select: none;
          user-select: none;
}

.pm-product-name {
  font-size: 13px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 2px;
}

.pm-product-brand {
  font-size: 12px;
  color: #667085;
  margin-bottom: 1px;
}

.pm-product-sku {
  font-size: 11px;
  color: #9ca3af;
}

/* DataTable Overrides for unified container look */
.pm-page-wrapper .data-table-wrapper {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  flex: 1 1;
}

.pm-page-wrapper .data-table {
  border: none !important;
  border-radius: 0 !important;
}

.pm-page-wrapper .data-table-pagination-wrapper {
  background: #ffffff !important;
  border-top: 1px solid #eaecf0 !important;
  padding: 8px 16px !important; /* Reduced height by decreasing vertical padding */
  border-radius: 0 0 12px 12px;
}

/* Pagination container styling alignment */
.pm-page-wrapper .pagination-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 8px 16px !important; /* Reduced height by decreasing vertical padding */
  border: none !important;
  background: transparent !important;
  gap: 8px;
}

/* ── Local Delete Modal Styles ─────────────────────────────────────────── */
.pm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(16, 24, 40, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: pmFadeIn 0.2s ease-out;
}

.pm-modal-box {
  background: #ffffff;
  width: 100%;
  max-width: 440px;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  position: relative;
  border: 1px solid #F2F4F7;
}

.pm-modal-header {
  margin-bottom: 20px;
}

.pm-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin: 0;
}

.pm-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #667085;
  cursor: pointer;
  line-height: 1;
}

.pm-modal-body p {
  font-size: 14px;
  color: #475467;
  line-height: 1.5;
  margin-bottom: 8px;
}

.pm-modal-subtext {
  font-size: 13px !important;
  color: #667085 !important;
}

.pm-modal-footer {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.pm-modal-btn {
  flex: 1 1;
  height: 44px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pm-modal-btn-cancel {
  background: #ffffff;
  border: 1px solid #D0D5DD;
  color: #344054;
}

.pm-modal-btn-cancel:hover {
  background: #F9FAFB;
}

.pm-modal-btn-delete {
  background: #D92D20;
  border: 1px solid #D92D20;
  color: #ffffff;
}

.pm-modal-btn-delete:hover {
  background: #B42318;
}

@keyframes pmFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
/* Custom Filters Shared Styles */
.custom-filter-container {
  position: relative;
  min-width: 140px;
}

.filter-trigger-box {
  height: 44px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.custom-filter-container.active .filter-trigger-box {
  border-color: #1570ef;
  box-shadow: 0 0 0 4px #eff4ff;
}

.selected-value {
  font-size: 14px;
  color: #101828;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-value.placeholder-text {
  color: #475467;
}

.chevron-icon {
  font-size: 20px;
  color: #667085;
  transition: transform 0.2s ease;
}

.chevron-icon.rotate {
  transform: rotate(180deg);
}

.filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #f2f4f7;
  border-radius: 8px;
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  z-index: 1000;
  padding: 4px;
  min-width: 180px;
}

.filter-item {
  padding: 10px 12px;
  font-size: 14px;
  color: #344054;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s;
}

.filter-item:hover {
  background: #f9fafb;
}

.filter-item.selected {
  background: #f9fafb;
  color: #1570ef;
  font-weight: 500;
}

.check-icon {
  font-size: 18px;
  color: #1570ef;
}

/* Multi-select Chips */
.multi-select-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 250px;
  overflow: hidden;
}

.selection-chip {
  background: #f2f4f7;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #344054;
  font-weight: 500;
}

.remove-chip-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #98a2b3;
  transition: color 0.2s;
}

.remove-chip-btn:hover {
  color: #667085;
}

.chip-close-icon {
  font-size: 14px !important;
}

/* AddProduct.css — all classes prefixed ap- */




/* ── Section Cards ─────────────────────────────────────────────────────────── */
.ap-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid #E9EAEB;
  border-radius: 0;
  padding: 24px;
  margin-bottom: 0;
}

.ap-card:last-child {
  border-bottom: none;
}

.ap-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #0F172A;
  margin: 0 0 20px 0;
  vertical-align: middle;
}

/* ── Form Grid ─────────────────────────────────────────────────────────────── */
.ap-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.ap-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.ap-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

/* ── Form Fields ───────────────────────────────────────────────────────────── */
.ap-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ap-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #414651;
}

.ap-label .ap-required,
.ap-required {
  color: #1570EF;
  margin-left: 2px;
}

.ap-input,
.ap-select,
.ap-textarea {
  height: 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  color: #344054;
  background: #ffffff;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.ap-input:focus,
.ap-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.ap-input::placeholder {
  color: #9ca3af;
}


/* ── Status Toggle ─────────────────────────────────────────────────────────── */
.ap-status-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
}

.ap-status-label {
  font-size: 14px;
  color: #344054;
  font-weight: 500;
}

.ap-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.ap-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.ap-toggle-track {
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border-radius: 12px;
  transition: background 0.2s;
  position: relative;
}

.ap-toggle input:checked+.ap-toggle-track {
  background: #2563eb;
}

.ap-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ap-toggle input:checked+.ap-toggle-track .ap-toggle-thumb {
  left: 23px;
}

/* ── Product Media ─────────────────────────────────────────────────────────── */
.ap-media-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.ap-upload-zone {
  width: 200px;
  min-height: 130px;
  border: 1.5px dashed #d0d5dd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 16px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  background: #fafafa;
}

.ap-upload-zone:hover {
  border-color: #2563eb;
  background: #eff4ff;
}

.ap-upload-icon {
  width: 32px;
  height: 32px;
  color: #9ca3af;
}

.ap-upload-link {
  font-size: 12px;
  color: #2563eb;
  font-weight: 500;
}

.ap-upload-hint {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}

.ap-image-previews {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1;
}

.ap-preview-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ap-preview-wrap:hover {
  border-color: #1570EF;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.10);
}

.ap-set-primary-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 0 0 7px 7px;
}

.ap-preview-wrap:hover .ap-set-primary-btn {
  opacity: 1;
}

.ap-preview-wrap.ap-preview-primary {
  border-color: #2563eb;
}

.ap-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.ap-preview-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ap-preview-actions {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.ap-preview-actions button {
  pointer-events: auto;
}

.ap-preview-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  color: #fff;
  /* Changed to white for better visibility on images */
  transition: all 0.15s;
  z-index: 10;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  /* Adds visibility on light images */
}

.ap-preview-delete:hover {
  color: #f04438;
}

.ap-preview-delete svg {
  width: 18px;
  height: 18px;
}

/* ── Two-column section layout ─────────────────────────────────────────────── */
.ap-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid #E9EAEB;
}

.ap-two-col .ap-card {
  border-bottom: none;
  border-right: 1px solid #E9EAEB;
  border-radius: 0;
}

.ap-two-col .ap-card:last-child {
  border-right: none;
}

/* ── Tax Config ────────────────────────────────────────────────────────────── */
.ap-tax-rows {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.ap-tax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #f2f4f7;
  font-size: 13px;
}

.ap-tax-row:last-child {
  border-bottom: none;
}

.ap-tax-row-label {
  color: #667085;
}

.ap-tax-row-val {
  font-weight: 600;
  color: #344054;
}

.ap-tax-total {
  background: #f9fafb;
}

.ap-tax-total .ap-tax-row-label {
  font-weight: 700;
  color: #101828;
}

.ap-tax-total .ap-tax-row-val {
  color: #2563eb;
  font-size: 15px;
}

/* ── Product Variants ──────────────────────────────────────────────────────── */
.ap-variants-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ap-add-variant-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  padding: 0;
}

.ap-variant-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.ap-variant-delete-btn:hover {
  color: #f04438;
}

.ap-variant-delete-btn svg {
  width: 16px;
  height: 16px;
}

.ap-variant-block {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  /* Added for absolute positioning of delete icon */
}

.ap-variant-remove-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #98A2B3;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: all 0.20s ease;
  z-index: 5;
}

.ap-variant-remove-icon:hover {
  color: #f04438;
  background: #fee2e2;
}

.ap-variant-remove-icon svg {
  width: 18px;
  height: 18px;
}

.ap-variant-row1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 14px;
}

.ap-variant-row2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 14px;
  gap: 14px;
}

/* ── Default Pricing ───────────────────────────────────────────────────────── */
.ap-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.ap-pricing-box {
  height: 42px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

/* ── Outer card + scroll container + inner cards ───────────────────────────── */

.ap-outer-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: visible;
  /* Allow inner card shadows if any */
  margin-top: 0px;
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  /* Balanced minimal padding */
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}

.ap-cards-scroll-container {
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.ap-cards-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.ap-cards-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.ap-cards-scroll-container::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.ap-cards-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.ap-inner-card {
  padding: 24px;
  background: transparent;
  border: 1px solid #eaecf0;
  /* Section border */
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: none;
}

.ap-inner-card:first-child {
  padding-top: 24px;
}

.ap-inner-card:last-child {
  margin-bottom: 0;
}

/* Redefined for side-by-side bordered sections within the same card */
.ap-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

/* ── Two-col layout inside a single inner card (Units & Packaging + Tax) ────── */
.ap-two-col-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 0 32px;
  gap: 0 32px;
  align-items: start;
}

.ap-two-col-divider {
  width: 1px;
  background: #e5e7eb;
  align-self: stretch;
}

/* ── Custom Dropdown (matches AddRoleConfiguration design) ─────────────────── */

.ap-dropdown {
  position: relative;
  width: 100%;
}

.ap-dropdown-trigger {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #344054;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-align: left;
  gap: 8px;
}

.ap-dropdown-trigger:hover {
  border-color: #9ca3af;
}

.ap-dropdown-trigger-open,
.ap-dropdown-trigger:focus {
  border-color: #1570EF;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.1);
}

.ap-dropdown-trigger:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

.ap-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  z-index: 100;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.ap-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 15px;
  color: #101828;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, background 0.12s;
  margin-bottom: 2px;
}

.ap-dropdown-item:last-child {
  margin-bottom: 0;
}

.ap-dropdown-item:hover {
  border-color: #1570EF;
  background: #ffffff;
}

.ap-dropdown-item-selected {
  background: #f5f8ff;
  color: #101828;
}

/* ── Brand dropdown with sticky footer add action ─────────────────────────── */
.ap-brand-dropdown {
  position: relative;
  width: 100%;
}

.ap-brand-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 120;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.16);
  max-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ap-brand-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #eaecf0;
  background: #ffffff;
}

.ap-brand-search-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #101828;
  background: transparent;
}

.ap-brand-search-input::placeholder {
  color: #98a2b3;
}

.ap-brand-list {
  overflow-y: auto;
  padding: 6px;
}

.ap-brand-item {
  width: 100%;
  border: none;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  color: #101828;
  text-align: left;
}

.ap-brand-item:hover {
  background: #f9fafb;
}

.ap-brand-item-selected {
  background: #f5f8ff;
  color: #1570ef;
}

.ap-brand-empty {
  padding: 12px;
  color: #667085;
  font-size: 13px;
}

.ap-brand-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #eaecf0;
  padding: 10px;
}

.ap-brand-add-btn {
  width: 100%;
  border: none;
  border-radius: 10px;
  height: 40px;
  background: #1570ef;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ap-brand-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-brand-add-input {
  width: 100%;
  height: 38px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
}

.ap-brand-add-input:focus {
  border-color: #1570ef;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
  outline: none;
}

.ap-brand-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ap-brand-cancel-btn,
.ap-brand-create-btn {
  border: none;
  border-radius: 8px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ap-brand-cancel-btn {
  background: #f2f4f7;
  color: #344054;
}

.ap-brand-create-btn {
  background: #1570ef;
  color: #ffffff;
}

.ap-brand-create-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Lightbox Modal ─────────────────────────────────────────────────────────── */

.ap-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-lightbox-modal {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  width: 580px;
  max-width: 90vw;
  padding: 32px 40px 28px 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.ap-lightbox-delete {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #667085;
  transition: color 0.15s, border-color 0.15s;
}

.ap-lightbox-delete:hover {
  color: #f04438;
  border-color: #fecdd6;
}

.ap-lightbox-delete svg {
  width: 16px;
  height: 16px;
}

.ap-lightbox-img-wrap {
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.ap-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.ap-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #344054;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: background 0.15s, border-color 0.15s;
  z-index: 10;
}

.ap-lightbox-nav:hover {
  background: #f9fafb;
  border-color: #1570EF;
  color: #1570EF;
}

.ap-lightbox-prev {
  left: 16px;
}

.ap-lightbox-next {
  right: 16px;
}

.ap-lightbox-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.ap-lightbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}

.ap-lightbox-dot-active {
  background: #1570EF;
  transform: scale(1.25);
}

.ap-variant-pricing-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #e5e7eb;
}

.ap-variant-sub-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 16px 0;
}

/* EditProduct.css — all classes prefixed ep- matching ap- styles */

.ep-wrapper {
  padding: 8px 0 16px 0;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* ── Section Cards ─────────────────────────────────────────────────────────── */
.ep-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid #E9EAEB;
  border-radius: 0;
  padding: 24px;
  margin-bottom: 0;
}

.ep-card:last-child {
  border-bottom: none;
}

.ep-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #0F172A;
  margin: 0 0 20px 0;
  vertical-align: middle;
}

/* ── Form Grid ─────────────────────────────────────────────────────────────── */
.ep-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.ep-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.ep-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

/* ── Form Fields ───────────────────────────────────────────────────────────── */
.ep-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #414651;
}

.ep-label .ep-required,
.ep-required {
  color: #1570EF;
  margin-left: 2px;
}

.ep-input,
.ep-select,
.ep-textarea {
  height: 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  color: #344054;
  background: #ffffff;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.ep-input:focus,
.ep-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.ep-input::placeholder {
  color: #9ca3af;
}

/* ── Product Media ─────────────────────────────────────────────────────────── */
.ep-media-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.ep-upload-zone {
  width: 200px;
  min-height: 130px;
  border: 1.5px dashed #d0d5dd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 16px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  background: #fafafa;
}

.ep-upload-zone:hover {
  border-color: #2563eb;
  background: #eff4ff;
}

.ep-upload-icon {
  width: 32px;
  height: 32px;
  color: #9ca3af;
}

.ep-upload-link {
  font-size: 12px;
  color: #2563eb;
  font-weight: 500;
}

.ep-upload-hint {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}

.ep-image-previews {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1;
}

.ep-preview-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ep-preview-wrap:hover {
  border-color: #1570EF;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.10);
}

.ep-set-primary-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 0 0 7px 7px;
}

.ep-preview-wrap:hover .ep-set-primary-btn {
  opacity: 1;
}

.ep-preview-wrap.ep-preview-primary {
  border-color: #2563eb;
}

.ep-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.ep-preview-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ep-preview-actions {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.ep-preview-actions button {
  pointer-events: auto;
}

.ep-preview-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  color: #fff;
  transition: all 0.15s;
  z-index: 10;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.ep-preview-delete:hover {
  color: #f04438;
}

.ep-preview-delete svg {
  width: 18px;
  height: 18px;
}

/* ── Tax Config ────────────────────────────────────────────────────────────── */
.ep-tax-rows {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.ep-tax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #f2f4f7;
  font-size: 13px;
}

.ep-tax-row:last-child {
  border-bottom: none;
}

.ep-tax-row-label {
  color: #667085;
}

.ep-tax-row-val {
  font-weight: 600;
  color: #344054;
}

.ep-tax-total {
  background: #f9fafb;
}

.ep-tax-total .ep-tax-row-label {
  font-weight: 700;
  color: #101828;
}

.ep-tax-total .ep-tax-row-val {
  color: #2563eb;
  font-size: 15px;
}

/* ── Product Variants ──────────────────────────────────────────────────────── */
.ep-variants-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ep-add-variant-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  padding: 0;
}

.ep-variant-block {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

.ep-variant-remove-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #98A2B3;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: all 0.20s ease;
  z-index: 5;
}

.ep-variant-remove-icon:hover {
  color: #f04438;
  background: #fee2e2;
}

.ep-variant-remove-icon svg {
  width: 18px;
  height: 18px;
}

.ep-variant-row1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 14px;
}

.ep-variant-row2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 14px;
  gap: 14px;
}

/* ── Default Pricing ───────────────────────────────────────────────────────── */
.ep-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.ep-pricing-box {
  height: 42px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

/* ── Outer card + scroll container + inner cards ───────────────────────────── */

.ep-outer-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: visible;
  margin-top: 0px;
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 80px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}

.ep-scroll-container {
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.ep-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.ep-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.ep-scroll-container::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.ep-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.ep-inner-card {
  padding: 24px;
  background: transparent;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: none;
}

.ep-inner-card:first-child {
  padding-top: 24px;
}

.ep-inner-card:last-child {
  margin-bottom: 0;
}

.ep-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

/* ── Custom Dropdown ─────────────────────────────────────────────────────── */
.ep-dropdown {
  position: relative;
  width: 100%;
}

.ep-dropdown-trigger {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #344054;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-align: left;
  gap: 8px;
}

.ep-dropdown-trigger:hover {
  border-color: #9ca3af;
}

.ep-dropdown-trigger-open,
.ep-dropdown-trigger:focus {
  border-color: #1570EF;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.1);
}

.ep-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  z-index: 100;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.ep-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 15px;
  color: #101828;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, background 0.12s;
  margin-bottom: 2px;
}

.ep-dropdown-item:last-child {
  margin-bottom: 0;
}

.ep-dropdown-item:hover {
  border-color: #1570EF;
}

.ep-dropdown-item-selected {
  background: #f5f8ff;
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.ep-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-lightbox-modal {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  width: 580px;
  max-width: 90vw;
  padding: 32px 40px 28px 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ep-lightbox-delete {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #667085;
  transition: color 0.15s, border-color 0.15s;
}

.ep-lightbox-delete:hover {
  color: #f04438;
  border-color: #fecdd6;
}

.ep-lightbox-delete svg {
  width: 16px;
  height: 16px;
}

.ep-lightbox-img-wrap {
  width: 100%;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.ep-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.ep-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #344054;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  z-index: 10;
}

.ep-lightbox-nav:hover {
  border-color: #1570EF;
  color: #1570EF;
}

.ep-lightbox-prev {
  left: 16px;
}

.ep-lightbox-next {
  right: 16px;
}

.ep-lightbox-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.ep-lightbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}

.ep-lightbox-dot-active {
  background: #1570EF;
  transform: scale(1.25);
}

.ep-error {
  font-size: 12px;
  color: #f04438;
  margin-top: 2px;
}

.ep-hsn-search-input {
  border: none;
  outline: none;
  width: 100%;
  padding: 0;
  background: transparent;
  font-size: 14px;
  color: #101828;
}

/* Brand dropdown (sticky footer) — ep- prefix */
.ep-brand-dropdown {
  position: relative;
  width: 100%;
}

.ep-brand-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 120;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.16);
  max-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ep-brand-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #eaecf0;
  background: #ffffff;
}

.ep-brand-search-input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #101828;
  background: transparent;
}

.ep-brand-search-input::placeholder {
  color: #98a2b3;
}

.ep-brand-list {
  overflow-y: auto;
  padding: 6px;
}

.ep-brand-item {
  width: 100%;
  border: none;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  color: #101828;
  text-align: left;
}

.ep-brand-item:hover {
  background: #f9fafb;
}

.ep-brand-item-selected {
  background: #f5f8ff;
  color: #1570ef;
}

.ep-brand-empty {
  padding: 12px;
  color: #667085;
  font-size: 13px;
}

.ep-brand-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #eaecf0;
  padding: 10px;
}

.ep-brand-add-btn {
  width: 100%;
  border: none;
  border-radius: 10px;
  height: 40px;
  background: #1570ef;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ep-brand-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ep-brand-add-input {
  width: 100%;
  height: 38px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
}

.ep-brand-add-input:focus {
  border-color: #1570ef;
  box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.12);
  outline: none;
}

.ep-brand-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ep-brand-cancel-btn,
.ep-brand-create-btn {
  border: none;
  border-radius: 8px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ep-brand-cancel-btn {
  background: #f2f4f7;
  color: #344054;
}

.ep-brand-create-btn {
  background: #1570ef;
  color: #ffffff;
}

.ep-brand-create-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* ViewProduct.css — all classes prefixed vp- matching premium styles */

.vp-wrapper {
  padding: 8px 0 16px 0;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* ── Outer card ──────────────────────────────────────────────────────────── */
.vp-outer-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: visible;
  margin-top: 0px;
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
}

/* ── Scroll container ────────────────────────────────────────────────────── */
.vp-scroll-container {
  overflow-y: auto;
  flex: 1 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.vp-scroll-container::-webkit-scrollbar { width: 6px; }
.vp-scroll-container::-webkit-scrollbar-track { background: transparent; }
.vp-scroll-container::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.vp-scroll-container::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Inner card (Sections) ────────────────────────────────────────────────── */
.vp-inner-card {
  padding: 24px;
  background: transparent;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: none;
}

.vp-inner-card.vp-no-border {
  border: none;
  border-radius: 0;
  padding: 24px 0;
}

.vp-inner-card.vp-no-border > .vp-card-title-row {
  padding: 0;
}

.vp-inner-card.vp-no-border > div:not(.vp-card-title-row) {
  padding: 0 24px;
}

.vp-inner-card:last-child {
  margin-bottom: 0;
}

.vp-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(65, 70, 81, 1);
  margin: 0;
}

.vp-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 16px 24px;
}

.vp-card-header-sep {
  border-bottom: 1px solid #E5E9F2;
  margin-bottom: 20px;
}

/* ── Read-only fields ────────────────────────────────────────────────────── */
.vp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vp-field-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(83, 88, 98, 1);
}

.vp-field-value {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(65, 70, 81, 1);
  word-break: break-word;
}

.vp-field-description {
  font-weight: 400;
  line-height: 26px;
}

.vp-field-value-blue {
  color: #1570EF;
}

/* ── Info grids ──────────────────────────────────────────────────────────── */
.vp-info-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.vp-info-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.vp-info-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.vp-info-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

/* ── Compact row pattern ─────────────────────────────────────────────────── */
.vp-compact-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
}

.vp-compact-col {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vp-compact-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #667085;
  white-space: nowrap;
}

.vp-compact-value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
}

/* ── Tax grid pattern ────────────────────────────────────────────────────── */
.vp-tax-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F2F4F7;
  margin-bottom: 20px;
}

.vp-tax-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px 20px;
  gap: 24px 20px;
}

.vp-tax-value-bold {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
}

.vp-tax-percent-blue {
  color: #1570EF;
}

.vp-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

/* ── Status badge (Custom Pill Style) ────────────────────────────────────── */
.vp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  border: 1px solid transparent;
}

.vp-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.vp-status-active {
  background: #ecfdf3;
  color: #039855;
  border-color: #abf4c5;
}

.vp-status-active .vp-status-dot {
  background: #12b76a;
}

.vp-status-inactive {
  background: #fef3f2;
  color: #d92d20;
  border-color: #fee4e2;
}

.vp-status-inactive .vp-status-dot {
  background: #f04438;
}

/* ── Product Media ───────────────────────────────────────────────────────── */
.vp-media-card {
  padding: 0 !important;
  overflow: hidden;
}

.vp-card-header-bg {
  padding: 16px 24px;
  border-bottom: 1px solid #E5E9F2;
}

.vp-card-title-upper {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #414651;
  letter-spacing: -0.01em;
  margin: 0;
}

.vp-media-container {
  padding: 16px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: calc(100% - 60px); /* Adjust for header height */
  justify-content: center;
}

.vp-primary-img-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vp-primary-img-wrap--empty {
  cursor: default;
  background: #f2f4f7;
  border: 1px dashed #d0d5dd;
}

.vp-primary-initial {
  font-size: 72px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1570ef 0%, #004eeb 100%);
  -webkit-user-select: none;
          user-select: none;
}

.vp-primary-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vp-primary-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1570EF;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(21, 112, 239, 0.25);
}

.vp-thumbnails-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.vp-thumb-wrap {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  border: 1px solid #EAECF0;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vp-thumb-wrap:hover {
  border-color: #1570EF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.vp-thumb-wrap.vp-thumb-active {
  border-color: #1570EF;
  background: #F5F9FF;
  box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.vp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

/* ── Variants table ──────────────────────────────────────────────────────── */
.vp-variants-table {
  width: 100%;
  border-collapse: collapse;
}

.vp-variants-table thead th {
  text-align: left;
  padding: 12px 12px 12px 0;
  font-size: 13px;
  font-weight: 500;
  color: #667085;
  border-bottom: 1px solid #EAECF0;
  white-space: nowrap;
}

.vp-variants-table tbody td {
  padding: 20px 12px 20px 0;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
  border-bottom: 1px solid #F2F4F7;
}

.vp-variants-table tr:last-child td {
  border-bottom: none;
}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.vp-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vp-lightbox-modal {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  width: 600px;
  max-width: 90vw;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vp-lightbox-img-wrap {
  width: 100%;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.vp-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.vp-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #eaecf0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #344054;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.2s;
  z-index: 10;
}

.vp-lightbox-nav:hover {
  border-color: #1570EF;
  color: #1570EF;
}

.vp-lightbox-prev { left: 20px; }
.vp-lightbox-next { right: 20px; }

.vp-lightbox-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vp-lightbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}

.vp-lightbox-dot-active {
  background: #1570EF;
  transform: scale(1.25);
}
.view-vendor-container {
  background-color: #f6f8fb;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.view-vendor-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 0 0 24px 0; /* Removed horizontal padding as it's provided by Layout.jsx */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.view-vendor-container .page-header {
  margin: 0 0 1.5rem 0; /* Removed horizontal margins as they are provided by Layout.jsx */
}

/* Two Column Layout */
.two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

/* Info Cards */
.info-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid #f3f4f6;
  height: -webkit-fit-content;
  height: fit-content;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0px !important;
  padding-bottom: 0px !important;
  border-bottom: 0px !important;
}

/* Info Table Style */
.info-table-task {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.info-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.info-value {
  font-size: 13px;
  color: #111827;
  font-weight: 600;
  text-align: right;
}

/* Document Card */
.view-doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #fcfcfd;
  margin-top: 12px;
}

.doc-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-icon-blue {
  color: #2563eb;
  font-size: 32px !important;
}

.doc-text {
  display: flex;
  flex-direction: column;
}

.doc-name {
  font-size: 14px;
  font-weight: 600;
  color: #101828;
}

.doc-meta {
  font-size: 12px;
  color: #667085;
}

.doc-actions {
  display: flex;
  gap: 8px;
}

.doc-action-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.doc-action-btn.download {
  background: white;
  border: 1px solid #d0d5dd;
  color: #344054;
}

.doc-action-btn.download:hover {
  background: #f9fafb;
}

.doc-action-btn.view {
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #fff;
}

.doc-action-btn.view:hover {
  background: #1d4ed8;
}

/* Rating Stars View */
.view-stars {
  display: flex;
  gap: 4px;
}

.star-view-filled {
  color: #fdb022;
  font-size: 18px !important;
}

.star-view-outline {
  color: #d0d5dd;
  font-size: 18px !important;
}

/* Table Sections */
.view-table-section {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  /* margin-top: 24px; */
}

.view-table-wrapper {
  overflow-x: auto;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.view-table {
  width: 100%;
  border-collapse: collapse;
}

.view-table th {
  background: #f9fafb;
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  border-bottom: 1px solid #eaecf0;
  white-space: nowrap;
}

.view-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eaecf0;
  font-size: 13px;
  color: #101828;
}

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

/* Audit History Color Tags */
.audit-tag {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.audit-tag.admin {
  background: #eff8ff;
  color: #175cd3;
}

.audit-tag.created,
.audit-tag.success {
  background: #ecfdf3;
  color: #027a48;
}

.audit-tag.updated,
.audit-tag.warning {
  background: #fffef3;
  color: #b54708;
}

/* Rating Remarks */
.remarks-text {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  border: 1px solid #f3f4f6;
  margin-top: 8px;
}

/* ── Error Banner ──────────────────────────────────────────────── */
.vendor-error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: #fef3f2;
  color: #b42318;
  border: 1px solid #fecdca;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.retry-btn {
  padding: 8px 16px;
  background: #b42318;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Responsive adjustments ──────────────────────────────────── */
@media (max-width: 1024px) {
  .two-column-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .view-vendor-container {
    padding: 16px;
  }
}
/* ── Stock Dashboard – all classes prefixed sd- ─────────────────────────── */

/* Page wrapper — NO overflow scroll here, page stays fixed */
.sd-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f9fafb;
    height: 100%;
    overflow: hidden;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.sd-tabs-bar {
    display: flex;
    align-items: flex-end;
    gap: 0;
    padding: 0 20px;
    background: #fff;
    border-bottom: 2px solid #e5e7eb;
    margin-top: 8px;
    flex-shrink: 0;
}

.sd-tab {
    position: relative;
    background: none;
    border: none;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.sd-tab:hover {
    color: #111827;
}

.sd-tab-active {
    color: #2563eb;
    font-weight: 600;
    border-bottom: 2px solid #2563eb;
}

/* ── Table card wrapper ─────────────────────────────────────────────────── */
.sd-table-card {
    margin: 16px 0px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex: 1 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Scroll area — ONLY this element scrolls ────────────────────────────── */
.sd-table-scroll-area {
    flex: 1 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

/* Webkit scrollbar */
.sd-table-scroll-area::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.sd-table-scroll-area::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 99px;
}

.sd-table-scroll-area::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 99px;
}

.sd-table-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Firefox scrollbar */
.sd-table-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.sd-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sd-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 10px;
    background: #fff;
    min-width: 220px;
}

.sd-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sd-search-input {
    border: none;
    outline: none;
    font-size: 13px;
    color: #374151;
    background: transparent;
    flex: 1 1;
    min-width: 0;
}

.sd-search-input::placeholder {
    color: #9ca3af;
}

.sd-search-kbd {
    font-size: 11px;
    color: #9ca3af;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.sd-filter-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}

.sd-filter-btn:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.sd-chevron {
    width: 14px;
    height: 14px;
    color: #6b7280;
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.sd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #374151;
}

.sd-th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-align: left;
    white-space: nowrap;
}

/* ── DataTable Overrides for Stock Dashboard ────────────────────────────── */
.sd-table-scroll-area .data-table table {
    table-layout: auto !important;
    width: -webkit-max-content !important;
    width: max-content !important;
    min-width: 100% !important;
}

.sd-table-scroll-area .data-table thead th,
.sd-table-scroll-area .data-table tbody td {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Sticky Header Logic */
.sd-table-scroll-area .data-table-wrapper,
.sd-table-scroll-area .data-table,
.sd-table-scroll-area .table-responsive {
    overflow: visible !important;
}

.sd-table-scroll-area .data-table thead th {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
    background: #f9fafb !important;
    box-shadow: inset 0 -1px 0 #e5e7eb;
}

/* ── Action header/cell overrides specifically for Stock Dashboard ── */
.sd-table-scroll-area .actions-cell {
    width: auto !important;
    min-width: 120px !important;
    text-align: left !important;
    padding-right: 16px !important;
}

.sd-table-scroll-area .actions-cell .action-btns {
    justify-content: flex-start !important;
}

/* ── Action buttons ─────────────────────────────────────────────────────── */
.sd-action-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.sd-action-btn {
    background: none;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.sd-action-btn:hover {
    color: #374151;
    background: #f3f4f6;
}

.sd-action-btn-del:hover {
    color: #ef4444;
    background: #fef2f2;
}

.sd-action-icon {
    width: 16px;
    height: 16px;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.sd-pagination-wrap {
    border-top: 1px solid #e5e7eb;
    padding: 4px 16px;
    background: #fff;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ── Add Stock Dropdown
   ══════════════════════════════════════════════════════════════════════════ */
.sd-dd-wrap {
    position: relative;
    display: inline-flex;
}

/* ── Trigger: solid blue PrimaryButton style with divider + chevron ──────── */
.sd-dd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* ← simple gap between text and chevron */
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    /* ← uniform padding all around */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}

.sd-dd-trigger:hover {
    background: #1d4ed8;
}

.sd-dd-trigger-open {
    background: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* "Add Stock" text section */
.sd-dd-trigger-value {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

/* Thin white divider between text and chevron — matches Image 1 */
.sd-dd-divider {
    display: none;
}

/* Chevron section */
.sd-dd-chevron {
    color: rgba(255, 255, 255, 0.90);
    flex-shrink: 0;
    /* remove height/padding from previous version */
    height: auto;
    padding: 0;
}

/* ── Dropdown menu card ─────────────────────────────────────────────────── */
.sd-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    z-index: 200;
    padding: 6px 0;
    animation: sd-dd-in 0.12s ease;
}

@keyframes sd-dd-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Each option row ────────────────────────────────────────────────────── */
.sd-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    transition: background 0.1s;
}

.sd-dd-item:hover {
    background: #f9fafb;
}

/* Selected row — light blue tint */
.sd-dd-item-selected {
    background: #f0f5ff;
}

.sd-dd-item-selected:hover {
    background: #e8f0fe;
}

.sd-dd-check {
    flex-shrink: 0;
    color: #1570EF;
}

/* ── Add Request Button ─────────────────────────────────────────────────── */
.sd-add-request-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
}

.sd-add-request-btn:hover {
    background: #1d4ed8;
}

/* ── Product Cell ───────────────────────────────────────────────────────── */
.sd-product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.sd-product-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.sd-product-initial {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #e0e7ff;
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}

.sd-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sd-product-name {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.sd-product-sub {
    font-size: 11px;
    color: #6b7280;
    display: flex;
    gap: 8px;
}

.sd-product-sku-tag {
    color: #3b82f6;
    font-weight: 500;
}

/* ── Add to Central Stock — all classes prefixed atcs- ─────────────── */

.atcs-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f9fafb;
}

/* ── Scrollable body ─────────────────────────────────────────────────── */
.atcs-scroll-area {
    flex: 1 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 40px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

.atcs-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.atcs-scroll-area::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 99px;
}

.atcs-scroll-area::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 99px;
}

.atcs-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ── Header action buttons ───────────────────────────────────────────── */
.atcs-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.atcs-cancel-btn {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.atcs-cancel-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.atcs-delete-btn {
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.atcs-delete-btn:hover {
    background: #fee2e2;
    border-color: #f87171;
}

.atcs-save-btn {
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 24px;
    cursor: pointer;
    transition: background 0.15s;
}

.atcs-save-btn:hover {
    background: #1d4ed8;
}

/* ── Section layout ──────────────────────────────────────────────────── */
.atcs-section {
    display: flex;
    align-items: flex-start;
    padding: 20px 32px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    gap: 24px;
}

.atcs-section-label {
    width: 160px;
    min-width: 160px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    line-height: 1.5;
    white-space: pre-line;
    padding-top: 4px;
}

.atcs-section-body {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* ── Grid rows ───────────────────────────────────────────────────────── */
.atcs-row {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
}

.atcs-row-1 {
    grid-template-columns: 1fr 1fr;
}

.atcs-row-2 {
    grid-template-columns: 1fr 1fr;
}

.atcs-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.atcs-row-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.atcs-row-align-end {
    align-items: end;
}

/* ── Field wrapper + label (matches AddProduct.jsx ap-field / ap-label) ── */
.atcs-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.atcs-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.atcs-required {
    color: #ef4444;
    margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   ── Dropdown — mirrors AddProduct.jsx .ap-dropdown-* exactly
   ══════════════════════════════════════════════════════════════════════ */
.atcs-dropdown {
    position: relative;
}

/* Trigger: white bg, gray border, matches ap-dropdown-trigger */
.atcs-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    color: #111827;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.atcs-dropdown-trigger:hover {
    border-color: #9ca3af;
}

/* Blue border + ring when open — matches ap-dropdown-trigger-open */
.atcs-dropdown-trigger-open {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

.atcs-dropdown-trigger:disabled {
    background: #f9fafb;
    cursor: not-allowed;
    opacity: 0.7;
}

.atcs-dropdown-placeholder {
    color: #9ca3af;
}

/* Dropdown menu card — matches ap-dropdown-menu */
.atcs-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    z-index: 200;
    padding: 4px 0;
    animation: atcs-dd-in 0.12s ease;
}

@keyframes atcs-dd-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Option rows — matches ap-dropdown-item */
.atcs-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    color: #111827;
    cursor: pointer;
    transition: background 0.1s;
}

.atcs-dropdown-item:hover {
    background: #f9fafb;
}

/* Selected row — light blue tint, matches ap-dropdown-item-selected */
.atcs-dropdown-item-selected {
    background: #f0f5ff;
    font-weight: 500;
}

.atcs-dropdown-item-selected:hover {
    background: #e8f0fe;
}

/* ── Radio / Checkbox group ──────────────────────────────────────────── */
.atcs-radio-group {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 0;
}

.atcs-radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.atcs-radio-option input[type="radio"],
.atcs-radio-option input[type="checkbox"] {
    accent-color: #2563eb;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ── Generated Asset Table ───────────────────────────────────────────── */
.atcs-asset-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}

.atcs-asset-table-title {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.atcs-asset-table-scroll {
    overflow-x: auto;
}

.atcs-asset-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.atcs-asset-table th {
    padding: 10px 14px;
    background: #f9fafb;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #e5e7eb;
}

.atcs-asset-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.atcs-asset-table tr:last-child td {
    border-bottom: none;
}

.atcs-asset-table tr:hover td {
    background: #f9fafb;
}

/* Green available pill */
.atcs-available-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    white-space: nowrap;
}

.select-type-assets {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-top: 18px;
}

.select-type-assets .form-field {
    flex-direction: row !important;
}

/* File Upload handled by UploadCard component */.svc-multi-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.svc-multi-box {
  position: relative;
  min-height: 44px;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.svc-multi-box.open,
.svc-multi-box:focus-within {
  border-color: #2B5FE7;
  box-shadow: 0 0 0 3px rgba(43, 95, 231, 0.12);
}

.svc-chips-row {
  flex: 1 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.svc-placeholder {
  font-size: 14px;
  color: #98A2B3;
}

.svc-chip {
  background: #EFF8FF;
  border: 1px solid #B2DDFF;
  border-radius: 16px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 500;
  color: #175CD3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.svc-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: #175CD3;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
}

.svc-chip-x:hover {
  color: #D92D20;
}

.svc-arrow {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.svc-arrow.flipped {
  transform: rotate(180deg);
}

/* Dropdown */
.svc-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}

.svc-dd-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: #98A2B3;
}

.svc-dd-option {
  padding: 10px 14px;
  font-size: 14px;
  color: #344054;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.1s;
}

.svc-dd-option:hover {
  background: #F9FAFB;
}

.svc-dd-option.selected {
  background: #EEF4FF;
  color: #2B5FE7;
  font-weight: 600;
}

.svc-dd-add-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #175CD3;
  cursor: pointer;
  border-top: 1px solid #EAECF0;
  background: #F9FAFB;
}

.svc-dd-add-custom:hover {
  background: #EFF8FF;
}
.atcs-remaining-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f9fafb;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 16px;
  border: 1px solid #eaecf0;
  width: -webkit-fit-content;
  width: fit-content;
}

.atcs-remaining-box svg {
  flex-shrink: 0;
  overflow: visible;
}

/* ── Error Styles ────────────────────────────────────────────────────── */
.atcs-error-msg {
    color: #f04438;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
}

.atcs-dropdown-error {
    border-color: #f04438 !important;
}

.atcs-dropdown-error:focus-within {
    box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.12);
}

/* ── View Central Stock — all classes prefixed vcs- ────────────────── */

.vcs-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f9fafb;
}

/* ── Scroll area ─────────────────────────────────────────────────────── */
.vcs-scroll-area {
    flex: 1 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0px 24px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
}

.vcs-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.vcs-scroll-area::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 99px;
}

.vcs-scroll-area::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 99px;
}

.vcs-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ── Header buttons ──────────────────────────────────────────────────── */
.vcs-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vcs-cancel-btn {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.vcs-cancel-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.vcs-edit-btn {
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 24px;
    cursor: pointer;
    transition: background 0.15s;
}

.vcs-edit-btn:hover {
    background: #1d4ed8;
}

/* ── Boxes (Cards) ───────────────────────────────────────────────────── */
.vcs-box {
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    overflow: hidden;
}

/* ── Meta strip box — specific layout ────────────────────────────────── */
.vcs-meta-box {
    display: block;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
}

.vcs-meta-box .vcs-kv-row {
    border-bottom: none;
    padding: 10px;
    gap: 12px;
}

.vcs-meta-box .vcs-kv-label {
    font-weight: 500;
    color: #667085;
}

.vcs-meta-box .vcs-kv-value {
    font-weight: 600;
    color: #101828;
}

/* ── Side-by-side boxes row ─────────────────────────────────────────── */
.vcs-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
    margin-bottom: 0;
    /* boxes have bottom margin */
}

/* ── Generic section padding ─────────────────────────────────────────── */
.vcs-section {
    padding: 24px 32px;
}

/* ── Section title ───────────────────────────────────────────────────── */
.vcs-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #101828;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f2f4f7;
}

/* ── Key-value row ───────────────────────────────────────────────────── */
.vcs-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #fcfcfd;
    gap: 24px;
}

.vcs-kv-row:last-child {
    border-bottom: none;
}

.vcs-kv-label {
    font-size: 14px;
    color: #667085;
    font-weight: 400;
}

.vcs-kv-value {
    font-size: 14px;
    font-weight: 500;
    color: #101828;
    text-align: right;
}

.vcs-kv-highlight {
    color: #2563eb;
}

/* ── Two-column Box Layout (Legacy wrapper) ───────────────────────────── */
.vcs-two-col-wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
}

.vcs-half-section {
    padding: 24px 32px;
}

/* Vertical separator inside the two-col box */
.vcs-col-divider {
    width: 1px;
    background: #f2f4f7;
    margin: 24px 0;
}

/* ── Asset table ─────────────────────────────────────────────────────── */
.vcs-asset-table-wrap {
    margin-top: 24px;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    overflow: hidden;
}

.vcs-asset-table-label {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    background: #f9fafb;
    border-bottom: 1px solid #eaecf0;
}

.vcs-asset-table {
    width: 100%;
    border-collapse: collapse;
}

.vcs-asset-table th {
    padding: 12px 16px;
    background: #f9fafb;
    font-size: 12px;
    font-weight: 600;
    color: #667085;
    text-align: left;
    border-bottom: 1px solid #eaecf0;
}

.vcs-asset-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f2f4f7;
    color: #344054;
    font-size: 13px;
}

.vcs-asset-table tr:last-child td {
    border-bottom: none;
}

.vcs-asset-table tr:hover td {
    background: #f9fafb;
}

.vcs-available-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 500;
    background: #ecfdf5;
    color: #027a48;
    border: 1px solid #abefc6;
}

/* ── Purchase & Tax Grid ─────────────────────────────────────────────── */
.vcs-purchase-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 48px;
    gap: 0 48px;
    margin-bottom: 24px;
    padding-bottom: 12px;
}

/* Invoice Copy Card + Batch Info */
.vcs-invoice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 48px;
    gap: 48px;
    align-items: flex-start;
}

.vcs-invoice-copy-label {
    font-size: 13px;
    font-weight: 500;
    color: #667085;
    margin-bottom: 12px;
}

.vcs-invoice-file {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    cursor: default;
}

.vcs-invoice-file-info {
    flex: 1 1;
    min-width: 0;
}

.vcs-invoice-file-name {
    font-size: 14px;
    font-weight: 600;
    color: #1d2939;
}

.vcs-invoice-file-date {
    font-size: 12px;
    color: #98a2b3;
    margin-top: 2px;
}

.vcs-invoice-file-actions {
    display: flex;
    gap: 10px;
}

.vcs-download-btn,
.vcs-view-btn {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.vcs-download-btn {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
}

.vcs-download-btn:hover {
    background: #f9fafb;
}

.vcs-view-btn {
    border: none;
    background: #2563eb;
    color: #fff;
}

.vcs-view-btn:hover {
    background: #1d4ed8;
}

.vcs-btn-disabled {
    background: #f2f4f7 !important;
    border-color: #eaecf0 !important;
    color: #98a2b3 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.vcs-batch-col {
    display: flex;
    flex-direction: column;
}

.vcs-purchase-col,
.vcs-batch-col {
    border: 1px solid #eaecf0;
    padding: 10px 20px;
    border-radius: 12px;
}
.srm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.srm-modal {
  background-color: #ffffff;
  border-radius: 12px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.srm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eaecf0;
}

.srm-title {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
}

.srm-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
}

.srm-body {
  padding: 20px;
}

.srm-subtitle {
  font-size: 14px;
  color: #475467;
  margin-bottom: 20px;
}

.srm-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srm-option {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: #344054;
}

.srm-option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #d92d20;
}

.srm-option-role {
  color: #667085;
}

.srm-footer {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #eaecf0;
}

.srm-cancel-btn {
  flex: 1 1;
  background: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.srm-confirm-btn {
  flex: 1 1;
  background: #d92d20;
  color: #ffffff;
  border: 1px solid #d92d20;
  padding: 10px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.srm-confirm-btn:hover {
  background: #b42318;
}

.asr-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f9fafb;
}

.asr-header-actions {
  display: flex;
  gap: 12px;
}

.asr-submit-btn {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.asr-submit-btn:hover {
  background-color: #f9fafb;
}

.asr-draft-btn {
  background-color: #1570ef;
  color: #ffffff;
  border: 1px solid #1570ef;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.asr-draft-btn:hover {
  background-color: #175cd3;
}

.asr-content {
  overflow-y: auto;
}

.asr-card {
  background-color: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 18px 24px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.asr-section {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #eaecf0;
  margin-bottom: 16px;
}

.asr-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 16px;
}

.asr-grid {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.asr-grid-4 {
  grid-template-columns: repeat(3, 1fr);
}

.asr-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.asr-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Custom Dropdown Styles */
.asr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.asr-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.asr-required {
  color: #d92d20;
  margin-left: 2px;
}

.asr-custom-dropdown {
  position: relative;
  width: 100%;
}

.asr-dropdown-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}

.asr-dropdown-trigger:focus,
.asr-dropdown-trigger-open {
  border-color: #84caff;
  box-shadow: 0px 0px 0px 4px #eff8ff;
}

.asr-dropdown-placeholder {
  color: #667085;
}

.asr-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  z-index: 1000;
  /* High z-index */
  max-height: 240px;
  overflow-y: auto;
}

.asr-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 14px;
  color: #101828;
  cursor: pointer;
}

.asr-dropdown-item:hover {
  background-color: #f9fafb;
}

.asr-dropdown-item-selected {
  background-color: #f9fafb;
  font-weight: 500;
}

.mt-3 {
  margin-top: 12px;
}

.mt-4 {
  margin-top: 24px;
}

/* Table Styling */
.asr-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.asr-add-item-btn {
  background-color: #ffffff;
  color: #1570ef;
  border: 1px solid #d0d5dd;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.asr-table-wrapper {
  overflow-x: auto;
  border: 1px solid #eaecf0;
  border-radius: 8px;
}

.asr-table-wrapper.asr-overflow-visible {
  overflow: visible !important;
}

.asr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.asr-table th {
  background-color: #f9fafb;
  color: #475467;
  font-weight: 500;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #eaecf0;
  white-space: nowrap;
}

.asr-table td {
  padding: 8px 16px;
  border-bottom: 1px solid #eaecf0;
  color: #101828;
}

.asr-table-select,
.asr-table-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  outline: none;
}

.asr-table-select:focus,
.asr-table-input:focus {
  border-color: #84caff;
  box-shadow: 0px 0px 0px 4px #eff8ff;
}

.asr-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.asr-delete-btn:hover svg path {
  fill: #d92d20;
}

/* Footer Summary */
.asr-footer {
  border-top: 1px solid #eaecf0;
  padding-top: 24px;
}

.asr-error-msg {
  font-size: 12px;
  color: #d92d20;
  margin-top: 4px;
  font-weight: 500;
  display: block;
}

.asr-dropdown-error {
  border-color: #fda29b !important;
  background-color: #fffbfa !important;
}
.vsr-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f9fafb;
}

.vsr-actions {
  display: flex;
  gap: 12px;
}

.vsr-cancel-btn {
  background-color: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.vsr-edit-btn, .vsr-submit-btn {
  background-color: #1570ef;
  color: #ffffff;
  border: 1px solid #1570ef;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.vsr-submit-btn:hover {
  background-color: #175cd3;
}

.vsr-content {
  padding: 24px;
  overflow-y: auto;
}

/* .vsr-main-card removed as it was empty */

.vsr-top-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  background: white;
  padding: 24px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
}

.vsr-id-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vsr-label {
  font-size: 14px;
  color: #667085;
}

.vsr-value-bold {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
}

.vsr-value-status {
  font-size: 14px;
  color: #475467;
}

/* Stepper */
.vsr-stepper-container {
  background: white;
  padding: 40px 24px;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  margin-bottom: 24px;
}

.vsr-stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.vsr-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1 1;
  z-index: 1;
  transition: all 0.2s ease;
}

.vsr-step[style*="cursor: pointer"]:hover .vsr-step-dot {
  transform: scale(1.2);
  background-color: #1570ef;
}

.vsr-step[style*="cursor: pointer"]:hover .vsr-step-label {
  color: #1570ef;
  font-weight: 600;
}

.vsr-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #eaecf0;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.vsr-step-label {
  font-size: 12px;
  color: #667085;
  white-space: nowrap;
}

.vsr-step-line {
  position: absolute;
  top: 5px;
  left: calc(50% + 6px);
  width: calc(100% - 12px);
  height: 2px;
  background-color: #eaecf0;
  z-index: -1;
}

.vsr-step.completed .vsr-step-dot {
  background-color: #1570ef;
  box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.vsr-step-line.completed {
  background-color: #1570ef;
}

.vsr-step.completed .vsr-step-label {
  color: #101828;
  font-weight: 500;
}

/* Boxes */
.vsr-box {
  background: white;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.vsr-box-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaecf0;
}

.vsr-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  margin-bottom: 0; /* Override margin when closed/interactive */
}

.vsr-accordion-header:hover {
  background-color: #f9fafb;
}

.vsr-box-content {
  padding-top: 20px;
}

.vsr-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.vsr-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.vsr-assignment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 2px dashed #eaecf0;
  margin-bottom: 16px;
}

.vsr-info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vsr-info-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
}

.vsr-info-label {
  color: #667085;
}

.vsr-info-value {
  color: #101828;
  font-weight: 500;
  text-align: right;
}

.vsr-info-value-right {
  color: #101828;
  font-weight: 500;
  text-align: right;
  max-width: 300px;
}

.vsr-info-grid {
  display: grid;
  grid-column-gap: 48px;
  column-gap: 48px;
  grid-row-gap: 16px;
  row-gap: 16px;
}

.vsr-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 48px;
  column-gap: 48px;
  grid-row-gap: 16px;
  row-gap: 16px;
}

.vsr-info-value-total {
  color: #1570ef;
  font-weight: 700;
  font-size: 16px;
}

.mt-4 {
  margin-top: 24px;
}

/* Table */
.vsr-table-wrapper {
  overflow-x: auto;
}

.vsr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.vsr-table th {
  text-align: left;
  color: #475467;
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid #eaecf0;
}

.vsr-table td {
  padding: 16px 0;
  color: #101828;
  border-bottom: 1px solid #eaecf0;
}

.vsr-audit-table th, .vsr-audit-table td {
  padding: 12px 16px;
}

.vsr-audit-table tr:hover {
  background-color: #f9fafb;
}

.vsr-table-input {
  width: 80px;
  padding: 8px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 14px;
}

.vsr-upload-placeholder {
  border: 2px dashed #eaecf0;
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #667085;
  background: #f9fafb;
  cursor: pointer;
  text-align: center;
}

.vsr-upload-placeholder span {
  color: #1570ef;
  font-weight: 500;
}

.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }

.rs-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f9fafb;
}

.rs-content {
  padding: 24px;
  overflow-y: auto;
}

.rs-actions {
  display: flex;
  gap: 12px;
}

.rs-report-btn {
  background: #ffffff;
  color: #344054;
  border: 1px solid #d0d5dd;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.rs-confirm-btn {
  background: #1570ef;
  color: #ffffff;
  border: 1px solid #1570ef;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.rs-confirm-btn:hover {
  background: #175cd3;
}

.rs-box {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.rs-box-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaecf0;
}

.rs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.rs-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.rs-dropdown-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.rs-dropdown-label {
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.rs-dropdown-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  color: #101828;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.rs-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  margin-top: 4px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.rs-dropdown-item {
  padding: 10px 14px;
  font-size: 14px;
  color: #101828;
  cursor: pointer;
}

.rs-dropdown-item:hover {
  background: #f9fafb;
}

.rs-table {
  width: 100%;
  border-collapse: collapse;
}

.rs-table th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #eaecf0;
  background: #f9fafb;
  color: #475467;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.rs-table td {
  padding: 16px;
  border-bottom: 1px solid #eaecf0;
  color: #101828;
  font-size: 14px;
}

.rs-assignment-header {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-gap: 24px;
  gap: 24px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 2px dashed #eaecf0;
}

.rs-assignment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.rs-label-val {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rs-label {
  font-size: 14px;
  color: #667085;
}

.rs-qty-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rs-qty-input {
  width: 80px;
  padding: 8px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}

.rs-confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

.rs-upload-placeholder {
  border: 2px dashed #eaecf0;
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  cursor: pointer;
}

.rs-upload-icon {
  font-size: 24px;
}

.rs-upload-text {
  font-size: 14px;
  color: #475467;
}

.rs-blue-text {
  color: #1570ef;
  font-weight: 600;
}

.rs-upload-hint {
  font-size: 12px;
  color: #667085;
}

.rs-confirm-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #344054;
  font-weight: 500;
}

.rs-confirm-check input {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid #d0d5dd;
  cursor: pointer;
}

.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }

.vra-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f9fafb;
}

.vra-content {
  padding: 24px;
  overflow-y: auto;
}

/* Summary + stepper card */
.vra-box {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.vra-box--flush {
  padding: 0;
  overflow: hidden;
}

.vra-box-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaecf0;
}

.vra-summary {
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vra-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vra-summary-label {
  font-size: 14px;
  color: #667085;
  font-weight: 400;
}

.vra-summary-value {
  font-size: 14px;
  color: #101828;
  font-weight: 500;
}

.vra-divider {
  width: 100%;
  height: 1px;
  background-color: #eaecf0;
}

.vra-stepper-container {
  padding: 8px 24px 28px;
}

.vra-stepper-wrap {
  padding: 16px 0 8px;
  position: relative;
}

.vra-stepper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.vra-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1 1;
  min-width: 0;
}

.vra-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #eaecf0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #e4e7ec;
  z-index: 2;
  margin-bottom: 8px;
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.vra-step.completed .vra-step-dot {
  background-color: #1570ef;
  box-shadow: none;
}

.vra-step.active .vra-step-dot {
  background-color: #ffffff;
  border: 2px solid #1570ef;
  box-shadow: none;
}

.vra-step-dot-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1570ef;
  display: block;
}

.vra-step-text {
  font-size: 11px;
  color: #667085;
  text-align: center;
  line-height: 1.25;
  padding: 0 2px;
}

@media (min-width: 1200px) {
  .vra-step-text {
    font-size: 12px;
  }
}

.vra-step.active .vra-step-text,
.vra-step.completed .vra-step-text {
  color: #1570ef;
  font-weight: 600;
}

.vra-step-line {
  position: absolute;
  top: 11px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background-color: #eaecf0;
  z-index: 1;
}

.vra-step-line.completed {
  background-color: #1570ef;
}

.vra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
}

@media (max-width: 900px) {
  .vra-grid {
    grid-template-columns: 1fr;
  }
}

/* DetailsCard: section title + body aligned to Figma card rhythm */
.vra-details-card .details-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  padding-bottom: 12px;
  margin: 0 0 0 0;
}

.vra-details-card .details-card-list,
.vra-details-card .details-card-grid {
  margin-top: 0;
}

.vra-details-card .details-card-section {
  gap: 12px;
}

/* Approval history DataTable */
.vra-history-datatable {
  margin-top: 16px;
}

.vra-history-datatable .data-table-wrapper {
  min-height: auto !important;
}

.mt-3 {
  margin-top: 16px;
}

.mt-4 {
  margin-top: 24px;
}

.bt-page {
  background-color: #fcfcfd;
}

.bt-content {
  padding: 32px;
}

.bt-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.bt-main-card {
  background: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.bt-transfer-id-bar {
  background: #f8f9fc;
  border: 1px solid #e3e8f2;
  border-radius: 10px;
  padding: 16px 24px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.02);
}

.bt-transfer-id-bar .bt-label {
  font-size: 14px;
  color: #475467;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bt-transfer-id-bar .bt-value {
  font-size: 18px;
  color: #101828;
  font-weight: 700;
  letter-spacing: 1px;
}

.bt-section {
  margin-bottom: 48px;
}

.bt-box-title {
  font-size: 13px;
  font-weight: 700;
  color: #344054;
  letter-spacing: 1.2px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f4f7;
  text-transform: uppercase;
}

.bt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 32px;
  gap: 32px;
}

.bt-search-container {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: 600px;
  margin-bottom: 24px;
}

.bt-search-input-group {
  flex: 1 1;
}

.bt-add-btn-compact {
  height: 44px;
  padding: 0 20px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  white-space: nowrap;
  margin-bottom: 0px;
}

.bt-add-btn-compact:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #98a2b3;
}

.bt-add-btn-compact:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bt-custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.04);
}

.bt-custom-table th {
  background: #f9fafb;
  padding: 14px 20px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #eaecf0;
}

.bt-custom-table td {
  padding: 16px 20px;
  font-size: 14px;
  color: #101828;
  border-bottom: 1px solid #eaecf0;
  vertical-align: middle;
  background: #fff;
}

.bt-custom-table tr:last-child td {
  border-bottom: none;
}

.bt-custom-table tr:hover td {
  background-color: #fcfcfd;
}

.bt-table-input {
  width: 90px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s;
}

.bt-table-input:focus {
  outline: none;
  border-color: #7f56d9;
  box-shadow: 0 0 0 4px rgba(158, 119, 237, 0.1);
}

.bt-table-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 13px;
  background-color: white;
  transition: border 0.2s;
}

.bt-table-select:focus {
  border-color: #7f56d9;
  outline: none;
}

.bt-link-btn {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bt-link-btn:hover {
  background: #f9fafb;
  border-color: #98a2b3;
}

.bt-link-btn.active {
  background: #f4f3ff;
  border-color: #d6bbfb;
  color: #6941c6;
  box-shadow: 0 0 0 4px rgba(158, 119, 237, 0.1);
}

.btn-icon-delete {
  background: #fff;
  border: 1px solid #fee4e2;
  color: #d92d20;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-delete:hover {
  background: #fef3f2;
  border-color: #fda29b;
}

.bt-asset-panel {
  background: #fcfaff;
  border: 1px solid #e9e5ff;
  padding: 32px;
  border-radius: 16px;
  margin-top: -32px;
  margin-bottom: 48px;
  box-shadow: 0px 4px 20px rgba(105, 65, 198, 0.05);
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.bt-asset-summary {
  font-size: 15px;
  color: #344054;
  margin-bottom: 24px;
  padding: 12px 20px;
  background: #ffffff;
  border-left: 4px solid #7f56d9;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.bt-summary-table thead th {
  background-color: #f8f9fc;
}

.bt-summary-table td {
  font-weight: 600;
  color: #344054;
}

.text-center { text-align: center; }

@media (max-width: 1200px) {
  .bt-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .bt-grid-3, .bt-add-product-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
}

.sl-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sl-scroll-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 20px;
  overflow-y: auto;
  min-height: 0;
}

.sl-add-btn {
  border: 1px solid #1570ef;
  background: #1570ef;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
}

.sl-heading {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #101828;
}

.sl-summary-details {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.sl-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #344054;
  font-size: 15px;
  gap: 10px;
}

.sl-product-image {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
}

.sl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sl-search {
  width: 280px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

.sl-filter-btn {
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.sl-filter-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 12px;
}

.sl-filter-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}

.sl-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sl-chip {
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
}

.sl-chip.active {
  border-color: #1570ef;
  color: #1570ef;
  background: #eff8ff;
}

.sl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d0d5dd;
  border-radius: 5px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  background: #fff;
  color: #344054;
}

.sl-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 5px;
  display: inline-block;
}

.sl-pill--entry-stock::before,
.sl-pill--direction-in::before,
.sl-pill--status-complete::before {
  background: #12b76a;
}

.sl-pill--entry-transfer::before {
  background: #f2b94b;
}

.sl-pill--direction-out::before,
.sl-pill--status-pending::before {
  background: #f04438;
}

.sl-pill--status-transit::before {
  background: #53b1fd;
}

.sl-pill--status-complete {
  background: #fff;
}

.sl-pill--status-transit {
  background: #fff;
}

.sl-pill--status-pending {
  background: #fff;
}

.sl-net-positive {
  color: #027a48;
  font-weight: 600;
}

.sl-net-negative {
  color: #b42318;
  font-weight: 600;
}

.sl-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sl-actions button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #667085;
  padding: 0;
}

.sl-summary-card {
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
}

.sl-summary-title {
  font-size: 14px;
  font-weight: 700;
  color: #344054;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.sl-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.sl-summary-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sl-summary-label {
  font-size: 14px;
  color: #475467;
  font-weight: 500;
}

.sl-summary-value {
  font-size: 18px;
  font-weight: 600;
  color: #101828;
}

.sl-summary-value.sl-positive {
  color: #027a48;
}

.sl-summary-value.sl-negative {
  color: #b42318;
}

.sl-summary-value.sl-net {
  color: #1570ef;
}

@media (max-width: 992px) {
  .sl-filter-group {
    grid-template-columns: 1fr;
  }

  .sl-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .sl-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Dashboard Premium CSS — Redesigned for WOW Factor
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --db-brand: #2563EB;
  --db-brand-light: #3B82F6;
  --db-brand-glow: rgba(37, 99, 235, 0.18);
  --db-success: #10B981;
  --db-warning: #F59E0B;
  --db-danger: #EF4444;
  --db-surface: #ffffff;
  --db-bg: #F0F4FF;
  --db-border: #E5E9F2;
  --db-text: #0F172A;
  --db-text-muted: #64748B;
  --db-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --db-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --db-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  --db-radius-sm: 8px;
  --db-radius-md: 12px;
  --db-radius-lg: 16px;
  --db-radius-xl: 20px;
  --db-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Action Buttons ---------- */
.btn-export {
  padding: 8px 18px;
  background: #2563EB;
  background: var(--db-brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  border-radius: var(--db-radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-sm);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
          user-select: none;
}

.btn-export:hover {
  background: #3B82F6;
  background: var(--db-brand-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-md);
}

.btn-export:active {
  transform: scale(0.96) translateY(0);
}

.btn-export::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
  pointer-events: none;
}

@keyframes ripple {
  0% { transform: scale(0, 0); opacity: 1; }
  20% { transform: scale(25, 25); opacity: 1; }
  100% { opacity: 0; transform: scale(40, 40); }
}

.btn-export.animating::after {
  animation: ripple 0.6s ease-out;
}

.btn-export svg {
  width: 18px;
  height: 18px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.btn-export:hover svg {
  transform: translateY(1px);
}


/* ---------- Keyframes ---------- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.18); box-shadow: 0 0 0 0 var(--db-brand-glow); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

@keyframes kpiCountUp {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes trendUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Container ---------- */
.dashboard-container {
  background: #F0F4FF;
  background: var(--db-bg);
  padding: 16px;
}

/* ---------- Module Card ---------- */
.mod-card {
  background: #ffffff;
  background: var(--db-surface);
  border: 1px solid #E5E9F2;
  border: 1px solid var(--db-border);
  border-radius: 20px;
  border-radius: var(--db-radius-xl);
  padding: 0;
  overflow: visible;
  margin-bottom: 28px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-md);
  animation: slideUp 0.4s ease both;
  position: relative;
  transition: box-shadow 0.25s ease;
}

.mod-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #06B6D4 100%);
  border-radius: 20px 20px 0 0;
  border-radius: var(--db-radius-xl) var(--db-radius-xl) 0 0;
  opacity: 0.85;
}

.mod-card:hover {
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  box-shadow: var(--db-shadow-lg);
}

/* ---------- Module Header ---------- */
.mod-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #E5E9F2;
  border-bottom: 1px solid var(--db-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mod-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mod-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border-radius: var(--db-radius-sm);
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid #BFDBFE;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.mod-title-left {
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  color: var(--db-text);
  letter-spacing: -0.03em;
}

.mod-desc {
  font-size: 12px;
  color: #64748B;
  color: var(--db-text-muted);
  margin-top: 2px;
  font-weight: 400;
}

/* ---------- Filter Bar ---------- */
.filter-bar {
  padding: 12px 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: transparent;
  border-bottom: none;
}

/* ---------- Period Toggle ---------- */
.period-toggle {
  display: flex;
  background: #F8FAFC;
  border: 1px solid #E5E9F2;
  border: 1px solid var(--db-border);
  border-radius: 8px;
  border-radius: var(--db-radius-sm);
  padding: 3px;
  flex-wrap: wrap;
  gap: 2px;
}

.period-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  color: var(--db-text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.period-btn:hover {
  background: rgba(37, 99, 235, 0.06);
  color: #2563EB;
  color: var(--db-brand);
}

.period-btn.active {
  background: #ffffff;
  background: var(--db-surface);
  color: #2563EB;
  color: var(--db-brand);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15), 0 1px 2px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.18);
}

/* ---------- Date Picker Filter ---------- */
.inventory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.select-dates-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  background: var(--db-surface);
  border: 1px solid #E5E9F2;
  border: 1px solid var(--db-border);
  border-radius: 8px;
  border-radius: var(--db-radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  color: var(--db-text-muted);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.select-dates-btn:hover {
  border-color: #2563EB;
  border-color: var(--db-brand);
  color: #2563EB;
  color: var(--db-brand);
}

/* ---------- Module Body ---------- */
.mod-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- KPI Grid ---------- */
.kpi-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.g1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ========== KPI CARD — Premium Redesign ========== */
.kpi {
  background: #ffffff;
  background: var(--db-surface);
  border-radius: 12px;
  border-radius: var(--db-radius-md);
  padding: 18px 20px;
  border: 1px solid #E5E9F2;
  border: 1px solid var(--db-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2563EB, #7C3AED);
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: 0 0 12px 12px;
  border-radius: 0 0 var(--db-radius-md) var(--db-radius-md);
}

.kpi:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-md);
  border-color: rgba(37, 99, 235, 0.25);
  transform: translateY(-2px);
}

.kpi:hover::after {
  opacity: 1;
}

/* Subtle watermark pattern */
.kpi::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
  pointer-events: none;
}

.kpi-label {
  font-size: 11.5px;
  color: #64748B;
  color: var(--db-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  word-break: break-word;
}

.kpi-val {
  font-size: 26px;
  font-weight: 700;
  color: #0F172A;
  color: var(--db-text);
  line-height: 1.1;
  letter-spacing: -0.03em;
  animation: kpiCountUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  word-break: break-all;
}

.kpi-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
  animation: trendUp 0.4s ease both;
  animation-delay: 0.15s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.kpi-sub.up   { color: #059669; }
.kpi-sub.dn   { color: #DC2626; }
.kpi-sub.warn { color: #D97706; }

/* Trend arrow */
.kpi-sub.up::before  { content: '↑ '; }
.kpi-sub.dn::before  { content: '↓ '; }
.kpi-sub.warn::before { content: '⚠ '; }

/* ---------- Section Label ---------- */
.section-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748B;
  color: var(--db-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* ---------- Chart Grid ---------- */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-gap: 14px;
  gap: 14px;
}

/* ========== CHART BOX — Premium Redesign ========== */
.chart-box {
  background: #ffffff;
  background: var(--db-surface);
  border: 1px solid #E5E9F2;
  border: 1px solid var(--db-border);
  border-radius: 12px;
  border-radius: var(--db-radius-md);
  padding: 20px;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-sm);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
  animation: slideUp 0.4s ease both;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* Sync heights in grid */
}

.chart-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #06B6D4 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px 12px 0 0;
  border-radius: var(--db-radius-md) var(--db-radius-md) 0 0;
}

.chart-box:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-md);
  border-color: rgba(37, 99, 235, 0.2);
}

.chart-box:hover::before {
  opacity: 1;
}

.chart-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.chart-box.full-width,
.tbl-box.full-width {
  grid-column: span 2;
}

.chart-title {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  color: var(--db-text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.chart-title-subtitle {
  font-size: 11px;
  color: #64748B;
  color: var(--db-text-muted);
  margin-bottom: 16px;
}

.chart-wrap {
  position: relative;
  width: 100%;
  min-height: 240px;
}

/* 3D Depth Effect for Charts */
.chart-wrap canvas {
  filter: drop-shadow(0px 8px 12px rgba(15, 23, 42, 0.15));
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.chart-box:hover canvas {
  filter: drop-shadow(0px 12px 20px rgba(15, 23, 42, 0.2));
  transform: translateY(-2px);
}

/* ========== TABLE BOX — Premium Redesign ========== */
.tbl-box {
  background: #ffffff;
  background: var(--db-surface);
  border: 1px solid #E5E9F2;
  border: 1px solid var(--db-border);
  border-radius: 12px;
  border-radius: var(--db-radius-md);
  padding: 0;
  width: 100%;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-sm);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
  overflow: hidden;
  animation: slideUp 0.4s ease both;
  display: flex;
  flex-direction: column;
  height: 100%; /* Sync heights in grid */
}

.tbl-box:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  box-shadow: var(--db-shadow-md);
  border-color: rgba(37, 99, 235, 0.18);
}

.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; /* Space for custom scrollbar */
}

/* Custom Elegant Scrollbar for Tables */
.tbl-wrap::-webkit-scrollbar {
  height: 6px;
}
.tbl-wrap::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 10px;
}
.tbl-wrap::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.tbl-wrap::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* ========== TABLE — Premium Styling ========== */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 800px; /* Force scroll on smaller containers for responsiveness */
  table-layout: auto;
}

.tbl thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.tbl th {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  padding: 11px 14px;
  border-bottom: 2px solid #E5E9F2;
  border-bottom: 2px solid var(--db-border);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  height: 44px;
}

.tbl th:first-child {
  border-left: 3px solid #2563EB;
  border-left: 3px solid var(--db-brand);
}

.tbl tbody tr {
  transition: background 0.15s ease;
  border-bottom: 1px solid #F1F5F9;
}

.tbl tbody tr:last-child {
  border-bottom: none;
}

.tbl tbody tr:nth-child(even) {
  background: #FAFBFF;
}

.tbl tbody tr:hover {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.04) 0%, rgba(37, 99, 235, 0.01) 100%);
  cursor: default;
}

.tbl td {
  padding: 11px 14px;
  color: #334155;
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  height: 48px;
}

.tbl td:first-child {
  font-weight: 600;
  color: #2563EB;
  color: var(--db-brand);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.tbl tr:hover td:first-child {
  transform: translateX(4px);
  color: #3B82F6;
  color: var(--db-brand-light);
}

/* ========== BADGES — Premium Redesign ========== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

.badge-blue   { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); color: #1D4ED8; border: 1px solid #BFDBFE; }
.badge-amber  { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); color: #B45309; border: 1px solid #FDE68A; }
.badge-red    { background: linear-gradient(135deg, #FFF5F5, #FEE2E2); color: #B91C1C; border: 1px solid #FECACA; }
.badge-green  { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); color: #166534; border: 1px solid #BBF7D0; }
.badge-gray   { background: linear-gradient(135deg, #F8FAFC, #F1F5F9); color: #475569; border: 1px solid #E2E8F0; }
.badge-purple { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); color: #6D28D9; border: 1px solid #DDD6FE; }
.badge-teal   { background: linear-gradient(135deg, #ECFEFF, #CFFAFE); color: #0E7490; border: 1px solid #A5F3FC; }

/* ========== PAGINATION — Premium Redesign ========== */
.dashboard-pagination {
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid #E5E9F2;
  border-top: 1px solid var(--db-border);
  background: #FAFBFF;
  border-radius: 0 0 12px 12px;
  border-radius: 0 0 var(--db-radius-md) var(--db-radius-md);
}

.pg-num-btn.active {
  background: #2563EB !important;
  background: var(--db-brand) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  border-radius: 6px;
}

.pg-btn {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.pg-btn:not(:disabled):hover {
  border-color: #2563EB !important;
  border-color: var(--db-brand) !important;
  color: #2563EB !important;
  color: var(--db-brand) !important;
  background: rgba(37, 99, 235, 0.04) !important;
}

/* ---------- Branch Selector ---------- */
.branch-selector-wrap {
  margin-bottom: 20px;
}

.branch-label {
  font-size: 12px;
  color: #64748B;
  color: var(--db-text-muted);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.branch-input-field {
  display: flex;
  align-items: center;
  border: 1px solid #E5E9F2;
  border: 1px solid var(--db-border);
  border-radius: 12px;
  border-radius: var(--db-radius-md);
  padding: 8px 12px;
  background: #ffffff;
  background: var(--db-surface);
  min-height: 44px;
  gap: 12px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.branch-input-field:focus-within {
  border-color: #2563EB;
  border-color: var(--db-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 0 3px var(--db-brand-glow);
}

.branch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.branch-chip {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border: 1px solid #BFDBFE;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: #1D4ED8;
  font-weight: 600;
}

/* ---------- Alert Cards ---------- */
.alert-card {
  border-radius: 8px;
  border-radius: var(--db-radius-sm);
  padding: 12px 16px;
  border: 1px solid;
  margin-bottom: 8px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.alert-card:hover {
  transform: translateX(3px);
}

.al-red   { background: linear-gradient(135deg, #FFF5F5, #FEE2E2); border-color: #FECACA; }
.al-amber { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); border-color: #FDE68A; }
.al-blue  { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border-color: #BFDBFE; }

.alert-title { font-size: 12px; font-weight: 600; margin-bottom: 2px; color: #0F172A; color: var(--db-text); }
.alert-desc  { font-size: 11px; color: #64748B; color: var(--db-text-muted); line-height: 1.4; }

.alert-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.alert-count {
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  color: var(--db-text);
}

.alert-link {
  font-size: 12px;
  font-weight: 600;
  color: #2563EB;
  color: var(--db-brand);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.alert-link:hover {
  color: #3B82F6;
  color: var(--db-brand-light);
}

/* ---------- Module Selector ---------- */
.module-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  padding: 20px;
}

.module-card {
  background: #ffffff;
  background: var(--db-surface);
  border: 1px solid #E5E9F2;
  border: 1px solid var(--db-border);
  border-radius: 12px;
  border-radius: var(--db-radius-md);
  padding: 20px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transition: var(--db-transition);
}

.module-card:hover {
  border-color: #2563EB;
  border-color: var(--db-brand);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
  box-shadow: 0 4px 12px var(--db-brand-glow);
  transform: translateY(-2px);
}

.module-card.active {
  border-color: #2563EB;
  border-color: var(--db-brand);
  background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
}

.module-card h3 {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  color: var(--db-text);
}

.module-card p {
  margin: 0;
  font-size: 12px;
  color: #64748B;
  color: var(--db-text-muted);
}

/* ============================================================
   SHIMMER LOADING STATE
   ============================================================ */
.shimmer {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 6px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Tablet (≤ 1024px) --- */
@media (max-width: 1024px) {
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kpi-val {
    font-size: 22px;
  }

  .mod-title-left {
    font-size: 20px;
  }
}

/* --- Small Tablet / Large Mobile (≤ 768px) --- */
@media (max-width: 768px) {
  .kpi-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chart-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .tbl-grid  { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

  .chart-box.full-width,
  .tbl-box.full-width {
    grid-column: span 1;
  }

  .g3, .g4, .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

  .kpi-val {
    font-size: 20px;
  }

  .mod-body {
    padding: 14px;
  }

  .chart-title {
    font-size: 13px;
  }

  .inventory-filters {
    width: 100%;
    justify-content: stretch;
  }

  .inventory-filters label {
    flex: 1 1;
    min-width: 0;
  }
}

/* --- Mobile (≤ 640px) --- */
@media (max-width: 640px) {
  .dashboard-container {
    padding: 8px;
  }

  .mod-card {
    border-radius: 12px;
    border-radius: var(--db-radius-md);
    margin-bottom: 16px !important;
  }

  .mod-header {
    padding: 14px;
  }

  .kpi-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .chart-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .tbl-grid  { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }

  .g2, .g3, .g4, .g6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi {
    padding: 14px 12px;
  }

  .kpi-val {
    font-size: 20px;
  }

  .kpi-label {
    font-size: 10px;
  }

  .badge {
    min-width: 55px;
    font-size: 10px;
    padding: 3px 8px;
  }

  .tbl th {
    padding: 8px 10px;
    font-size: 10px;
  }

  .tbl td {
    padding: 10px;
    font-size: 11px;
  }

  .period-btn {
    padding: 5px 8px;
    font-size: 12px;
  }

  .mod-title-left {
    font-size: 18px;
  }
}

.sa-sidebar {
    width: 280px;
    height: 100vh;
    background-color: #ffffff;
    border-right: 1px solid #eaecf0;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    z-index: 1000;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.sa-sidebar.sa-collapsed {
    width: 72px;
    padding: 12px 0;
}

.sa-sidebar.sa-expanded {
    width: 280px;
    padding: 20px 0;
}

/* Header */
.sa-logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.15s ease;
    margin-bottom: 16px;
}

.sa-collapsed .sa-logo-section {
    justify-content: center;
    padding: 0 8px 16px;
}

.sa-logo-img {
    width: 28px;
    height: 28px;
}

.sa-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
    transition: opacity 0.3s ease, max-width 0.3s ease;
    white-space: nowrap;
}

.sa-collapsed .sa-logo-text {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    display: none;
}

/* Search */
.sa-search-box {
    margin: 0 16px 16px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-collapsed .sa-search-box {
    display: none;
}

.sa-search-icon {
    font-size: 18px;
    color: #667085;
}

.sa-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #101828;
    width: 100%;
}

.sa-search-box input::placeholder {
    color: #9ca3af;
}

.sa-search-shortcut {
    font-size: 11px;
    color: #667085;
    background: #f9fafb;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #eaecf0;
}

/* Navigation */
.sa-nav-links {
    flex: 1 1;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Increased gap for better vertical spacing */
    overflow-y: auto;
}

.sa-menu-wrapper {
    display: flex;
    flex-direction: column;
}

.sa-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: #475467;
    /* Adjusted to match mockup text color */
    font-size: 16px;
    /* Slightly larger as per mockup */
    font-weight: 600;
    /* Bolder as per mockup */
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.sa-collapsed .sa-nav-item {
    justify-content: center;
    padding: 12px;
    gap: 0;
}

.sa-nav-item:hover {
    background-color: #f9fafb;
    color: #101828;
}

.sa-nav-item.active,
.sa-nav-item.expanded {
    background-color: #f0f7ff;
    color: #2563eb;
}

.sa-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
}

.sa-nav-item.active .sa-nav-icon,
.sa-nav-item.expanded .sa-nav-icon {
    color: #2563eb;
}

.sa-nav-text {
    transition: opacity 0.3s ease, max-width 0.3s ease;
    white-space: nowrap;
}

.sa-collapsed .sa-nav-text {
    display: none;
}

/* Bottom Actions */
.sa-bottom-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 24px;
    margin-top: auto;
}

.sa-bottom-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    color: #374151;
    font-weight: 500;
    font-size: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
    margin: 0 8px;
}

.sa-collapsed .sa-bottom-item {
    justify-content: center;
    padding: 10px;
    gap: 0;
}

.sa-collapsed .sa-bottom-item span {
    display: none;
}

.sa-bottom-item:hover {
    background-color: #f3f4f6;
}

.sa-bottom-item.sa-logout-btn {
    color: #ef4444;
}

.sa-bottom-item.sa-logout-btn:hover {
    background-color: #fee2e2;
    color: #dc2626;
}

.sa-bottom-item.sa-logout-btn .sa-nav-icon {
    color: #ef4444;
}

.sa-bottom-item.sa-logout-btn:hover .sa-nav-icon {
    color: #dc2626;
}

/* Profile */
.sa-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 16px 0 16px;
    padding: 12px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sa-collapsed .sa-user-profile {
    display: none;
    opacity: 0;
}

.sa-avatar {
    position: relative;
    width: 40px;
    height: 40px;
}

.sa-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.sa-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background-color: #10b981;
    border: 2px solid #fff;
    border-radius: 50%;
}

.sa-user-info {
    flex: 1 1;
    min-width: 0;
}

.sa-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.sa-user-email {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-profile-arrow {
    color: #9ca3af;
    font-size: 20px;
}
/* Company Management (Super Admin) styles */

.cm-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ─── Header Top Bar ─── */
.cm-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.cm-welcome {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.cm-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cm-smart-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e5e7eb;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1570EF;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cm-icon-box {
    font-size: 16px;
}

.cm-icon-btn {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cm-lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: white;
    border: 1px solid #e5e7eb;
    padding: 8px 16px;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ─── Title Section ─── */
.cm-title-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.cm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}

.cm-icon-home {
    font-size: 16px;
    line-height: 1;
}

.cm-page-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px 0;
}

.cm-page-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* ─── Table Card container ─── */
.cm-table-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    flex: 1 1;
    overflow: hidden;
}

/* ─── Toolbar ─── */
.cm-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.cm-search-input {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    width: 320px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cm-search-icon {
    color: #6b7280;
    font-size: 14px;
    margin-right: 8px;
}

.cm-search-input input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    color: #111827;
}

.cm-search-input input::placeholder {
    color: #9ca3af;
}

.cm-shortcut-key {
    font-size: 12px;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 2px 6px;
    background: #f9fafb;
}

.cm-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-filter-pill {
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
}

.cm-filter-label {
    color: #6b7280;
    margin-right: 4px;
}

.cm-filter-val {
    color: #111827;
    font-weight: 500;
}

.cm-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ─── Data Table ─── */
.cm-table-wrapper {
    flex: 1 1;
    overflow: auto;
}

.cm-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.cm-table th {
    background: #f9fafb;
    padding: 8px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

.cm-table td {
    padding: 12px 14px;
    font-size: 14px;
    color: #111827;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
    white-space: nowrap;
}

.cm-table tr:hover td {
    background-color: #f9fafb;
}

.cm-id-col {
    color: #111827;
    font-size: 14px;
    font-weight: 500;
}

.cm-contact-name {
    font-weight: 500;
    color: #111827;
    display: inline;
    margin: 0;
}

.cm-contact-text-align {
    text-align: center;
}

.cm-contact-email {
    color: #6b7280;
    font-size: 13px;
    display: inline;
}

.cm-city {
    font-size: 14px;
    color: #111827;
    display: inline;
}

.cm-state {
    color: #6b7280;
    font-size: 13px;
    display: inline;
    margin-left: 6px;
}

/* Badges */
.cm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    color: #344054;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.cm-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cm-status-approved .cm-status-dot,
.cm-status-active .cm-status-dot {
    background: #12b76a;
}

.cm-status-pending .cm-status-dot {
    background: #f79009;
    /* Orange for pending */
}

.cm-status-canceled .cm-status-dot,
.cm-status-rejected .cm-status-dot,
.cm-status-inactive .cm-status-dot {
    background: #f04438;
}

/* Action btn */
.cm-action-col {
    text-align: right;
    white-space: nowrap;
}

.cm-action-buttons {
    display: inline-flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

.cm-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
}

.cm-edit-btn:hover {
    color: #1570EF;
}

/* ─── Pagination ─── */
.cm-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}

.cm-page-btn {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cm-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.cm-page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cm-page-num {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    border-radius: 8px;
    cursor: pointer;
}

.cm-page-num:hover {
    background: #f3f4f6;
    color: #111827;
}

.cm-page-num.active {
    background: #f9fafb;
    color: #111827;
    font-weight: 600;
}

.cm-page-ellipsis {
    color: #6b7280;
    padding: 0 4px;
}
/* ─── Modal Overlay & Backdrop ─────────────────────────────── */
.cd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.cd-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  padding-bottom: 24px;
}

.cd-page .page-header {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-sizing: border-box;
}

.cd-page .page-header-actions {
  gap: 12px;
}

.cd-page .page-header-actions button {
  height: 36px;
}

.cd-page-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

/* ─── Modal Container ──────────────────────────────────────── */
.cd-modal-content {
  width: 1100px;
  max-width: 96vw;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Header ──────────────────────────────────────────────── */
.cd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #eaecf0;
}

.cd-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #101828;
}

.cd-modal-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #667085;
}

.cd-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cd-cancel-btn {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  color: #344054;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.cd-save-btn {
  background: #1570ef;
  border: 1px solid #1570ef;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.cd-close-btn {
  background: transparent;
  border: none;
  color: #667085;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.cd-close-btn:hover {
  background: #f2f4f7;
  color: #101828;
}

/* ─── Body ────────────────────────────────────────────────── */
.cd-modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(100vh - 300px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ─── Sections ────────────────────────────────────────────── */
.cd-section {
  display: flex;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f2f4f7;
}

.cd-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cd-section-title {
  min-width: 170px;
  font-size: 13px;
  font-weight: 600;
  color: #344054;
  padding-top: 6px;
}

.cd-section-body {
  flex: 1 1;
  min-width: 0;
}

/* ─── Grids ───────────────────────────────────────────────── */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px 18px;
  gap: 16px 18px;
}

.cd-grid.cd-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

/* ─── Documents ───────────────────────────────────────────── */
.cd-doc-grid {
  margin: 14px 0 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.cd-doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}

.cd-doc-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fef3f2;
  color: #f04438;
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cd-doc-info {
  flex: 1 1;
  min-width: 0;
  color: #101828;
  font-size: 13px;
}

.cd-doc-info small {
  display: block;
  color: #98a2b3;
  font-size: 11px;
  margin-top: 2px;
}

.cd-doc-actions {
  display: flex;
  gap: 8px;
}

.cd-doc-actions button {
  border: 1px solid #d0d5dd;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  color: #344054;
}

.cd-doc-actions button.primary {
  background: #1570ef;
  border-color: #1570ef;
  color: #ffffff;
}

/* ─── Trial Row ───────────────────────────────────────────── */
.cd-trial-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cd-trial-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #344054;
}

.cd-trial-badge {
  background: #e9efff;
  color: #2a64f6;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 10px;
}

/* ─── Stepper ────────────────────────────────────────────── */
.cd-stepper-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cd-stepper-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cd-stepper-box button {
  width: 28px;
  height: 28px;
  border: 1px solid #d0d5dd;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: #475467;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cd-stepper-box span {
  min-width: 32px;
  height: 28px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #101828;
  background: #ffffff;
}

.cd-page-card .cd-modal-body .cd-section .cd-section-body .cd-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cd-section {
    flex-direction: column;
  }

  .cd-section-title {
    min-width: 0;
  }

  .cd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cd-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cd-modal-content {
    width: 96vw;
  }

  .cd-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .cd-grid,
  .cd-grid.cd-grid-2 {
    grid-template-columns: 1fr;
  }

  .cd-doc-grid {
    grid-template-columns: 1fr;
  }
}
/* View Company Details Page */
.cv-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  padding-bottom: 24px;
}

.cv-page .page-header {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-sizing: border-box;
}

.cv-page .page-header-actions {
  gap: 12px;
}

.cv-page .page-header-actions button {
  height: 36px;
}

.cv-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.cv-cancel-btn {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  color: #344054;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.cv-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.cv-section {
  border: 1px solid #eef2f6;
  border-radius: 10px;
  padding: 18px;
}

.cv-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 16px;
}

.cv-section-subtitle {
  font-size: 12px;
  color: #98a2b3;
  margin-bottom: 14px;
}

.cv-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.cv-info-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.cv-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #667085;
}

.cv-value {
  color: #101828;
  font-weight: 500;
}

.cv-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-top: 14px;
}

.cv-doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}

.cv-doc-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fef3f2;
  color: #f04438;
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cv-doc-info {
  flex: 1 1;
  min-width: 0;
  color: #101828;
  font-size: 13px;
}

.cv-doc-info small {
  display: block;
  color: #98a2b3;
  font-size: 11px;
  margin-top: 2px;
}

.cv-doc-actions {
  display: flex;
  gap: 8px;
}

.cv-doc-actions button {
  border: 1px solid #d0d5dd;
  background: #ffffff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  color: #344054;
}

.cv-doc-actions button.primary {
  background: #1570ef;
  border-color: #1570ef;
  color: #ffffff;
}

.cv-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ecfdf3;
  border: 1px solid #d1fadf;
  color: #027a48;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 12px;
}

.cv-status-pill {
  font-weight: 600;
}

.cv-sub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px 22px;
  gap: 16px 22px;
}

.cv-sub-block {
  border: 1px solid #eef2f6;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 10px;
}

.cv-sub-title {
  font-size: 12px;
  font-weight: 600;
  color: #101828;
}

.cv-total .cv-value {
  color: #1570ef;
  font-weight: 700;
}

@media (max-width: 1000px) {

  .cv-split,
  .cv-doc-grid,
  .cv-sub-grid {
    grid-template-columns: 1fr;
  }
}
.stats-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 400;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1;
}
.plan-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s;
  border: 2px solid #E5E7EB;
}

.plan-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.plan-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-name {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.plan-created {
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
}

.plan-header-actions {
  display: flex;
  gap: 8px;
}

.icon-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: color 0.2s;
  border-radius: 6px;
}

.icon-button:hover {
  color: #6b7280;
  background: #f3f4f6;
}

.icon-button svg {
  font-size: 20px;
}

.plan-duration {
  margin-top: 4px;
}

.duration-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

.duration-badge-monthly {
  background: #dbeafe;
  color: #1e40af;
}

.duration-badge-quarterly {
  background: #dbeafe;
  color: #1e40af;
}

.duration-badge-annually {
  background: #dbeafe;
  color: #1e40af;
}

.plan-description {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
  min-height: 28px;
}

.plan-pricing {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}

.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FAFAFA;
  padding: 12px 16px;
  border-radius: 8px;
}

.pricing-label {
  font-size: 14px;
  color: #6b7280;
}

.pricing-value {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.plan-status {
  margin-top: 4px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

.status-active {
  background: #d1fae5;
  color: #065f46;
}

.status-inactive {
  background: #fee2e2;
  color: #991b1b;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}
/* Modal Overlay */
.add-plan-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Modal Container */
.add-plan-modal-container {
  background: #ffffff;
  border-radius: 16px;
  width: 640px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* Modal Header */
.add-plan-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 32px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.add-plan-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.add-plan-close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s;
}

.add-plan-close-button:hover {
  color: #1f2937;
}

.add-plan-close-button svg {
  font-size: 24px;
}

/* Modal Body */
.add-plan-modal-body {
  padding: 20px 20px;
  overflow-y: auto;
  flex: 1 1;
}

/* Custom scrollbar for modal body */
.add-plan-modal-body::-webkit-scrollbar {
  width: 6px;
}

.add-plan-modal-body::-webkit-scrollbar-track {
  background: #f9fafb;
}

.add-plan-modal-body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.add-plan-modal-body::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Form Groups */
.add-plan-form-group {
  margin-bottom: 12px;
  flex: 1 1;
}

.add-plan-form-group.full-width {
  width: 100%;
}

.add-plan-form-group label {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.add-plan-required {
  color: #2563eb;
  margin-left: 2px;
}

/* Form Rows */
.add-plan-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 0;
}

/* Input Fields */
.add-plan-form-group input[type="text"],
.add-plan-form-group input[type="date"],
.add-plan-form-group textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.add-plan-form-group input[type="text"]:focus,
.add-plan-form-group input[type="date"]:focus,
.add-plan-form-group textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.add-plan-form-group input[type="text"]::placeholder,
.add-plan-form-group textarea::placeholder {
  color: #9ca3af;
}

.add-plan-form-group input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  color: #6b7280;
}

.add-plan-form-group textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* Radio Group */
.add-plan-radio-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.add-plan-radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 6px;
  white-space: nowrap;
}

.add-plan-radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #2563eb;
  flex-shrink: 0;
}

.add-plan-radio-option span {
  font-size: 14px;
  color: #374151;
  -webkit-user-select: none;
          user-select: none;
  line-height: 1;
}

.add-plan-radio-custom {
  margin-left: 0;
}

.add-plan-radio-custom input[type="radio"] {
  accent-color: #2563eb;
}

.add-plan-radio-custom span {
  color: #2563eb;
  font-weight: 500;
}

/* Save Badge */
.add-plan-save-badge {
  display: flex;
  align-items: center;
  background: #d1fae5;
  color: #065f46;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

/* Date Range Container */
.add-plan-date-range-container {
  background: #f0f9ff;
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0px;
  border: 1px solid #B2DDFF;
}

.add-plan-date-range-container .add-plan-form-row {
  margin-bottom: 0;
}

/* Input with Icon */
.add-plan-input-with-icon {
  position: relative;
}

/* Modal Footer */
.add-plan-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 0px 0px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

/* Buttons */
.add-plan-btn-cancel,
.add-plan-btn-submit {
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  outline: none;
}

.add-plan-btn-cancel {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.add-plan-btn-cancel:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.add-plan-btn-submit {
  background: #2563eb;
  color: #ffffff;
}

.add-plan-btn-submit:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* Modal Overlay */
.edit-plan-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Modal Container */
.edit-plan-modal-container {
  background: #ffffff;
  border-radius: 16px;
  width: 670px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* Modal Header */
.edit-plan-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.edit-plan-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.edit-plan-close-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: color 0.2s;
}

.edit-plan-close-button:hover {
  color: #1f2937;
}

.edit-plan-close-button svg {
  font-size: 24px;
}

/* Modal Body */
.edit-plan-modal-body {
  padding: 16px 32px;
  overflow-y: auto;
  flex: 1 1;
}

/* Custom scrollbar for modal body */
.edit-plan-modal-body::-webkit-scrollbar {
  width: 6px;
}

.edit-plan-modal-body::-webkit-scrollbar-track {
  background: #f9fafb;
}

.edit-plan-modal-body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.edit-plan-modal-body::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Form Groups */
.edit-plan-form-group {
  margin-bottom: 12px;
  flex: 1 1;
}

.edit-plan-form-group.full-width {
  width: 100%;
}

.edit-plan-form-group label {
  /* display: block; */
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.edit-plan-required {
  color: #2563eb;
  margin-left: 2px;
}

/* Form Rows */
.edit-plan-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 0;
}

/* Input Fields */
.edit-plan-form-group input[type="text"],
.edit-plan-form-group input[type="date"],
.edit-plan-form-group textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.edit-plan-form-group input[type="text"]:focus,
.edit-plan-form-group input[type="date"]:focus,
.edit-plan-form-group textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.edit-plan-form-group input[type="text"]::placeholder,
.edit-plan-form-group textarea::placeholder {
  color: #9ca3af;
}

.edit-plan-form-group input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  color: #6b7280;
}

.edit-plan-form-group textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* Radio Group */
.edit-plan-radio-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.edit-plan-radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 6px;
  white-space: nowrap;
}

.edit-plan-radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #2563eb;
  flex-shrink: 0;
}

.edit-plan-radio-option span {
  font-size: 14px;
  color: #374151;
  -webkit-user-select: none;
          user-select: none;
  line-height: 1;
}

.edit-plan-radio-custom {
  margin-left: 0;
}

.edit-plan-radio-custom input[type="radio"] {
  accent-color: #2563eb;
}

.edit-plan-radio-custom span {
  color: #2563eb;
  font-weight: 500;
}

/* Save Badge */
.edit-plan-save-badge {
  display: flex;
  align-items: center;
  background: #d1fae5;
  color: #065f46;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
}

/* Date Range Container */
.edit-plan-date-range-container {
  background: #f0f9ff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
  border: 1px solid #B2DDFF;
}

.edit-plan-date-range-container .edit-plan-form-row {
  margin-bottom: 0;
}

/* Input with Icon */
.edit-plan-input-with-icon {
  position: relative;
}

/* Modal Footer */
.edit-plan-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 0px 0px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

/* Buttons */
.edit-plan-btn-cancel,
.edit-plan-btn-submit {
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  outline: none;
}

.edit-plan-btn-cancel {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.edit-plan-btn-cancel:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.edit-plan-btn-submit {
  background: #2563eb;
  color: #ffffff;
}

.edit-plan-btn-submit:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.plan-discription-row> :first-child {
  flex: 1 1;
  width: 100%;
}
/* Delete Modal Overlay */
.delete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Delete Modal Container */
.delete-modal-container {
  background: #ffffff;
  border-radius: 12px;
  width: 410px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  position: relative;
}

/* Close Button */
.delete-close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  transition: color 0.2s;
}

.delete-close-button:hover {
  color: #9ca3af;
}

.delete-close-button svg {
  font-size: 24px;
}

/* Modal Content */
.delete-modal-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-top: 0px;
}

/* Delete Icon */
.delete-icon-wrapper {
  width: 42px;
  height: 42px;
  background: #fee2e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.delete-icon-wrapper svg {
  margin-top: 0px;
}

.delete-icon {
  font-size: 28px;
  color: #dc2626;
}

/* Modal Title */
.delete-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 6px 0;
}

/* Modal Message */
.delete-modal-message {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

/* Modal Actions */
.delete-modal-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
}

/* Buttons */
.delete-btn-cancel,
.delete-btn-confirm {
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  outline: none;
  min-width: 170px;
}

.delete-btn-cancel {
  background: #ffffff;
  color: #374151;
  border: 1px solid #d1d5db;
}

.delete-btn-cancel:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.delete-btn-confirm {
  background: #dc2626;
  color: #ffffff;
}

.delete-btn-confirm:hover {
  background: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.subscription-plans-page {
  padding: 0 0px 24px 0px;
  width: 100%;
  height: calc(100vh - 80px);
  /* Adjust based on header height */
  overflow-y: auto;
  box-sizing: border-box;
}
/* Make the calendar match your image style */
.react-calendar {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* max-width: 800px; */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

.react-calendar__month-view__weekdays {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}

.react-calendar__tile {
  height: 100px; /* Taller cells to fit tasks */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  vertical-align: top;
  padding: 8px;
}

.react-calendar__tile--active {
  background: #006edc;
  color: white;
}

/* Your custom task styling */
.custom-tile {
  align-items: flex-start;
}

/* Overdue text styling */
.react-calendar__tile .overdue {
  color: #dc3545;
  font-size: 11px;
}

.container {
  /* padding: 20px; */
  background-color: #f5f6f8;
  /* min-height: 100vh; */
  width: 100%;
}

/* Card style */
.card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

/* Titles */
.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

/* Text */
.text {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

/* Highlight overdue */
.highlight {
  color: #e67e22;
  font-weight: 500;
}

/* Grid layout */
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-top: 10px;
}

/* Labels */
.label {
  font-size: 13px;
  color: #777;
}

/* Values */
.value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


.summary-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  padding: 0px;
}


.summary-table td {
  font-weight: 400;
  color: #000000 !important;
  font-family: "Inter", sans-serif;
}

/* Table */
.summary-table {
  width: 100%;
  border-collapse: collapse;
}

/* Header */
.summary-table thead {
  background: #f9fafb;
}

.summary-table th {
  padding: 14px 10px;
  text-align: left; /* Aligned to left as requested */
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-transform: none !important;
}

/* Data row */
.summary-table td {
  padding: 16px 10px;
  text-align: left; /* left align values */
  font-size: 14px;
  color: #333;
}

/* Remove borders completely */
.summary-table th,
.summary-table td {
  border: none;
}

/* Optional subtle rounded feel spacing */
.summary-table tbody tr {
  background: #fff;
}
.edit-task-container {
  padding: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.form-grid input,
.form-grid select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.task-notes {
  width: 100%;
  margin-top: 12px;
  min-height: 80px;
  padding: 10px;
}

/* PAGE WRAPPER */
.edit-task-page {
  width: 100%;
  height: 100%;
}

/* SCROLL FIX */
.edit-task-scroll {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding-right: 6px;
  padding-bottom: 120px;
}

/* GRID */
.edit-task-page .edit-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

/* FORM GROUP */
.edit-task-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  /* prevents overflow */
}


.edit-task-page .form-group input,
.edit-task-page .form-group select {
  width: 100%;
  box-sizing: border-box;
}

/* LABEL */
.form-group label {
  font-size: 12px;
  color: #555;
  font-weight: 500;
}

.required-star {
  color: #2563eb;
}

/* INPUTS */
.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

/* TEXTAREA FULL WIDTH */
.full-width {
  grid-column: span 3;
}

.form-group textarea {
  min-height: 80px;
}

.info-card {
  max-width: 100% !important;
  height: -webkit-fit-content;
  height: fit-content;
}

.multi-select-box {
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* min-height: 42px; */
  background: #fff;
}

/* Chips */
.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  background: #e6f0ff;
  color: #2563eb;
  padding: 1px 8px;
  border-radius: 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.chip-close {
  margin-left: 6px;
  cursor: pointer;
  font-weight: bold;
}

/* Dropdown icon */
.dropdown-icon {
  margin-left: auto;
  font-size: 14px;
  color: #666;
}

/* Dropdown list */
.dropdown-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-top: 4px;
  background: #fff;
  max-height: 150px;
  overflow-y: auto;
}

/* Dropdown item */
.dropdown-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
}

.dropdown-item:hover {
  background: #f9fafb;
}

.dropdown-item.selected {
  background: #e6f0ff;
  color: #2563eb;
}
.additional-task-page {
  width: 100%;
}

.additional-scroll {
  max-height: calc(100vh - 360px);
  overflow-y: auto;
  padding-right: 6px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 14px;
  gap: 14px;
}

.two-column {
  grid-template-columns: repeat(2, 1fr);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 12px;
  color: #555;
}

.required-star {
  color: #2563eb;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.full-width {
  grid-column: span 3;
}

textarea {
  min-height: 80px;
}

/* Upload grid */
.upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-top: 16px;
}

/* Upload box */
.upload-box label {
  font-size: 12px;
  margin-bottom: 6px;
  display: block;
}

/* Upload area */
.upload-area {
  border: 1px dashed #ccc;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  background: #fafafa;
  cursor: pointer;
}

.upload-area span {
  font-size: 20px;
}

.upload-area p {
  margin: 6px 0;
  font-size: 13px;
}

.upload-area small {
  font-size: 11px;
  color: #777;
}

/* Rating */
.rating {
  font-size: 18px;
  color: #999;
}

/* Full width */
.full-width {
  grid-column: span 3;
}

.card-title {
  margin: 0;
  padding: 0;
}
/* RescheduleTask.css */
.reschedule-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f6f8fb;
}

.reschedule-container {
  max-height: calc(100vh - 350px);
  overflow-y: auto;
  padding-right: 6px;
}

.info-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 12px;
  margin-bottom: 5px;
  color: #555;
}

.required-star {
  color: #2563eb;
}

.form-group input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  background: #fafafa;
}

.form-group select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
}

.form-group input:disabled {
  background: #eee;
}

.full-width {
  grid-column: span 3;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
/* FleetTracking.css */
.fleet-tracking-page {
  padding: 0;
  height: calc(100vh - 120px);
  overflow: hidden;
}

.fleet-container {
  display: flex;
  height: 100%;
  gap: 0;
  background: #f0f2f5;
  overflow: hidden;
}

/* LEFT SIDEBAR */
.fleet-sidebar {
  width: 360px;
  max-height: calc(100vh - 300px);
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  /* display: flex; */
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
}

.sidebar-header {
  padding: 22px 20px 14px;
  border-bottom: 1px solid #edf2f7;
}

.sidebar-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0f2b4d, #1e4a76);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.3px;
}

.live-badge {
  font-size: 12px;
  color: #3f6b9e;
  margin-top: 5px;
}

.filter-group {
  padding: 16px 20px;
  border-bottom: 1px solid #eef2f8;
}

.filter-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #5b6e8c;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  display: block;
}

.branch-select,
.tech-search-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  outline: none;
  transition: all 0.2s;
}

.branch-select:focus,
.tech-search-input:focus {
  border-color: #1e4a76;
  box-shadow: 0 0 0 3px rgba(30, 74, 118, 0.1);
}

.status-tabs {
  display: flex;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #edf2f7;
}

.status-pill {
  flex: 1 1;
  text-align: center;
  padding: 8px 0;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 40px;
  background: #f8fafc;
  color: #2c3e66;
  cursor: pointer;
  transition: all 0.2s;
}

.status-pill.active {
  background: #1e3a5f;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.status-pill span {
  font-weight: 800;
  margin-right: 6px;
}

.technician-list {
  flex: 1 1;
  padding: 12px 14px 20px;
  overflow-y: auto;
}

.tech-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid #eef2f6;
  transition: all 0.2s;
  cursor: pointer;
}

.tech-card.selected {
  border-left: 4px solid #1e4a76;
  background: #fafdff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.03);
}

.tech-name-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
}

.tech-name-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-dot {
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px #dcfce7;
}

.offline-dot {
  background: #94a3b8;
  box-shadow: none;
}

.sale-chip {
  background: #fef3c7;
  color: #b45309;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 30px;
}

.tech-address {
  font-size: 0.72rem;
  color: #556b8a;
  margin: 6px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-tag {
  font-size: 0.7rem;
  background: #f1f5f9;
  display: inline-block;
  padding: 3px 12px;
  border-radius: 30px;
  margin-top: 6px;
  color: #2d4a6e;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #687a9e;
}

.empty-state i {
  font-size: 2rem;
  margin-bottom: 10px;
  display: block;
}

.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid #edf2f7;
  font-size: 11px;
  color: #6a7c9f;
}

/* RIGHT MAIN CONTENT */
.fleet-main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f9fafc;
}

.fleet-map {
  flex: 1.1 1;
  min-height: 42%;
  background: #d9e2ef;
  position: relative;
  border-bottom: 2px solid #e2edf7;
}

.map-container {
  height: 100%;
  width: 100%;
}

.fleet-profile {
  flex: 0.9 1;
  overflow-y: auto;
  background: white;
  padding: 20px 28px;
  box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.02);
}

.profile-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 22px;
  border-bottom: 2px solid #eef2ff;
  padding-bottom: 12px;
}

.profile-head h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0b2b44;
}

.daily-badge {
  background: #eef2ff;
  padding: 5px 16px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
}

.stats-row {
  display: flex;
  gap: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.stat-box {
  background: #f8fafc;
  border-radius: 28px;
  padding: 10px 18px;
  min-width: 100px;
  text-align: center;
  border: 1px solid #eef2f6;
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0f2b4d;
}

.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #4b6589;
}

.travel-events {
  background: #fefdf8;
  border-radius: 24px;
  padding: 12px 18px;
  margin-bottom: 24px;
  border-left: 4px solid #f0b429;
}

.time-range {
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #e9edf2;
}

.time-range i {
  margin-right: 6px;
  color: #eab308;
}

.travel-event,
.clock-event {
  font-size: 0.8rem;
  padding: 8px 0;
  border-bottom: 1px dashed #e9edf2;
  display: flex;
  justify-content: space-between;
}

.table-title {
  margin: 18px 0 10px 0;
  font-weight: 600;
}

.table-wrapper {
  overflow-x: auto;
  border-radius: 20px;
}

.travel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  min-width: 600px;
}

.travel-table th {
  background: #f1f5f9;
  padding: 10px 6px;
  text-align: left;
  font-weight: 700;
  color: #1e2f44;
}

.travel-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #eff3f8;
}

.badge-status {
  background: #e0f2fe;
  color: #0369a1;
  padding: 3px 10px;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-block;
}

.gps-note {
  margin-top: 16px;
  font-size: 11px;
  color: #5b7a9a;
  text-align: right;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c1c9d2;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0abb8;
}
/* Table container */
.ticket-table-container {
  background: #ffffff;
  border-radius: 10px;
  /* padding: 12px; */
  border: 1px solid #e5e7eb;
  height: calc(100vh - 320px);
  /* adjust based on header */
  overflow-y: auto;
  /* overflow: auto; */
}

/* Priority badge */
.priority-badge {
  background-color: #fef3c7;
  color: #92400e;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
}

/* SLA badge */
.sla-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
  display: inline-block;
}

.sla-badge.safe {
  background-color: #dcfce7;
  color: #166534;
}

.sla-badge.at_risk {
  background-color: #fef3c7;
  color: #92400e;
}

.sla-badge.breached {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Action button */
.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Improve table spacing */
.standard-table-container table {
  border-collapse: separate;
  border-spacing: 0 6px;
}

.standard-table-container th {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.standard-table-container td {
  font-size: 13px;
  color: #111827;
  padding: 10px 8px;
}
/* Header buttons */
.header-actions {
  display: flex;
  gap: 10px;
}

.btn-secondary {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

/* Form container */
.form-container {
  margin-top: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  height: calc(100vh - 350px);
  /* adjust based on header */
  overflow-y: auto;
}

/* Grid layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

/* Form group */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
}

.form-group input,
.form-group select {
  height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
}

/* Attachment */
.attachment-group {
  grid-column: span 1;
}

.upload-box {
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.upload-box input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-box p {
  font-size: 13px;
  color: #6b7280;
}

.upload-box span {
  color: #2563eb;
  font-weight: 500;
}

.upload-box small {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 6px;
}

/* Attachments Preview */
.attachments-preview-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attachment-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.attachment-preview-item .file-name {
  font-size: 13px;
  color: #10b981;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-remove-attachment {
  border: none;
  background: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.btn-remove-attachment:hover {
  color: #ef4444;
}

/* Count badge */
.attachment-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 1px 8px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* File icon */
.file-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 6px;
}

/* File size label */
.file-size {
  font-size: 11px;
  color: #9ca3af;
  margin-left: auto;
  margin-right: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Disabled upload box */
.upload-box--disabled {
  opacity: 0.55;
  background: #f3f4f6;
  border-color: #d1d5db;
}


/* ViewTicket.css - Precise structure matching ViewTask */
.view-ticket-wrapper {
  /* padding: 24px; */
  background-color: #f9fafb;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
}

.view-ticket-wrap {
  max-height: calc(100vh - 340px);
  overflow-y: auto;
  padding-right: 12px;
  margin-top: 10px;
}

/* Scrollbar Styling */
.view-ticket-wrap::-webkit-scrollbar {
  width: 6px;
}

.view-ticket-wrap::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.view-ticket-wrap::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.view-ticket-wrap::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Two Column Layout */
.two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 24px;
}

/* Info Cards */
.info-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border: 1px solid #f3f4f6;
  overflow: hidden;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px 0;
}

/* Info Table Style - MATCHING VIEWTASK EXACTLY */
.info-table-task {
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-collapse: collapse;
  width: 100%;
  border-radius: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 0px;
}

.info-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.info-value {
  font-size: 13px;
  color: #111827;
  font-weight: 500;
  text-align: right;
}

/* Badges */
.status-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.status-in-progress {
  background-color: #eff6ff;
  color: #2563eb;
}

.priority-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.priority-normal {
  background-color: #f0fdf4;
  color: #16a34a;
}

.level-badge {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background-color: #fff7ed;
  color: #ea580c;
}

.text-red {
  color: #ef4444;
}

/* Actions Grid */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  width: 100%;
  justify-content: flex-start;
}

.action-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.action-icon {
  font-size: 18px;
  color: #9ca3af;
}

.action-btn.danger {
  color: #dc2626;
}

.action-btn.danger .action-icon {
  color: #ef4444;
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  padding-left: 20px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  bottom: 0;
  width: 1px;
  background: #e5e7eb;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.timeline-marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex-shrink: 0;
}

.timeline-content {
  display: flex;
  flex-direction: column;
}

.timeline-text {
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
}

.timeline-item.red .timeline-marker {
  color: #ef4444;
}

.timeline-item.green .timeline-marker {
  color: #16a34a;
}

.timeline-item.gray .timeline-marker {
  color: #9ca3af;
}

.timeline-item.blue .timeline-marker {
  color: #2563eb;
}

.timeline-item.orange .timeline-marker {
  color: #ea580c;
}

/* Modal Styles */
.ticket-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-modal {
  background: #fff;
  border-radius: 12px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 24px;
}

.ticket-modal h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: #111827;
}

.ticket-modal label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
}

.ticket-modal input,
.ticket-modal select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}

.ticket-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.ticket-modal-actions button {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

/* Modal Internal Structure */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 15px;
}

.modal-header h3 {
  margin: 0 !important;
}

.modal-header button {
  background: none;
  border: none;
  font-size: 24px;
  color: #9ca3af;
  cursor: pointer;
}

.modal-body {
  padding: 10px 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 25px;
  border-top: 1px solid #f3f4f6;
  padding-top: 20px;
}

.field-row {
  margin-bottom: 16px;
}

.field-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.field-row select,
.field-row textarea,
.field-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
}

.field-row textarea {
  min-height: 80px;
  resize: vertical;
}

@media (max-width: 1024px) {
  .two-column-layout {
    grid-template-columns: 1fr;
  }
}
.invoice-field-error {
  color: #b91c1c;
  font-size: 12px;
  margin-top: 4px;
}

.invoice-tax-hint {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 12px;
}

.invoice-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  grid-column: 1 / -1;
}

.invoice-site-address-hint {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}

/* Main container */
.add-invoice-page-wrapper {
  /* padding: 24px 32px; */
  background-color: #f9fafb;
  min-height: 180vh;
  font-family: "Inter", sans-serif;
}

/* Page Header Buttons */
.header-actions {
  display: flex;
  gap: 12px;
}

/* Card wrapper */
.invoice-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;

  padding: 0;
  margin-top: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sections */
.invoice-section {
  padding: 24px;
  border-bottom: 1px solid #f3f4f6;
}

.invoice-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
}

/* Grid layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.form-grid.two-cols {
  grid-template-columns: repeat(2, 1fr);
}

/* Creation Mode Radios */
.creation-mode-group {
  display: flex;
  gap: 24px;
  align-items: center;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
}

.radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #2563eb;
}

/* Line Items Table */
.line-items-container {
  overflow: visible; /* Prevents clipping of the HSN dropdown */
  margin-top: 10px;
}

.line-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.line-items-table th {
  background-color: #f9fafb;
  color: #6b7280;
  font-weight: 500;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.line-items-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.line-items-table input {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}

.item-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
}

.line-items-table .cell-check {
  width: 44px;
  text-align: center;
}

.invoice-line-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

.line-items-table .cell-sno {
  width: 40px;
  text-align: center;
}

.line-items-table .cell-type {
  width: 120px;
}

.line-items-table .cell-desc {
  min-width: 200px;
  max-width: 350px;
}

.line-items-table .cell-hsn {
  width: 160px;
}

.line-items-table .cell-hsn-svc {
  min-width: 260px;
  width: 280px;
  vertical-align: top;
  position: relative;
  z-index: 10; /* Ensure it stays above the next rows */
}

.invoice-hsn-svc-wrap {
  min-width: 240px;
  width: 100%;
}

.invoice-hsn-svc-wrap .premium-select-container {
  position: relative;
  z-index: 50; /* High enough to clear table borders and content */
  width: 100%;
}

.invoice-hsn-svc-wrap .premium-select-menu {
  max-height: 240px;
  overflow-y: auto;
}

.line-items-table .cell-qty {
  width: 80px;
}

.line-items-table .cell-uom {
  width: 80px;
}

.line-items-table .cell-rate {
  width: 120px;
}

.line-items-table .cell-discount {
  width: 100px;
}

.line-items-table .cell-tax {
  width: 80px;
}

.line-items-table .cell-amount {
  width: 120px;
  text-align: right;
  font-weight: 500;
}

.line-items-table .cell-action {
  width: 40px;
  text-align: center;
}

.invoice-flow-note {
  margin: 0 0 16px;
  padding: 12px 16px;
  font-size: 13px;
  color: #4b5563;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.invoice-panel {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 20px;
  background: #fafafa;
}

.invoice-source-panel .invoice-source-radios {
  margin-bottom: 16px;
}

.invoice-fetch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.invoice-fetch-grow {
  flex: 1 1;
  min-width: 220px;
}

.invoice-fetch-grow.lightweight {
  max-width: 320px;
}

.invoice-section-hint,
.invoice-section-sub {
  font-size: 12px;
  color: #6b7280;
  margin: 10px 0 0;
  line-height: 1.45;
}

.invoice-field-hint {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0 0;
}



.invoice-input-suffix {
  font-size: 13px;
  color: #6b7280;
  padding: 0 8px;
}

.invoice-display-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invoice-display-value {
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
}

.invoice-line-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.btn-add-item {
  margin-top: 0;
  background: none;
  border: 1px solid #e5e7eb;
  padding: 8px 16px;
  border-radius: 8px;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-remove-selected {
  background: #fff;
  border: 1px solid #fecaca;
  padding: 8px 16px;
  border-radius: 8px;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-remove-selected:hover:not(:disabled) {
  background: #fef2f2;
}

.btn-remove-selected:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-add-item:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.btn-add-item-secondary {
  margin-top: 0;
  background: #fff;
  border: 1px dashed #d1d5db;
  padding: 8px 16px;
  border-radius: 8px;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
}

.btn-add-item-secondary:hover {
  border-color: #9ca3af;
  color: #374151;
}

.invoice-amount-input {
  width: 100%;
  min-width: 72px;
  max-width: 120px;
}

.invoice-amount-manual {
  border-color: #2563eb;
  background: #eff6ff;
}

.invoice-catalog-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.invoice-catalog-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
}

.invoice-catalog-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.invoice-catalog-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.invoice-catalog-modal-close {
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 0 4px;
}

.invoice-catalog-modal-close:hover {
  color: #111827;
}

.invoice-catalog-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.invoice-catalog-hint {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.45;
}

/* Dynamic Catalog Box */
.invoice-catalog-detail-box {
  margin-top: 4px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.catalog-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e2e8f0;
}

.catalog-dynamic-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 12px;
}

.catalog-rate-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.invoice-catalog-modal-footer {
  padding: 12px 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #f3f4f6;
}

.delete-icon {
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s;
}

.delete-icon:hover {
  color: #ef4444;
}

/* Tax Breakdown Section Specifics */
.amount-in-words {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  margin-top: 4px;
}

/* Attachment Dropzone */
.attachment-dropzone {
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  background-color: #f9fafb;
  cursor: pointer;
  transition: all 0.2s;
}

.attachment-dropzone:hover {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.upload-icon {
  width: 32px;
  height: 32px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.upload-text {
  font-size: 14px;
  color: #374151;
}

.upload-text span {
  color: #2563eb;
  font-weight: 600;
}

.upload-subtext {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* Direct invoice: optional append lines from multiple customer SOs (still DIRECT on save) */
.invoice-direct-so-import {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.invoice-direct-so-import-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 8px;
  color: #111827;
}

.invoice-direct-so-import-note {
  margin-bottom: 12px !important;
}

.invoice-direct-so-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}

.invoice-direct-so-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.invoice-direct-so-row:last-child {
  border-bottom: none;
}

.invoice-direct-so-row input {
  margin-top: 2px;
}

.invoice-direct-so-actions {
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid.two-cols {
    grid-template-columns: 1fr;
  }
}

.edit-invoice-page-wrapper {
  background-color: #f9fafb;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
}

/* Main container */
.credit-note-page-wrapper {
    /* padding: 24px 32px; */
    background-color: #f9fafb;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

/* Card wrapper */
.credit-note-form-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    max-height: calc(100vh - 270px);
    overflow-y: auto;
    border-radius: 12px;
    padding: 0;
    margin-top: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sections */
.credit-note-section {
    padding: 16px 24px 0 24px;
    border-bottom: 1px solid #f3f4f6;
}

.credit-note-section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
}

.credit-note-summary-line {
    margin-top: 16px;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
}

/* Grid layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
    gap: 24px;
}

/* Header Buttons */
.header-actions {
    display: flex;
    gap: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
.payment-page-wrapper {
  padding: 0;
  background-color: #f9fafb;
}

.payment-page-wrapper .page-header {
  margin-bottom: 4px;
}

/* Badge Styles for Voucher Types */
.voucher-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.voucher-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.type-receipt {
  background-color: #ecfdf5;
  color: #065f46;
  border-color: #d1fae5;
}
.type-receipt::before { background-color: #10b981; }

.type-journal {
  background-color: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}
.type-journal::before { background-color: #6b7280; }

.type-payment {
  background-color: #fff7ed;
  color: #9a3412;
  border-color: #ffedd5;
}
.type-payment::before { background-color: #f97316; }

.type-contra {
  background-color: #eff6ff;
  color: #1e40af;
  border-color: #dbeafe;
}
.type-contra::before { background-color: #3b82f6; }

/* Table specific overrides if needed */
.standard-table-container {
  margin-top: 0;
}

.action-cols-icons {
  display: flex;
  gap: 12px;
  color: #9ca3af;
  cursor: pointer;
}

.action-cols-icons svg:hover {
  color: #374151;
}

/* Standard Table Actions */
.table-actions-container {
  display: flex;
  align-items: center;
}

.action-btns {
  display: flex;
  gap: 8px;
}

.table-edit-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #667085;
  transition: all 0.2s;
}

.table-edit-btn:hover {
  background-color: #f2f4f7;
  color: #101828;
}

/* Summary Cards Styling */
.payment-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: -10px;
}

.payment-summary-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.payment-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.payment-summary-label {
  font-size: 13px;
  font-weight: 500;
  color: #667085;
  margin-bottom: 8px;
}

.payment-summary-value {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
}

.payment-summary-value.negative {
  color: #d92d20;
}

.payment-summary-value.positive {
  color: #039855;
}

/* Tabs Styling */
.payment-tabs-container {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  margin-bottom: 0px;
  border-bottom: 1px solid #eaecf0;
  padding-bottom: 0px;
}

.payment-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #667085;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.payment-tab:hover {
  color: #101828;
}

.payment-tab.active {
  color: #1570ef;
}

.payment-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1570ef;
}

.table-edit-btn.delete:hover {
  background-color: #fef3f2;
  color: #d92d20;
}


/* Main container */
.receipt-entry-page-wrapper {
    /* padding: 24px 32px; */
    background-color: #f9fafb;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

/* Card wrapper */
.receipt-form-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    max-height: calc(100vh - 270px);
    overflow-y: auto;
    border-radius: 12px;
    padding: 0;
    margin-top: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sections */
.receipt-section {
    padding: 20px 24px 10px;
    border-bottom: 1px solid #f3f4f6;
}

.receipt-section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Grid layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px 24px;
    gap: 12px 24px;
}

.form-grid.two-cols {
    grid-template-columns: repeat(2, 1fr);
}

/* Toggle Switch Styling */
.field-with-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    height: 42px;
}

.field-with-toggle span {
    font-size: 14px;
    color: #374151;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #2563eb;
}

input:checked+.slider:before {
    transform: translateX(22px);
}

/* Allocation Table */
.allocation-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.allocation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.allocation-table th {
    background-color: #f9fafb;
    color: #6b7280;
    font-weight: 500;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.allocation-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.allocation-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}

.allocation-table input[type="text"],
.allocation-table input[type="number"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
}

/* Radio Group */
.radio-group {
    display: flex;
    gap: 24px;
    align-items: center;
    height: 42px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

/* Summary Section */
.summary-grid {
    max-width: 400px;
    margin-left: 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #4b5563;
}

.summary-row.total-settled {
    font-weight: 600;
    color: #111827;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px;
    padding-top: 12px;
}

.summary-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 12px 0;
}

.summary-row.unallocated {
    font-weight: 600;
    color: #059669; /* Green for surplus */
    font-size: 15px;
}

.summary-row.carry-advance {
    margin-top: 16px;
}

/* Settlement Info */
.settlement-info {
    background-color: #fff7ed;
    border: 1px solid #ffedd5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.shortfall-item {
    font-size: 14px;
    color: #9a3412;
    margin-bottom: 8px;
}

.shortfall-total {
    font-weight: 600;
    color: #c2410c;
    font-size: 15px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #fed7aa;
}

/* Responsive */
@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .form-grid,
    .form-grid.two-cols {
        grid-template-columns: 1fr;
    }

    .summary-grid {
        max-width: 100%;
    }
}
/* Main container */
.payment-entry-page-wrapper {
    /* padding: 24px 32px; */
    background-color: #f9fafb;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

/* Card wrapper */
.payment-form-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    max-height: calc(100vh - 270px);
    overflow-y: auto;
    padding: 0;
    margin-top: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sections */
.payment-section {
    padding: 24px;
    border-bottom: 1px solid #f3f4f6;
}

.payment-section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 24px;
}

/* Grid layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
    gap: 24px;
}

/* Radio Group */
.radio-group {
    display: flex;
    gap: 24px;
    align-items: center;
    height: 42px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

/* Responsive */
@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* Main container */
.view-voucher-page-wrapper {
    padding: 0;
    background-color: #f9fafb;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

.view-voucher-loading,
.view-voucher-error {
    padding: 80px;
    text-align: center;
    font-size: 16px;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin: 24px;
}

/* Card wrapper */
.view-voucher-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    max-height: calc(100vh - 270px);
    overflow-y: auto;
    margin-top: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Grid Layout for Details */
.voucher-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 32px;
    gap: 32px;
    align-items: start;
}

/* Summary Layout */
.voucher-summary-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eaecf0;
    margin-bottom: 24px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
}

.summary-label {
    color: #6b7280;
    font-weight: 500;
    font-size: 14px;
}

.summary-value {
    color: #101828;
    font-weight: 500;
    text-align: right;
    font-size: 15px;
}

.status-badge-receipt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #d1fae5;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge-receipt::before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #10b981;
    border-radius: 50%;
}

/* General Section Styles */
.voucher-view-section {
    margin-bottom: 0;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
}

/* Table Styling */
.view-voucher-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.view-voucher-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.view-voucher-table th {
    background-color: #f9fafb;
    color: #6b7280;
    font-weight: 500;
    text-align: left;
    padding: 12px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.view-voucher-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
}

.view-voucher-table tr:last-child td {
    border-bottom: none;
}

/* Settlement Note */
.settlement-note-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #4b5563;
    margin-top: 16px;
}

/* TDS Section Specifics */
.tds-details-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eaecf0;
}

.tds-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.tds-label {
    color: #6b7280;
}

.tds-value {
    color: #111827;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .voucher-details-grid {
        grid-template-columns: 1fr;
    }
}

/* Main container */
.contra-entry-page-wrapper {
    /* padding: 24px 32px; */
    background-color: #f9fafb;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

.voucher-api-note {
    margin: 0 0 20px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: #374151;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.voucher-api-note code {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.7);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Card wrapper */
.contra-form-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    max-height: calc(100vh - 350px);
    padding: 32px;
    margin-top: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Grid layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
    gap: 24px;
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* Main container */
.journal-entry-page-wrapper {
    /* padding: 24px 32px; */
    background-color: #f9fafb;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

.voucher-api-note {
    margin: 0 0 20px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: #374151;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.voucher-api-note code {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.7);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Card wrapper */
.journal-form-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    max-height: calc(100vh - 350px);
    padding: 32px;
    margin-top: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Grid layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
    gap: 24px;
}

.journal-form-card .grid-span-2 {
    grid-column: span 2;
}

@media (max-width: 1024px) {
    .journal-form-card .grid-span-2 {
        grid-column: span 1;
    }
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
.ledger-page-wrapper {
  padding: 0;
  background-color: #f9fafb;
}

.standard-table-container {
  margin-top: 5px;
}

/* Custom alignment for financial columns if needed */
.text-right {
  text-align: right;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* Summary Cards Styling */
.ledger-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.ledger-summary-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.ledger-summary-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.ledger-summary-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 8px;
}

.ledger-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

/* Table Controls Styling */
.ledger-table-controls {
  padding: 0 0 16px 0;
}


.ledger-search-input {
  transition: all 0.2s;
}

.ledger-search-input:focus {
  border-color: #1570ef !important;
  box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
}

.filter-toggle-btn:hover {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
}



.ledger-filter-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  margin-top: 8px;
  background-color: #fff;
  min-width: 320px;
}

/* Main container */
.ledger-edit-page-wrapper {
  /* padding: 24px 32px; */
  background-color: #f9fafb;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
}

/* Card wrapper */
.ledger-form-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  max-height: calc(100vh - 340px);
  overflow-y: auto;
  margin-top: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sections */
.ledger-section {
  padding: 24px;
  border-bottom: 1px solid #f3f4f6;
}

.ledger-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 24px;
}

/* Grid layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.grid-span-2 {
  grid-column: span 2;
}

/* Radio Group Styling */
.radio-group {
  display: flex;
  gap: 24px;
  align-items: center;
  height: 42px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

/* TDS Section specialized checkbox */
.checkbox-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
}

.checkbox-field input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

/* Responsive */
@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .grid-span-2 {
    grid-column: span 1;
  }
}
.view-ledger-page-wrapper {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  color: #111827;
  padding: 24px;
}

/* PageHeader override or companion styles */
.view-ledger-page-wrapper .page-header {
  margin-bottom: 20px;
}

/* Section Header Styles */
.section-header-title {
  font-size: 13px;
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 32px 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-header-title::after {
  content: "";
  flex: 1 1;
  height: 1px;
  background: #e5e7eb;
}

/* Date Range Controls */
.view-ledger-controls {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.view-ledger-controls button {
  margin-top: 0 !important;
}

.view-ledger-controls .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1;
  max-width: 200px;
}

.view-ledger-controls .view-ledger-email-field {
  max-width: 320px;
  min-width: 240px;
  flex: 2 1;
}

.standard-input {
  height: 44px;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #101828;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.standard-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.ledger-statement-period-line {
  font-size: 14px;
  color: #374151;
  margin: 0 0 8px 0;
}

.ledger-statement-ref-link {
  background: none;
  border: none;
  padding: 0;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
  text-align: left;
}

.ledger-statement-ref-link:hover {
  color: #1d4ed8;
}

.view-ledger-controls .form-field label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.generate-btn-field {
    flex: 0 0 auto !important;
    min-width: 100px;
}

.generate-btn-field .primary-button {
    height: 44px;
    padding: 0 24px;
}

/* Party Details Card */
.party-details-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-gap: 48px;
  gap: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.party-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-row-item {
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.label-text {
  font-size: 14px;
  color: #6b7280;
  min-width: 100px;
  font-weight: 500;
}

.value-text {
  font-size: 14px;
  color: #111827;
  font-weight: 600;
  flex: 1 1;
}

/* Summary Cards Styling (Standardized) */
.ledger-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

.ledger-summary-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ledger-summary-card.highlight-card {
    background-color: #f8fafc;
}

.ledger-summary-card:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.ledger-summary-label {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 4px;
}

.ledger-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ledger-summary-value .type-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

/* Transaction History Table Container */
.view-ledger-page-wrapper .standard-table-container {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/*
 * Layout.css gives .standard-table-container { flex: 1; min-height: 0; overflow: hidden } for full-page lists.
 * On View Ledger (long document + scroll), that flex child can collapse and hide the entire DataTable (no thead/rows).
 * Reset to content-sized block and restore normal table tbody layout (Layout uses display:block on tbody for other screens).
 */
.view-ledger-page-wrapper .view-ledger-statement-table-wrap.standard-table-container {
  flex: 0 0 auto;
  min-height: 240px;
  overflow: visible;
  display: block;
  width: 100%;
}

.view-ledger-page-wrapper .view-ledger-statement-table-wrap .data-table tbody {
  display: table-row-group;
  max-height: none;
  overflow: visible;
}

.view-ledger-page-wrapper .view-ledger-statement-table-wrap .data-table thead {
  display: table-header-group;
}

.view-ledger-page-wrapper .view-ledger-statement-table-wrap .data-table tbody tr {
  display: table-row;
}

/* Closing Balance Footer */
.closing-balance-footer {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 32px 0;
  font-weight: 700;
  color: #15803d;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.closing-balance-footer.debtor {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.footer-description {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
}



/* Responsive Overrides */
@media (max-width: 1024px) {
  .party-details-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .ledger-summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .view-ledger-controls {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .ledger-summary-cards {
    grid-template-columns: 1fr;
  }
}
/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }

  .view-ledger-page-wrapper .page-header-actions {
    display: none !important;
  }

  /* Hide navigation and UI controls */
  .sidebar, 
  .topbar, 
  .hide-on-print,
  .view-ledger-header-actions,
  .breadcrumb-container {
    display: none !important;
  }

  /* Reset layout for print */
  .view-ledger-page-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
  }

  .standard-page-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Ensure text is black for clarity */
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Adjust section titles for print */
  .section-header-title {
    margin-top: 20px !important;
    color: #000 !important;
  }

  /* Ensure summary cards look good on paper */
  .ledger-summary-card {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }

  .ledger-summary-value {
    color: #000 !important;
  }

  /* Force table to full width */
  .standard-table-container {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }

  /* ID specific rule as requested */
  #printable-section {
    width: 100% !important;
  }
}

.coa-page-wrapper {
  padding: 0;
  background-color: #f9fafb;
}

.standard-table-container {
  margin-top: 24px;
}

/* Badge System */
.badge-base {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Type Badges */
.badge-group {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.badge-group .badge-dot { background-color: #22c55e; }

.badge-ledger {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.badge-ledger .badge-dot { background-color: #3b82f6; }

/* Status Badges */
.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-active .status-dot { background-color: #22c55e; }
.status-inactive .status-dot { background-color: #f97316; }

/* Branch Badges */
.badge-branch {
    background-color: #f9fafb;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}
.badge-branch-mum .badge-dot { background-color: #6366f1; }
.badge-branch-blr .badge-dot { background-color: #ec4899; }
.badge-branch-del .badge-dot { background-color: #f59e0b; }
.badge-branch-hyd .badge-dot { background-color: #3b82f6; }
.badge-branch-all .badge-dot { background-color: #3b82f6; }


.header-actions {
  display: flex;
  gap: 12px;
}

/* Main container */
.add-account-page-wrapper {
    background-color: #f9fafb;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

/* Card wrapper */
.add-account-card {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-top: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Two-column grid; full-width rows for radios / checkboxes */
.coa-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 24px;
    gap: 24px;
    align-items: start;
}

.coa-form-span-2 {
    grid-column: 1 / -1;
}

.coa-radio-row {
    flex-wrap: wrap;
    min-height: 42px;
    height: auto;
}

/* Custom Controls */
.radio-group {
    display: flex;
    gap: 24px;
    align-items: center;
    min-height: 42px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

.radio-option input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}

.coa-field-hint {
    margin: -8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4b5563;
}

.coa-field-hint code {
    font-size: 12px;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .coa-form-grid {
        grid-template-columns: 1fr;
    }

    .coa-form-span-2 {
        grid-column: 1;
    }
}

/* Main container — document-style finance page */
.view-account-page-wrapper {
    background-color: #f9fafb;
    font-family: "Inter", sans-serif;
    color: #111827;
    padding: 24px;
    overflow-y: auto;
}

/* Top detail card */
.coa-head-detail-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 28px;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.coa-detail-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px 0;
}

.coa-detail-subsection-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin: 24px 0 12px 0;
}

.coa-head-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px 48px;
    gap: 12px 48px;
}

.coa-head-detail-grid--muted .coa-detail-value {
    color: #4b5563;
    font-weight: 500;
}

@media (max-width: 768px) {
    .coa-head-detail-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.coa-head-detail-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.coa-detail-info-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.coa-detail-label {
    color: #6b7280;
    font-weight: 500;
    min-width: 120px;
}

.coa-detail-value {
    color: #111827;
    font-weight: 600;
    text-align: right;
    flex: 1 1;
}

/* Used by ledgers */
.coa-used-ledgers-heading {
    font-size: 13px;
    font-weight: 700;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 28px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.coa-used-ledgers-heading::after {
    content: "";
    flex: 1 1;
    height: 1px;
    background: #e5e7eb;
}

.coa-used-ledgers-sub {
    margin: 0 0 16px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
    max-width: 820px;
}

.coa-used-ledgers-loading,
.coa-used-ledgers-empty {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #6b7280;
}

.coa-used-ledgers-empty {
    padding: 20px;
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
}

/*
 * Avoid global Layout.css .standard-table-container { flex:1; min-height:0 } collapsing this table
 * on long document pages (same pattern as View Ledger statement).
 */
.view-account-page-wrapper .coa-used-ledgers-table-wrap.standard-table-container {
    flex: 0 0 auto;
    min-height: 200px;
    overflow: visible;
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.view-account-page-wrapper .coa-used-ledgers-table-wrap .data-table tbody {
    display: table-row-group;
    max-height: none;
    overflow: visible;
}

.view-account-page-wrapper .coa-used-ledgers-table-wrap .data-table thead {
    display: table-header-group;
}

.view-account-page-wrapper .coa-used-ledgers-table-wrap .data-table tbody tr {
    display: table-row;
}

.coa-ledger-name-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    text-align: left;
}

.coa-ledger-name-link:hover {
    color: #1d4ed8;
}

.coa-ledger-name-static {
    color: #374151;
}

/* Footer — edit COA only */
.coa-detail-footer-actions {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.coa-detail-footer-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
    max-width: 560px;
}

.view-bill-page-wrapper {
    background-color: #f9fafb;
    font-family: "Inter", sans-serif;
}

.view-bill-content {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Info Grid (Top 2x2) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px;
}

.info-card {
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: #101828;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaecf0;
}

.info-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.info-label {
    font-size: 14px;
    color: #475467;
    white-space: nowrap;
}

.info-value {
    font-size: 14px;
    font-weight: 500;
    color: #101828;
    text-align: right;
}

/* Flex row for Items and Summary */
.items-summary-row {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #101828;
    margin: 0 0 16px 0;
}

/* Summary Card */
.summary-card {
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #475467;
}

.net-payable {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #eaecf0;
    font-weight: 700;
    color: #2563eb;
    font-size: 16px;
}

/* Tables */
.view-bill-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    overflow: hidden;
}

.view-bill-table th {
    background-color: #f9fafb;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #475467;
    text-align: left;
    border-bottom: 1px solid #eaecf0;
}

.view-bill-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: #344054;
    border-bottom: 1px solid #eaecf0;
}

.center-text {
    text-align: center !important;
}

.right-text {
    text-align: right !important;
}

.mini-table th,
.mini-table td {
    padding: 8px 12px;
    font-size: 13px;
}

/* Ledger Actions */
.ledger-actions {
    margin-top: 16px;
    display: flex;
    gap: 12px;
}

/* Icons and Interactivity */
.action-icon {
    color: #667085;
    cursor: pointer;
    font-size: 18px;
    transition: color 0.2s;
}

.action-icon:hover {
    color: #2563eb;
}

/* Footer Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 32px;
    gap: 32px;
}

/* Document Card */
.document-card {
    background-color: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.doc-info {
    display: flex;
    gap: 12px;
    align-items: center;
}

.doc-icon-wrapper {
    width: 40px;
    height: 40px;
    background-color: #fef2f2;
    color: #b91c1c;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.doc-details {
    display: flex;
    flex-direction: column;
}

.doc-name {
    font-size: 14px;
    font-weight: 500;
    color: #101828;
}

.doc-meta {
    font-size: 12px;
    color: #667085;
}

.doc-actions {
    display: flex;
    gap: 8px;
}

.doc-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
}

.doc-btn.btn-secondary {
    background-color: #ffffff;
    border-color: #d0d5dd;
    color: #344054;
}

.doc-btn.btn-primary {
    background-color: #2563eb;
    color: #ffffff;
}

/* Remarks Section */
.remarks-view-section {
    width: 100%;
}

.remarks-box {
    background: #ffffff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    padding: 16px;
    font-size: 14px;
    color: #475467;
    line-height: 1.5;
    min-height: 80px;
}

/* Loading & Error States */
.loading-container, .error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    font-size: 18px;
    color: #667085;
}

/* Responsive */
@media (max-width: 1024px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}
/* ── Debit Note Wrapper ── */
.debit-note-wrapper {
  background-color: #f9fafb;
  width: 100%;
}

.debit-note-form-container {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.debit-note-header-actions {
  display: flex;
  gap: 12px;
}

.credit-note-section {
  background-color: #ffffff;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  padding: 24px;
}

.dn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
    gap: 24px;
}

.dn-full-row {
    grid-column: span 3;
}

@media (max-width: 1024px) {
  .dn-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .dn-grid {
    grid-template-columns: 1fr;
  }
}

.view-cn-page-wrapper {
  padding: 0;
  background-color: #f9fafb;
}

.view-cn-loading,
.view-cn-error {
  padding: 40px;
  text-align: center;
  font-size: 16px;
  color: #6b7280;
}

.view-cn-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-top: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.view-cn-section {
  margin-bottom: 32px;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 24px;
}

.view-cn-section:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

.view-cn-section .section-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.view-cn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.view-cn-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.view-cn-item.full-width {
  grid-column: span 4;
}

.view-cn-item label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.view-cn-item span {
  font-size: 14px;
  color: #111827;
}

.view-cn-item .amount-text {
  font-weight: 600;
  color: #2563eb;
}

.view-cn-item .link-text {
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
}

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  width: -webkit-fit-content;
  width: fit-content;
}

.cn-status-issued {
  background-color: #ecfdf5;
  color: #059669;
}

.cn-status-pending {
  background-color: #fffbeb;
  color: #d97706;
}

.audit-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed #f3f4f6;
}

.audit-label {
  font-size: 13px;
  color: #6b7280;
}

.audit-value {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .view-cn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .view-cn-grid {
    grid-template-columns: 1fr;
  }
  .view-cn-item.full-width {
    grid-column: span 1;
  }
}


/*# sourceMappingURL=main.dd598257.css.map*/