/* Skeleton Loading Animation */
.skeleton {
    background: #e2e8f0;
    background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
    border-radius: 0.375rem;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.skeleton-card {
    height: 150px;
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* Standardized Global Typography System */
html, body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 15px;
    line-height: 1.5;
    color: #334155; /* Slate 700 */
}

/* Standardized Heading Typography (without !important on color to allow dark background overrides) */
h1 { font-size: 1.75rem !important; font-weight: 700 !important; }
h2 { font-size: 1.5rem !important; font-weight: 700 !important; }
h3 { font-size: 1.125rem !important; font-weight: 600 !important; }
h4 { font-size: 1rem !important; font-weight: 600 !important; }

/* DataTables 100% Full-Width Edge-To-Edge Protection (Semua Halaman & Versi) */
div.dt-container,
div.dt-container div.dt-layout-row,
div.dt-container div.dt-layout-cell,
table.dataTable,
table.dataTable.no-footer,
.dataTables_wrapper,
.dataTables_wrapper table,
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollHeadInner,
.dataTables_wrapper .dataTables_scrollHeadInner > table,
.dataTables_wrapper .dataTables_scrollBody,
.dataTables_wrapper .dataTables_scrollBody > table,
div.dataTables_wrapper table.dataTable {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

div.dt-container,
.dataTables_wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Container protection */
.glass, div[class*="overflow-x-auto"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Standardized Table Headers & Cells Across All Pages */
table.dataTable thead th,
table.dataTable tfoot th,
.table-custom thead th {
    font-size: 0.75rem !important; /* 12px */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #475569 !important; /* Slate 600 */
    background-color: #f8fafc !important; /* Slate 50 */
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

table.dataTable tbody td,
.table-custom tbody td {
    font-size: 0.875rem !important; /* 14px */
    font-weight: 400 !important;
    color: #334155 !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

table.dataTable tbody tr:hover {
    background-color: #f8fafc !important;
}

.dataTables_wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   DataTables Controls & Pagination Styling (DataTables v1 & v2 Compatibility)
   ========================================================================== */

/* Layout Rows & Wrappers */
.dataTables_wrapper,
div.dt-container {
    font-size: 0.8125rem !important;
    color: #64748b !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
div.dt-container .dt-length,
div.dt-container .dt-search {
    margin-bottom: 1rem !important;
    font-size: 0.8125rem !important;
    color: #64748b !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    padding: 0.375rem 0.75rem !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    outline: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

div.dt-container .dt-search label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0 !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
div.dt-container .dt-search input,
div.dt-container .dt-length select {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    padding: 0.375rem 0.75rem !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    outline: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus,
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
    border-color: #0d9488 !important;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2) !important;
}

/* Bottom Container (Info + Pagination) */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
div.dt-container div.dt-layout-row:last-child,
div.dt-container div.dt-info,
div.dt-container div.dt-paging {
    font-size: 0.8125rem !important;
    color: #64748b !important;
}

div.dt-container div.dt-layout-row:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    margin-top: 1rem !important;
    padding-top: 0.5rem !important;
}

.dataTables_wrapper::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.dataTables_wrapper .dataTables_info {
    float: left !important;
    margin-top: 1rem !important;
    padding-top: 0.25rem !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    margin-top: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

div.dt-container div.dt-paging,
div.dt-container div.dt-paging nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

/* Pagination Button Standard Format */
.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dt-container div.dt-paging .dt-paging-button,
div.dt-container div.dt-paging nav button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 2rem !important;
    height: 2rem !important;
    padding: 0 0.625rem !important;
    margin: 0 2px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #475569 !important; /* Slate 600 */
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important; /* Slate 300 */
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    user-select: none !important;
    outline: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Pagination Button Hover State */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current),
div.dt-container div.dt-paging .dt-paging-button:hover:not(.disabled):not(.current),
div.dt-container div.dt-paging nav button:hover:not(.disabled):not(.current) {
    color: #0d9488 !important; /* Brand 600 */
    background: #f0fdfa !important; /* Brand 50 */
    background-color: #f0fdfa !important;
    border-color: #99f6e4 !important; /* Brand 200 */
}

/* Active / Current Page Button Format */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
div.dt-container div.dt-paging .dt-paging-button.current,
div.dt-container div.dt-paging .dt-paging-button.current:hover,
div.dt-container div.dt-paging nav button.current,
div.dt-container div.dt-paging nav button.current:hover,
div.dt-container div.dt-paging nav button.active {
    color: #ffffff !important;
    background: #0d9488 !important; /* Brand 600 */
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px 0 rgba(13, 148, 136, 0.3) !important;
}

/* Disabled Prev/Next Buttons Format */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
div.dt-container div.dt-paging .dt-paging-button.disabled,
div.dt-container div.dt-paging .dt-paging-button.disabled:hover,
div.dt-container div.dt-paging nav button.disabled,
div.dt-container div.dt-paging nav button:disabled {
    color: #94a3b8 !important; /* Slate 400 */
    background: #f8fafc !important; /* Slate 50 */
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important; /* Slate 200 */
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Ellipsis (...) Element */
.dataTables_wrapper .dataTables_paginate .paginate_button.ellipsis,
div.dt-container div.dt-paging .dt-paging-button.ellipsis {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: default !important;
    color: #94a3b8 !important;
}

/* Standardized Form Input Typography */
label, .form-label {
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 600 !important;
    color: #475569 !important;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
    font-size: 0.875rem !important; /* 14px */
    font-family: 'Outfit', sans-serif !important;
}

/* Scope Quill Styles to match application typography */
.ql-container.ql-snow,
.ql-editor {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.875rem !important; /* 14px */
}

/* Quill Editor Image Selection & Visual Resizer Handles */
.ql-editor img {
    cursor: pointer !important;
    display: inline-block;
    max-width: 100%;
    height: auto;
    transition: outline 0.15s ease, box-shadow 0.15s ease;
    border-radius: 0.375rem;
}

.ql-editor img.ql-image-selected,
.ql-editor img:focus {
    outline: 3px solid #0d9488 !important; /* Brand Teal 600 Selection Outline */
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(13, 148, 136, 0.25) !important;
}

/* Floating Image Quick Resize Toolbar */
.ql-image-resize-floating-bar {
    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #0f172a; /* Dark Slate 900 */
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    font-size: 11px;
    font-weight: 600;
    user-select: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ql-image-resize-floating-bar button {
    background: #334155;
    color: #f8fafc;
    border: none;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.ql-image-resize-floating-bar button:hover {
    background: #0d9488; /* Brand Teal */
    color: #ffffff;
}

.ql-image-resize-floating-bar button.active {
    background: #0d9488;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.ql-image-resize-floating-bar button.danger {
    background: #991b1b;
}
.ql-image-resize-floating-bar button.danger:hover {
    background: #ef4444;
}

.ql-snow .ql-picker {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.8125rem !important;
}

/* Standardized Button Font Size */
button, .btn {
    font-family: 'Outfit', sans-serif !important;
}

/* High Contrast Light Footer Formatting */
footer h1, footer h2, footer h3, footer h4,
footer p, footer span, footer a, footer li {
    color: #cbd5e1 !important; /* Slate 300 Light Text */
}
footer h1, footer h2, footer h3, footer h4, footer strong {
    color: #ffffff !important;
}
footer a:hover {
    color: #ffffff !important;
}