.sora-<weight> {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
        "wght" <weight>;
}

/* html, body {
  touch-action: manipulation !important;
  -webkit-touch-callout: none !important; 
  -webkit-user-select: none !important; 
} */

/* html, body {
  width: 100%;
  height: 100%;
} */
p,
h1, h2, h3, h4, h5, h6,
span,
label,
small,
strong,
div,
em,
b,
i {
    user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    -moz-user-select: none !important;
}

p,
h1, h2, h3, h4, h5, h6,
span,
label,
small,
strong,
em,
b,
i {
    margin: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings:
        "wght" 600;
}

p, span, label, small, strong, em, b, i {
    font-family: "Sora", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    /* font-variation-settings:
        "wght" 400; */
}

button, a {
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important; /* cegah menu konteks pada sentuhan lama */
    -webkit-user-select: none !important; /* cegah seleksi teks pada Safari */
    cursor: pointer !important;
}

button, input, select, textarea {
    font-family: "Sora", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wght" 400;
}

::placeholder {
    color: var(--grayscale-300);
    opacity: 1;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--grayscale-300);
    opacity: 1;
}
img {
    object-fit: cover;
}

img:not([src]):not([srcset]),
img[src=""],
img[src="null"],
img[src="undefined"],
img[src="about:blank"] {
    content: url('assets/img/crash-image.png');
}

.text-muted {
    color: var(--grayscale-500) !important;
}

.text-primary {
    color: var(--primary-500) !important;
}

.paragraph {
    font-size: 12px !important;
    color: var(--grayscale-500) !important;
    line-height: 1.5 !important;
    display:flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.paragraph b {
    color: var(--grayscale-700) !important;
    font-weight: 700 !important;
}

.row {
    margin: 0px !important;
    padding: 0px !important;
}

.h-40 {
  height: 40% !important;
}

.h-60 {
  height: 60% !important;
}

.text-gray-900 {
    color: var(--grayscale-900) !important;
}

.text-gray-700 {
    color: var(--grayscale-700) !important;
}

.text-gray-500 {
    color: var(--grayscale-500) !important;
}

.text-gray-400 {
    color: var(--grayscale-400) !important;
}

.text-gray-300 {
    color: var(--grayscale-300) !important;
}

.card.card-gray {
    border: solid 1px var(--grayscale-300) !important;
    border-radius: 16px !important;
}


.bg-white-primary {
    background-color: var(--background) !important;
}

/* Navbar Styling */

#main-content {
    transition: all 0.3s ease-in-out;
}

#sidebar {
    transition: all 0.4s ease-in-out;
}

.row-h-1 { height: 8.333%; }
.row-h-2 { height: 16.666%; }
.row-h-3 { height: 25%; }
.row-h-4 { height: 33.333%; }
.row-h-5 { height: 41.666%; }
.row-h-6 { height: 50%; }
.row-h-12 { height: 100%; }


/* Hide scrollbar for all elements */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.btn-primary,
.swal2-confirm {
    background: var(--primary-500) !important; /* coklat */
    color: #fff !important;
    opacity: 1 !important;
    font-size: 16px;
    padding: 12px 20px !important;
    border-radius: 8px;
}

.btn-primary:hover {
    background: var(--primary-300) !important; /* coklat */
}

.btn-primary-white,
.swal2-cancel {
    border: solid 1px var(--primary-500) !important;
    color: var(--primary-500) !important;
    background: var(--primary-white) !important;
    padding: 12px 20px !important;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary-white:hover {
    background: var(--primary-100) !important;
    border: solid 1px var(--primary-500) !important;
    color: var(--primary-700) !important;
    transition: all 0.3s ease;
}

.btn-primary-white.active {
    background: var(--primary-100) !important;
    border: solid 1px var(--primary-500) !important;
    color: var(--primary-700) !important;
    transition: all 0.3s ease;
}

.btn-primary-green {
    border: solid 1px var(--green-500) !important;
    color: var(--primary-white) !important;
    background: var(--green-500) !important;
    padding: 12px 20px !important; 
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary-danger,
.swal2-deny {
    border: solid 1px var(--red-500) !important;
    color: var(--primary-white) !important;
    background: var(--red-500) !important;
    padding: 12px 20px !important;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary-danger:hover {
    background: var(--red-300);
    transition: all 0.3s ease;
}

.disabled {
    background-color: var(--grayscale-300) !important;
    color: var(--grayscale-500) !important;
    border: none !important;
    cursor: not-allowed !important;
}

.form-control {
    border: 1px solid var(--grayscale-300) !important;
    background: var(--primary-white) !important;
    color: var(--grayscale-900) !important;
    padding: 12px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    transition: border-color 0.3s ease;
}

.form-control input,
.form-control textarea,
.form-control select {
    border: 1px solid var(--grayscale-300) !important;
    background: var(--primary-white) !important;
    color: var(--grayscale-900) !important;
    padding: 12px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    transition: border-color 0.3s ease;
}

.form-control input:focus,
.form-control textarea:focus,
.form-control select:focus {
    border: solid 1px var(--primary-900); /* coklat */
    background: var(--primary-100);
    box-shadow: 0 0 0 3px rgba(92, 51, 23, 0.2); /* coklat */
    outline: none;
}
input:disabled::placeholder,
textarea:disabled::placeholder,
select:disabled::placeholder {
    color: var(--grayscale-100);
    opacity: 1;
}

input:disabled,
textarea:disabled,
select:disabled {
    background: var(--grayscale-300) !important;
    cursor: not-allowed;
}

.form-control.is-invalid {
    border: solid 1px var(--red-500) !important;
}


@media (max-width: 864px) {
    
    .btn-primary {
        font-size: 14px;
        padding: 10px 16px;
    }
}

/* Landscape Optimization */
@media (orientation: landscape) {
    body.pwa-mode {
        overflow: hidden;
    }
    
    .container-fluid {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* Prevent portrait mode styling */
@media (orientation: portrait) {
    body.pwa-mode::before {
        content: "Please rotate your device to landscape mode";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.9);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        z-index: 9999;
    }
}