/* ==========================================================================
   SIAKAD UI — Components
   Override Bootstrap 3 components for modern look:
   Panels, Buttons, Tables, Forms, Modals, Alerts, Badges, Pagination, etc.
   ========================================================================== */

/* ==========================================================================
   PANELS / CARDS
   ========================================================================== */

body.siakad-ui .panel {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(14, 125, 167, 0.06), 0 0 0 1px rgba(14, 125, 167, 0.04);
    background: #fff;
    margin-bottom: 24px;
    border-top: 2px solid transparent;
    overflow: visible;
}

body.siakad-ui .panel-heading {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 18px 24px;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    position: relative;
}

body.siakad-ui .panel-heading .panel-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

/* Panel Tabs — tabs inside .panel-heading */
body.siakad-ui .panel-tabs {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: none;
}

body.siakad-ui .panel-tabs > li {
    position: relative;
    float: left;
    margin-bottom: -1px;
}

body.siakad-ui .panel-tabs > li > a {
    display: block;
    line-height: 18px;
    border-radius: 0;
    padding: 10px 18px;
    border-left: 1px solid var(--border-color-light);
    border-bottom: none;
    font-size: 13px;
    color: var(--text-secondary);
    background: transparent;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.siakad-ui .panel-tabs > li > a:hover,
body.siakad-ui .panel-tabs > li > a:focus {
    background-color: var(--slate-50);
    color: var(--primary);
    text-decoration: none;
}

body.siakad-ui .panel-tabs > li.active > a,
body.siakad-ui .panel-tabs > li.active > a:hover,
body.siakad-ui .panel-tabs > li.active > a:focus {
    color: var(--primary);
    background: #fff;
    border-bottom: 2px solid var(--primary);
    cursor: default;
    font-weight: var(--font-weight-semibold);
}

/* Panel tabs left-aligned */
body.siakad-ui .panel-tabs.panel-tabs-left {
    left: 0;
    right: auto;
}

body.siakad-ui .panel-tabs.panel-tabs-left > li > a {
    border-right: 1px solid var(--border-color-light);
    border-left: 1px solid transparent;
}

/* Panel tabs border variant */
body.siakad-ui .panel-tabs.panel-tabs-border > li.active > a {
    margin-top: -1px;
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid transparent;
}

/* Holder / Wizard menu items */
body.siakad-ui .holder-style {
    display: block;
    padding: 9px 16px;
    color: var(--text-muted);
    border: 0;
    background-color: var(--slate-50);
    outline: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    transition: all 0.15s ease;
    text-decoration: none;
}

body.siakad-ui .holder-style:hover,
body.siakad-ui .holder-style:focus {
    cursor: pointer;
    color: var(--text-secondary);
    background-color: var(--slate-100);
    outline: 2px dashed var(--text-muted);
    border: 0;
    text-decoration: none;
}

body.siakad-ui .holder-style.holder-active {
    background-color: #fff;
    outline-color: var(--primary);
}

body.siakad-ui .holder-style .holder-icon {
    color: var(--text-muted);
    font-size: 30px;
    padding-bottom: 10px;
}

body.siakad-ui .holder-style:hover .holder-icon,
body.siakad-ui .holder-style:focus .holder-icon,
body.siakad-ui .holder-style.holder-active .holder-icon {
    color: var(--primary);
}

body.siakad-ui .wizard-options {
    list-style: none;
    padding: 0;
}

body.siakad-ui .panel-body {
    padding: 24px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border: none;
}

body.siakad-ui .panel-footer {
    background-color: var(--slate-50);
    border-top: 1px solid var(--border-color-light);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 12px 20px;
}

body.siakad-ui .panel-default > .panel-heading {
    background-color: #fff;
    color: var(--text-primary);
    border-color: var(--border-color-light);
}

body.siakad-ui .panel-primary > .panel-heading {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-hover);
}

body.siakad-ui .panel-primary {
    border-top-color: var(--primary);
}

body.siakad-ui .panel-info {
    border-top-color: var(--info);
}

body.siakad-ui .panel-success {
    border-top-color: var(--success);
}

body.siakad-ui .panel-warning {
    border-top-color: var(--warning);
}

body.siakad-ui .panel-danger {
    border-top-color: var(--danger);
}

body.siakad-ui .panel-info > .panel-heading {
    background-color: var(--info-light);
    border-color: var(--info);
    color: var(--info-hover);
}

body.siakad-ui .panel-success > .panel-heading {
    background-color: var(--success-light);
    border-color: var(--success);
    color: var(--success-hover);
}

body.siakad-ui .panel-warning > .panel-heading {
    background-color: var(--warning-light);
    border-color: var(--warning);
    color: var(--warning-hover);
}

body.siakad-ui .panel-danger > .panel-heading {
    background-color: var(--danger-light);
    border-color: var(--danger);
    color: var(--danger-hover);
}

/* ==========================================================================
   PANEL-GROUP / ACCORDION
   ========================================================================== */

body.siakad-ui .panel-group {
    margin-bottom: 24px;
}

body.siakad-ui .panel-group .panel {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border-top: none;
}

body.siakad-ui .panel-group .panel + .panel {
    margin-top: 8px;
}

body.siakad-ui .panel-group .panel-heading {
    padding: 0;
    border-bottom: none;
}

body.siakad-ui .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid var(--border-color-light);
}

/* Accordion toggle link */
body.siakad-ui .panel-group .accordion-toggle {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
}

body.siakad-ui .panel-group .accordion-toggle:hover {
    text-decoration: none;
    background: var(--slate-50);
}

body.siakad-ui .panel-group .accordion-toggle:focus {
    text-decoration: none;
    outline: none;
}

/* Accordion icon — caret indicator */
body.siakad-ui .panel-group .accordion-toggle.accordion-icon::before {
    content: '\f107';
    font-family: FontAwesome;
    font-size: 16px;
    color: var(--text-muted);
    margin-right: 12px;
    transition: transform var(--transition-base);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

body.siakad-ui .panel-group .accordion-toggle.accordion-icon.collapsed::before {
    transform: rotate(-90deg);
}

/* Panel title inside accordion */
body.siakad-ui .panel-group .accordion-toggle .panel-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: 1.5;
    flex: 1;
    min-width: 0;
}

/* Widget menu inside accordion heading */
body.siakad-ui .panel-group .accordion-toggle .widget-menu {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   PANEL-BORDER — Colored top/left border accent
   ========================================================================== */

body.siakad-ui .panel.panel-border {
    border: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-xs);
}

body.siakad-ui .panel.panel-border.top {
    border-top: 3px solid var(--border-color);
}

body.siakad-ui .panel.panel-border.left {
    border-left: 3px solid var(--border-color);
}

body.siakad-ui .panel.panel-border.bottom {
    border-bottom: 3px solid var(--border-color);
}

body.siakad-ui .panel.panel-border.right {
    border-right: 3px solid var(--border-color);
}

/* panel-border color variants */
body.siakad-ui .panel-default.panel-border.top  { border-top-color: var(--slate-400); }
body.siakad-ui .panel-primary.panel-border.top  { border-top-color: var(--primary); }
body.siakad-ui .panel-info.panel-border.top     { border-top-color: var(--info); }
body.siakad-ui .panel-success.panel-border.top  { border-top-color: var(--success); }
body.siakad-ui .panel-warning.panel-border.top  { border-top-color: var(--warning); }
body.siakad-ui .panel-danger.panel-border.top   { border-top-color: var(--danger); }

body.siakad-ui .panel-default.panel-border.left  { border-left-color: var(--slate-400); }
body.siakad-ui .panel-primary.panel-border.left  { border-left-color: var(--primary); }
body.siakad-ui .panel-info.panel-border.left     { border-left-color: var(--info); }
body.siakad-ui .panel-success.panel-border.left  { border-left-color: var(--success); }
body.siakad-ui .panel-warning.panel-border.left  { border-left-color: var(--warning); }
body.siakad-ui .panel-danger.panel-border.left   { border-left-color: var(--danger); }

/* Colored heading text in panel-border.top (no bg fill) */
body.siakad-ui .panel-border.top > .panel-heading,
body.siakad-ui .panel-border.top .accordion-toggle {
    background: #fff;
}

body.siakad-ui .panel-info.panel-border.top > .panel-heading,
body.siakad-ui .panel-info.panel-border.top .accordion-toggle {
    background: #fff;
    color: var(--text-primary);
}

body.siakad-ui .panel-info.panel-border.top > .panel-heading .panel-title,
body.siakad-ui .panel-info.panel-border.top .accordion-toggle .panel-title {
    color: var(--text-primary);
}

body.siakad-ui .panel-primary.panel-border.top > .panel-heading {
    background: #fff;
    color: var(--text-primary);
}

body.siakad-ui .panel-primary.panel-border.top > .panel-heading .panel-title {
    color: var(--text-primary);
}

/* ==========================================================================
   LINK-UNSTYLED — remove link coloring
   ========================================================================== */

body.siakad-ui a.link-unstyled,
body.siakad-ui a.link-unstyled:hover,
body.siakad-ui a.link-unstyled:focus {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   ICON-BG — Background decorative icon in cards
   ========================================================================== */

body.siakad-ui .icon-bg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    color: rgba(255, 255, 255, 0.15);
    line-height: 1;
    pointer-events: none;
}

body.siakad-ui .icon-bg > i {
    font-size: inherit;
    color: inherit;
}

/* ==========================================================================
   PANEL with BG-* — colored card widgets
   When .panel has a .bg-* class, it becomes a colored card.
   Must override the white panel background.
   ========================================================================== */

body.siakad-ui .panel[class*="bg-"] {
    background: none;
    border: none;
    box-shadow: var(--shadow-sm);
    color: #fff;
    position: relative;
    overflow: hidden;
}

body.siakad-ui .panel[class*="bg-"] > .panel-heading {
    background: transparent;
    border: none;
    color: inherit;
}

body.siakad-ui .panel[class*="bg-"] > .panel-body {
    background: transparent;
    border: none;
    color: inherit;
}

body.siakad-ui .panel[class*="bg-"] .panel-heading .panel-title {
    color: inherit;
}

/* Text inside colored panels — override text-muted for readability */
body.siakad-ui .panel[class*="bg-"] .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.siakad-ui .panel[class*="bg-"] h1,
body.siakad-ui .panel[class*="bg-"] h2,
body.siakad-ui .panel[class*="bg-"] h3,
body.siakad-ui .panel[class*="bg-"] h4,
body.siakad-ui .panel[class*="bg-"] h5,
body.siakad-ui .panel[class*="bg-"] h6 {
    color: #fff;
}

body.siakad-ui .panel[class*="bg-"] a {
    color: #fff;
    text-decoration: none;
}

body.siakad-ui .panel[class*="bg-"] a:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Icon-bg inside colored panel */
body.siakad-ui .panel[class*="bg-"] .icon-bg {
    color: rgba(255, 255, 255, 0.15);
}

/* Box widget (AdminLTE-style) */
body.siakad-ui .box {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color-light);
    background: #fff;
    margin-bottom: 20px;
    position: relative;
}

body.siakad-ui .box-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    align-items: center;
    position: relative;
    color: var(--text-primary);
}

body.siakad-ui .box-header > i {
    margin-right: 8px;
    font-size: 15px;
    color: var(--text-secondary);
}

body.siakad-ui .box-header .box-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    line-height: 1.4;
    color: var(--text-primary);
    display: inline-block;
}

body.siakad-ui .box-header .box-tools {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

body.siakad-ui .box-header .box-tools .btn-box-tool {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 14px;
    line-height: 1;
}

body.siakad-ui .box-header .box-tools .btn-box-tool:hover {
    color: var(--text-primary);
    background: var(--slate-100);
}

body.siakad-ui .box-body {
    padding: 20px;
}

body.siakad-ui .box-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color-light);
    background: var(--slate-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Box variants — colored top border */
body.siakad-ui .box-default {
    border-top: 3px solid var(--slate-300);
}

body.siakad-ui .box-primary {
    border-top: 3px solid var(--primary);
}

body.siakad-ui .box-info {
    border-top: 3px solid var(--info);
}

body.siakad-ui .box-success {
    border-top: 3px solid var(--success);
}

body.siakad-ui .box-warning {
    border-top: 3px solid var(--warning);
}

body.siakad-ui .box-danger {
    border-top: 3px solid var(--danger);
}

/* Box solid variants — colored header background */
body.siakad-ui .box-solid.box-default > .box-header  { background: var(--slate-100); color: var(--text-primary); }
body.siakad-ui .box-solid.box-primary > .box-header  { background: var(--primary); color: var(--text-inverse); }
body.siakad-ui .box-solid.box-info > .box-header     { background: var(--info); color: var(--text-inverse); }
body.siakad-ui .box-solid.box-success > .box-header   { background: var(--success); color: var(--text-inverse); }
body.siakad-ui .box-solid.box-warning > .box-header   { background: var(--warning); color: var(--text-inverse); }
body.siakad-ui .box-solid.box-danger > .box-header    { background: var(--danger); color: var(--text-inverse); }

body.siakad-ui .box-solid > .box-header .box-title {
    color: inherit;
}

body.siakad-ui .box-solid > .box-header .btn-box-tool {
    color: rgba(255, 255, 255, 0.7);
}

body.siakad-ui .box-solid > .box-header .btn-box-tool:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* Collapsed box */
body.siakad-ui .box.collapsed-box .box-body,
body.siakad-ui .box.collapsed-box .box-footer {
    display: none;
}

body.siakad-ui .box.collapsed-box .box-header {
    border-bottom: none;
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

body.siakad-ui .btn {
    border-radius: var(--radius-md);
    padding: 9px 18px;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
    transition: all var(--transition-fast);
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    background-image: none;
    line-height: 1.5;
    cursor: pointer;
}

body.siakad-ui .btn:focus,
body.siakad-ui .btn:active:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 125, 167, 0.15);
}

body.siakad-ui .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

body.siakad-ui .btn-primary:hover,
body.siakad-ui .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px rgba(14, 125, 167, 0.25);
}

body.siakad-ui .btn-primary:active {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--text-inverse);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

body.siakad-ui .btn-default {
    background-color: #fff;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.siakad-ui .btn-default:hover,
body.siakad-ui .btn-default:focus {
    background-color: var(--slate-50);
    border-color: var(--slate-300);
    color: var(--text-primary);
}

body.siakad-ui .btn-default:active {
    background-color: var(--slate-100);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

body.siakad-ui .btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--text-inverse);
}

body.siakad-ui .btn-success:hover,
body.siakad-ui .btn-success:focus {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

body.siakad-ui .btn-success:active {
    background-color: #047857;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

body.siakad-ui .btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--text-inverse);
}

body.siakad-ui .btn-warning:hover,
body.siakad-ui .btn-warning:focus {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

body.siakad-ui .btn-warning:active {
    background-color: #92400e;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

body.siakad-ui .btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: var(--text-inverse);
}

body.siakad-ui .btn-danger:hover,
body.siakad-ui .btn-danger:focus {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

body.siakad-ui .btn-danger:active {
    background-color: #b91c1c;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

body.siakad-ui .btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--text-inverse);
}

body.siakad-ui .btn-info:hover,
body.siakad-ui .btn-info:focus {
    background-color: var(--info-hover);
    border-color: var(--info-hover);
    color: var(--text-inverse);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

body.siakad-ui .btn-info:active {
    background-color: #0e7490;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

body.siakad-ui .btn-link {
    color: var(--primary);
    background: transparent;
    border-color: transparent;
}

body.siakad-ui .btn-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

body.siakad-ui .btn-lg {
    padding: 10px 24px;
    font-size: var(--font-size-base);
    border-radius: var(--radius-lg);
}

body.siakad-ui .btn-sm {
    padding: 5px 12px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

body.siakad-ui .btn-xs {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: var(--radius-xs);
}

body.siakad-ui .btn-group .btn {
    border-radius: 0;
}

body.siakad-ui .btn-group .btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

body.siakad-ui .btn-group .btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

body.siakad-ui .table {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

body.siakad-ui .table > thead > tr > th {
    background-color: var(--primary-bg-subtle);
    color: #4A7A94;
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 12px 16px;
    border-bottom: 2px solid #D6E8F2;
    white-space: nowrap;
}

body.siakad-ui .table > tbody > tr > td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-light);
    vertical-align: middle;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

body.siakad-ui .table > tbody > tr:last-child > td {
    border-bottom: none;
}

body.siakad-ui .table > tbody > tr:hover > td {
    background-color: var(--primary-light);
}

body.siakad-ui .table-striped > tbody > tr:nth-child(odd) > td {
    background-color: var(--slate-50);
}

body.siakad-ui .table-striped > tbody > tr:nth-child(odd):hover > td {
    background-color: var(--primary-light);
}

/* Selected rows — checkbox selection in GridView / Kartik */
body.siakad-ui .table > tbody > tr.success > td,
body.siakad-ui .table-striped > tbody > tr.success > td,
body.siakad-ui .table-striped > tbody > tr.success:nth-child(odd) > td {
    background-color: var(--success-light);
}

body.siakad-ui .table > tbody > tr.info > td,
body.siakad-ui .table-striped > tbody > tr.info > td,
body.siakad-ui .table-striped > tbody > tr.info:nth-child(odd) > td {
    background-color: var(--info-light);
}

body.siakad-ui .table > tbody > tr.warning > td,
body.siakad-ui .table-striped > tbody > tr.warning > td,
body.siakad-ui .table-striped > tbody > tr.warning:nth-child(odd) > td {
    background-color: var(--warning-light);
}

body.siakad-ui .table > tbody > tr.danger > td,
body.siakad-ui .table-striped > tbody > tr.danger > td,
body.siakad-ui .table-striped > tbody > tr.danger:nth-child(odd) > td {
    background-color: var(--danger-light);
}

body.siakad-ui .table > tbody > tr.active > td,
body.siakad-ui .table-striped > tbody > tr.active > td,
body.siakad-ui .table-striped > tbody > tr.active:nth-child(odd) > td {
    background-color: var(--primary-bg-subtle);
}

body.siakad-ui .table > tbody > tr.kv-row-select > td,
body.siakad-ui .table-striped > tbody > tr.kv-row-select > td,
body.siakad-ui .table-striped > tbody > tr.kv-row-select:nth-child(odd) > td {
    background-color: var(--primary-bg-subtle);
}

body.siakad-ui .table-bordered {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

body.siakad-ui .table-bordered > thead > tr > th,
body.siakad-ui .table-bordered > tbody > tr > td {
    border-color: var(--border-color-light);
}

/* Responsive table wrapper */
body.siakad-ui .table-responsive {
    border: none;
    border-radius: var(--radius-md);
    margin-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0.01%;
}

/* Kartik responsive wrapper */
body.siakad-ui .kv-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0.01%;
}

/* Grid view (Yii2 GridView) */
body.siakad-ui .grid-view {
    overflow: visible;
}

body.siakad-ui .grid-view .table {
    margin-bottom: 0;
}

body.siakad-ui .grid-view .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.siakad-ui .grid-view .summary {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding: 0 4px;
}

body.siakad-ui .grid-view .empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

body.siakad-ui .kv-table-header {
    background: var(--primary-bg-subtle);
}

body.siakad-ui .kv-grid-container {
    border-radius: var(--radius-lg);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

body.siakad-ui .kv-grid-table thead th {
    background: var(--primary-bg-subtle);
    color: #4A7A94;
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #D6E8F2;
}

/* Kartik panel grid: remove double borders */
body.siakad-ui .kv-panel-before,
body.siakad-ui .kv-panel-after {
    padding: 10px 16px;
    border: none;
}

/* Kartik GridView action column buttons */
body.siakad-ui .kv-grid-table .kv-action-btn {
    padding: 4px 6px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

body.siakad-ui .kv-grid-table .kv-action-btn:hover {
    color: var(--primary);
    background-color: var(--primary-bg-subtle);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

body.siakad-ui .form-control {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background-color: #fff;
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    height: auto;
    min-height: 40px;
}

body.siakad-ui .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(14, 125, 167, 0.12);
    outline: none;
}

body.siakad-ui .form-control::placeholder {
    color: var(--text-muted);
}

body.siakad-ui .form-control[disabled],
body.siakad-ui fieldset[disabled] .form-control {
    background-color: var(--slate-100);
    border-color: var(--slate-200);
    border-style: dashed;
    color: var(--slate-400);
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
}

body.siakad-ui .form-control[readonly] {
    background-color: var(--slate-50);
    border-color: var(--slate-200);
    color: var(--text-secondary);
    cursor: default;
    box-shadow: none;
}

/* Disabled select */
body.siakad-ui select.form-control[disabled],
body.siakad-ui fieldset[disabled] select.form-control {
    background-color: var(--slate-100);
    border-color: var(--slate-200);
    border-style: dashed;
    color: var(--slate-400);
    cursor: not-allowed;
}

/* Disabled textarea */
body.siakad-ui textarea.form-control[disabled],
body.siakad-ui fieldset[disabled] textarea.form-control {
    background-color: var(--slate-100);
    border-color: var(--slate-200);
    border-style: dashed;
    color: var(--slate-400);
    resize: none;
}

/* Disabled / readonly input-group addon */
body.siakad-ui .input-group .form-control[disabled] + .input-group-addon,
body.siakad-ui .input-group .form-control[readonly] + .input-group-addon {
    background-color: var(--slate-100);
    border-color: var(--slate-200);
    color: var(--slate-400);
}

/* Disabled checkbox / radio */
body.siakad-ui .checkbox-inline.disabled,
body.siakad-ui .radio-inline.disabled,
body.siakad-ui fieldset[disabled] .checkbox-inline,
body.siakad-ui fieldset[disabled] .radio-inline,
body.siakad-ui .checkbox.disabled label,
body.siakad-ui .radio.disabled label {
    color: var(--slate-400);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── Disabled Buttons ── */
body.siakad-ui .btn.disabled,
body.siakad-ui .btn[disabled],
body.siakad-ui fieldset[disabled] .btn {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}

body.siakad-ui .btn-default.disabled,
body.siakad-ui .btn-default[disabled],
body.siakad-ui fieldset[disabled] .btn-default {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-400);
}

body.siakad-ui .btn-primary.disabled,
body.siakad-ui .btn-primary[disabled],
body.siakad-ui fieldset[disabled] .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

body.siakad-ui .btn-success.disabled,
body.siakad-ui .btn-success[disabled],
body.siakad-ui fieldset[disabled] .btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
}

body.siakad-ui .btn-warning.disabled,
body.siakad-ui .btn-warning[disabled],
body.siakad-ui fieldset[disabled] .btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

body.siakad-ui .btn-danger.disabled,
body.siakad-ui .btn-danger[disabled],
body.siakad-ui fieldset[disabled] .btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

body.siakad-ui .btn-info.disabled,
body.siakad-ui .btn-info[disabled],
body.siakad-ui fieldset[disabled] .btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: #fff;
}

body.siakad-ui .btn-link.disabled,
body.siakad-ui .btn-link[disabled],
body.siakad-ui fieldset[disabled] .btn-link {
    color: var(--slate-400);
    text-decoration: none;
}

body.siakad-ui .form-group label,
body.siakad-ui .control-label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 6px;
}

body.siakad-ui .input-group {
    border-radius: var(--radius-md);
}

body.siakad-ui .input-group .form-control:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.siakad-ui .input-group .form-control:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.siakad-ui .input-group-addon {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    background-color: var(--slate-50);
    color: var(--text-muted);
}

body.siakad-ui .input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.siakad-ui .input-group-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.siakad-ui .input-group-btn .btn {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

body.siakad-ui textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

/* Validation states */
body.siakad-ui .has-error .form-control {
    border-color: var(--danger);
}

body.siakad-ui .has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

body.siakad-ui .has-error .help-block,
body.siakad-ui .has-error .control-label {
    color: var(--danger);
}

body.siakad-ui .has-success .form-control {
    border-color: var(--success);
}

body.siakad-ui .has-success .form-control:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

body.siakad-ui .help-block {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-top: 4px;
}

/* Select2 overrides */
body.siakad-ui .select2-container--default .select2-selection--single,
body.siakad-ui .select2-container--default .select2-selection--multiple {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    min-height: 38px;
}

body.siakad-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 14px;
    color: var(--text-primary);
}

body.siakad-ui .select2-container--default.select2-container--open .select2-selection--single,
body.siakad-ui .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(14, 125, 167, 0.12);
}

body.siakad-ui .select2-dropdown {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

body.siakad-ui .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
}

/* ==========================================================================
   MODALS
   ========================================================================== */

body.siakad-ui .modal-content {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

body.siakad-ui .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color-light);
    background: #fff;
}

body.siakad-ui .modal-header .modal-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

body.siakad-ui .modal-header .close {
    font-size: 22px;
    color: var(--text-muted);
    opacity: 0.6;
    text-shadow: none;
}

body.siakad-ui .modal-header .close:hover {
    opacity: 1;
    color: var(--text-primary);
}

body.siakad-ui .modal-body {
    padding: 24px;
}

body.siakad-ui .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color-light);
    background: var(--slate-50);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

body.siakad-ui .modal-backdrop {
    background-color: rgba(15, 23, 42, 0.5);
}

body.siakad-ui .modal-backdrop.in {
    opacity: 1;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

body.siakad-ui .alert {
    border-radius: var(--radius-md);
    border: none;
    border-left: 4px solid;
    padding: 14px 18px;
    font-size: var(--font-size-sm);
    margin-bottom: 16px;
}

body.siakad-ui .alert-success {
    background-color: var(--success-light);
    border-left-color: var(--success);
    color: var(--success-hover);
}

body.siakad-ui .alert-info {
    background-color: var(--info-light);
    border-left-color: var(--info);
    color: var(--info-hover);
}

body.siakad-ui .alert-warning {
    background-color: var(--warning-light);
    border-left-color: var(--warning);
    color: var(--warning-hover);
}

body.siakad-ui .alert-danger {
    background-color: var(--danger-light);
    border-left-color: var(--danger);
    color: var(--danger-hover);
}

body.siakad-ui .alert .close {
    text-shadow: none;
    opacity: 0.5;
}

body.siakad-ui .alert .close:hover {
    opacity: 1;
}

/* ==========================================================================
   BADGES & LABELS
   ========================================================================== */

body.siakad-ui .badge {
    border-radius: var(--radius-full);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    letter-spacing: 0.2px;
    color: #4A6B82;
    background-color: #E8EFF5;
    border: 1px solid rgba(74, 107, 130, 0.12);
}

body.siakad-ui .label {
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    letter-spacing: 0.2px;
    color: #4A6B82;
    border: 1px solid transparent;
}

body.siakad-ui .label i,
body.siakad-ui .badge i {
    margin-right: 3px;
    font-size: 10px;
}

body.siakad-ui .label-primary,
body.siakad-ui .badge-primary {
    background-color: rgba(14, 125, 167, 0.12);
    color: #0a6890;
    border-color: rgba(14, 125, 167, 0.22);
}

body.siakad-ui .label-success,
body.siakad-ui .badge-success {
    background-color: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.22);
}

body.siakad-ui .label-warning,
body.siakad-ui .badge-warning {
    background-color: rgba(245, 158, 11, 0.14);
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.25);
}

body.siakad-ui .label-danger,
body.siakad-ui .badge-danger {
    background-color: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.22);
}

body.siakad-ui .label-info,
body.siakad-ui .badge-info {
    background-color: rgba(6, 182, 212, 0.12);
    color: #0e7490;
    border-color: rgba(6, 182, 212, 0.22);
}

body.siakad-ui .label-default,
body.siakad-ui .badge-default {
    background-color: #E8EFF5;
    color: #4A6B82;
    border-color: rgba(74, 107, 130, 0.12);
}

/* ==========================================================================
   BREADCRUMBS (standalone, outside header)
   ========================================================================== */

body.siakad-ui .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 16px;
    font-size: var(--font-size-sm);
    border-radius: 0;
}

body.siakad-ui .breadcrumb > li + li::before {
    content: "/";
    color: var(--slate-300);
    padding: 0 8px;
}

body.siakad-ui .breadcrumb > .active {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

body.siakad-ui .breadcrumb > li > a {
    color: var(--text-secondary);
    text-decoration: none;
}

body.siakad-ui .breadcrumb > li > a:hover {
    color: var(--primary);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

body.siakad-ui .pagination > li > a,
body.siakad-ui .pagination > li > span {
    border-radius: var(--radius-sm);
    margin: 0 2px;
    border-color: var(--border-color);
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

body.siakad-ui .pagination > li > a:hover {
    background-color: var(--slate-50);
    border-color: var(--slate-300);
    color: var(--text-primary);
}

body.siakad-ui .pagination > .active > a,
body.siakad-ui .pagination > .active > a:hover,
body.siakad-ui .pagination > .active > span {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border-color: var(--primary);
    color: var(--text-inverse);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(14, 125, 167, 0.25);
}

body.siakad-ui .pagination > .disabled > a,
body.siakad-ui .pagination > .disabled > span {
    color: var(--text-muted);
    background: var(--slate-50);
    border-color: var(--border-color-light);
}

/* ==========================================================================
   TABS & NAVS
   ========================================================================== */

body.siakad-ui .nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

body.siakad-ui .nav-tabs > li > a {
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 18px;
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    border-radius: 0;
    transition: all var(--transition-fast);
}

body.siakad-ui .nav-tabs > li > a:hover {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--slate-300);
    color: var(--text-primary);
}

body.siakad-ui .nav-tabs > li.active > a,
body.siakad-ui .nav-tabs > li.active > a:hover,
body.siakad-ui .nav-tabs > li.active > a:focus {
    border: none;
    border-bottom: 3px solid var(--primary);
    color: var(--primary-hover);
    background: transparent;
    font-weight: var(--font-weight-semibold);
}

body.siakad-ui .tab-content {
    padding: 20px 0;
}

/* Pills */
body.siakad-ui .nav-pills > li > a {
    border-radius: var(--radius-md);
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

body.siakad-ui .nav-pills > li > a:hover {
    background: var(--slate-100);
    color: var(--text-primary);
}

body.siakad-ui .nav-pills > li.active > a,
body.siakad-ui .nav-pills > li.active > a:hover {
    background-color: var(--primary);
    color: var(--text-inverse);
}

/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

body.siakad-ui .dropdown-menu {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    padding: 6px;
}

body.siakad-ui .dropdown-menu > li > a {
    padding: 8px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

body.siakad-ui .dropdown-menu > li > a:hover {
    background: var(--slate-50);
    color: var(--text-primary);
}

body.siakad-ui .dropdown-menu .divider {
    margin: 6px 0;
    background-color: var(--border-color-light);
}

/* ==========================================================================
   WELLS
   ========================================================================== */

body.siakad-ui .well {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--slate-50);
    box-shadow: none;
    padding: 16px 20px;
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */

body.siakad-ui .progress {
    border-radius: var(--radius-full);
    background-color: var(--slate-100);
    box-shadow: none;
    height: 8px;
    overflow: hidden;
}

body.siakad-ui .progress-bar {
    border-radius: var(--radius-full);
    box-shadow: none;
}

body.siakad-ui .progress-bar-primary {
    background-color: var(--primary);
}

body.siakad-ui .progress-bar-success {
    background-color: var(--success);
}

body.siakad-ui .progress-bar-warning {
    background-color: var(--warning);
}

body.siakad-ui .progress-bar-danger {
    background-color: var(--danger);
}

body.siakad-ui .progress-bar-info {
    background-color: var(--info);
}

/* ==========================================================================
   TOOLTIPS & POPOVERS
   ========================================================================== */

body.siakad-ui .tooltip-inner {
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    background-color: var(--slate-900);
}

body.siakad-ui .popover {
    border-radius: var(--radius-lg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

body.siakad-ui .popover-title {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--slate-50);
    border-color: var(--border-color-light);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   LIST GROUP
   ========================================================================== */

body.siakad-ui .list-group {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin-bottom: 0;
}

body.siakad-ui .list-group-item {
    border: none;
    border-bottom: 1px solid var(--border-color-light);
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    transition: all var(--transition-fast);
    position: relative;
    background: #fff;
}

body.siakad-ui .list-group-item:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

body.siakad-ui .list-group-item:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-bottom: none;
}

/* Active state — soft highlight instead of solid fill */
body.siakad-ui .list-group-item.active,
body.siakad-ui .list-group-item.active:hover,
body.siakad-ui .list-group-item.active:focus {
    background-color: var(--primary-bg-subtle);
    border-color: transparent;
    border-bottom: 1px solid var(--border-color-light);
    border-left: 3px solid var(--primary);
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
    z-index: 1;
}

body.siakad-ui .list-group-item.active:last-child {
    border-bottom: none;
}

/* Hover state */
body.siakad-ui a.list-group-item:hover,
body.siakad-ui a.list-group-item:focus,
body.siakad-ui a.list-group-item-action:hover,
body.siakad-ui a.list-group-item-action:focus {
    background-color: var(--slate-50);
    color: var(--text-primary);
    text-decoration: none;
}

body.siakad-ui a.list-group-item.active:hover {
    background-color: var(--primary-bg-hover);
    color: var(--primary-hover);
}

/* Badge inside list-group */
body.siakad-ui .list-group-item .badge {
    float: right;
    margin-top: 2px;
}

/* List-group contextual variants */
body.siakad-ui .list-group-item-success { background-color: var(--success-light); color: var(--success-hover); }
body.siakad-ui .list-group-item-info    { background-color: var(--info-light); color: var(--info-hover); }
body.siakad-ui .list-group-item-warning  { background-color: var(--warning-light); color: var(--warning-hover); }
body.siakad-ui .list-group-item-danger   { background-color: var(--danger-light); color: var(--danger-hover); }

/* List-group inside panel / box — flush edges */
body.siakad-ui .panel > .list-group,
body.siakad-ui .box > .list-group,
body.siakad-ui .panel > .panel-collapse > .list-group {
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

body.siakad-ui .panel > .list-group .list-group-item:first-child,
body.siakad-ui .box > .list-group .list-group-item:first-child {
    border-radius: 0;
}

body.siakad-ui .panel > .list-group .list-group-item:last-child,
body.siakad-ui .box > .list-group .list-group-item:last-child {
    border-radius: 0;
}

/* ==========================================================================
   ADMIN-FORM OVERRIDES (AdminDesigns admin-forms.css)
   Override legacy gradients, text-shadows, heavy borders, and gray palette
   ========================================================================== */

/* --- Base Reset --- */
body.siakad-ui .admin-form,
body.siakad-ui .admin-form * {
    font-family: inherit;
}

body.siakad-ui .admin-form {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* --- GUI Inputs --- */
body.siakad-ui .admin-form .gui-input,
body.siakad-ui .admin-form .gui-textarea,
body.siakad-ui .admin-form .select > select,
body.siakad-ui .admin-form .select-multiple select {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background-color: #fff;
    box-shadow: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 40px;
    height: auto;
}

body.siakad-ui .admin-form .gui-input:focus,
body.siakad-ui .admin-form .gui-textarea:focus,
body.siakad-ui .admin-form .select > select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(14, 125, 167, 0.12);
    outline: none;
}

body.siakad-ui .admin-form .gui-input::placeholder,
body.siakad-ui .admin-form .gui-textarea::placeholder {
    color: var(--text-muted);
}

body.siakad-ui .admin-form .gui-input[disabled],
body.siakad-ui .admin-form .gui-textarea[disabled],
body.siakad-ui .admin-form .select > select[disabled] {
    background-color: var(--slate-100);
    border-color: var(--slate-200);
    border-style: dashed;
    color: var(--slate-400);
    cursor: not-allowed;
    opacity: 1;
}

body.siakad-ui .admin-form .gui-input[readonly],
body.siakad-ui .admin-form .gui-textarea[readonly] {
    background-color: var(--slate-50);
    border-color: var(--slate-200);
    color: var(--text-secondary);
    cursor: default;
}

body.siakad-ui .admin-form .gui-input[disabled] ~ .field-icon i,
body.siakad-ui .admin-form .gui-textarea[disabled] ~ .field-icon i,
body.siakad-ui .admin-form .gui-input[readonly] ~ .field-icon i,
body.siakad-ui .admin-form .gui-textarea[readonly] ~ .field-icon i {
    color: var(--slate-400);
}

/* Admin-form disabled button / state-disabled */
body.siakad-ui .admin-form .button[disabled],
body.siakad-ui .admin-form .state-disabled .button {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Admin-form disabled checkbox / radio / switch */
body.siakad-ui .admin-form input[disabled] + .checkbox,
body.siakad-ui .admin-form input[disabled] + .radio,
body.siakad-ui .admin-form .switch > input[disabled] + label {
    opacity: 0.5;
    cursor: not-allowed;
}

body.siakad-ui .admin-form .checkbox-custom.checkbox-disabled label:before,
body.siakad-ui .admin-form .radio-custom.radio-disabled label:before {
    background-color: var(--slate-100);
    border-color: var(--slate-300);
    cursor: not-allowed;
}

/* --- Select Arrows --- */
body.siakad-ui .admin-form .select .arrow {
    background: transparent;
    border-left: 1px solid var(--border-color);
    color: var(--text-muted);
}

body.siakad-ui .admin-form .select > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* --- Field Layout --- */
body.siakad-ui .admin-form .field {
    margin-bottom: 16px;
}

body.siakad-ui .admin-form .field-label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 6px;
}

body.siakad-ui .admin-form .field-label em {
    color: var(--danger);
    font-style: normal;
}

body.siakad-ui .admin-form .field-icon i {
    color: var(--text-muted);
}

/* --- Section Divider --- */
body.siakad-ui .admin-form .section-divider {
    border-top: 1px solid var(--border-color-light);
    margin: 20px 0;
}

body.siakad-ui .admin-form .section-divider span {
    background: #fff;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: 0 12px;
}

/* --- Validation States --- */
body.siakad-ui .admin-form .state-error .gui-input,
body.siakad-ui .admin-form .state-error .gui-textarea,
body.siakad-ui .admin-form .state-error .select > select {
    border-color: var(--danger);
    background: #fff;
    box-shadow: none;
}

body.siakad-ui .admin-form .state-error .gui-input:focus,
body.siakad-ui .admin-form .state-error .gui-textarea:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

body.siakad-ui .admin-form .state-error .field-icon i {
    color: var(--danger);
}

body.siakad-ui .admin-form .state-error + em,
body.siakad-ui .admin-form .state-error .notification {
    color: var(--danger);
    font-size: var(--font-size-sm);
    font-style: normal;
}

body.siakad-ui .admin-form .state-success .gui-input,
body.siakad-ui .admin-form .state-success .gui-textarea,
body.siakad-ui .admin-form .state-success .select > select {
    border-color: var(--success);
    background: #fff;
    box-shadow: none;
}

body.siakad-ui .admin-form .state-success .gui-input:focus,
body.siakad-ui .admin-form .state-success .gui-textarea:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

body.siakad-ui .admin-form .state-success .field-icon i {
    color: var(--success);
}

/* --- Checkboxes --- */
body.siakad-ui .admin-form .checkbox,
body.siakad-ui .admin-form .checkbox + label,
body.siakad-ui .admin-form .option {
    font-family: inherit;
    cursor: pointer;
}

body.siakad-ui .admin-form .checkbox > span,
body.siakad-ui .admin-form .checkbox > span::before {
    border-radius: var(--radius-sm);
}

body.siakad-ui .admin-form .checkbox > span {
    border: 2px solid var(--border-color);
    width: 20px;
    height: 20px;
    background: #fff;
    transition: all var(--transition-fast);
}

body.siakad-ui .admin-form .checkbox:hover > span {
    border-color: var(--primary);
}

body.siakad-ui .admin-form .checkbox input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
}

body.siakad-ui .admin-form .checkbox input:checked + span::before {
    color: #fff;
}

/* --- Radios --- */
body.siakad-ui .admin-form .radio > span {
    border: 2px solid var(--border-color);
    width: 20px;
    height: 20px;
    background: #fff;
    transition: all var(--transition-fast);
}

body.siakad-ui .admin-form .radio:hover > span {
    border-color: var(--primary);
}

body.siakad-ui .admin-form .radio input:checked + span {
    border-color: var(--primary);
}

body.siakad-ui .admin-form .radio input:checked + span::before {
    background: var(--primary);
}

/* --- Switches --- */
body.siakad-ui .admin-form .switch > label {
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

body.siakad-ui .admin-form .switch > label > span {
    background: var(--slate-200);
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
    box-shadow: none;
}

body.siakad-ui .admin-form .switch input:checked + label > span {
    background: var(--primary);
}

body.siakad-ui .admin-form .switch > label > span::before {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

body.siakad-ui .admin-form .switch.switch-success input:checked + label > span {
    background: var(--success);
}

body.siakad-ui .admin-form .switch.switch-warning input:checked + label > span {
    background: var(--warning);
}

body.siakad-ui .admin-form .switch.switch-danger input:checked + label > span {
    background: var(--danger);
}

body.siakad-ui .admin-form .switch.switch-info input:checked + label > span {
    background: var(--info);
}

/* --- Smart Widget --- */
body.siakad-ui .admin-form .smart-widget {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

body.siakad-ui .admin-form .smart-widget .field input {
    border: none;
    box-shadow: none;
}

body.siakad-ui .admin-form .smart-widget .button {
    background: var(--primary);
    color: #fff;
    text-shadow: none;
    border: none;
    border-radius: 0;
}

body.siakad-ui .admin-form .smart-widget .button:hover {
    background: var(--primary-hover);
}

/* --- Admin-Form Buttons --- */
body.siakad-ui .admin-form .button {
    text-shadow: none;
    box-shadow: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}

body.siakad-ui .admin-form .button:active {
    box-shadow: none;
}

body.siakad-ui .admin-form .button.pushed {
    box-shadow: none;
}

body.siakad-ui .admin-form .button-left::before,
body.siakad-ui .admin-form .button-right::before {
    display: none;
}

/* --- Heading Border (decorative top bar) --- */
body.siakad-ui .admin-form .heading-border::before {
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

body.siakad-ui .admin-form .heading-border .panel-heading {
    border-radius: 0;
}

body.siakad-ui .admin-form .heading-border .panel-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* Panel colors for admin-form heading-border — kept here for existing specificity */
body.siakad-ui .admin-form .panel-primary.heading-border::before,
body.siakad-ui .admin-form .panel-primary .heading-border::before {
    background-color: var(--primary);
}

body.siakad-ui .admin-form .panel-info.heading-border::before,
body.siakad-ui .admin-form .panel-info .heading-border::before {
    background-color: var(--info);
}

body.siakad-ui .admin-form .panel-success.heading-border::before,
body.siakad-ui .admin-form .panel-success .heading-border::before {
    background-color: var(--success);
}

body.siakad-ui .admin-form .panel-warning.heading-border::before,
body.siakad-ui .admin-form .panel-warning .heading-border::before {
    background-color: var(--warning);
}

body.siakad-ui .admin-form .panel-danger.heading-border::before,
body.siakad-ui .admin-form .panel-danger .heading-border::before {
    background-color: var(--danger);
}

/* --- Input footer / helper text --- */
body.siakad-ui .admin-form .input-footer {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    padding: 6px 0;
}

body.siakad-ui .admin-form .input-link {
    color: var(--primary);
}

body.siakad-ui .admin-form .input-link:hover {
    color: var(--primary-hover);
}

/* ==========================================================================
   ADMINDESIGNS BUTTON OVERRIDES (outside .admin-form)
   Kill text-shadows, gradients, and inset shadows from theme.css / main
   ========================================================================== */

body.siakad-ui .btn {
    text-shadow: none !important;
    background-image: none !important;
}

body.siakad-ui .btn:active,
body.siakad-ui .btn.active {
    box-shadow: none;
}

body.siakad-ui .btn.btn-white {
    background-color: #fff;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

body.siakad-ui .btn.btn-white:hover {
    background-color: var(--slate-50);
    border-color: var(--slate-300);
    color: var(--text-primary);
}

/* Btn outline variants */
body.siakad-ui .btn.btn-outline {
    background-color: transparent;
}

/* Btn icon only (circle) */
body.siakad-ui .btn.btn-rounded {
    border-radius: var(--radius-full);
}

/* ==========================================================================
   TABLE EXTENDED OVERRIDES (DataTables, Yii2 GridView)
   ========================================================================== */

/* DataTables wrapper */
body.siakad-ui .dataTables_wrapper {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

body.siakad-ui .dataTables_wrapper .dataTables_length select {
    border-radius: var(--radius-sm);
    border-color: var(--border-color);
    padding: 4px 8px;
    min-height: auto;
}

body.siakad-ui .dataTables_wrapper .dataTables_filter input {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    font-size: var(--font-size-sm);
}

body.siakad-ui .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 125, 167, 0.1);
    outline: none;
}

body.siakad-ui .dataTables_wrapper .dataTables_info {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

body.siakad-ui .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
    margin: 0 2px;
    padding: 5px 10px;
}

body.siakad-ui .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--slate-50) !important;
    border-color: var(--slate-300) !important;
    color: var(--text-primary) !important;
}

body.siakad-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

body.siakad-ui .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--text-muted) !important;
    background: var(--slate-50) !important;
    border-color: var(--border-color-light) !important;
}

/* Table action buttons (icon buttons in grid) */
body.siakad-ui .table .btn-xs,
body.siakad-ui .table .btn-sm {
    text-shadow: none;
    box-shadow: none;
}

/* Table sorting indicators */
body.siakad-ui .table > thead > tr > th a {
    color: var(--text-secondary);
    text-decoration: none;
}

body.siakad-ui .table > thead > tr > th a:hover {
    color: var(--text-primary);
}

body.siakad-ui .table > thead > tr > th.sorting_asc,
body.siakad-ui .table > thead > tr > th.sorting_desc {
    background-color: var(--slate-100);
}

/* Kv-grid table overrides */
body.siakad-ui .kv-grid-table > thead > tr > th {
    background: var(--primary-bg-subtle);
    border-bottom: 2px solid #D6E8F2;
    font-weight: var(--font-weight-semibold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #4A7A94;
    padding: 12px 16px;
}

body.siakad-ui .kv-grid-table > tbody > tr > td {
    padding: 10px 16px;
    border-color: var(--border-color-light);
    vertical-align: middle;
    font-size: var(--font-size-sm);
}

body.siakad-ui .kv-grid-table > tbody > tr:hover > td {
    background-color: var(--primary-light);
}

/* Table filters row */
body.siakad-ui .kv-grid-table > thead > tr.filters > td {
    background: #fff;
    padding: 6px 8px;
}

body.siakad-ui .kv-grid-table > thead > tr.filters .form-control {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   BADGE & LABEL EXTENDED OVERRIDES
   ========================================================================== */

/* Soft/light variants (common in modern dashboards) */
body.siakad-ui .label {
    display: inline-block;
    line-height: 1.4;
    vertical-align: middle;
}

body.siakad-ui .badge {
    display: inline-block;
    line-height: 1.4;
    vertical-align: middle;
}

/* ==========================================================================
   CONTENT WRAPPER & PAGE STRUCTURE
   ========================================================================== */

body.siakad-ui #content_wrapper {
    background-color: var(--content-bg);
    min-height: 100vh;
}

body.siakad-ui #content {
    padding: var(--content-padding);
}

/* Topbar / breadcrumbs bar */
body.siakad-ui #topbar {
    background: #fff;
    border-bottom: 1px solid var(--border-color-light);
    padding: 0 var(--content-padding);
    min-height: 50px;
    display: flex;
    align-items: center;
}

body.siakad-ui #topbar .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* ==========================================================================
   CHECKBOX/RADIO (Bootstrap native, not admin-form)
   ========================================================================== */

body.siakad-ui .checkbox label,
body.siakad-ui .radio label {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    padding-left: 6px;
}

body.siakad-ui .checkbox input[type="checkbox"],
body.siakad-ui .radio input[type="radio"] {
    accent-color: var(--primary);
}

/* ==========================================================================
   MEDIA OBJECTS (used in chat, comments, etc.)
   ========================================================================== */

body.siakad-ui .media {
    margin-bottom: 16px;
}

body.siakad-ui .media-body {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

body.siakad-ui .media-heading {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 4px;
}

/* ==========================================================================
   TRAY OVERRIDES (AdminDesigns sidebar trays)
   ========================================================================== */

body.siakad-ui .tray {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

body.siakad-ui .tray .tray-body {
    padding: 16px;
}

body.siakad-ui .tray .tray-footer {
    background: var(--slate-50);
    border-top: 1px solid var(--border-color-light);
    padding: 12px 16px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ==========================================================================
   DATEPICKER OVERRIDES (Bootstrap Datepicker)
   ========================================================================== */

body.siakad-ui .datepicker {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    padding: 8px;
}

body.siakad-ui .datepicker table tr td,
body.siakad-ui .datepicker table tr th {
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

body.siakad-ui .datepicker table tr td.active,
body.siakad-ui .datepicker table tr td.active:hover,
body.siakad-ui .datepicker table tr td.active.active {
    background: var(--primary) !important;
    color: #fff !important;
    text-shadow: none !important;
}

body.siakad-ui .datepicker table tr td.today,
body.siakad-ui .datepicker table tr td.today:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}

body.siakad-ui .datepicker table tr td:hover {
    background: var(--slate-100);
}

body.siakad-ui .datepicker table tr td span.active,
body.siakad-ui .datepicker table tr td span.active:hover {
    background: var(--primary) !important;
    text-shadow: none !important;
}

/* ==========================================================================
   JQUERY UI OVERRIDES (Yii2 JuiAsset)
   ========================================================================== */

body.siakad-ui .ui-widget {
    font-family: inherit;
    font-size: var(--font-size-sm);
}

body.siakad-ui .ui-dialog {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-xl);
    padding: 0;
}

body.siakad-ui .ui-dialog .ui-dialog-titlebar {
    background: #fff;
    border-bottom: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 16px 20px;
}

body.siakad-ui .ui-dialog .ui-dialog-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

body.siakad-ui .ui-dialog .ui-dialog-content {
    padding: 20px;
}

body.siakad-ui .ui-dialog .ui-dialog-buttonpane {
    border-top: 1px solid var(--border-color-light);
    background: var(--slate-50);
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

body.siakad-ui .ui-autocomplete {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

body.siakad-ui .ui-autocomplete .ui-menu-item a {
    padding: 8px 14px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}

body.siakad-ui .ui-autocomplete .ui-menu-item a.ui-state-focus,
body.siakad-ui .ui-autocomplete .ui-menu-item a:hover {
    background: var(--primary-light);
    color: var(--primary);
    border: none;
}

/* UI Slider */
body.siakad-ui .admin-form .ui-slider {
    background: var(--slate-200);
    border: none;
    border-radius: var(--radius-full);
    height: 6px;
}

body.siakad-ui .admin-form .ui-slider .ui-slider-range {
    background: var(--primary);
    border-radius: var(--radius-full);
}

body.siakad-ui .admin-form .ui-slider .ui-slider-handle {
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    top: -7px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

body.siakad-ui .admin-form .ui-slider .ui-slider-handle:hover,
body.siakad-ui .admin-form .ui-slider .ui-slider-handle:focus {
    background: var(--primary-light);
    border-color: var(--primary-hover);
}

/* ==========================================================================
   SELECT2 EXTENDED OVERRIDES (Kartik Select2 widget)
   ========================================================================== */

body.siakad-ui .select2-container--default .select2-selection--single {
    min-height: 40px;
    border-color: var(--border-color);
    border-radius: var(--radius-md);
}

body.siakad-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

body.siakad-ui .select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    padding: 4px 8px;
}

body.siakad-ui .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-light);
    border: 1px solid rgba(14, 125, 167, 0.2);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 12px;
    padding: 2px 8px;
}

body.siakad-ui .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--primary);
}

body.siakad-ui .select2-results__option {
    padding: 8px 14px;
    font-size: var(--font-size-sm);
}

body.siakad-ui .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary) !important;
}

body.siakad-ui .select2-search--dropdown .select2-search__field {
    border-radius: var(--radius-sm);
    border-color: var(--border-color);
    padding: 8px 12px;
}

body.siakad-ui .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 125, 167, 0.1);
    outline: none;
}

/* ==========================================================================
   MISCELLANEOUS ADMINDESIGNS OVERRIDES
   ========================================================================== */

/* Kill AdminDesigns box-shadow and gradients on global elements */
body.siakad-ui .content-header,
body.siakad-ui .box-header.with-border {
    border-bottom: 1px solid var(--border-color-light);
}

/* Tray center / right sidebar — clean bg */
body.siakad-ui #sidebar_right {
    background: #fff;
    border-left: 1px solid var(--border-color);
}

/* SweetAlert overrides */
body.siakad-ui .swal2-popup {
    border-radius: var(--radius-xl);
    font-family: inherit;
}

body.siakad-ui .swal2-confirm {
    border-radius: var(--radius-md) !important;
    background-color: var(--primary) !important;
}

body.siakad-ui .swal2-cancel {
    border-radius: var(--radius-md) !important;
}

/* iCheck plugin overrides (if used) */
body.siakad-ui .icheckbox_minimal-blue,
body.siakad-ui .iradio_minimal-blue {
    border-radius: var(--radius-sm);
}

/* Loader / spinner */
body.siakad-ui .kv-loader-overlay {
    background: rgba(255, 255, 255, 0.8);
}

/* Pjax loader */
body.siakad-ui #pjax-loader,
body.siakad-ui .kv-grid-loading {
    background: rgba(255, 255, 255, 0.85);
}

/* Krajee file input */
body.siakad-ui .file-preview {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
}

body.siakad-ui .file-drop-zone {
    border-radius: var(--radius-md);
    border: 2px dashed var(--border-color);
    padding: 20px;
}

body.siakad-ui .file-drop-zone:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

body.siakad-ui .file-caption-main {
    border-radius: var(--radius-md);
}

/* Krajee GridView expandRow */
body.siakad-ui .kv-expand-row:hover {
    cursor: pointer;
    background: var(--primary-light);
}

body.siakad-ui .kv-expand-detail-row td {
    background: var(--slate-50);
    padding: 16px;
}

/* Kartik SwitchInput */
body.siakad-ui .bootstrap-switch {
    border-radius: var(--radius-full);
    border-color: var(--border-color);
}

body.siakad-ui .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
    background: var(--primary);
}

/* Growl notifications (Kartik) */
body.siakad-ui .kv-alert {
    border-radius: var(--radius-md);
}


/* ==========================================================================
   ADMINDESIGNS CUSTOM COLOR CLASSES
   These were defined in theme.css which is now disabled.
   Used in 200+ views across the codebase.
   Colors: system (teal), alert (purple), dark (slate)
   ========================================================================== */

/* --- TEXT COLORS: system / alert / dark --- */
body.siakad-ui .text-system { color: var(--system) !important; }
body.siakad-ui .text-system-light { color: var(--system-light) !important; }
body.siakad-ui .text-system-lighter { color: var(--system-lighter) !important; }
body.siakad-ui .text-system-dark { color: var(--system-dark) !important; }
body.siakad-ui .text-system-darker { color: var(--system-darker) !important; }

body.siakad-ui .text-alert { color: var(--alert-purple) !important; }
body.siakad-ui .text-alert-light { color: var(--alert-purple-light) !important; }
body.siakad-ui .text-alert-lighter { color: var(--alert-purple-lighter) !important; }
body.siakad-ui .text-alert-dark { color: var(--alert-purple-dark) !important; }
body.siakad-ui .text-alert-darker { color: var(--alert-purple-darker) !important; }

body.siakad-ui .text-dark { color: var(--dark) !important; }
body.siakad-ui .text-dark-light { color: var(--dark-light) !important; }
body.siakad-ui .text-dark-lighter { color: var(--dark-lighter) !important; }
body.siakad-ui .text-dark-dark { color: var(--dark-dark) !important; }
body.siakad-ui .text-dark-darker { color: var(--dark-darker) !important; }

body.siakad-ui a.text-system:hover,
body.siakad-ui a.text-system:focus { color: var(--system-dark) !important; }
body.siakad-ui a.text-alert:hover,
body.siakad-ui a.text-alert:focus { color: var(--alert-purple-dark) !important; }
body.siakad-ui a.text-dark:hover,
body.siakad-ui a.text-dark:focus { color: var(--dark-dark) !important; }

/* --- BACKGROUND COLORS: system / alert / dark --- */
body.siakad-ui .bg-system { background-color: var(--system) !important; color: #fff; }
body.siakad-ui .bg-system.light { background-color: var(--system-light) !important; }
body.siakad-ui .bg-system.lighter { background-color: var(--system-lighter) !important; }
body.siakad-ui .bg-system.dark { background-color: var(--system-dark) !important; }
body.siakad-ui .bg-system.darker { background-color: var(--system-darker) !important; }

body.siakad-ui .bg-alert { background-color: var(--alert-purple) !important; color: #fff; }
body.siakad-ui .bg-alert.light { background-color: var(--alert-purple-light) !important; }
body.siakad-ui .bg-alert.lighter { background-color: var(--alert-purple-lighter) !important; }
body.siakad-ui .bg-alert.dark { background-color: var(--alert-purple-dark) !important; }
body.siakad-ui .bg-alert.darker { background-color: var(--alert-purple-darker) !important; }

body.siakad-ui .bg-dark { background-color: var(--dark) !important; color: #fff; }
body.siakad-ui .bg-dark.light { background-color: var(--dark-light) !important; }
body.siakad-ui .bg-dark.lighter { background-color: var(--dark-lighter) !important; }
body.siakad-ui .bg-dark.dark { background-color: var(--dark-dark) !important; }
body.siakad-ui .bg-dark.darker { background-color: var(--dark-darker) !important; }

/* --- BUTTONS: system / alert / dark --- */
body.siakad-ui .btn-system {
    color: #fff;
    background-color: var(--system);
    border-color: var(--system);
    text-shadow: none;
}

body.siakad-ui .btn-system:hover,
body.siakad-ui .btn-system:focus,
body.siakad-ui .btn-system:active,
body.siakad-ui .btn-system.active,
body.siakad-ui .open > .dropdown-toggle.btn-system {
    color: #fff;
    background-color: var(--system-hover);
    border-color: var(--system-hover);
}

body.siakad-ui .btn-system:active,
body.siakad-ui .btn-system.active {
    background-color: var(--system-dark);
    border-color: var(--system-dark);
}

body.siakad-ui .btn-system.disabled,
body.siakad-ui .btn-system[disabled],
body.siakad-ui fieldset[disabled] .btn-system {
    background-color: var(--system);
    border-color: var(--system);
    color: #fff;
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}

body.siakad-ui .btn-system.light {
    background-color: var(--system-light);
    border-color: var(--system-light);
}

body.siakad-ui .btn-system.light:hover,
body.siakad-ui .btn-system.light:focus {
    background-color: var(--system);
    border-color: var(--system);
}

body.siakad-ui .btn-system.dark {
    background-color: var(--system-dark);
    border-color: var(--system-dark);
}

body.siakad-ui .btn-system.dark:hover,
body.siakad-ui .btn-system.dark:focus {
    background-color: var(--system-darker);
    border-color: var(--system-darker);
}

body.siakad-ui .btn-system .badge {
    color: var(--system);
    background-color: #fff;
}

body.siakad-ui .btn-alert {
    color: #fff;
    background-color: var(--alert-purple);
    border-color: var(--alert-purple);
    text-shadow: none;
}

body.siakad-ui .btn-alert:hover,
body.siakad-ui .btn-alert:focus,
body.siakad-ui .btn-alert:active,
body.siakad-ui .btn-alert.active,
body.siakad-ui .open > .dropdown-toggle.btn-alert {
    color: #fff;
    background-color: var(--alert-purple-hover);
    border-color: var(--alert-purple-hover);
}

body.siakad-ui .btn-alert:active,
body.siakad-ui .btn-alert.active {
    background-color: var(--alert-purple-dark);
    border-color: var(--alert-purple-dark);
}

body.siakad-ui .btn-alert.disabled,
body.siakad-ui .btn-alert[disabled],
body.siakad-ui fieldset[disabled] .btn-alert {
    background-color: var(--alert-purple);
    border-color: var(--alert-purple);
    color: #fff;
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}

body.siakad-ui .btn-alert.light {
    background-color: var(--alert-purple-light);
    border-color: var(--alert-purple-light);
}

body.siakad-ui .btn-alert.light:hover,
body.siakad-ui .btn-alert.light:focus {
    background-color: var(--alert-purple);
    border-color: var(--alert-purple);
}

body.siakad-ui .btn-alert.dark {
    background-color: var(--alert-purple-dark);
    border-color: var(--alert-purple-dark);
}

body.siakad-ui .btn-alert.dark:hover,
body.siakad-ui .btn-alert.dark:focus {
    background-color: var(--alert-purple-darker);
    border-color: var(--alert-purple-darker);
}

body.siakad-ui .btn-alert .badge {
    color: var(--alert-purple);
    background-color: #fff;
}

body.siakad-ui .btn-dark {
    color: #fff;
    background-color: var(--dark);
    border-color: var(--dark);
    text-shadow: none;
}

body.siakad-ui .btn-dark:hover,
body.siakad-ui .btn-dark:focus,
body.siakad-ui .btn-dark:active,
body.siakad-ui .btn-dark.active,
body.siakad-ui .open > .dropdown-toggle.btn-dark {
    color: #fff;
    background-color: var(--dark-hover);
    border-color: var(--dark-hover);
}

body.siakad-ui .btn-dark:active,
body.siakad-ui .btn-dark.active {
    background-color: var(--dark-dark);
    border-color: var(--dark-dark);
}

body.siakad-ui .btn-dark.disabled,
body.siakad-ui .btn-dark[disabled],
body.siakad-ui fieldset[disabled] .btn-dark {
    background-color: var(--dark);
    border-color: var(--dark);
    color: #fff;
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}

body.siakad-ui .btn-dark.light {
    background-color: var(--dark-light);
    border-color: var(--dark-light);
}

body.siakad-ui .btn-dark.light:hover,
body.siakad-ui .btn-dark.light:focus {
    background-color: var(--dark);
    border-color: var(--dark);
}

body.siakad-ui .btn-dark.dark {
    background-color: var(--dark-dark);
    border-color: var(--dark-dark);
}

body.siakad-ui .btn-dark.dark:hover,
body.siakad-ui .btn-dark.dark:focus {
    background-color: var(--dark-darker);
    border-color: var(--dark-darker);
}

body.siakad-ui .btn-dark .badge {
    color: var(--dark);
    background-color: #fff;
}

/* --- LABELS: system / alert / dark --- */
body.siakad-ui .label-system { background-color: rgba(55, 188, 155, 0.12); color: #1f7a63; border-color: rgba(55, 188, 155, 0.22); }
body.siakad-ui .label-alert { background-color: rgba(150, 122, 220, 0.12); color: #6d4ec0; border-color: rgba(150, 122, 220, 0.22); }
body.siakad-ui .label-dark { background-color: rgba(59, 63, 79, 0.12); color: #2d3040; border-color: rgba(59, 63, 79, 0.22); }

/* --- BADGES: system / alert / dark --- */
body.siakad-ui .badge-system { background-color: rgba(55, 188, 155, 0.12); color: #1f7a63; border-color: rgba(55, 188, 155, 0.22); }
body.siakad-ui .badge-alert { background-color: rgba(150, 122, 220, 0.12); color: #6d4ec0; border-color: rgba(150, 122, 220, 0.22); }
body.siakad-ui .badge-dark { background-color: rgba(59, 63, 79, 0.12); color: #2d3040; border-color: rgba(59, 63, 79, 0.22); }

/* --- PANELS: system / alert / dark --- */
body.siakad-ui .panel-system > .panel-heading {
    color: #fff;
    background-color: var(--system) !important;
    border-color: var(--system);
}
body.siakad-ui .panel-system > .panel-heading .panel-title { color: #fff; }
body.siakad-ui .panel-system > .panel-heading .badge {
    color: var(--system);
    background-color: #fff;
}
body.siakad-ui .panel-system > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--system);
}
body.siakad-ui .panel-system.panel-border { border-color: var(--system); }
body.siakad-ui .panel-system > .panel-body.fill {
    color: #fff;
    background-color: var(--system-light);
    border-color: var(--system-light);
}

body.siakad-ui .panel-alert > .panel-heading {
    color: #fff;
    background-color: var(--alert-purple) !important;
    border-color: var(--alert-purple);
}
body.siakad-ui .panel-alert > .panel-heading .panel-title { color: #fff; }
body.siakad-ui .panel-alert > .panel-heading .badge {
    color: var(--alert-purple);
    background-color: #fff;
}
body.siakad-ui .panel-alert > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--alert-purple);
}
body.siakad-ui .panel-alert.panel-border { border-color: var(--alert-purple); }
body.siakad-ui .panel-alert > .panel-body.fill {
    color: #fff;
    background-color: var(--alert-purple-light);
    border-color: var(--alert-purple-light);
}

body.siakad-ui .panel-dark > .panel-heading {
    color: #fff;
    background-color: var(--dark) !important;
    border-color: var(--dark);
}
body.siakad-ui .panel-dark > .panel-heading .panel-title { color: #fff; }
body.siakad-ui .panel-dark > .panel-heading .badge {
    color: var(--dark);
    background-color: #fff;
}
body.siakad-ui .panel-dark > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--dark);
}
body.siakad-ui .panel-dark.panel-border { border-color: var(--dark); }
body.siakad-ui .panel-dark > .panel-body.fill {
    color: #fff;
    background-color: var(--dark-light);
    border-color: var(--dark-light);
}

/* --- PROGRESS BARS: system / alert / dark --- */
body.siakad-ui .progress-bar-system { background-color: var(--system); }
body.siakad-ui .progress-bar-alert { background-color: var(--alert-purple); }
body.siakad-ui .progress-bar-dark { background-color: var(--dark); }

/* --- ALERTS: system / alert / dark --- */
body.siakad-ui .alert-system {
    background-color: var(--system-bg-light);
    border-left-color: var(--system);
    color: var(--system-dark);
}
body.siakad-ui .alert-alert {
    background-color: var(--alert-purple-bg-light);
    border-left-color: var(--alert-purple);
    color: var(--alert-purple-dark);
}
body.siakad-ui .alert-dark {
    background-color: #ebedf0;
    border-left-color: var(--dark);
    color: var(--dark);
}


/* ==========================================================================
   ADMIN-FORM BUTTON COLOR OVERRIDES
   admin-forms.css sets .admin-form .btn-* with AdminDesigns palette.
   These overrides ensure our theme colors win inside .admin-form too.
   ========================================================================== */

body.siakad-ui .admin-form .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-primary:hover,
body.siakad-ui .admin-form .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 125, 167, 0.25);
}

body.siakad-ui .admin-form .btn-primary:active {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

body.siakad-ui .admin-form .btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #fff;
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-success:hover,
body.siakad-ui .admin-form .btn-success:focus {
    background-color: var(--success-hover);
    border-color: var(--success-hover);
    color: #fff;
}

body.siakad-ui .admin-form .btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: #fff;
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-info:hover,
body.siakad-ui .admin-form .btn-info:focus {
    background-color: var(--info-hover);
    border-color: var(--info-hover);
    color: #fff;
}

body.siakad-ui .admin-form .btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #fff;
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-warning:hover,
body.siakad-ui .admin-form .btn-warning:focus {
    background-color: var(--warning-hover);
    border-color: var(--warning-hover);
    color: #fff;
}

body.siakad-ui .admin-form .btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-danger:hover,
body.siakad-ui .admin-form .btn-danger:focus {
    background-color: var(--danger-hover);
    border-color: var(--danger-hover);
    color: #fff;
}

body.siakad-ui .admin-form .btn-default {
    background-color: #fff;
    border-color: var(--border-color);
    color: var(--text-secondary);
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-default:hover,
body.siakad-ui .admin-form .btn-default:focus {
    background-color: var(--slate-50);
    border-color: var(--slate-300);
    color: var(--text-primary);
}

/* Admin-form custom button colors */
body.siakad-ui .admin-form .btn-system {
    background-color: var(--system);
    border-color: var(--system);
    color: #fff;
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-system:hover,
body.siakad-ui .admin-form .btn-system:focus {
    background-color: var(--system-hover);
    border-color: var(--system-hover);
    color: #fff;
}

body.siakad-ui .admin-form .btn-alert {
    background-color: var(--alert-purple);
    border-color: var(--alert-purple);
    color: #fff;
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-alert:hover,
body.siakad-ui .admin-form .btn-alert:focus {
    background-color: var(--alert-purple-hover);
    border-color: var(--alert-purple-hover);
    color: #fff;
}

body.siakad-ui .admin-form .btn-dark {
    background-color: var(--dark);
    border-color: var(--dark);
    color: #fff;
    text-shadow: none;
}

body.siakad-ui .admin-form .btn-dark:hover,
body.siakad-ui .admin-form .btn-dark:focus {
    background-color: var(--dark-hover);
    border-color: var(--dark-hover);
    color: #fff;
}


/* ==========================================================================
   ADMIN-FORM PANEL HEADING COLOR FIXES
   admin-forms.css sets panel-info heading to RED (#d3030b) — fix that.
   ========================================================================== */

body.siakad-ui .admin-form .panel-primary > .panel-heading {
    border-top-color: var(--primary);
}
body.siakad-ui .admin-form .panel-primary > .panel-heading:before {
    background-color: var(--primary);
}

body.siakad-ui .admin-form .panel-info > .panel-heading {
    border-top-color: var(--info);
}
body.siakad-ui .admin-form .panel-info > .panel-heading:before {
    background-color: var(--info);
}

body.siakad-ui .admin-form .panel-success > .panel-heading {
    border-top-color: var(--success);
}
body.siakad-ui .admin-form .panel-success > .panel-heading:before {
    background-color: var(--success);
}

body.siakad-ui .admin-form .panel-warning > .panel-heading {
    border-top-color: var(--warning);
}
body.siakad-ui .admin-form .panel-warning > .panel-heading:before {
    background-color: var(--warning);
}

body.siakad-ui .admin-form .panel-danger > .panel-heading {
    border-top-color: var(--danger);
}
body.siakad-ui .admin-form .panel-danger > .panel-heading:before {
    background-color: var(--danger);
}

/* Admin-form bg-* overrides for consistent palette */
body.siakad-ui .admin-form .bg-primary { background-color: var(--primary) !important; }
body.siakad-ui .admin-form .bg-primary.light { background-color: var(--primary-light) !important; }
body.siakad-ui .admin-form .bg-info { background-color: var(--info) !important; }
body.siakad-ui .admin-form .bg-info.light { background-color: var(--info-light) !important; }
body.siakad-ui .admin-form .bg-success { background-color: var(--success) !important; }
body.siakad-ui .admin-form .bg-success.light { background-color: var(--success-light) !important; }
body.siakad-ui .admin-form .bg-warning { background-color: var(--warning) !important; }
body.siakad-ui .admin-form .bg-warning.light { background-color: var(--warning-light) !important; }
body.siakad-ui .admin-form .bg-danger { background-color: var(--danger) !important; }
body.siakad-ui .admin-form .bg-danger.light { background-color: var(--danger-light) !important; }


/* ==========================================================================
   ADMIN-FORM OPTION/SWITCH COLOR OVERRIDES
   admin-forms.css option-* and switch-* variants use AdminDesigns palette.
   ========================================================================== */

/* option-primary */
body.siakad-ui .admin-form .option-primary input:checked + .checkbox,
body.siakad-ui .admin-form .option-primary input:focus + .checkbox,
body.siakad-ui .admin-form .option-primary input:checked + .radio,
body.siakad-ui .admin-form .option-primary input:focus + .radio {
    border-color: var(--primary);
}
body.siakad-ui .admin-form .option-primary input:checked + .radio:before,
body.siakad-ui .admin-form .option-primary input:focus + .radio:before {
    background: var(--primary);
}
body.siakad-ui .admin-form .option-primary input:checked + .checkbox:before,
body.siakad-ui .admin-form .option-primary input:focus + .checkbox:before {
    border-color: var(--primary);
}
body.siakad-ui .admin-form .option-primary input:hover + .checkbox,
body.siakad-ui .admin-form .option-primary input:hover + .radio {
    border-color: var(--primary-light);
}

/* option-info */
body.siakad-ui .admin-form .option-info input:checked + .checkbox,
body.siakad-ui .admin-form .option-info input:checked + .radio {
    border-color: var(--info);
}
body.siakad-ui .admin-form .option-info input:checked + .radio:before {
    background: var(--info);
}
body.siakad-ui .admin-form .option-info input:checked + .checkbox:before {
    border-color: var(--info);
}

/* option-success */
body.siakad-ui .admin-form .option-success input:checked + .checkbox,
body.siakad-ui .admin-form .option-success input:checked + .radio {
    border-color: var(--success);
}
body.siakad-ui .admin-form .option-success input:checked + .radio:before {
    background: var(--success);
}
body.siakad-ui .admin-form .option-success input:checked + .checkbox:before {
    border-color: var(--success);
}

/* option-warning */
body.siakad-ui .admin-form .option-warning input:checked + .checkbox,
body.siakad-ui .admin-form .option-warning input:checked + .radio {
    border-color: var(--warning);
}
body.siakad-ui .admin-form .option-warning input:checked + .radio:before {
    background: var(--warning);
}
body.siakad-ui .admin-form .option-warning input:checked + .checkbox:before {
    border-color: var(--warning);
}

/* option-danger */
body.siakad-ui .admin-form .option-danger input:checked + .checkbox,
body.siakad-ui .admin-form .option-danger input:checked + .radio {
    border-color: var(--danger);
}
body.siakad-ui .admin-form .option-danger input:checked + .radio:before {
    background: var(--danger);
}
body.siakad-ui .admin-form .option-danger input:checked + .checkbox:before {
    border-color: var(--danger);
}

/* switch-primary */
body.siakad-ui .admin-form .switch-primary > input:checked + label {
    background: var(--primary);
    border-color: var(--primary);
}
body.siakad-ui .admin-form .switch-primary > input:checked:focus + label {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* switch-info */
body.siakad-ui .admin-form .switch-info > input:checked + label {
    background: var(--info);
    border-color: var(--info);
}

/* switch-success */
body.siakad-ui .admin-form .switch-success > input:checked + label {
    background: var(--success);
    border-color: var(--success);
}

/* switch-warning */
body.siakad-ui .admin-form .switch-warning > input:checked + label {
    background: var(--warning);
    border-color: var(--warning);
}

/* switch-danger */
body.siakad-ui .admin-form .switch-danger > input:checked + label {
    background: var(--danger);
    border-color: var(--danger);
}


/* ==========================================================================
   BOOTSTRAP 3 COLOR OVERRIDES (ensure consistent palette everywhere)
   These use !important to win over any specificity battle.
   ========================================================================== */

/* Text utilities */
body.siakad-ui .text-primary { color: var(--primary) !important; }
body.siakad-ui .text-success { color: var(--success) !important; }
body.siakad-ui .text-danger { color: var(--danger) !important; }
body.siakad-ui .text-warning { color: var(--warning) !important; }
body.siakad-ui .text-info { color: var(--info) !important; }
body.siakad-ui .text-muted { color: var(--text-muted) !important; }

/* Background utilities */
body.siakad-ui .bg-primary { background-color: var(--primary) !important; }
body.siakad-ui .bg-success { background-color: var(--success) !important; }
body.siakad-ui .bg-danger { background-color: var(--danger) !important; }
body.siakad-ui .bg-warning { background-color: var(--warning) !important; }
body.siakad-ui .bg-info { background-color: var(--info) !important; }

/* Ensure all buttons have no text-shadow/gradient */
body.siakad-ui .btn,
body.siakad-ui .admin-form .btn,
body.siakad-ui .admin-form .button {
    text-shadow: none !important;
    background-image: none !important;
}

body.siakad-ui .btn:active,
body.siakad-ui .btn.active,
body.siakad-ui .admin-form .btn:active,
body.siakad-ui .admin-form .btn.active {
    box-shadow: none !important;
}