.drawer-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    background: rgba(15, 18, 33, 0.35); /* softer overlay on dark bg */
    opacity: 0; /* Start hidden */
    transition: opacity 0.5s ease;
    z-index: 5000; /* Ensure it overlays other content */
}
.drawer-container.side-pull {
    align-items: flex-start; /* Align content to the top */
    justify-content: flex-end; /* Align content to the right */
}

.drawer-content {
    width: 100%;
    max-height: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--bs-tertiary-bg); /* main cards are white */
    border-radius: 15px 15px 0 0;
    border-top:2px solid var(--bs-border-color);
    transition: max-height 0.3s ease;
    /* Soft UI style shadow */
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    -webkit-transition: max-height 0.3s ease;
    -moz-transition: max-height 0.3s ease;
    -ms-transition: max-height 0.3s ease;
    -o-transition: max-height 0.3s ease;
    display: flex !important;
    flex-direction: column !important;
}
.drawer-content.side-pull {
    max-height: none;
    max-width: 0;
    height: 100%;
    width: 40%;
    border-radius: 15px;
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05); /* lateral soft card */
    transition: max-width 0.3s ease-in-out;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    -webkit-transition: max-width 0.3s ease-in-out;
    -moz-transition: max-width 0.3s ease-in-out;
    -ms-transition: max-width 0.3s ease-in-out;
    -o-transition: max-width 0.3s ease-in-out;
    border-top:0px;
    border-left:2px solid var(--bs-border-color);
}
.drawer-content.innerSmall {
    width: 25%;
}
.drawer-content.innerLarge {
    width: 38%;
}

/* Portrait mode for tablets */
@media only screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
    .drawer-content.side-pull {
        width: 70% !important;
    }
    .drawer-content.side-pull.newStatus {
        width: 50% !important;
    }
}

/* Landscape mode for tablets */
@media only screen and (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) {
    .drawer-content.side-pull {
        width: 50% !important;
    }
    .drawer-content.side-pull.newStatus {
        width: 25% !important;
    }
}

/* iPad Pro Portrait Mode */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .drawer-content.side-pull {
        width: 70% !important;
    }
    .drawer-content.side-pull.newStatus {
        width: 50% !important;
    }
}

/* iPad Pro Landscape Mode */
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .drawer-content.side-pull {
        width: 50% !important;
    }
    .drawer-content.side-pull.newStatus {
        width: 25% !important;
    }
}

.drawer-handle {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 5px;
    background-color: #e9ecef; /* light neutral 200 */
    border-radius: 2px;
    z-index: 1000;
}

.drawer-header {
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    font-size: x-large;
}

/* hover/active left as transparent per your request */
#drawer-cancel-button:hover,
#drawer-cancel-button:active {
    background-color: transparent;
    color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#drawer-cancel-button > i {
    display: revert;
    padding: 0px;
}

.drawer-title {
    flex-grow: 1;
    text-align: center;
}

.drawer-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: scroll;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow-x: clip;
}
.drawer-body label {
    font-size: larger;
}
.drawer-body-full {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding: 20px;
    overflow-x: clip;
}
.body-camera {
    height: calc(100% - 160px) !important;
}
.drawer-body > div {
    width: 100%;
    height: 100%;
    overflow-wrap: anywhere;
    overflow-y: scroll;
}
.drawer-header > div {
    padding-top: 0px;
    padding-left: 0px;
}
.drawer-body input[type="text"],
.drawer-body-full input[type="text"] {
    box-sizing: border-box;
}

.iphone-style {
    justify-content: space-between;
    text-align: left;
}
.drawer-header .iphone-style > div {
    padding-left: 0px;
}

.android-style {
    justify-content: center;
    text-align: center;
}
.drawer-body.side-pull--DISABLED {
    height: calc(100% - 103px);
}
.drawer-body.w-footer--DISABLED {
    height: calc(100% - 203px) !important;
}
.drawer-body.w-footer.no-sub--DISABLED {
    height: calc(100% - 176px) !important;
}
.drawer-body-full.w-footer--DISABLED {
    height: calc(100% - 100px) !important;
}
.drawer-body.android-style--DISABLED {
    height: calc(100% - 103px);
}

.dark-mode .drawer-header {
    background-color: inherit;
}
.dark-mode .drawer-body {
    background-color: inherit;
    color: #e9ecef; /* light text in dark mode */
}

/* Dark mode coloring for drawer background */

.dark-mode .qdvTabs {
    background-color: #3f474e;
}
.qdvTabs {
    background-color: #e9ecef; /* light neutral 200 for tabs */
}
.title {
    color: #000000;
}
.dark-mode .title {
    color: #ffffff;
}
.dark-mode .subtitle {
    color: #adb5bd; /* muted neutral */
}

#drawer-cancel-button {
    padding-right: 0px;
}
.dark-mode #drawer-cancel-button > i {
    color: #8392ab; /* secondary */
}

.drawer-footer {
    bottom: 0px;
    max-height: 0px;
    width: fit-content;
    -webkit-transition: max-height 0.3s ease;
    -moz-transition: max-height 0.3s ease;
    -ms-transition: max-height 0.3s ease;
    -o-transition: max-height 0.3s ease;
}

.successDrawerTitle {
    color: #000000;
    font-size: x-large;
}
.successDrawerSub {
    color: #000000;
}
.dark-mode .successDrawerSub,
.dark-mode .successDrawerTitle {
    color: #17c1e8; /* info accent in dark mode */
}

.camera-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #344767; /* align with dark header tone */
    z-index: 1;
}

.camera-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
}
.camera-view video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.capture-overlay {
    position: absolute;
    background-color: rgba(15, 18, 33, 0.7);
    z-index: 1;
}
.top, .bottom {
    left: 0;
    right: 0;
    height: 25%;
}
.top {
    top: 0;
}
.bottom {
    bottom: 0;
}
.left, .right {
    top: 25%;
    bottom: 25%;
    width: 30%;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.capture-area {
    position: absolute;
    top: 25%;
    left: 30%;
    right: 30%;
    bottom: 25%;
    border: 2px dashed #f8f9fa;
    box-sizing: border-box;
    z-index: 2;
}
.capture-button {
    width: fit-content;
    height: calc(100% + 30px);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    font-size: large;
    outline: 2px dashed #82d616; /* success */
    outline-offset: 10px;
}
.capture-button:active {
    outline-offset: 5px !important;
}
.captured-image {
    max-width: 50%;
    height: auto;
    border-radius: 10px;
}
.button-container {
    display: flex;
    bottom: 0px;
    padding: 10px;
    padding-top: 0px;
    padding-bottom: 20px;
    justify-content: center;
    align-items: center;
}
.confirm-swal-2060 {
    z-index: 2060 !important;
}
.drawer-br0 {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
}

.flashable {
  position: relative;
}

.flashable::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff; /* flash color */
  opacity: 0;
  pointer-events: none;
}

.flashable.flash::after {
  animation: flash-bg 250ms ease-out;
}

@keyframes flash-bg {
  0%   { opacity: 0; }
  30%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .flashable.flash::after { animation-duration: 1ms; }
}