/*
 * JADWAL KAPAL ZEA — CSS
 * Susunan bagian:
 * 1. Variabel warna dan kartu utama
 * 2. Panel kapal, status, catatan, dan jadwal
 * 3. Ikon, label, tanggal, dan tombol
 * 4. Tampilan desktop/tablet/HP
 * 5. Tampilan dashboard WordPress
 *
 * PENGATURAN LATAR LABEL (CSS SAJA):
 * --jkz-label-opacity: 100%; nilai 100% = pekat, 50% = 50% transparan.
 * --jkz-label-radius: 12px;  ubah angka untuk sudut kiri atas label.
 * Variabel berada pada .jkz-card; tidak menambah setting Customizer.
 *
 * Aturan dipertahankan dalam urutan cascade asal agar tampilan tidak
 * berubah tanpa sengaja. Beberapa override memang diperlukan karena
 * aturan yang lebih akhir menyesuaikan desain untuk ukuran layar tertentu.
 */

/* Jadwal Kapal Zea 1.0.5 — stylesheet dirancang ulang, terisolasi */
.jkz-list {
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin:22px 0;
    font-family:Arial,Helvetica,sans-serif;
}

.jkz-card {
    --jkz-accent:#087c28;
    --jkz-ship-text:#fff;
    --jkz-ship-bg:#082e53;
    --jkz-icon-color:#fff;
    --jkz-label-bg:#dff1e4;
    --jkz-label-opacity:65%;
    --jkz-label-radius:12px;
    display:grid;
    grid-template-columns:minmax(220px,30%) minmax(0,70%);
    width:100%;
    overflow:hidden;
    border:2px solid #d1dfd3;
    border-radius:20px;
    background:var(--jkz-accent);
    box-shadow:0 7px 18px rgba(0,0,0,.1);
    box-sizing:border-box;
    isolation:isolate;
}

.jkz-card * {
    box-sizing:border-box;
}

.jkz-ship-panel {
    display:flex;
    align-items:flex-start;
    min-width:0;
    min-height:0;
    padding:20px 18px;
    background:var(--jkz-ship-bg);
    color:var(--jkz-ship-text);
}

.jkz-ship-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 12px;
    width:100%;
    min-width:0;
}

.jkz-ship-name {
    flex:1 1 52%;
    min-width:0;
    margin:0;
    color:var(--jkz-ship-text)!important;
    font-size:clamp(16px,1.65vw,23px);
    font-weight:800;
    line-height:1.12;
    text-transform:uppercase;
    overflow-wrap:anywhere;
}

.jkz-status {
    flex:0 1 auto;
    max-width:44%;
    margin:1px 0 0;
    padding:6px 10px;
    border:2px solid var(--jkz-ship-text);
    border-radius:30px;
    color:var(--jkz-ship-text);
    background:transparent;
    font-size:clamp(10px,1.05vw,14px);
    font-weight:700;
    line-height:1.15;
    text-align:center;
    text-transform:uppercase;
    overflow-wrap:anywhere;
}

.jkz-main-panel {
    display:flex;
    flex-direction:column;
    gap:9px;
    min-width:0;
    padding:9px;
    background:var(--jkz-accent);
}

.jkz-schedule-box {
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border-radius:14px;
    background:#fff;
}

.jkz-row {
    display:grid;
    grid-template-columns:34px minmax(125px,36%) minmax(0,1fr);
    align-items:center;
    gap:6px;
    min-height:59px;
    padding:5px 7px;
    border-bottom:1px solid #dbe4df;
    background:#fff;
}

.jkz-row:last-child {
    border-bottom:0;
}

.jkz-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin:0 auto 0 -3px;
    border-radius:50%;
    background:var(--jkz-accent);
    color:var(--jkz-icon-color);
}

.jkz-icon svg {
    display:block;
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.jkz-label {
    position:relative;
    z-index:0;
    display:flex;
    align-items:center;
    align-self:center;
    min-width:0;
    min-height:43px;
    margin:0;
    padding:7px 10px;
    background:color-mix(in srgb, var(--jkz-label-bg) var(--jkz-label-opacity, 100%), transparent);
    border-radius:var(--jkz-label-radius, 12px) 0 0 0;
    clip-path:polygon(0 0,100% 0,80% 100%,0 100%);
}

/* Aksen potongan latar untuk desktop.
   Potongan berada di dalam sisi miring label; latar putih di belakangnya
   yang terlihat sebagai celah. Ukuran dan bentuk dasar label tidak berubah. */
.jkz-label::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #fff;
    pointer-events: none;
    clip-path: polygon(89% 0, 91% 0, 79% 100%, 77% 100%);
}

.jkz-label strong {
    display:block;
    padding-right:7px;
    color:var(--jkz-label-text);
    font-size:clamp(13px,1.2vw,17px);
    font-weight:800;
    line-height:1.16;
    overflow-wrap:anywhere;
}

.jkz-date {
    min-width:0;
    margin-left:-2px;
    padding:4px 2px;
    color:var(--jkz-date-text);
    font-size:clamp(15px,1.4vw,19px);
    font-weight:700;
    line-height:1.22;
    overflow-wrap:anywhere;
}

.jkz-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    min-width:0;
}

.jkz-button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex:0 0 auto;
    width:max-content;
    max-width:100%;
    min-width:0;
    padding:11px 14px;
    border:2px solid #8fb6d5;
    border-radius:10px;
    background:linear-gradient(180deg,#174779,#0b2c53);
    box-shadow:0 3px 0 rgba(0,0,0,.22);
    color:#fff!important;
    text-decoration:none!important;
    font-size:clamp(12px,1.1vw,15px);
    font-weight:800;
    line-height:1.15;
    transition:filter .2s ease,transform .2s ease;
}

.jkz-button:hover {
    filter:brightness(1.1);
    color:#fff!important;
    transform:translateY(-1px);
}

.jkz-button span:first-child {
    min-width:0;
    white-space:nowrap;
}

.jkz-arrow {
    flex:0 0 auto;
    font-size:25px;
    font-weight:400;
    line-height:.7;
}

.jkz-admin-grid {
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
    gap:24px;
}

.jkz-admin-grid>div {
    min-width:0;
}

.jkz-admin-grid h3 {
    margin-top:8px;
}

.jkz-admin-grid p {
    margin:0 0 16px;
}

.jkz-admin-grid label {
    display:inline-block;
    margin-bottom:6px;
}

@media (min-width:1000px) {
    .jkz-card {
        grid-template-columns:minmax(230px,30%) minmax(0,70%);
    }

    .jkz-row {
        grid-template-columns:40px minmax(110px,31%) minmax(0,1fr);
    }

    .jkz-date {
        margin-left:-7px;
    }

}

@media (max-width:700px) {
    .jkz-list {
        gap:12px;
        margin:14px 0;
    }

    .jkz-card {
        grid-template-columns:minmax(0,1fr);
        border-radius:16px;
    }

    .jkz-ship-panel {
        padding:12px 14px;
        background:var(--jkz-ship-bg);
    }

    .jkz-ship-head {
        align-items:center;
        gap:10px;
    }

    .jkz-ship-name {
        flex:1 1 55%;
        font-size:clamp(18px,4.8vw,24px);
        line-height:1.08;
        overflow-wrap:normal;
    }

    .jkz-status {
        flex:0 1 auto;
        max-width:45%;
        padding:5px 8px;
        font-size:clamp(9px,2.5vw,12px);
        border-width:1.5px;
    }

    .jkz-main-panel {
        padding:7px;
        gap:11px;
    }

    .jkz-schedule-box {
        border-radius:10px;
    }

    .jkz-row {
        grid-template-columns:30px minmax(95px,29%) minmax(0,1fr);
        gap:5px;
        min-height:57px;
        padding:5px 7px;
    }

    .jkz-icon {
        width:24px;
        height:24px;
    }

    .jkz-icon svg {
        width:21px;
        height:21px;
    }

    .jkz-label {
        min-height:34px;
        padding:5px 7px;
        border-radius:4px 0 0 4px;
        clip-path:polygon(0 0,100% 0,80% 100%,0 100%);
    }

    .jkz-label strong {
        font-size:clamp(10px,2.8vw,13px);
        line-height:1.12;
        padding-right:8px;
    }

    .jkz-date {
        margin-left:-5px;
        padding:3px 1px;
        font-size:clamp(12px,3.1vw,15px);
        line-height:1.18;
        overflow-wrap:anywhere;
    }

    .jkz-actions {
        flex-wrap:nowrap;
        align-items:stretch;
        gap:7px;
    }

    .jkz-button {
        flex:0 1 auto;
        width:max-content;
        max-width:calc(50% - 4px);
        gap:7px;
        padding:9px 9px;
        font-size:clamp(9px,2.45vw,12px);
        border-width:1.5px;
        border-radius:8px;
    }

    .jkz-button span:first-child {
        white-space:normal;
        overflow-wrap:normal;
    }

    .jkz-arrow {
        font-size:19px;
    }

}

@media (max-width:390px) {
    .jkz-ship-panel {
        padding:10px 11px;
    }

    .jkz-ship-head {
        gap:7px;
    }

    .jkz-ship-name {
        font-size:17px;
    }

    .jkz-status {
        max-width:46%;
        padding:4px 6px;
        font-size:9px;
    }

    .jkz-main-panel {
        padding:5px;
        gap:5px;
    }

    .jkz-row {
        grid-template-columns:24px minmax(78px,29%) minmax(0,1fr);
        gap:4px;
        min-height:52px;
        padding:4px 5px;
    }

    .jkz-icon {
        width:21px;
        height:21px;
    }

    .jkz-icon svg {
        width:18px;
        height:18px;
    }

    .jkz-label {
        min-height:31px;
        padding:4px 5px;
    }

    .jkz-label strong {
        font-size:9px;
        padding-right:7px;
    }

    .jkz-date {
        margin-left:-5px;
        font-size:11px;
    }

    .jkz-actions {
        gap:5px;
    }

    .jkz-button {
        max-width:calc(50% - 3px);
        gap:4px;
        padding:8px 6px;
        font-size:9px;
    }

    .jkz-arrow {
        font-size:16px;
    }

}

@media (max-width:480px) {
    .jkz-admin-grid {
        grid-template-columns:1fr;
    }

}

/* =========================================================
   DASHBOARD WORDPRESS — FORM EDITOR
   ========================================================= */
/* Admin metabox: jadwal dan pengaturan warna berdampingan seperti editor lama. */
.jkz-admin-grid {
    display:grid!important;
    grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr)!important;
    gap:22px!important;
    align-items:start;
}

.jkz-admin-grid>div {
    min-width:0;
}

.jkz-admin-grid input[type="text"] {
    width:100%;
    max-width:560px;
}

.jkz-admin-grid>div:first-child input[type="text"] {
    max-width:100%;
}

.jkz-admin-grid>div:first-child p {
    margin-bottom:11px;
}

.jkz-admin-grid>div:nth-child(2) p {
    margin-bottom:12px;
}

.jkz-admin-grid>div:nth-child(2) input[type="color"] {
    width:58px;
    height:30px;
    padding:2px;
}

.jkz-admin-grid h3 {
    margin:7px 0 12px;
    padding-bottom:8px;
    border-bottom:1px solid #dcdcde;
    font-size:14px;
}

@media(max-width:780px) {
    .jkz-admin-grid {
        grid-template-columns:1fr!important;
    }

}

@media(max-width:700px) {
    .jkz-row {
        grid-template-columns:30px minmax(125px,36%) minmax(0,1fr);
        gap:5px;
        min-height:45px;
        padding:4px 6px;
    }

    .jkz-icon {
        width:27px;
        height:27px;
        margin-left:-4px;
    }

    .jkz-icon svg {
        width:19px;
        height:19px;
    }

    .jkz-label {
        min-height:31px;
        padding:4px 8px;
        border-radius:12px 0 0 0;
        clip-path:polygon(0 0,100% 0,78% 100%,0 100%);
    }

    .jkz-label strong {
        font-size:clamp(11px,2.9vw,14px);
        color:var(--jkz-label-text);
        line-height:1.1;
        padding-right:9px;
    }

    .jkz-date {
        margin-left:-7px;
        padding:3px 1px;
        font-size:clamp(13px,3.2vw,16px);
        color:var(--jkz-date-text);
    }

    .jkz-actions {
        flex-wrap:nowrap;
        gap:8px;
    }

    .jkz-button {
        flex:0 1 auto;
        width:max-content;
        max-width:none;
        gap:9px;
        padding:9px 11px;
        font-size:clamp(10px,2.5vw,13px);
    }

    .jkz-button span:first-child {
        white-space:nowrap;
    }

}

@media(max-width:480px) {
    .jkz-ship-head {
        gap:6px;
    }

    .jkz-ship-name {
        flex-basis:50%;
        font-size:clamp(15px,4.1vw,19px);
    }

    .jkz-status {
        max-width:46%;
        font-size:clamp(9px,2.5vw,11px);
        padding:4px 6px;
    }

    .jkz-row {
        grid-template-columns:25px minmax(112px,38%) minmax(0,1fr);
        gap:4px;
        padding:4px 5px;
    }

    .jkz-icon {
        width:24px;
        height:24px;
        margin-left:-4px;
    }

    .jkz-icon svg {
        width:17px;
        height:17px;
    }

    .jkz-label strong {
        font-size:clamp(10px,2.8vw,12px);
    }

    .jkz-date {
        margin-left:-7px;
        font-size:clamp(11px,3vw,14px);
    }

    .jkz-button {
        gap:5px;
        padding:8px 7px;
        font-size:clamp(9px,2.3vw,11px);
    }

    .jkz-arrow {
        font-size:18px;
    }

}

/* =========================================================
   PENYESUAIAN DESAIN TAMBAHAN
   ========================================================= */
/* 1.0.7: paksa DI turun ke baris berikutnya pada label pengambilan */
/* 1.0.6: micro-ajustements sesuai feedback visual */
/* Geser hanya lingkaran ikon; kolom label dan tanggal tetap di tempat. */
.jkz-icon {
    transform:translateX(4px);
}

/* Bidang label: sudut kanan atas sedikit ke kiri, sudut kanan bawah lebih ke kiri. */
.jkz-label {
    clip-path:polygon(0 0,92% 0,68% 100%,0 100%);
}

/* Sedikit perbesar teks tanggal dan tombol. */
.jkz-date {
    font-size:calc(clamp(15px,1.4vw,19px) + 2px);
}

.jkz-button {
    font-size:calc(clamp(12px,1.1vw,15px) + 2px);
}

.jkz-arrow {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    line-height:1;
    transform:translateY(-1px);
}

@media (min-width:1000px) {
    .jkz-date {
        font-size:calc(clamp(15px,1.4vw,19px) + 2px);
    }

}

@media (max-width:700px) {
    .jkz-date {
        font-size:calc(clamp(13px,3.2vw,16px) + 2px);
    }

    .jkz-button {
        font-size:calc(clamp(10px,2.5vw,13px) + 2px);
    }

    .jkz-arrow {
        font-size:21px;
    }

}

@media (max-width:480px) {
    .jkz-date {
        font-size:calc(clamp(11px,3vw,14px) + 2px);
    }

    .jkz-button {
        font-size:calc(clamp(9px,2.3vw,11px) + 2px);
    }

    .jkz-arrow {
        font-size:20px;
    }

}

/* Bentuk label dibuat lebih menyudut; teks pengambilan diberi baris baru eksplisit. */
.jkz-label {
    clip-path:polygon(0 0,84% 0,62% 100%,0 100%);
}

/* =========================================================
   EDITOR TANGGAL DI DASHBOARD
   ========================================================= */
/* 1.0.8: editor tanggal dengan kontrol format sederhana */
.jkz-formatted-field label {
    display:block!important;
    margin-bottom:5px;
}

.jkz-format-toolbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    margin:0 0 6px;
}

.jkz-format-toolbar label {
    display:inline-flex!important;
    align-items:center;
    gap:4px;
    margin:0!important;
    font-size:12px;
}

.jkz-format-toolbar select {
    min-height:25px;
}

.jkz-date-textarea {
    max-width:100%;
    min-height:54px;
    resize:vertical;
    font-family:monospace;
}

.jkz-formatted-field .description {
    display:block;
    margin-top:4px;
}

/* 1.1.2: tanggal kartu digeser lebih ke kiri tanpa mengubah kolom lain. */
.jkz-date-textarea {
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    height:40px !important;
    min-height:40px !important;
    resize:vertical;
    font-family:inherit !important;
    font-size:13px !important;
    font-weight:400 !important;
    line-height:1.4 !important;
    color:#1d2327 !important;
    padding:8px 12px !important;
    letter-spacing:normal !important;
}

.jkz-date {
    margin-left:-23px;
}

@media (max-width:700px) {
    .jkz-date {
        margin-left:-20px;
    }

}

@media (max-width:480px) {
    .jkz-date {
        margin-left:-23px;
    }

}

/* 1.1.3: penyesuaian desktop saja — status lebih proporsional dan label jadwal lebih lega. */
@media (min-width:701px) {
    .jkz-ship-panel {
        padding:16px 14px!important;
    }

    .jkz-ship-head {
        align-items:flex-start!important;
        justify-content:flex-start!important;
        flex-wrap:wrap!important;
        gap:8px 10px!important;
    }

    .jkz-ship-name {
        flex:1 1 100%!important;
        font-size:clamp(18px,1.8vw,25px)!important;
        line-height:1.08!important;
        overflow-wrap:normal!important;
    }

    .jkz-status {
        flex:0 1 auto!important;
        width:max-content!important;
        max-width:100%!important;
        margin:0!important;
        padding:5px 9px!important;
        font-size:clamp(9px,.85vw,12px)!important;
        line-height:1.15!important;
        overflow-wrap:anywhere!important;
    }

    .jkz-row {
        grid-template-columns:40px minmax(145px,36%) minmax(0,1fr)!important;
        gap:7px!important;
    }

    .jkz-label {
        padding:6px 9px!important;
        clip-path:polygon(0 0,92% 0,80% 100%,0 100%)!important;
    }

    .jkz-label strong {
        font-size:clamp(11px,1vw,15px)!important;
        line-height:1.14!important;
        padding-right:5px!important;
    }

}

/* =========================================================
   CATATAN KAPAL — FRONTEND DAN DASHBOARD
   ========================================================= */
/* 1.1.4: catatan opsional di bawah nama kapal dan status. */
.jkz-note {
    display:block;
    width:100%;
    min-width:0;
    margin:10px 0 0;
    padding:8px 12px;
    border:1.5px solid var(--jkz-ship-text,#fff);
    border-radius:9px;
    background:var(--jkz-ship-bg,#082e53);
    color:var(--jkz-ship-text,#fff);
    font-size:clamp(11px,1vw,14px);
    font-weight:600;
    line-height:1.35;
    overflow-wrap:anywhere;
    box-sizing:border-box;
}

.jkz-note-admin {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(150px,.38fr);
    gap:12px;
    align-items:end;
    margin:0 0 11px;
}

.jkz-note-admin p {
    margin:0!important;
    min-width:0;
}

.jkz-note-admin textarea {
    width:100%;
    max-width:100%;
    resize:vertical;
}

.jkz-note-admin select {
    width:100%;
    max-width:100%;
}

@media(max-width:780px) {
    .jkz-note-admin {
        grid-template-columns:minmax(0,1fr) minmax(130px,.45fr);
    }

}

@media(max-width:480px) {
    .jkz-note {
        margin-top:8px;
        padding:7px 9px;
        font-size:11px;
    }

    .jkz-note-admin {
        grid-template-columns:1fr;
    }

}

/* 1.1.5: catatan selalu berada di bawah baris nama kapal/status, bukan di sampingnya. */
.jkz-card .jkz-ship-panel {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
}

.jkz-card .jkz-ship-head {
    display:flex!important;
    width:100%!important;
    flex:0 0 auto!important;
}

.jkz-card .jkz-note {
    display:block!important;
    width:100%!important;
    flex:0 0 auto!important;
    margin:0!important;
}

@media (max-width:700px) {
    .jkz-card .jkz-ship-panel {
        gap:8px!important;
    }

    .jkz-card .jkz-ship-head {
        align-items:center!important;
    }

}

/* =========================================================
   OVERRIDE AKHIR — PENYESUAIAN DESAIN RESPONSIF
   ========================================================= */
/* v1.1.7: sudut kanan bawah label desktop dibuat lebih landai; mobile tetap. */
@media (min-width: 761px) {
    .jkz-row .jkz-date {
        margin-left:-10px!important;
    }

}

/* Desktop: celah mengikuti sisi label 92% di atas ke 80% di bawah. */
@media (min-width:701px) {
    .jkz-label::after {
        clip-path:polygon(89% 0,91% 0,79% 100%,77% 100%);
    }
}

/* 1.1.8: mobile saja — kemiringan sudut kanan bawah label dibuat sedikit lebih landai (72% menjadi 73%). */
@media (max-width:700px) {
    .jkz-label {
        clip-path:polygon(0 0,84% 0,73% 100%,0 100%)!important;
    }

    /* Celah mengikuti sudut label mobile 73%. */
    .jkz-label::after {
        clip-path:polygon(80% 0,82% 0,71% 100%,69% 100%);
    }
}