:root{
    --sa-primary-color: #D82C2C;
    --sa-gray-bg: #EEEEF0;
}

/*
 ========================= 
 MAIN LAYOYT
 ========================= 
 */

.sinotticowrapper {
    position: relative;
    width:100vw;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index:3;
}


.sinotticowrapper .sn-topbar{
    height: 40px;
    width: 100%;
    padding:5px 15px;
    background: var(--sa-primary-color);
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap:10px;
}

.sinotticowrapper .sn-content-page{
    flex-grow: 1;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding:10px 10px 0 10px;
    background: var(--sa-gray-bg);
    display: flex;
}

.sinotticowrapper .k-tabstrip{
    width: 100%;
}

.sinotticowrapper .k-tabstrip-scrollable>.k-tabstrip-items-wrapper>.k-tabstrip-items{
    overflow: visible;
}
.sinotticowrapper .k-tabstrip-top>.k-tabstrip-items-wrapper .k-item.k-active{
    border-top-color: rgba(0,0,0,0.2);
    border-left-color: rgba(0,0,0,0.2);
    border-right-color:rgba(0,0,0,0.2);
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
}
.sinotticowrapper .k-tabstrip-top>.k-tabstrip-content{
    border-left-color: rgba(0,0,0,0.2);
    border-right-color:rgba(0,0,0,0.2);
    border-left-width: 1px;
    border-right-width: 1px;
}
.sinotticowrapper  .k-tabstrip-top>.k-tabstrip-items-wrapper .k-item{
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-color: var(--kendo-color-border);
}

/*
 ========================= 
    GRID
 ========================= 
 */

.sinotticowrapper .filter{
    padding-bottom:10px;
}
.k-tabstrip-items-wrapper .k-item:focus{
    box-shadow: none;
    outline: none;
}
.k-tabstrip-content:focus{
    outline: none !important;
}

/*
 ========================= 
  INFO
 ========================= 
 */
.column-flex{
    display: flex;
    flex-direction: column;
    gap:10px;
}
.sinotticowrapper .sn-page-wrap{
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right:0;
    overflow: hidden;
}
.sinotticowrapper .sn-page-scroll{
    position: absolute;
    top:0;
    left:0;
    bottom:80px;
    right:0;
    overflow: auto;
    padding:10px;
}
.sinotticowrapper .sn-page .sn-action-bar{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--kendo-color-border);
    padding: 10px;
    margin:0;
}
.sinotticowrapper .sn-box-data{
    margin:0;
    border-radius: var(--kendo-border-radius-lg, 0.375rem);
}
.sinotticowrapper .flex-center-row{
    display: flex;
    align-items: center;
    gap:5px;
}
.sinotticowrapper .flex-stretch-row {
    display: flex;
    align-items: stretch;
    gap:5px;
}
.sinotticowrapper .f-grow{
    flex-grow:1;
}



.sinotticowrapper .sn-box-data.primary-color{
    background: var(--sa-primary-color);
    color: #fff;
}

.sinotticowrapper .odl-fields{
    display: flex; 
    flex-wrap:wrap;
    gap: 10px;
}
.sinotticowrapper .odl-fields .odl-field{
    border: 1px solid var(--kendo-color-border);
    padding:5px;
    display: block;
    box-sizing: border-box;
    border-radius: 3px;
    background: var(--kendo-color-border);
    min-width: 200px;
}
.sinotticowrapper .sn-page-odl .odl-field label{
    display: block;
    font-size: 14px;
    line-height: 15px;
}
.sinotticowrapper .k-card-actions{
    padding-top:10px;
}

.sinotticowrapper .odl-fields textarea{
    width: 100%;
}

.sn-grid-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: 0px -10px;
    align-items: stretch;
}
.sn-grid-row  .sn-box-data-group .sn-box-label{
    display: flex;
    align-items: center;
}
.sn-grid-row  .sn-box-data-group .sn-box-value{
    display: flex;
    align-items: center;
    font-size: 18px;
}

/*
 =========================
  DROPDOWN POPUP FIX TABLET
 =========================
 */
@media (max-height: 900px) {
    .k-animation-container:has(.k-list-filter) {
        position: fixed !important;
        top: 30dvh !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10002 !important;
        max-height: 60dvh;
    }
    .k-animation-container:has(.k-list-filter) .k-popup {
        max-height: 60dvh;
    }
}

.production-row{
    display: flex;
}
.history-row{
    flex-grow: 1;
}
.history-scroll-content{
    position:absolute;
    right:20px;
    left:10px;
    top:20px;
    overflow: auto;
    display: flex;
    gap: 10px;
    padding-bottom:20px;
}

.history-item{
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-lg, 0.375rem);
    box-sizing: border-box;
    min-width: 230px;
}
.history-item h3{
    font-size: 13px;
    padding:5px 10px;
    border-bottom: 1px solid var(--kendo-color-border);
    margin: 0;
}
.history-item .info{
    padding:5px 10px;
    display: flex;
    flex-direction: column;
    gap:5px;
}
.history-item .info-row{
    display: flex;
}
.history-item .info-row span{
    display: block;
    padding:2px 5px;
    font-size: 12px
}
.history-item .info-row span.label{
    font-weight: bold;
    background: var(--kendo-color-border);
    width: 100px;
}

.current-production{
    display: flex;
    flex-direction: column;
    gap:5px;
}

.current-production .production-action-row{
    display: flex;
    align-items: stretch;
}
.current-production .production-action-row .box-label{
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ededed;
    min-width: 160px;
}
.current-production .production-action-row .box-value{
    padding: 5px 10px;
    text-align: center;
    font-size: 16px;
    flex-grow: 1;
    min-width: 150px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left-width: 0;
    background: #fafafa;
    display: flex;
    align-items: center;
}
.current-production .production-action-row .box-actions{
    margin-left: 10px;
}

/*
 =========================
  HISTORY TABLE
 =========================
 */
.history-dialog.k-window{
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
}
.history-dialog .k-window .k-window-content{
    overflow-y: auto;
    flex-grow: 1;
}
.history-dialog .k-window-content{
    padding:0 !important;
}

.history-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.history-table thead th{
    background: var(--sa-gray-bg);
    font-weight: bold;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid var(--kendo-color-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.history-table tbody td{
    padding: 6px 10px;
    border-bottom: 1px solid var(--kendo-color-border);
    vertical-align: middle;
}
.history-table tbody tr:hover{
    background: var(--sa-gray-bg);
}

.history-dialog .section-name{
    display: block;
    font-weight: bold;
    font-size: 14px;
}
.history-dialog .state-value{
    color:#888;
}
.history-dialog .date-start{
    display:block;
}
.history-dialog .duration{
    color:#888;
}