/* Standard Tailwind classes missing from Cleopatra's purged style.css */
.ml-auto {
    margin-left: auto !important;
}
.mr-auto {
    margin-right: auto !important;
}
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
.mr-2 {
    margin-right: 0.5rem !important;
}
.mr-3 {
    margin-right: 0.75rem !important;
}
.mr-4 {
    margin-right: 1rem !important;
}
.my-8 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}
.mb-8 {
    margin-bottom: 2rem !important;
}
.mt-8 {
    margin-top: 2rem !important;
}
.pt-8 {
    padding-top: 2rem !important;
}
.pt-5 {
    padding-top: 1.25rem !important;
}
.pt-6 {
    padding-top: 1.5rem !important;
}
.pb-6 {
    padding-bottom: 1.5rem !important;
}
.p-2 {
    padding: 0.5rem !important;
}
.p-2\.5 {
    padding: 0.625rem !important;
}
.p-4 {
    padding: 1rem !important;
}
.p-6 {
    padding: 1.5rem !important;
}
.pl-8 {
    padding-left: 2rem !important;
}

/* Grid & Flex Utilities for layout extensions */
.grid {
    display: grid !important;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .lg\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }
}

/* Spacing & Gaps */
.gap-2 {
    gap: 0.5rem !important;
}
.gap-3 {
    gap: 0.75rem !important;
}
.gap-4 {
    gap: 1rem !important;
}
.gap-5 {
    gap: 1.25rem !important;
}
.gap-6 {
    gap: 1.5rem !important;
}
.gap-8 {
    gap: 2rem !important;
}

.space-y-3 > * + * {
    margin-top: 0.75rem !important;
}
.space-y-4 > * + * {
    margin-top: 1rem !important;
}
.space-y-5 > * + * {
    margin-top: 1.25rem !important;
}
.space-y-6 > * + * {
    margin-top: 1.5rem !important;
}

/* Width & Height Utilities */
.w-5 {
    width: 1.25rem !important;
    height: 1.25rem !important;
}
.h-5 {
    height: 1.25rem !important;
    width: 1.25rem !important;
}
.w-16 {
    width: 4rem !important;
}
.h-16 {
    height: 4rem !important;
}
.w-28 {
    width: 7rem !important;
}
.h-28 {
    height: 7rem !important;
}

/* Monochrome Theme Color & Border Utilities */
.bg-zinc-900 {
    background-color: #18181b !important;
}
.bg-zinc-800 {
    background-color: #27272a !important;
}
.bg-zinc-700 {
    background-color: #3f3f46 !important;
}
.bg-zinc-100 {
    background-color: #f4f4f5 !important;
}
.bg-zinc-50 {
    background-color: #fafafa !important;
}

.text-zinc-900 {
    color: #18181b !important;
}
.text-zinc-800 {
    color: #27272a !important;
}
.text-zinc-700 {
    color: #3f3f46 !important;
}
.text-zinc-500 {
    color: #71717a !important;
}
.text-zinc-400 {
    color: #a1a1aa !important;
}
.text-zinc-300 {
    color: #d4d4d8 !important;
}
.text-zinc-200 {
    color: #e4e4e7 !important;
}
.text-zinc-100 {
    color: #f4f4f5 !important;
}

.border-zinc-900 {
    border-color: #18181b !important;
}
.border-zinc-800 {
    border-color: #27272a !important;
}
.border-zinc-300 {
    border-color: #d4d4d8 !important;
}
.border-zinc-200 {
    border-color: #e4e4e7 !important;
}
.border-zinc-100 {
    border-color: #f4f4f5 !important;
}
.border-l-4 {
    border-left-width: 4px !important;
}
.border-4 {
    border-width: 4px !important;
}

/* Shadows & Borders */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.shadow-md {
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
.shadow-lg {
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}
.rounded-lg {
    border-radius: 0.5rem !important;
}
.rounded-full {
    border-radius: 9999px !important;
}

/* Primary Brand Theme Overrides (#268ea6 & #1b6b7e) */
.btn-bs-primary,
.btn-primary {
    background-color: #268ea6 !important;
    border-color: #268ea6 !important;
    color: #ffffff !important;
    font-family: "Roboto Slab", serif !important;
    font-weight: 700 !important;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease !important;
}
.btn-bs-primary:hover,
.btn-primary:hover {
    background-color: #1b6b7e !important;
    border-color: #1b6b7e !important;
    color: #ffffff !important;
}

.bg-primary-theme {
    background-color: #268ea6 !important;
}
.text-primary-theme {
    color: #268ea6 !important;
}
.border-primary-theme {
    border-color: #268ea6 !important;
}

/* Custom Form Input Helper Styling */
.form-control-custom {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid #d4d4d8 !important;
    background-color: #f9f9f9 !important;
    border-radius: 6px !important;
    font-size: 0.875rem !important;
    color: #111827 !important;
    font-family: "Roboto Slab", serif !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}
.form-control-custom:focus {
    outline: none !important;
    border-color: #268ea6 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(38, 142, 166, 0.2) !important;
}

/* === Mobile Sidebar Drawer === */
@media (max-width: 767px) {
    #sideBar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 50 !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease-in-out !important;
        margin-left: 0 !important;
    }
    #sideBar.sidebar-open {
        transform: translateX(0) !important;
    }
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 40;
    }
    .sidebar-overlay.active {
        display: block;
    }
}
@media (min-width: 768px) {
    .sidebar-overlay {
        display: none !important;
    }
    #sideBar {
        left: 0 !important;
        transition: margin-left 0.25s ease-in-out !important;
    }
    .md\:-ml-64 {
        margin-left: -16rem !important; /* -16rem setara dengan w-64 */
    }
    .md\:ml-0 {
        margin-left: 0 !important;
    }
}

/* === Truncate utility for long table cells === */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === Constrain page horizontal overflow === */
.main-content {
    overflow-x: clip !important;
    max-width: 100% !important;
}

/* === Table-only horizontal scroll with visible scrollbar === */
.table-scroll-wrapper {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.table-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
}
.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 4px;
}
.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #888;
}
.table-scroll-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 #f1f1f1;
}
.table-scroll-wrapper table {
    min-width: 700px;
}

/* ==========================================
   Utility Classes for Notes Feature
   ========================================== */

/* Colors & Card Styling */
.bg-slate-50 {
    background-color: #f8fafc !important;
}
.border-slate-300 {
    border-color: #cbd5e1 !important;
}
.text-slate-800 {
    color: #1e293b !important;
}

.bg-purple-50 {
    background-color: #faf5ff !important;
}
.border-purple-200 {
    border-color: #e9d5ff !important;
}
.text-purple-900 {
    color: #581c87 !important;
}

.bg-emerald-50 {
    background-color: #ecfdf5 !important;
}
.border-emerald-200 {
    border-color: #a7f3d0 !important;
}
.text-emerald-900 {
    color: #064e3b !important;
}

.bg-sky-50 {
    background-color: #f0f9ff !important;
}
.border-sky-200 {
    border-color: #bae6fd !important;
}
.text-sky-900 {
    color: #0c4a6e !important;
}

.bg-amber-50 {
    background-color: #fffbeb !important;
}
.border-amber-200 {
    border-color: #fde68a !important;
}
.text-amber-900 {
    color: #78350f !important;
}

.bg-rose-50 {
    background-color: #fff1f2 !important;
}
.border-rose-200 {
    border-color: #fecdd3 !important;
}
.text-rose-900 {
    color: #881337 !important;
}

/* Font size */
.text-xxs {
    font-size: 0.7rem !important;
}

/* Line Clamp Utilities */
.line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.line-clamp-5 {
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Formatting & Widths */
.whitespace-pre-line {
    white-space: pre-line !important;
}
.whitespace-pre-wrap {
    white-space: pre-wrap !important;
}
.max-w-3xl {
    max-width: 48rem !important;
}
.text-sky-600 {
    color: #0284c7 !important;
}
.bg-sky-100 {
    background-color: #e0f2fe !important;
}
.text-sky-800 {
    color: #075985 !important;
}

/* Screen reader utility */
.sr-only {
    position: absolute !important;
    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-width: 0 !important;
}

/* Custom form toggle switch (is_pinned checkbox) */
.w-9 {
    width: 2.25rem !important;
}
.h-5 {
    height: 1.25rem !important;
}
.bg-gray-200 {
    background-color: #e5e7eb !important;
}

.peer-checked\:bg-sky-500 {
    transition: background-color 0.2s ease !important;
}
.peer:checked ~ .peer-checked\:bg-sky-500 {
    background-color: #0ea5e9 !important;
}
.peer:checked ~ .peer-checked\:bg-sky-500::after {
    transform: translateX(16px) !important;
    border-color: #ffffff !important;
}
.after\:content-\[\'\'\]::after {
    content: "" !important;
}
.after\:absolute::after {
    position: absolute !important;
}
.after\:top-\[2px\]::after {
    top: 2px !important;
}
.after\:left-\[2px\]::after {
    left: 2px !important;
}
.after\:bg-white::after {
    background-color: #ffffff !important;
}
.after\:border-gray-300::after {
    border-color: #d1d5db !important;
}
.after\:border::after {
    border-width: 1px !important;
    border-style: solid !important;
}
.after\:rounded-full::after {
    border-radius: 9999px !important;
}
.after\:h-4::after {
    height: 1rem !important;
}
.after\:w-4::after {
    width: 1rem !important;
}
.after\:transition-all::after {
    transition: all 0.2s ease !important;
}

/* Color Circle Radio Pickers */
.w-2\.5 {
    width: 0.625rem !important;
}
.h-2\.5 {
    height: 0.625rem !important;
}
.border-2 {
    border-width: 2px !important;
}
.border-transparent {
    border-color: transparent !important;
}
.peer-checked\:border-zinc-800 {
    transition: all 0.15s ease !important;
}
.peer:checked ~ .peer-checked\:border-zinc-800 {
    border-color: #27272a !important;
}
.peer:checked ~ .peer-checked\:scale-110 {
    transform: scale(1.1) !important;
}
.hover\:scale-105:hover {
    transform: scale(1.05) !important;
}

/* Missing standard Tailwind utility classes in Cleopatra's style.css */
.items-start {
    align-items: flex-start !important;
}
.mt-auto {
    margin-top: auto !important;
}
.inline-block {
    display: inline-block !important;
}
.pt-3 {
    padding-top: 0.75rem !important;
}
.py-6 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
.rounded-xl {
    border-radius: 0.75rem !important;
}