/* Local Font Definitions - TTF Only */
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Global Font Override - menggunakan local Roboto */
body, html {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}

/* PRESERVE Icon Fonts - ABSOLUTE PRIORITY */
.k-icon, .k-i-*, [class^="k-i-"], [class*=" k-i-"],
.k-svg-icon, .k-svg-icon *, 
.fa, .fas, .far, .fal, .fab, .fad, .fass, .fasr, .fasl, 
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fa-brands,
[class^="fa-"], [class*=" fa-"],
[class^="icon-"], [class*=" icon-"],
[class^="mdi-"], [class*=" mdi-"],
[class^="ti-"], [class*=" ti-"],
[class^="simple-icon-"], [class*=" simple-icon-"],
[class^="feather-"], [class*=" feather-"],
.material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp,
.glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"],
.bi, [class^="bi-"], [class*=" bi-"],
i[class^="fa"], i[class*=" fa"], i[class^="icon-"], i[class*=" icon-"],
span[class^="fa"], span[class*=" fa"], span[class^="icon-"], span[class*=" icon-"] {
    font-family: inherit !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    speak: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Apply Roboto to specific elements - EXCLUDE icons */
h1:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]), 
h2:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]), 
h3:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]), 
h4:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]), 
h5:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]), 
h6:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
p:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
label:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
input:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
select:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
textarea:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
.form-control:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
.k-textbox:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
.k-dropdown:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
.k-grid:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
.navbar:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
.nav-link:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
.card:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
.card-body:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
td:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]),
th:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]) {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}

button:not([class*="icon-"]):not([class*="fa-"]):not([class*="k-i-"]) {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
}

/* Ensure icons NEVER get overridden */
* .k-icon, * .k-i-*, * [class^="k-i-"], * [class*=" k-i-"],
* .fa, * .fas, * .far, * .fal, * .fab, * .fad, 
* [class^="fa-"], * [class*=" fa-"],
* [class^="icon-"], * [class*=" icon-"],
.navbar-toggler .icon-menu,
.navbar-toggler span[class^="icon-"],
button .icon-menu,
button span[class^="icon-"] {
    font-family: inherit !important;
}

/* Kendo DateTime Components Fix */
.k-datepicker,
.k-timepicker,
.k-datetimepicker {
    width: 100% !important;
}

.k-datepicker .k-picker-wrap,
.k-timepicker .k-picker-wrap,
.k-datetimepicker .k-picker-wrap {
    width: 100% !important;
}

.k-picker-wrap {
    width: 100% !important;
}

.k-picker-wrap .k-input {
    width: 100% !important;
}

.k-picker-wrap .k-input-inner {
    width: 100% !important;
}

/* General Layout */
.main-body {
    margin-top: 60px;
}

.content-bpm {
    margin: 1.25rem 1.25rem 0 1.25rem;
}

/* Form Group Layout */
.form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
}

label {
    flex: 0 0 150px;
    max-width: 150px;
    padding-right: 10px;
}

.form-group > div,
.form-group > span,
.k-textbox,
.k-dropdown,
.k-numerictextbox,
.k-datepicker,
.k-timepicker,
.k-datetimepicker,
.k-colorpicker,
.k-combobox,
.k-multiselect {
    flex: 1;
    min-width: 0;
    width: 100% !important;
}

/* Kendo UI Widgets */
.k-textbox,
.k-dropdown,
.k-numerictextbox,
.k-datepicker,
.k-timepicker,
.k-datetimepicker,
.k-colorpicker,
.k-combobox,
.k-multiselect,
.k-textbox .k-input-inner,
.k-dropdown .k-dropdown-wrap,
.k-numerictextbox .k-numeric-wrap,
.k-datepicker .k-picker-wrap,
.k-timepicker .k-picker-wrap,
.k-datetimepicker .k-picker-wrap,
.k-colorpicker .k-picker-wrap,
.k-combobox .k-combobox-wrap,
.k-multiselect .k-multiselect-wrap {
    width: 100%;
}

.form-control.k-widget {
    padding: 0;
    width: 100%;
    height: auto;
    display: block;
}

.form-control.k-widget:not(.k-autocomplete) {
    border-width: 0;
}

.k-radio {
  border-width: 1px !important;
  border-color: #000 !important;
}

.k-radio:not(:checked) {
  border-width: 1px !important;
  border-color: #000 !important;
}

/* Style untuk kolom Comment */
td.k-table-td[role="gridcell"]:nth-child(7).k-table-td[data-field="Comment"] {
    white-space: pre-line !important;
    vertical-align: top !important;
    padding: 8px !important;
    line-height: 1.5 !important;
}

td.k-table-td[role="gridcell"]:nth-child(7).k-table-td[data-field="Comment"] > * {
    white-space: pre-line !important;
}

/* CodeMirror Styles */
.CodeMirror {
    height: auto !important;
    min-height: 300px;
    border: 1px solid #ccc;
}

.CodeMirror-scroll {
    min-height: 300px;
    max-height: 600px;
}

.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-lines {
    min-height: 300px !important;
}

/* Navigation Styles */
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #777;
    border-color: #fff;
}

/* Footer */
.footer {
    width: 100% !important;
    margin-top: 15px;
    padding: 5px;
}

/* Loading Mask */
body > .k-loading-mask {
    position: fixed;
}

/* Layout Exclusions */
.exclude-layout {
    display: initial !important;
}

.exclude-layout label,
.exclude-layout > div,
.exclude-layout > span,
.exclude-layout .k-textbox,
.exclude-layout .k-dropdown,
.exclude-layout .k-numerictextbox,
.exclude-layout .k-datepicker,
.exclude-layout .k-timepicker,
.exclude-layout .k-datetimepicker,
.exclude-layout .k-colorpicker,
.exclude-layout .k-combobox,
.exclude-layout .k-multiselect {
    flex: initial;
    width: initial;
    max-width: initial;
}

/* Responsive Design */
@media screen and (min-width: 992px) {
    .main-body {
        margin-left: 70px !important;
        padding: 3rem 2.375rem 0 2.375rem !important;
        width: calc(100% - 60px);
    }
    
    .nav-action {
        box-shadow: none;
        left: 109px;
        top: 60px;
        height: 30px;
    }

    .dvnav-action {
        margin-bottom: 10px;
        margin-right: 138px;
        width: 100% !important;
        background: #1274AC !important;
        height: 50px !important;
    }
}

@media screen and (max-width: 992px) {
    .main-body {
        margin-left: 0 !important;
    }
    
    .nav-action {
        box-shadow: none;
        top: 60px;
        height: 30px;
    }

    .dvnav-action {
        margin-bottom: 10px;
        width: 100% !important;
        background: #1274AC !important;
        height: 50px !important;
    }
    
    .form-group {
        flex-direction: column;
        align-items: stretch;
    }

    label {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
        text-align: left;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 576px) {
    .content-wrapper2 {
        padding: 0 !important;
    }
}