/**
 * SIPASI ORANSBARI - RPT UI Styling Module
 * File: public_html/assets/css/rpt_custom.css
 * Description: Styling UI RPT: Golongan Drawer, Grid Timeline, Pola Tanam Badges, Colors & Audit Modal.
 */

 .text-panca{
    color:#ffc107 !important;
 }
 .w-40{ width: 40% !important; }
 .w-60{ width: 60% !important; }
.btn-outline-success:hover{
   background-color: #00000033;
   color:#ffc107 !important;
}
.right-panel{
   position: absolute;
   right:0;
   width: 540px;
   height: calc(100vh - 135px);
   max-height: calc(100vh - 135px);
   min-height: 520px;
   border-left: 6px solid #908139;
   z-index: 1000;
   transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
}
.right-panel.panel-wide {
   width: 720px;
}
#myGolonganTabContent {
   flex: 1 1 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: #e8ebf5;
   border-radius: 0 0 0 5px;
}
#myGolonganTabContent > .tab-pane.active {
   display: flex !important;
   flex-direction: column;
   height: 100%;
   min-height: 0;
   overflow: hidden;
}
#tJenisTanam.active {
   overflow-y: auto !important;
}
#listTersierGol {
   max-height: calc(100vh - 440px) !important;
   min-height: 200px;
   overflow-y: auto !important;
}
.form-check-input {
   background-color: hsl(0deg 0% 100%);
   border-color: #75ab237a;
}
.form-check-input:checked {
    background-color: hsl(88.17deg 81.95% 37.09%);
    border-color: #198754;
}
.form-switch .form-check-input {
   border-radius: 2em !important;
}
.form-switch .form-check-input:checked {
    border-radius: 2em;
}
.form-check-input:focus {
    border-color: #75ab23;
    outline: 0;
    box-shadow: 0 0 0 0.25rem hsl(33.71deg 100% 50.2% / 24%);
}
.form-check.form-switch {
   color:#777777;
   font-size:16px;
}
.form-check.form-switch.checked label {
   font-weight:bold;
   color:#009900;
}
.polaData{
   position: absolute;
   height: 30px;
}
.listsaluran .btn-default{
   background: #f2f4f9;
   color: #353535;
   margin-top: 2px;
}
.listsaluran .btn-default:hover{
   background:#fff;
   color: hsl(var(--col) 97% 31%);
}
.btn-default .btn-all{
   color:#999;
   padding-right: 6px;
   padding-left: 6px;
}
.btn-default .btn-all:hover{
   color: #fff;
   border-radius: 0;
   background-color:  hsl(226.15deg 56.6% 43.57%);
   overflow: hidden;
}
.listsaluran {
   margin-bottom: 3px;
}
.listsaluran .btn-default{
   background: #ffffff;
   color: #1e293b;
   border: 1px solid #cbd5e1;
   border-radius: 4px;
   padding: 4px 6px !important;
   margin-top: 2px;
   font-size: 0.82rem;
   transition: all 0.15s ease;
}
.listsaluran .btn-default:hover{
   background: #f1f5f9;
   color: #0f172a;
   border-color: #94a3b8;
}
.btn-default .btn-all{
   color: #475569;
   padding: 2px 7px;
   border-radius: 3px;
   background: #e2e8f0;
   font-size: 0.78rem;
   line-height: 1.2;
   border: none;
   flex-shrink: 0;
}
.btn-default .btn-all:hover{
   color: #fff;
   background-color: #2563eb;
}
.list_tersier{
   border: 1px solid #e2e8f0 !important;
   border-radius: 4px;
   padding: 3px 8px;
   margin: 2px 0 2px 6px;
   background-color: #ffffff;
   font-size: 0.80rem;
   width: calc(100% - 6px);
   align-items: center !important;
   overflow: hidden;
   white-space: nowrap;
   display: flex;
   justify-content: space-between !important;
   transition: all 0.15s ease;
}
.list_tersier:hover{
   background-color: #f8fafc;
   border-color: #cbd5e1 !important;
}
.list_tersier div{
   display: inline-block;
}
.list_tersier .numgol{
   font-size: 0.78rem;
   font-weight: 700;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
   border-radius: 4px;
   background-color: #aab0c1;
   margin-left: 6px;
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   flex-shrink: 0;
}
.datemt{
   margin-left: 80px;
   transform: skew(70.5deg);
   color: rgba(244, 239, 199, 0.52);
}
.list_tersier.golongan1 .numgol{
   background-color: #947f35;
}
.list_tersier.golongan2 .numgol{
   background-color: #5f9846;
}
.list_tersier.golongan3 .numgol{
   background-color: #5458a3;
}
.list_tersier.golongan4 .numgol{
   background-color: #86447f;
}
.list_tersier.golongan5 .numgol{
   background-color: #a21111;
}
.list_tersier.golongan6 .numgol{
   background-color: #76530f;
}

.list_tersier:hover{
   background-color: #ffffff8c;
}
.moving-petak{   
    transition: transform 3s ease-in-out;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Hanya berikan transisi untuk transform dan opacity */
    position: relative; /* Pastikan button memiliki posisi relative untuk memungkinkan translasi */
}
.moving-petak.move-left {
    transform: translateX(-100%); /* Bergerak 100% ke kiri dari posisi awal */
    opacity: 0;
}
.moving-petak.move-right {
    transform: translateX(100%); /* Bergerak 100% ke kiri dari posisi awal */
    opacity: 0;
}
.miniscrool::-webkit-scrollbar {
    width: 8px;  
    background-color: #e9ebf5; 
}
.miniscrool::-webkit-scrollbar-button {
    display: none; 
}
.miniscrool::-webkit-scrollbar-track {
    background: #e9ebf5; 
    border-radius: 4px; 
}
.miniscrool::-webkit-scrollbar-thumb {
    background-color: #b1bccf8c; /* warna thumb */
    border-radius: 4px; /* membuat tepian thumb melengkung */
    border: 2px solid #e9ebf5; /* membuat border, opsional */
}
.miniscrool::-webkit-scrollbar-thumb:hover {
    background-color: #b1bccfd4; /* warna thumb saat di-hover */
}
.nav-tabs {
    border-bottom: 1px solid #83909e78;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #e9ebf5;
    border-color: #6d6d6d75 #3636366e #e9ebf5;
    font-weight:bold;
    background-image: linear-gradient(white, #e9ebf5);
}
.nav-tabs .nav-link:hover {
   border-color: #6d6d6d75 #3636366e #e9ebf5;
    color:#111;
    background:#d8dbea;
    background-image: linear-gradient(white, #e9ebf5);
}
.nav-tabs .nav-link:active,.nav-tabs .nav-link:focus, .nav-tabs .nav-link.active:hover {
   border-color: #6d6d6d75 #3636366e #e9ebf5;
    color:#bf903a;
    background:#e9ebf5;
    background-image: linear-gradient(white, #e9ebf5);
}
.nav-tabs .nav-link, .nav-tabs .nav-link {
   background: #dbe0ebab;
   color: #303030;
   font-weight: bold;
}
.leftTab{
   width: 800px;
    position: absolute;
    margin-left: -421px;
    transform: rotate(-90deg);
    margin-top: 392px;
    float: right;
}

.tabL{
    display: inline-block;
    float: right;
    margin-right: 3px;
    background: #289732;
    border-radius: 0px 10px 0px 0px;
    width: fit-content;
    padding: 3px 10px 3px 5px;
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
    filter: drop-shadow(#0003 0.1rem -.2rem 1px);
    cursor: pointer;
}
.form-select {
   background-color: #eaedf8;
}
.vargol{
   padding: 1px 5px;
   border-radius: 3px;
   color: #fff;
   font-size: 0.72rem;
   font-weight: 700;
   line-height: 1.2;
   margin-left: 2px;
   flex-shrink: 0;
}
.max-nmsal{
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.82rem;
   font-weight: 600;
   color: #1e293b;
}
#list_tersier_selected, #list_tersier_unselected {
   flex: 1 1 0;
   min-height: 0;
   overflow-x: hidden !important;
   overflow-y: auto !important;
}
.delGolongan{
   cursor: pointer;
   margin-top:2px;
   margin-bottom:-2px;

}
.delGolongan:hover{
   background-color: #00000055;
}
.tersierSaluran{
   cursor: pointer;
}
.petakItem {
   background-color: #fff7;
    margin-top: 2px;
    padding: 3px;
    cursor: pointer;
}
.petakItem:hover .name{
   background-color: #fff;
}
.persenPadi{ background-color: #3db011; }
.persenPalawija{ background-color: #b3d554; }
.persenTebu{ background-color:#92a95e; }
.dop.dragable{
   position: absolute;;
}
input::placeholder {
  opacity: 0.3;
  color: #ffc107;
}
.color_kebutuhan{
   color:#0066dd !important
}
.color_tersedia{
   color:#dd7700 !important
}
.btn_edit_tgl_mt{
   transform: scale(.8);
}
.btn_edit_tgl_mt:hover, .btn_edit_tgl_mt:active, .btn_edit_tgl_mt:focus{
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Interactive Calculation Cells */
.clickable-calc-gol, .clickable-calc-sawah, .clickable-calc-eto {
   cursor: pointer !important;
   transition: background-color 0.15s ease, color 0.15s ease, outline 0.15s ease;
   position: relative;
}
.clickable-calc-gol:hover, .clickable-calc-sawah:hover, .clickable-calc-eto:hover {
   background-color: #1d4ed8 !important;
   color: #ffffff !important;
   font-weight: 700 !important;
   outline: 2px solid #60a5fa !important;
   outline-offset: -2px;
   z-index: 25;
   box-shadow: 0 2px 8px rgba(29, 78, 216, 0.45) !important;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.modal-calc-detail .modal-content {
   background: #ffffff;
   border-radius: 8px;
   border: 1px solid #184b86;
   box-shadow: 0 15px 40px rgba(0,0,0,0.35);
   overflow: hidden;
}
.modal-calc-detail .modal-header {
   background: #184b86;
   color: #ffffff;
   border-bottom: 1px solid #123d6d;
   padding: 12px 20px;
}
.modal-calc-detail .modal-title {
   font-weight: 600;
   font-size: 0.95rem;
   color: #f8fafc;
   display: flex;
   align-items: center;
   gap: 8px;
}
.modal-calc-detail .modal-header i {
   color: #93c5fd !important;
   font-size: 1rem;
}
.modal-calc-detail .modal-body {
   padding: 18px 22px;
   color: #1e293b;
   background: #ffffff;
   font-size: 0.8125rem;
   line-height: 1.55;
}
.modal-calc-detail .modal-body i,
.modal-calc-detail .modal-footer i {
   color: #2563eb !important;
}
.modal-calc-section {
   margin-bottom: 20px;
}
.modal-calc-section:last-child {
   margin-bottom: 0;
}
.modal-calc-section-title {
   font-size: 0.85rem;
   font-weight: 700;
   color: #0f172a;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 6px;
   padding-bottom: 4px;
   border-bottom: 1px solid #f1f5f9;
}
.modal-calc-top-header {
   margin-bottom: 18px;
   padding-bottom: 12px;
   border-bottom: 1px solid #e2e8f0;
}
.modal-calc-formula {
   background: #0f172a;
   color: #f8fafc;
   padding: 10px 14px;
   border-radius: 4px;
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 0.80rem;
   overflow-x: auto;
   border-left: 3px solid #2563eb;
   margin-bottom: 8px;
   line-height: 1.55;
}
.modal-calc-narasi {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-left: 3px solid #2563eb;
   color: #1e293b;
   padding: 12px 16px;
   border-radius: 4px;
   line-height: 1.6;
   font-size: 0.80rem;
}
.modal-calc-param-table th {
   background: #f8fafc;
   font-weight: 600;
   font-size: 0.77rem;
   color: #334155;
   border-color: #cbd5e1;
   padding: 6px 8px;
}
.modal-calc-param-table td {
   font-size: 0.80rem;
   vertical-align: middle;
   border-color: #cbd5e1;
   padding: 6px 8px;
   color: #0f172a;
}
.modal-calc-highlight {
   background: #eff6ff;
   color: #1e40af;
   border: 1px solid #bfdbfe;
   padding: 1px 6px;
   border-radius: 3px;
   font-weight: 600;
}
.modal-calc-detail code {
   color: #0f172a !important;
   background: #f1f5f9 !important;
   border: 1px solid #e2e8f0;
   padding: 1px 5px;
   border-radius: 3px;
   font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
   font-size: 0.78rem;
   font-weight: 600;
}
.modal-calc-subbox {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 4px;
   padding: 10px 14px;
   font-size: 0.78rem;
}