*{box-sizing:border-box}body{margin:0;font:14px Inter,Segoe UI,Arial,sans-serif;background:#f3f4f6;color:#172033}.app{min-height:100vh}.sidebar{width:238px;position:fixed;inset:0 auto 0 0;background:#1d2939;color:#fff;display:flex;flex-direction:column}.brand{height:108px;display:flex;align-items:center;gap:10px;padding:0 30px;border-bottom:1px solid #344153;color:#55a0ff;font-size:25px;font-weight:800}.brand.big{height:auto;padding:0;border:0;margin-bottom:20px}.menu-title{font-size:11px;color:#8fa0b7;padding:17px 9px 9px}.sidebar nav a{height:44px;display:flex;align-items:center;gap:12px;padding:0 15px;color:#fff;text-decoration:none;border-left:3px solid transparent}.sidebar nav a.active,.sidebar nav a:hover{background:#26364a;border-left-color:#3b82f6}.badge{margin-left:auto;background:#ef4444;border-radius:12px;padding:2px 7px;font-size:11px}.sidebar-user{margin-top:auto;padding:15px 9px;border-top:1px solid #344153;display:flex;align-items:center;gap:9px}.sidebar-user small{display:block;color:#aab5c4;margin-top:3px}.avatar{width:32px;height:32px;background:#3b82f6;border-radius:50%;display:grid;place-items:center}.main{margin-left:238px;min-height:100vh}.topbar{height:108px;background:#fff;border-bottom:1px solid #dfe3e8;padding:0 24px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;color:#718096;text-transform:uppercase;letter-spacing:.12em}.topbar h1{margin:3px 0 0;font-size:21px}.top-actions{display:flex;gap:18px;color:#64748b}.top-actions a{color:#64748b;text-decoration:none}.content{padding:22px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:22px}.stat{background:#fff;border:1px solid #e1e5ea;border-top:3px solid;border-radius:9px;min-height:115px;padding:21px;display:flex;align-items:center;gap:15px;box-shadow:0 1px 2px #0000000a}.stat.blue{border-color:#3b82f6}.stat.purple{border-color:#a855f7}.stat.yellow{border-color:#f59e0b}.stat.green{border-color:#22c55e}.stat-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:27px}.blue .stat-icon{background:#dbeafe;color:#3b82f6}.purple .stat-icon{background:#f3e8ff;color:#9333ea}.yellow .stat-icon{background:#fef3c7;color:#c58b00}.green .stat-icon{background:#dcfce7;color:#16a34a}.stat span{color:#667085;font-size:13px;line-height:1.4}.stat strong{display:block;font-size:25px;margin-top:3px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card{background:#fff;border:1px solid #e1e5ea;border-radius:9px;padding:21px;margin-bottom:20px;box-shadow:0 1px 2px #0000000a}.card h2{font-size:17px;font-weight:600;margin:0}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.chart-wrap{height:230px;max-width:300px;margin:auto}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;color:#667085;font-size:12px}.dot{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:5px;vertical-align:-2px}.dot.b{background:#3b82f6}.dot.o{background:#f59e0b}.dot.p{background:#8b5cf6}.dot.g{background:#10b981}.activity{display:flex;align-items:center;gap:12px;min-height:68px;border-top:1px solid #e5e7eb}.status-icon{font-size:17px}.status-icon.pending{color:#eab308}.status-icon.approved,.status-icon.completed{color:#10b981}.status-icon.rejected{color:#ef4444}.activity-main{flex:1;display:flex;flex-direction:column;gap:4px}.activity-main span{font-size:12px;color:#667085}.activity code,code{font-size:10px;color:#8b96a8}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid>div{display:flex;flex-direction:column;gap:7px}label{font-size:13px;font-weight:600}input,select{height:41px;border:1px solid #cfd5dd;border-radius:7px;padding:0 11px;background:#fff;font:inherit}.search{height:37px;width:220px}.form-actions{grid-column:1/-1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:6px;padding:9px 12px;background:#e9eef5;color:#253449;text-decoration:none;cursor:pointer;font-weight:600}.btn.primary{background:#2563eb;color:#fff}.btn.success{background:#16a34a;color:#fff}.btn.danger{background:#dc2626;color:#fff}.btn.ghost{background:#f8fafc;border:1px solid #d8dee7}.btn.small{padding:6px 9px;font-size:11px}.inline{display:inline-flex;gap:5px}.alert{padding:11px 13px;border-radius:7px;margin-bottom:15px}.alert.success{background:#dcfce7;color:#166534}.alert.danger{background:#fee2e2;color:#991b1b}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:middle}th{background:#f8fafc;color:#667085;font-size:12px;white-space:nowrap}td small{display:block;color:#8b96a8;margin-top:3px}.pill{display:inline-block;padding:4px 9px;border-radius:20px;font-size:11px;font-weight:700}.pill.pending{background:#fef3c7;color:#92400e}.pill.approved,.pill.completed{background:#dcfce7;color:#166534}.pill.rejected{background:#fee2e2;color:#991b1b}.approval-form{display:flex;gap:5px;align-items:center}.approval-form input{height:35px;width:160px}.empty{text-align:center;color:#98a2b3}.toolbar{display:flex;gap:8px;align-items:center}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#1d2939,#334155)}.login-card{width:min(430px,92vw);background:#fff;border-radius:14px;padding:35px;box-shadow:0 20px 60px #0005}.login-card h1{margin:0 0 5px}.login-card label{display:block;margin:16px 0 7px}.login-card input{width:100%}.muted,.login-hint{color:#667085}.login-hint{text-align:center;font-size:12px;margin-top:14px}.full{width:100%;height:44px;margin-top:18px}.print-page{background:#fff;padding:30px;color:#111}.print-head{display:flex;gap:20px;align-items:center;border-bottom:2px solid #111;padding-bottom:15px;margin-bottom:20px}.print-head small{display:block;margin-top:5px}.print-table{width:100%;border-collapse:collapse}.print-table th,.print-table td{border:1px solid #333;padding:9px}.print-table th{background:#eee;color:#111}.compact th,.compact td{font-size:11px}.signature{display:flex;justify-content:space-around;margin-top:60px;text-align:center}@media(max-width:950px){.sidebar{width:75px}.brand span:not(.brand-icon),.menu-title,.sidebar nav span,.sidebar-user div:not(.avatar){display:none}.brand{justify-content:center;padding:0}.sidebar nav a{justify-content:center}.main{margin-left:75px}.stats{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}@media(max-width:650px){.stats,.form-grid{grid-template-columns:1fr}.content{padding:12px}.topbar{padding:0 14px}.toolbar{flex-wrap:wrap}.search{width:160px}.approval-form{flex-wrap:wrap}}@media print{body{background:#fff}.sidebar,.topbar,.btn,.search,.alert{display:none!important}.main{margin:0}.content{padding:0}.card{box-shadow:none;border:0}.stats{grid-template-columns:repeat(4,1fr)}}

.notification{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px;border-bottom:1px solid #e5e7eb}.notification.unread{background:#eff6ff}.notification p{margin:5px 0;color:#667085}.notification small{color:#98a2b3}

.movement-card{margin-bottom:18px}.live-dot{font-size:12px;font-weight:700;color:#16a34a}.movement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.movement-item{border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#fff}.movement-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.movement-top small{display:block;color:#667085;margin-top:4px}.movement-stage{font-size:12px;font-weight:700;padding:5px 8px;border-radius:999px;background:#eff6ff;color:#2563eb;white-space:nowrap}.movement-track{height:7px;background:#e5e7eb;border-radius:99px;margin:13px 0 9px;overflow:hidden}.movement-track span{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#10b981);border-radius:99px;transition:width .4s}.movement-route{display:flex;justify-content:space-between;gap:8px;color:#667085;font-size:11px}@media(max-width:900px){.movement-grid{grid-template-columns:1fr}.movement-route{flex-direction:column}}
.realtime-card {
    border: 1px solid #dee2e6;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.realtime-card .card-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 18px 20px;
}

.live-indicator {
    float: right;
    font-size: 12px;
    color: #16a34a;
    font-weight: 700;
}

.kapal-item {
    padding: 15px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}

.kapal-item:hover {
    background: #f8fbff;
}

.kapal-nama {
    font-size: 17px;
    font-weight: 700;
    color: #172033;
}

.kapal-detail {
    margin-top: 8px;
    font-size: 13px;
    color: #64748b;
}

.status-live {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    background: #dcfce7;
    color: #15803d;
}

.empty-data {
    padding: 35px;
    text-align: center;
    color: #94a3b8;
}

.monitor-stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin:20px 0;
}

.monitor-stat{
    padding:18px;
    border-radius:12px;
    background:#f5f7fa;
    border:1px solid #e5e7eb;
}

.monitor-stat span{
    display:block;
    font-size:13px;
    color:#6b7280;
}

.monitor-stat strong{
    display:block;
    margin-top:5px;
    font-size:26px;
}

.monitor-stat.pending{
    border-left:4px solid #f59e0b;
}

.monitor-stat.approved{
    border-left:4px solid #10b981;
}

.monitor-stat.rejected{
    border-left:4px solid #ef4444;
}

.monitor-stat.completed{
    border-left:4px solid #3b82f6;
}

.monitor-filter{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.monitor-filter select,
.monitor-filter input{
    min-height:40px;
    padding:8px 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#fff;
}

.monitor-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.monitor-item{
    display:flex;
    gap:15px;
    align-items:flex-start;
    padding:18px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
}

.monitor-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eef6ff;
    font-size:23px;
    flex-shrink:0;
}

.monitor-content{
    flex:1;
}

.monitor-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.monitor-top h3{
    margin:0 0 4px;
}

.monitor-top small{
    color:#6b7280;
}

.status{
    display:inline-block;
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.status-pending{
    background:#fff7ed;
    color:#c2410c;
}

.status-approved{
    background:#ecfdf5;
    color:#047857;
}

.status-rejected{
    background:#fef2f2;
    color:#b91c1c;
}

.status-completed{
    background:#eff6ff;
    color:#1d4ed8;
}

.monitor-info{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin-top:15px;
}

.monitor-info small{
    display:block;
    color:#6b7280;
    font-size:12px;
}

.monitor-info strong{
    display:block;
    margin-top:3px;
}

.monitor-action{
    display:flex;
    align-items:center;
}

.ship-timeline{
    display:flex;
    align-items:center;
    margin-top:20px;
    max-width:600px;
}

.timeline-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:90px;
    color:#9ca3af;
}

.timeline-step span{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e5e7eb;
    font-size:12px;
    font-weight:bold;
}

.timeline-step small{
    margin-top:5px;
    font-size:11px;
}

.timeline-step.active{
    color:#2563eb;
}

.timeline-step.active span{
    background:#2563eb;
    color:#fff;
}

.timeline-line{
    height:2px;
    flex:1;
    background:#e5e7eb;
}

.btn.secondary{
    background:#6b7280;
}

.empty{
    padding:30px;
    text-align:center;
    color:#6b7280;
}

@media(max-width:900px){

    .monitor-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .monitor-info{
        grid-template-columns:1fr;
    }

    .monitor-item{
        flex-direction:column;
    }

    .monitor-action{
        width:100%;
    }

    .monitor-action .btn{
        width:100%;
        text-align:center;
    }
}




.previous-app{margin:10px 0;padding:9px 10px;border-radius:8px;background:#f8fafc;color:#475569;font-size:12px}.previous-app a{color:#2563eb;text-decoration:none}.previous-app a:hover{text-decoration:underline}

.dashboard-notifications{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto}
.dashboard-notification{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dbe5f0;border-radius:10px;background:#f8fbff;animation:notificationIn .35s ease}
.dashboard-notification.unread{border-left:4px solid #2563eb}
.notification-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#dbeafe;font-size:18px;flex-shrink:0}
.notification-body{flex:1;min-width:0}
.notification-body b{display:block}
.notification-body p{margin:3px 0;color:#64748b;font-size:12px}
.notification-body small{color:#94a3b8;font-size:10px}
@keyframes notificationIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* Header pesan masuk realtime */
.top-actions{position:relative;display:flex;align-items:center;gap:18px}.message-menu{position:relative}.message-button{position:relative;width:42px;height:42px;border:1px solid #dbe1e8;border-radius:50%;background:#fff;cursor:pointer;display:grid;place-items:center}.message-icon{font-size:20px;line-height:1}.message-badge{position:absolute;right:-3px;top:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff}.message-dropdown{display:none;position:absolute;right:0;top:50px;width:360px;max-width:calc(100vw - 30px);background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 14px 35px rgba(15,23,42,.16);z-index:1000;overflow:hidden}.message-dropdown.show{display:block}.message-dropdown-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eef2f7}.message-dropdown-head a{font-size:12px;color:#2563eb;text-decoration:none}.top-notification{display:flex;gap:10px;padding:12px 14px;text-decoration:none;color:#172033;border-bottom:1px solid #f1f5f9}.top-notification:hover{background:#f8fafc}.top-notification.unread{background:#eff6ff}.top-notification-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e8f1ff;flex-shrink:0}.top-notification span:last-child{min-width:0}.top-notification b,.top-notification small,.top-notification em{display:block}.top-notification b{font-size:12px;margin-bottom:3px}.top-notification small{font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-notification em{font-size:10px;color:#94a3b8;margin-top:4px;font-style:normal}.message-dropdown .empty{padding:28px 15px}.realtime-notification-card{display:none!important}
@media(max-width:650px){.message-dropdown{right:-80px;width:320px}}

/* =========================================================
   PTOSP V5.8 - Visual theme matching the supplied mockup
   ========================================================= */
:root{--navy:#06224a;--navy2:#0b3a79;--blue:#087df2;--sky:#2aa9ff;--green:#16b95b;--orange:#ff7100;--purple:#8d18e7;--page:#f3f7fc;--line:#dbe5f0;--text:#172b4d}
body{background:var(--page);color:var(--text)}
.app{background:var(--page)}
.sidebar{width:250px;background:linear-gradient(180deg,#041b3b 0%,#082b59 55%,#03182f 100%);background-size:100% 100%;box-shadow:6px 0 22px rgba(4,31,67,.12);z-index:20}
.sidebar-brand{height:175px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12);position:relative}
.sidebar-brand img{width:92px;height:92px;object-fit:contain}.sidebar-brand-text{display:flex;flex-direction:column;color:#fff}.sidebar-brand-text strong{font-size:28px;letter-spacing:.03em}.sidebar-brand-text span{font-size:11px;color:#d5e6ff;white-space:nowrap}.sidebar-toggle{position:absolute;left:12px;top:14px;border:0;background:none;color:#fff;font-size:21px;cursor:pointer}
.menu-title{color:#89a9d1;padding:18px 20px 8px;font-size:10px;letter-spacing:.13em}.side-nav{padding:0 9px}.side-nav a{height:46px;border-left:0!important;border-radius:8px;margin:3px 0;padding:0 12px;gap:12px;color:#e8f2ff;position:relative}.side-nav a.active,.side-nav a:hover{background:linear-gradient(90deg,#087df2,#1664d8);box-shadow:0 6px 15px rgba(0,104,235,.22)}.nav-ico{width:25px;text-align:center;font-size:20px}.nav-arrow{margin-left:auto;opacity:.9}.side-nav .badge{position:absolute;right:30px;background:#ef233c}.sidebar-user{padding:14px 14px;border-top:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12)}.sidebar-user small{color:#a9c3e5}.avatar{background:#146fe4}.sidebar-logout{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;padding:14px 22px;border-top:1px solid rgba(255,255,255,.12);font-weight:600}
.main{margin-left:250px}.topbar{height:68px;padding:0 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 5px rgba(10,43,82,.04)}.top-left{display:flex;align-items:center;gap:14px}.mobile-menu{border:0;background:none;color:#0a3b7a;font-size:25px;cursor:pointer}.top-logo{display:flex;flex-direction:column}.top-logo span{font-size:24px;line-height:20px;font-weight:900;color:#0b2f69}.top-logo small{font-size:10px;color:#315b9a}.top-actions{align-items:center;gap:20px}.user-menu{display:flex;align-items:center;gap:9px;color:#0b2f69;font-weight:600}.user-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0b438b,#0c74d9);color:#fff;border:2px solid #dbe9fb}.message-button{border:0;background:transparent;box-shadow:none;width:38px;height:38px}.message-icon{font-size:24px;color:#123f7b}.message-badge{right:-1px;top:-2px;border:2px solid #fff}
.content{padding:20px 22px 28px;max-width:1600px;margin:auto}.dashboard-hero{min-height:205px;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(115deg,#0874df 0%,#146fcd 42%,#6bb7ef 100%);box-shadow:0 8px 25px rgba(8,74,145,.12);margin-bottom:18px}.dashboard-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 45%,rgba(255,255,255,.25),transparent 30%),linear-gradient(0deg,rgba(255,255,255,.02),rgba(255,255,255,.08));}.hero-copy{position:relative;z-index:2;color:#fff;padding:38px 22px 25px 24px}.hero-kicker{display:inline-block;background:#ffbf00;color:#0b3676;padding:7px 15px;border-radius:8px;font-weight:800;margin-top:6px}.hero-copy h2{font-size:25px;line-height:1.18;margin:0 0 8px}.hero-copy h2 strong{font-size:34px;letter-spacing:.01em}.hero-copy p{font-size:15px;font-style:italic;line-height:1.5;margin:10px 0 0}.hero-art{position:absolute;right:20px;top:8px;width:300px;height:190px;display:grid;place-items:center}.hero-art img{width:210px;height:210px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}
.dashboard-stats{grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}.stat-card{min-height:100px;border-radius:10px;padding:16px 18px;display:flex;align-items:center;gap:14px;color:#fff;box-shadow:0 8px 18px rgba(18,56,100,.1);position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-28px;top:-35px;background:rgba(255,255,255,.12)}.stat-card.blue{background:linear-gradient(135deg,#0b84f3,#1768dc)}.stat-card.green{background:linear-gradient(135deg,#18bd5b,#0da24d)}.stat-card.orange{background:linear-gradient(135deg,#ff7b00,#f35b00)}.stat-card.purple{background:linear-gradient(135deg,#9b27e9,#7413c9)}.stat-card-icon{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.95);color:#0b72de;display:grid;place-items:center;font-size:24px;z-index:1}.green .stat-card-icon{color:#12a34c}.orange .stat-card-icon{color:#f66b00}.purple .stat-card-icon{color:#8617d4}.stat-card span,.stat-card strong,.stat-card small{display:block;position:relative;z-index:1}.stat-card span{font-size:13px}.stat-card strong{font-size:26px;line-height:1.1;margin:4px 0}.stat-card small{font-size:10px;opacity:.9}.stat-vessel-detail{font-size:9px!important;line-height:1.25;white-space:normal;max-width:220px;overflow:hidden;text-overflow:ellipsis;display:block!important;opacity:.95!important}
.dashboard-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:15px}.bottom-grid{grid-template-columns:1.55fr .9fr;margin-top:0}.card{border:1px solid var(--line);border-radius:10px;padding:16px;background:#fff;box-shadow:0 5px 18px rgba(30,73,119,.05)}.card-head{margin-bottom:12px}.card h2{font-size:15px;color:#0a3470}.live-pill{font-size:11px;font-weight:700;color:#6c7d95}.live-pill.live{color:#12a84f}.live-pill.error{color:#dc2626}.chart-note{font-size:10px;color:#7890ad}.chart-card{min-height:290px}.donut-layout{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:8px}.donut-wrap{height:220px;position:relative}.donut-wrap canvas{height:220px!important}.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;pointer-events:none}.donut-center strong{font-size:25px;color:#123b73}.donut-center span{font-size:11px;color:#657892;line-height:1.2}.chart-legend{display:flex;flex-direction:column;gap:10px}.chart-legend div{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px;font-size:11px;color:#4c617d}.chart-legend b{color:#153c71}.legend-dot{width:12px;height:12px;border-radius:3px}.blue-dot{background:#1677ff}.cyan-dot{background:#39b7e8}.green-dot{background:#22c55e}.yellow-dot{background:#f6b900}.orange-dot{background:#ff7a00}.purple-dot{background:#8b22e8}.traffic-chart-wrap{height:225px}.traffic-chart-wrap canvas{height:225px!important}.latest-card{margin-top:15px}.view-all{font-size:11px;color:#1672e7;text-decoration:none}.dashboard-table th{background:#f4f8fc;color:#55708f;font-size:10px;padding:9px}.dashboard-table td{padding:9px;font-size:11px}.dashboard-table td small{font-size:9px}.status-chip{display:inline-block;padding:5px 9px;border-radius:6px;font-size:10px;font-weight:700}.status-chip.pending{background:#fff1c7;color:#a16207}.status-chip.approved{background:#d9f9e5;color:#15803d}.status-chip.completed{background:#dcecff;color:#1765c0}.status-chip.rejected{background:#fee2e2;color:#b91c1c}.dashboard-notifications{gap:0;max-height:260px}.dashboard-notification{border:0;border-bottom:1px solid #edf1f5;border-radius:0;background:#fff;padding:10px 2px}.dashboard-notification.unread{border-left:0;background:#f7fbff}.notification-icon{background:#e8f2ff;color:#0a70dc}.notification-body b{font-size:11px}.notification-body p{font-size:10px;margin:2px 0}.notification-body small{font-size:9px}.movement-card{margin-top:15px}.movement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.movement-item{background:#fbfdff;border-color:#e2eaf3}.movement-stage{background:#eaf3ff;color:#1c6fd2}
.login-page{min-height:100vh;display:grid;grid-template-columns:45% 55%;background:#fff}.login-visual{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(160deg,#077be7 0%,#1a9ae7 43%,#f5b75d 100%)}.login-visual:before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.7),transparent 25%),radial-gradient(circle at 80% 85%,rgba(4,45,91,.65),transparent 30%),linear-gradient(145deg,rgba(3,78,150,.12),rgba(255,178,74,.3));}.login-visual-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,34,77,.6),transparent 45%)}.login-branding{position:relative;z-index:2;text-align:center;color:#072c68;padding:30px}.login-branding img{width:220px;height:220px;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.22))}.login-branding h1{font-size:36px;margin:0;font-weight:900}.login-subtitle{font-weight:800;font-size:13px}.login-branding h2{font-size:21px;line-height:1.25;margin:24px 0 10px}.login-branding p{font-size:13px}.login-boats{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#fff;font-size:28px;opacity:.8}.login-panel{display:grid;place-items:center;padding:30px;background:#f7fbff}.login-card{width:min(500px,90%);padding:38px 42px;border-radius:16px;box-shadow:0 18px 55px rgba(20,58,100,.12);border:1px solid #e3edf7}.login-mini-brand{display:flex;gap:10px;align-items:center;color:#0b2f69;margin-bottom:18px}.login-mini-brand img{width:48px;height:48px;object-fit:contain}.login-mini-brand div{display:flex;flex-direction:column}.login-mini-brand b{font-size:22px}.login-mini-brand span{font-size:10px}.login-lock{font-size:24px;color:#0b5ac2;text-align:center}.login-card h1{text-align:center;color:#0a2f68;font-size:22px;margin:5px 0}.login-card>.muted{text-align:center;font-size:12px}.login-input{height:43px;border:1px solid #bcd4ef;border-radius:8px;display:flex;align-items:center;padding:0 12px;gap:10px;background:#fff}.login-input>span{color:#0875dc}.login-input input{border:0;height:39px;flex:1;outline:0;padding:0}.password-toggle{border:0;background:none;color:#52719b;cursor:pointer}.login-card label{margin:15px 0 7px}.login-card .full{height:45px;border-radius:8px;margin-top:20px;font-size:15px}.login-register{text-align:center;font-size:12px}.login-register a{color:#1672e7;text-decoration:none}.login-copy{text-align:center;color:#28518a;font-size:11px;margin-top:28px}.login-copy small{color:#7b91ac}
@media(max-width:1050px){.sidebar{width:225px}.main{margin-left:225px}.dashboard-stats{grid-template-columns:repeat(2,1fr)}.hero-art{right:0}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}}
@media(max-width:760px){.login-page{grid-template-columns:1fr}.login-visual{min-height:260px}.login-branding img{width:120px;height:120px}.login-branding h1{font-size:26px}.login-branding h2{font-size:15px;margin:8px 0}.login-panel{min-height:calc(100vh - 260px)}.sidebar{transform:translateX(-100%);transition:.25s}.main{margin-left:0}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-collapsed .sidebar{width:250px}.content{padding:14px}.dashboard-hero{min-height:220px}.hero-art{opacity:.45}.hero-copy h2 strong{font-size:28px}.donut-layout{grid-template-columns:1fr}.chart-legend{padding:0 15px}.dashboard-stats{grid-template-columns:1fr 1fr}.top-logo{display:none}.movement-grid{grid-template-columns:1fr}}
@media(max-width:500px){.dashboard-stats{grid-template-columns:1fr}.login-card{padding:28px 22px}.dashboard-hero{min-height:235px}.hero-art{width:180px}.hero-art img{width:160px}.user-menu span:not(.user-avatar){display:none}}
.sidebar-collapsed .sidebar{width:78px}.sidebar-collapsed .main{margin-left:78px}.sidebar-collapsed .sidebar-brand-text,.sidebar-collapsed .menu-title,.sidebar-collapsed .side-nav a span:not(.nav-ico),.sidebar-collapsed .side-nav .nav-arrow,.sidebar-collapsed .sidebar-user>div:not(.avatar),.sidebar-collapsed .sidebar-logout span:last-child{display:none}.sidebar-collapsed .sidebar-brand{padding:10px}.sidebar-collapsed .sidebar-brand img{width:52px;height:52px}.sidebar-collapsed .side-nav a{justify-content:center}.sidebar-collapsed .side-nav .badge{right:2px;top:1px}

/* PTOSP V5.8 FINAL LAYOUT FIX - overrides legacy styles to keep the UI stable */
*{box-sizing:border-box}
html,body{min-height:100%;width:100%}
body{overflow-x:hidden}

/* Sidebar */
.sidebar{width:280px!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;height:100vh!important;z-index:1000!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.sidebar-brand{flex:0 0 175px!important}
.side-nav{flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;padding:8px 9px!important}
.side-nav a{display:flex!important;align-items:center!important;text-decoration:none!important}
.sidebar-user{flex:0 0 auto!important}
.sidebar-logout{flex:0 0 auto!important}
.sidebar.collapsed{width:250px}
body.sidebar-collapsed .sidebar{width:76px!important}
body.sidebar-collapsed .sidebar-brand-text,body.sidebar-collapsed .menu-title,body.sidebar-collapsed .side-nav a span:not(.nav-ico),body.sidebar-collapsed .side-nav a .badge,body.sidebar-collapsed .sidebar-user>div:not(.avatar),body.sidebar-collapsed .sidebar-logout span:last-child{display:none!important}
body.sidebar-collapsed .sidebar-brand{padding:12px 4px!important}
body.sidebar-collapsed .sidebar-brand img{width:54px!important;height:54px!important}
body.sidebar-collapsed .side-nav a{justify-content:center!important;padding:0!important}
body.sidebar-collapsed .main{margin-left:76px!important}

/* Main/header */
.main{margin-left:280px!important;min-height:100vh!important;width:auto!important}
.topbar{height:68px!important;position:sticky!important;top:0!important;z-index:900!important}
.content{width:100%!important;max-width:1600px!important;margin:0 auto!important}

/* Dashboard */
.dashboard-hero{width:100%!important;min-height:205px!important}
.dashboard-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.dashboard-grid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important}
.bottom-grid{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(280px,.9fr)!important}
.chart-card,.latest-card,.movement-card{min-width:0!important}
.table-wrap{width:100%;overflow-x:auto!important}

/* Login - missing in the legacy stylesheet */
.login-page{min-height:100vh!important;width:100%!important;display:grid!important;grid-template-columns:minmax(46%,1fr) minmax(430px,54%)!important;place-items:stretch!important;background:#f3f7fc!important}
.login-visual{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:45px;background:linear-gradient(145deg,#0879df 0%,#3aa8f0 48%,#f5c77b 100%)}
.login-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.42),transparent 32%),linear-gradient(180deg,rgba(0,77,158,.05),rgba(2,28,67,.35))}
.login-visual:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-17%;height:42%;background:linear-gradient(180deg,rgba(0,94,174,.05),rgba(1,37,81,.65));border-radius:50% 50% 0 0/30% 30% 0 0}
.login-visual-overlay{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 20%);z-index:1}
.login-branding{position:relative;z-index:3;width:min(620px,100%);text-align:center;color:#082e6c}
.login-branding img{width:220px;height:220px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(0,30,80,.25))}
.login-branding h1{margin:-15px 0 2px;font-size:46px;line-height:1;font-weight:900;letter-spacing:.02em}
.login-subtitle{font-size:17px;font-weight:800;letter-spacing:.03em}
.login-branding h2{font-size:24px;line-height:1.22;margin:30px 0 10px;color:#082b69}
.login-branding p{font-size:15px;font-weight:600;font-style:italic;color:#123d78}
.login-boats{position:absolute;z-index:2;left:0;right:0;bottom:25px;text-align:center;font-size:44px;letter-spacing:20px;opacity:.7}
.login-panel{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:35px;background:#f7faff}
.login-card{width:min(430px,92vw)!important;margin:auto!important;background:#fff;border:1px solid #dce7f5;border-radius:16px;padding:30px!important;box-shadow:0 18px 55px rgba(13,57,108,.14)!important}
.login-mini-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;color:#0b3373}
.login-mini-brand img{width:54px;height:54px;object-fit:contain}.login-mini-brand b{display:block;font-size:25px;line-height:1}.login-mini-brand span{display:block;font-size:10px;color:#51719a;margin-top:4px}
.login-lock{width:48px;height:48px;margin:4px auto 12px;border-radius:50%;display:grid;place-items:center;background:#eaf3ff;color:#075ec7;font-size:25px}
.login-card h1{text-align:center;color:#123b73;font-size:22px;margin:0 0 5px}.login-card>.muted{text-align:center;margin:0 0 18px}
.login-card label{display:block;margin:13px 0 6px;color:#365271}
.login-input{height:45px;display:flex;align-items:center;border:1px solid #bdd4ee;border-radius:9px;background:#fff;overflow:hidden}.login-input>span{width:43px;text-align:center;color:#1777df;font-size:18px}.login-input input{height:100%!important;flex:1!important;border:0!important;outline:0!important;border-radius:0!important;padding:0 10px!important}.password-toggle{border:0;background:transparent;color:#6a86a7;padding:0 12px;cursor:pointer;font-size:16px}
.login-card .full{height:46px;border-radius:9px;margin-top:18px;font-size:15px}.login-register{text-align:center;margin:14px 0 0;font-size:12px}.login-register a{color:#0b72de;text-decoration:none;font-weight:700}.login-copy{text-align:center;color:#315b8e;font-size:11px;line-height:1.7;margin:18px 0 0}.login-copy small{font-style:italic;color:#6c89a9}

/* Tables/forms on every page */
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
input,select,textarea{max-width:100%}
.card{min-width:0!important}

@media(max-width:1100px){
 .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .dashboard-grid,.bottom-grid{grid-template-columns:1fr!important}
 .login-page{grid-template-columns:1fr!important}
 .login-visual{min-height:420px!important;padding:30px}
 .login-panel{min-height:auto!important}
}
@media(max-width:800px){
 .mobile-menu{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px;position:relative;z-index:1201}
 .sidebar{transform:translateX(-100%);transition:transform .2s ease}
 body.sidebar-open .sidebar{transform:translateX(0)}
 .main,body.sidebar-collapsed .main{margin-left:0!important}
 .topbar{height:60px!important}
 .content{padding:14px!important}
 .dashboard-stats{grid-template-columns:1fr!important}
 .movement-grid{grid-template-columns:1fr!important}
 .login-visual{min-height:330px!important}.login-branding img{width:150px;height:150px}.login-branding h1{font-size:34px}.login-branding h2{font-size:19px;margin-top:18px}.login-boats{font-size:30px}
}
@media(max-width:520px){
 .login-panel{padding:14px}.login-card{padding:22px!important}.login-visual{padding:18px}.login-branding img{width:120px;height:120px}.login-branding h2{font-size:16px}.login-subtitle{font-size:13px}
 .top-logo span{font-size:20px}.user-menu>span:nth-child(2){display:none}
}


/* PTOSP V5.8 - RESPONSIVE MENU NAMES FIX */
@media (min-width:801px) and (max-width:1100px){
  .sidebar{width:250px!important;transform:none!important}
  .main{margin-left:250px!important}
  body.sidebar-collapsed .sidebar{width:76px!important}
  body.sidebar-collapsed .main{margin-left:76px!important}
  body.sidebar-collapsed .sidebar-brand-text,
  body.sidebar-collapsed .menu-title,
  body.sidebar-collapsed .side-nav a span:not(.nav-ico),
  body.sidebar-collapsed .side-nav a .badge,
  body.sidebar-collapsed .sidebar-user>div:not(.avatar),
  body.sidebar-collapsed .sidebar-logout span:last-child{display:none!important}
}
@media (max-width:800px){
  .sidebar{width:250px!important;transform:translateX(-100%);transition:transform .2s ease!important}
  body.sidebar-open .sidebar{transform:translateX(0)!important}
  body.sidebar-collapsed .sidebar{width:250px!important}
  body.sidebar-collapsed .sidebar-brand-text,
  body.sidebar-collapsed .menu-title,
  body.sidebar-collapsed .side-nav a span:not(.nav-ico),
  body.sidebar-collapsed .side-nav a .badge,
  body.sidebar-collapsed .sidebar-user>div:not(.avatar),
  body.sidebar-collapsed .sidebar-logout span:last-child{display:block!important}
  body.sidebar-collapsed .side-nav a span:not(.nav-ico){display:inline!important}
  body.sidebar-collapsed .side-nav a .badge{display:block!important}
  body.sidebar-collapsed .sidebar-brand-text{display:flex!important}
  body.sidebar-collapsed .menu-title{display:block!important}
  body.sidebar-collapsed .sidebar-user>div:not(.avatar){display:block!important}
  body.sidebar-collapsed .sidebar-logout span:last-child{display:inline!important}
}
@media (min-width:801px){.mobile-menu{display:inline-flex!important;align-items:center;justify-content:center}}

/* PTOSP V5.8 - UNIVERSAL RESPONSIVE MENU FIX */
.responsive-menu-toggle{display:none;position:fixed;left:12px;top:12px;z-index:1200;width:44px;height:40px;border:0;border-radius:8px;background:#0b3a79;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 12px rgba(4,31,67,.2)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(2,18,40,.45);z-index:999}
body.sidebar-open .sidebar-overlay{display:block}
@media(max-width:800px){
  .responsive-menu-toggle{display:flex;align-items:center;justify-content:center}
  .sidebar{transform:translateX(-100%)!important;transition:transform .2s ease!important}
  body.sidebar-open .sidebar{transform:translateX(0)!important}
  .main{margin-left:0!important}
  .topbar .mobile-menu{display:inline-flex!important}
}
@media(min-width:801px){.responsive-menu-toggle,.sidebar-overlay{display:none!important}}


/* PTOSP FINAL UNIVERSAL MENU OVERRIDE */
.sidebar{position:fixed!important;left:0!important;top:0!important;bottom:0!important;height:100vh!important;z-index:2000!important;overflow-y:auto!important;overflow-x:hidden!important}
.sidebar-overlay{display:none!important;position:fixed!important;inset:0!important;background:rgba(2,18,40,.48)!important;z-index:1990!important}
body.sidebar-open .sidebar-overlay{display:block!important}
.mobile-menu,.responsive-menu-toggle{cursor:pointer!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important}
@media(max-width:800px){
  .sidebar{width:250px!important;margin:0!important;transform:translate3d(-105%,0,0)!important;transition:transform .22s ease!important}
  body.sidebar-open .sidebar{transform:translate3d(0,0,0)!important}
  body.sidebar-collapsed .sidebar{width:280px!important;transform:translate3d(-105%,0,0)!important}
  body.sidebar-open.sidebar-collapsed .sidebar{transform:translate3d(0,0,0)!important}
  .sidebar-brand{flex:0 0 175px!important}
  .sidebar-brand-text{display:flex!important;flex-direction:column!important}
  .menu-title{display:block!important}
  .side-nav{display:flex!important;flex-direction:column!important}
  .side-nav a{display:flex!important;min-height:44px!important;height:auto!important;flex:0 0 auto!important;justify-content:flex-start!important;padding:11px 22px!important;white-space:nowrap!important}
  .side-nav a span:not(.nav-ico){display:inline!important;visibility:visible!important;opacity:1!important}
  .side-nav .nav-arrow{display:inline!important;margin-left:auto!important}
  .side-nav .badge{display:block!important}
  .sidebar-user>div:not(.avatar){display:block!important}
  .sidebar-logout span:last-child{display:inline!important}
  .main,body.sidebar-collapsed .main{margin-left:0!important}
  .mobile-menu{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;z-index:2100!important}
  .responsive-menu-toggle{display:flex!important;align-items:center!important;justify-content:center!important;z-index:2100!important}
}
@media(min-width:801px){
  .sidebar-overlay,.responsive-menu-toggle{display:none!important}
}

/* PTOSP V5.8 - DASHBOARD 6 STATISTIK */
.dashboard-stats{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
}
.dashboard-stats .stat-card{
  min-width:0;
  padding:14px 12px;
}
.dashboard-stats .stat-card-icon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  font-size:21px;
}
.dashboard-stats .stat-card span{
  font-size:12px;
}
.dashboard-stats .stat-card strong{
  font-size:22px;
}
.dashboard-stats .stat-card small{
  font-size:10px;
}
.stat-card.red{background:linear-gradient(135deg,#ef4444,#c81e1e)}
.stat-card.red .stat-card-icon{color:#d22b2b}
.stat-card.teal{background:linear-gradient(135deg,#0f9f9a,#08746f)}
.stat-card.teal .stat-card-icon{color:#08746f}

@media(max-width:1200px){
  .dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media(max-width:800px){
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .dashboard-stats .stat-card{min-height:92px}
}
@media(max-width:520px){
  .dashboard-stats{grid-template-columns:1fr !important}
}

.previous-application{margin-top:10px;padding:9px 11px;border-radius:9px;background:#f5f7fb;border-left:3px solid #1677ff;display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:11px;color:#5b6472}
.previous-application .previous-label{font-weight:700;color:#1677ff;width:100%;text-transform:uppercase;font-size:10px;letter-spacing:.3px}
.previous-application b{color:#1f2937}
/* Data Kunjungan realtime filters */
.filter-grid label{display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:#64748b}.filter-grid input,.filter-grid select{width:100%;box-sizing:border-box}.filter-grid .btn{height:40px;white-space:nowrap}.table-wrap table small{display:block;margin-top:2px}@media(max-width:1100px){.filter-grid{grid-template-columns:1fr 1fr 1fr!important}.filter-grid>div:first-child{grid-column:1/-1}}@media(max-width:700px){.filter-grid{grid-template-columns:1fr!important}.filter-grid>div:first-child{grid-column:auto}}

/* Dashboard statistik: popup daftar kapal */
.dashboard-stat-click{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.dashboard-stat-click:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(18,56,100,.18)}.dashboard-stat-click:focus{outline:3px solid rgba(255,255,255,.65);outline-offset:2px}.stat-click-hint{display:block!important;font-size:8px!important;font-style:normal!important;margin-top:3px;opacity:.8!important}.dashboard-stat-modal{display:none;position:fixed;inset:0;z-index:9999}.dashboard-stat-modal.show{display:block}.dashboard-stat-modal-backdrop{position:absolute;inset:0;background:rgba(8,24,43,.62);backdrop-filter:blur(2px)}.dashboard-stat-modal-dialog{position:relative;width:min(620px,calc(100% - 30px));max-height:min(720px,calc(100vh - 40px));margin:20px auto;background:#fff;border-radius:18px;box-shadow:0 25px 70px rgba(0,0,0,.28);overflow:hidden;animation:statModalIn .18s ease}.dashboard-stat-modal-head{display:flex;justify-content:space-between;gap:18px;padding:22px 24px 17px;border-bottom:1px solid #e8edf3;background:linear-gradient(135deg,#f7fbff,#fff)}.dashboard-stat-modal-head h3{margin:3px 0 4px;font-size:21px;color:#12385f}.dashboard-stat-modal-head p{margin:0;color:#6b7a8d;font-size:12px}.modal-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:#1677ff}.dashboard-stat-modal-close{width:36px;height:36px;border:0;border-radius:50%;background:#eef3f8;color:#496078;font-size:26px;line-height:1;cursor:pointer}.dashboard-stat-modal-close:hover{background:#e2e9f0}.dashboard-stat-modal-body{padding:12px 18px 18px;max-height:calc(min(720px,100vh - 40px) - 120px);overflow:auto}.dashboard-stat-vessel-list{display:flex;flex-direction:column;gap:8px}.dashboard-stat-vessel-row{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid #e6edf4;border-radius:10px;background:#fbfdff}.dashboard-stat-vessel-row:hover{background:#f4f9ff;border-color:#cfe0f2}.vessel-number{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#eaf3ff;color:#1677ff;font-size:11px;font-weight:800;flex:0 0 28px}.vessel-name{font-size:14px;font-weight:700;color:#243b53}.modal-open{overflow:hidden}@keyframes statModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}@media(max-width:800px){.dashboard-stat-modal-dialog{margin:12px auto;width:calc(100% - 20px)}.dashboard-stat-modal-head{padding:18px}.dashboard-stat-modal-body{padding:10px 12px 14px}.stat-click-hint{display:none!important}}

/* PTOSP V5.8 - DROPDOWN DAFTAR NAMA KAPAL */
.dashboard-stats .stat-card.dashboard-stat-click{
  overflow:visible !important;
  cursor:pointer;
  z-index:2;
}
.dashboard-stats .stat-card.dashboard-stat-click.dropdown-open{z-index:50}
.dashboard-stat-dropdown{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  width:min(330px,calc(100vw - 30px));
  max-height:280px;
  overflow:hidden;
  background:#fff;
  color:#193b63;
  border:1px solid #d8e5f3;
  border-radius:10px;
  box-shadow:0 14px 30px rgba(18,56,100,.18);
  z-index:9999;
  text-align:left;
  cursor:default;
}
.dashboard-stat-dropdown[hidden]{display:none !important}
.dashboard-stat-dropdown-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:#f4f8fc;
  border-bottom:1px solid #e5edf6;
  font-size:11px;
}
.dashboard-stat-dropdown-head strong{color:#123b73!important;font-size:12px!important;margin:0!important}
.dashboard-stat-dropdown-head span{color:#6b809a;font-size:10px}
.dashboard-stat-dropdown-list{
  max-height:230px;
  overflow-y:auto;
  padding:4px 0;
}
.dashboard-stat-vessel-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border-bottom:1px solid #edf2f7;
  background:#fff;
}
.dashboard-stat-vessel-row:last-child{border-bottom:0}
.dashboard-stat-vessel-row:hover{background:#f7fbff}
.dashboard-stat-vessel-row .vessel-number{
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf3ff;
  color:#1768c9;
  font-size:10px;
  font-weight:800;
}
.dashboard-stat-vessel-row .vessel-name{
  color:#193b63;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashboard-stat-empty{padding:16px 12px;text-align:center;color:#7890ad;font-size:10px}
.dashboard-stat-dropdown-list::-webkit-scrollbar{width:6px}
.dashboard-stat-dropdown-list::-webkit-scrollbar-thumb{background:#c8d7e8;border-radius:10px}
@media(max-width:800px){
  .dashboard-stat-dropdown{width:min(300px,calc(100vw - 24px));}
}


/* =========================================================
   PTOSP V5 - FINAL RESPONSIVE LAYOUT OVERRIDE
   Replaces conflicting legacy responsive rules at the end.
   ========================================================= */
html,body{width:100%;min-width:0;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
.app{width:100%;min-height:100vh}
.sidebar{width:280px!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;height:100vh!important;z-index:2000!important}
.main{margin-left:280px!important;width:calc(100% - 280px)!important;min-width:0!important;max-width:none!important}
.topbar{width:100%!important;min-width:0!important}
.content{width:100%!important;max-width:none!important;margin:0!important;padding:20px 22px 28px!important;min-width:0!important}

/* Dashboard fills available viewport without shrinking */
.dashboard-hero{width:100%!important;min-width:0!important}
.dashboard-stats{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;width:100%!important;min-width:0!important}
.dashboard-grid,.bottom-grid{width:100%!important;min-width:0!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important}
.dashboard-grid>* ,.bottom-grid>*{min-width:0!important}
.card,.stat-card,.realtime-card,.movement-card{min-width:0!important;max-width:100%!important}
.table-wrap{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:680px}
img,canvas,svg{max-width:100%}

/* Collapsed desktop sidebar */
body.sidebar-collapsed .sidebar{width:76px!important}
body.sidebar-collapsed .main{margin-left:76px!important;width:calc(100% - 76px)!important}
body.sidebar-collapsed .content{width:100%!important}

/* Tablet */
@media (max-width:1200px){
  .sidebar{width:220px!important}
  .main{margin-left:220px!important;width:calc(100% - 220px)!important}
  body.sidebar-collapsed .sidebar{width:76px!important}
  body.sidebar-collapsed .main{margin-left:76px!important;width:calc(100% - 76px)!important}
  .content{padding:18px!important}
  .dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .dashboard-grid,.bottom-grid{grid-template-columns:1fr!important}
  .dashboard-hero{min-height:190px!important}
}

/* Small tablet / large phone: drawer sidebar */
@media (max-width:800px){
  .sidebar{width:270px!important;max-width:86vw!important;transform:translate3d(-105%,0,0)!important;transition:transform .22s ease!important;box-shadow:8px 0 28px rgba(0,0,0,.18)}
  body.sidebar-open .sidebar{transform:translate3d(0,0,0)!important}
  .sidebar-overlay{display:none!important;position:fixed!important;inset:0!important;background:rgba(2,18,40,.48)!important;z-index:1990!important}
  body.sidebar-open .sidebar-overlay{display:block!important}
  .main,body.sidebar-collapsed .main{margin-left:0!important;width:100%!important}
  body.sidebar-collapsed .sidebar{width:280px!important;transform:translate3d(-105%,0,0)!important}
  body.sidebar-open.sidebar-collapsed .sidebar{transform:translate3d(0,0,0)!important}
  .topbar{height:60px!important;padding:0 14px!important}
  .content{padding:14px!important}
  .dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .dashboard-stats .stat-card{min-height:96px!important;padding:12px 10px!important}
  .dashboard-grid,.bottom-grid{grid-template-columns:1fr!important;gap:12px!important}
  .movement-grid{grid-template-columns:1fr!important}
  .form-grid{grid-template-columns:1fr!important}
  .filter-grid{grid-template-columns:1fr!important}
  .toolbar{flex-wrap:wrap!important}
  .search{width:min(100%,260px)!important}
  .chart-wrap{width:100%;height:240px;max-width:none}
  .dashboard-hero{min-height:170px!important}
  .hero-copy{max-width:70%!important}
  .hero-art img{max-width:150px!important}
  .card{padding:15px!important}
}

/* Phone */
@media (max-width:520px){
  .content{padding:10px!important}
  .dashboard-stats{grid-template-columns:1fr!important}
  .dashboard-hero{min-height:145px!important}
  .hero-copy{max-width:78%!important}
  .hero-copy h2{font-size:20px!important}
  .hero-copy p{font-size:10px!important}
  .hero-art img{max-width:105px!important}
  .card-head{align-items:flex-start;flex-wrap:wrap}
  .top-actions{gap:8px!important}
  .top-logo span{font-size:18px!important}
  .user-menu>span:nth-child(2){display:none!important}
  .table-wrap table{min-width:620px}
  input,select,textarea{font-size:16px!important}
  .btn{min-height:40px}
}

/* Very narrow phones */
@media (max-width:360px){
  .dashboard-hero{min-height:130px!important}
  .hero-art{display:none!important}
  .hero-copy{max-width:100%!important}
  .topbar{padding:0 8px!important}
}

/* Never let long labels force the whole page wider */
.card-head,.toolbar,.movement-top,.movement-route,.activity,.notification,.stat-card{min-width:0}
.card-head>*,.toolbar>*,.movement-top>*,.movement-route>*,.activity-main,.notification>*{min-width:0;max-width:100%}

/* Layanan Tarif / Paket Tagihan */
.required{color:#dc2626;font-weight:700}
.field-hint{display:block;margin-top:5px;color:#64748b;font-size:12px}
#billingPackageSelect{font-weight:500}
/* Modul Tagihan / Invoice */
.invoice-table td small{color:#667085}.status.pending{background:#fff4e5;color:#a15c00}

.pay-status{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.pay-status.paid{background:#d1e7dd;color:#0f5132}.pay-status.unpaid{background:#fff3cd;color:#664d03}

/* Billing parent menu + sub menus */
.side-nav .billing-menu{margin:3px 0}
.side-nav .billing-menu-head{width:100%;height:46px;border:0;border-radius:8px;background:transparent;color:#e8f2ff;display:flex;align-items:center;gap:12px;padding:0 12px;font:inherit;cursor:pointer;text-align:left}
.side-nav .billing-menu-head:hover,.side-nav .billing-menu.open>.billing-menu-head{background:linear-gradient(90deg,#087df2,#1664d8);box-shadow:0 6px 15px rgba(0,104,235,.22)}
.billing-chevron{margin-left:auto;font-size:17px;transition:transform .2s ease;line-height:1}
.billing-menu.open .billing-chevron{transform:rotate(180deg)}
.billing-submenu{display:none;margin:1px 0 5px 18px;padding-left:8px;border-left:1px solid rgba(255,255,255,.18)}
.billing-menu.open .billing-submenu{display:block}
.billing-submenu a{height:40px!important;margin:2px 0!important;padding:0 10px!important;border-radius:7px!important;font-size:13px}
.billing-submenu a .nav-ico{width:14px;font-size:14px;color:#9fc7ff}
.billing-submenu a.active{background:rgba(22,100,216,.85)!important;box-shadow:none!important}
body.sidebar-collapsed .billing-menu-head{justify-content:center!important;padding:0!important;gap:0!important}
body.sidebar-collapsed .billing-menu-head > span:not(.nav-ico):not(.billing-chevron){display:none!important}
body.sidebar-collapsed .billing-menu-head .billing-chevron{display:none!important}
body.sidebar-collapsed .billing-submenu{display:none!important}
@media(max-width:800px){.billing-submenu{margin-left:16px}}


/* PTOSP V5 - SIDEBAR MENU COLOR UNIFICATION */
.side-nav a,
.side-nav .billing-menu-head{
    color:#e8f2ff !important;
}

.side-nav a:hover,
.side-nav a.active,
.side-nav .billing-menu-head:hover,
.side-nav .billing-menu.open > .billing-menu-head{
    background:linear-gradient(90deg,#087df2,#1664d8) !important;
    color:#ffffff !important;
    box-shadow:0 6px 15px rgba(0,104,235,.22) !important;
}

.side-nav a.active .nav-ico,
.side-nav a:hover .nav-ico,
.side-nav .billing-menu-head:hover .nav-ico,
.side-nav .billing-menu.open > .billing-menu-head .nav-ico{
    color:#ffffff !important;
}

.billing-submenu{
    border-left-color:rgba(255,255,255,.22) !important;
}

.billing-submenu a,
.billing-submenu a .nav-ico{
    color:#e8f2ff !important;
}

.billing-submenu a:hover,
.billing-submenu a.active{
    background:linear-gradient(90deg,#087df2,#1664d8) !important;
    color:#ffffff !important;
    box-shadow:0 4px 10px rgba(0,104,235,.18) !important;
}

.billing-submenu a:hover .nav-ico,
.billing-submenu a.active .nav-ico{
    color:#ffffff !important;
}

/* =========================================================
   PTOSP V5 - FOOTER RESPONSIVE DENGAN SIDEBAR
   Footer mengikuti area konten, tidak menutupi sidebar.
   ========================================================= */
.main{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}
.main > .content{
    flex:1 0 auto;
}
.site-footer{
    flex:0 0 auto;
    margin-top:auto;
    background:#ffffff;
    border-top:1px solid #dbe3ec;
    color:#64748b;
    margin-left:0;
    width:100%;
}
.site-footer-inner{
    min-height:68px;
    max-width:1600px;
    margin:0 auto;
    padding:14px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}
.footer-brand{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.footer-brand strong{
    color:#0b3b78;
    font-size:14px;
    font-weight:800;
}
.footer-brand span{
    color:#7b8798;
    font-size:11px;
}
.footer-copy{
    text-align:center;
    font-size:11px;
    line-height:1.5;
}
.footer-version{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    white-space:nowrap;
}
.footer-version span{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    background:#eef5ff;
    color:#1769c2;
    font-size:10px;
    font-weight:700;
}

/* Sidebar tetap terpisah; footer hanya berada di area .main */
@media(max-width:800px){
    .site-footer-inner{
        min-height:auto;
        padding:13px 14px;
        gap:8px;
    }
    .footer-copy{
        flex:1;
        font-size:10px;
    }
    .footer-brand strong{font-size:12px}
    .footer-brand span{font-size:10px}
    .footer-version span{font-size:9px;padding:4px 7px}
}

@media(max-width:520px){
    .site-footer-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:14px 10px;
        gap:7px;
    }
    .footer-brand{align-items:center}
    .footer-copy{order:2}
    .footer-version{order:3}
}

/* Saat dicetak, footer aplikasi tidak ikut tercetak */
@media print{
    .site-footer{display:none!important}
}

/* FIX: Footer Dashboard tidak boleh berada di bawah/tertutup sidebar */
.main{
    margin-left:250px !important;
    width:calc(100% - 250px) !important;
    min-width:0 !important;
    max-width:none !important;
}
.site-footer{
    width:100% !important;
    margin-left:0 !important;
    box-sizing:border-box !important;
    position:relative !important;
    z-index:1 !important;
}
.site-footer-inner{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
}
body.sidebar-collapsed .main{
    margin-left:76px !important;
    width:calc(100% - 76px) !important;
}
@media(max-width:760px){
    .main,body.sidebar-collapsed .main{
        margin-left:0 !important;
        width:100% !important;
    }
}

/* Notifikasi global + Show More */
.notification-show-more{display:inline-flex;align-items:center;justify-content:center;width:calc(100% - 24px);margin:10px 12px;padding:9px 12px;border:1px solid #dbe5f0;border-radius:8px;background:#f8fafc;color:#2563eb;font-weight:700;font-size:12px;cursor:pointer}
.notification-show-more:hover{background:#eff6ff}
#topNotificationList{max-height:330px;overflow:hidden}
#topNotificationList.show-all{max-height:620px;overflow:auto}
#topNotificationList .notification-more-item:nth-child(n+6){display:none}
#topNotificationList.show-all .notification-more-item:nth-child(n+6){display:flex}
#dashboardNotificationList{max-height:330px;overflow:hidden}
#dashboardNotificationList.show-all{max-height:620px;overflow:auto}
#dashboardNotificationList .dashboard-notification-more-item:nth-child(n+6){display:none}
#dashboardNotificationList.show-all .dashboard-notification-more-item:nth-child(n+6){display:flex}
@media(max-width:650px){.message-button{width:40px;height:40px}.message-dropdown{top:46px}.notification-show-more{width:calc(100% - 16px);margin:8px}}
/* GLOBAL NOTIFICATION BELL - ALL MENUS */
.message-menu{position:relative;display:inline-flex;align-items:center}.message-button{position:relative;width:42px;height:42px;border:1px solid #dbe5f0;background:#fff;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:#0b3f78}.message-button:hover{background:#f3f8ff}.message-icon{font-size:20px;line-height:1}.message-badge{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef233c;color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff}.message-dropdown{position:absolute;right:0;top:50px;width:360px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #dfe7f0;border-radius:12px;box-shadow:0 16px 40px rgba(15,35,65,.18);z-index:5000;overflow:hidden;display:none}.message-dropdown.show{display:block}.message-dropdown #topNotificationList{max-height:360px;overflow:hidden}.message-dropdown #topNotificationList.show-all{max-height:70vh;overflow-y:auto}.notification-show-more{display:flex;align-items:center;justify-content:center;width:calc(100% - 24px);margin:10px 12px;padding:9px 12px;border:1px solid #d7e3ef;border-radius:8px;background:#f7fbff;color:#1765c0;font-weight:700;font-size:11px;cursor:pointer}.notification-show-more:hover{background:#eaf3ff}
@media(max-width:760px){.message-dropdown{right:-8px;width:340px}.message-button{width:40px;height:40px}}


/* PTOSP V5 - BILLING RESPONSIVE NAME FIX */
.billing-menu-head{min-width:0!important;overflow:hidden!important}
.billing-menu-head > span:not(.nav-ico):not(.billing-chevron){
  display:inline-flex!important;
  align-items:center!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media (min-width:801px) and (max-width:1100px){
  body.sidebar-collapsed .billing-menu-head > span:not(.nav-ico):not(.billing-chevron){
    display:none!important;
  }
  body.sidebar-collapsed .billing-menu-head{
    justify-content:center!important;
    padding:0!important;
    gap:0!important;
  }
  body.sidebar-collapsed .billing-menu-head .billing-chevron{
    display:none!important;
  }
}
@media (max-width:800px){
  body.sidebar-open .billing-menu-head > span:not(.nav-ico):not(.billing-chevron){
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
  }
  body.sidebar-open .billing-menu-head{
    justify-content:flex-start!important;
    padding:0 12px!important;
    gap:12px!important;
  }
  body.sidebar-open .billing-menu-head .billing-chevron{
    display:inline-block!important;
  }
  .billing-submenu a span:not(.nav-ico){
    display:inline!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* Notification bell reliability fix */
.message-menu{position:relative!important;z-index:10050!important}.message-button{position:relative!important;z-index:10051!important;pointer-events:auto!important}.message-dropdown{z-index:10060!important;pointer-events:auto!important}.message-dropdown.show{display:block!important}

/* Pagination jumlah baris: 10/25/50/100 */
.table-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 0 2px}.table-pagination .page-info{font-size:12px;color:#667085;margin-right:4px}.page-size{padding:7px 28px 7px 9px;border:1px solid #ccd5e1;border-radius:8px;background:#fff;min-width:62px}.table-pagination button:disabled,.h1-pagination button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:700px){.table-pagination{justify-content:center}.table-pagination .page-info{width:100%;text-align:center}}
.table-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 0 2px}.table-pagination .page-info{font-size:12px;color:#667085;margin-right:4px}.page-size{padding:7px 28px 7px 9px;border:1px solid #ccd5e1;border-radius:8px;background:#fff;min-width:62px}.table-pagination button:disabled,.h1-pagination button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:700px){.table-pagination{justify-content:center}.table-pagination .page-info{width:100%;text-align:center}}

.pagination-click-icon{position:fixed;left:50%;top:50%;width:92px;height:92px;object-fit:contain;z-index:99999;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.65);transition:opacity .15s ease,transform .15s ease;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}.pagination-click-icon.show{opacity:.96;transform:translate(-50%,-50%) scale(1)}

/* PTOSP V5 - FINAL CONTENT AREA / SIDEBAR NO-OVERLAP FIX */
:root{--ptosp-sidebar-width:280px}
.sidebar{width:var(--ptosp-sidebar-width)!important}
.main{
  margin-left:var(--ptosp-sidebar-width)!important;
  width:calc(100% - var(--ptosp-sidebar-width))!important;
  min-width:0!important;
  max-width:none!important;
  position:relative!important;
  overflow-x:hidden!important;
}
.main > .content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.content > *{max-width:100%;min-width:0}
body.sidebar-collapsed .sidebar{width:76px!important}
body.sidebar-collapsed .main{
  margin-left:76px!important;
  width:calc(100% - 76px)!important;
}
@media (min-width:801px) and (max-width:1200px){
  :root{--ptosp-sidebar-width:220px}
  .sidebar{width:220px!important}
  .main{
    margin-left:220px!important;
    width:calc(100% - 220px)!important;
  }
  body.sidebar-collapsed .sidebar{width:76px!important}
  body.sidebar-collapsed .main{
    margin-left:76px!important;
    width:calc(100% - 76px)!important;
  }
}
@media(max-width:800px){
  .main,body.sidebar-collapsed .main{
    margin-left:0!important;
    width:100%!important;
    max-width:none!important;
  }
  .sidebar{width:270px!important;max-width:86vw!important}
}

/* FINAL SIDEBAR BRAND VISIBILITY FIX */
.sidebar-brand{
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:34px 10px 8px!important;
  overflow:hidden!important;
}
.sidebar-brand img{
  width:72px!important;
  height:72px!important;
  flex:0 0 72px!important;
  object-fit:contain!important;
}
.sidebar-brand-text{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.15!important;
  overflow:visible!important;
}
.sidebar-brand-text strong{
  display:block!important;
  max-width:100%!important;
  font-size:23px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.sidebar-brand-text span{
  display:block!important;
  max-width:100%!important;
  font-size:10px!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow:visible!important;
}
.sidebar-toggle{z-index:5!important}
body.sidebar-collapsed .sidebar-brand{
  flex-direction:column!important;
  padding:12px 4px!important;
  gap:0!important;
}
body.sidebar-collapsed .sidebar-brand img{
  width:54px!important;
  height:54px!important;
  flex:0 0 54px!important;
}
body.sidebar-collapsed .sidebar-brand-text{display:none!important}

/* Keep dashboard hero text completely inside the content area */
.main{position:relative!important;z-index:1!important;overflow-x:hidden!important}
.dashboard-hero,.hero-copy{position:relative!important}
.hero-copy{z-index:3!important;max-width:calc(100% - 20px)!important;padding-left:28px!important}
.hero-kicker{position:relative!important;z-index:4!important;white-space:nowrap!important}
@media(max-width:800px){
  .hero-copy{padding-left:20px!important;max-width:calc(100% - 12px)!important}
}

/* PTOSP FINAL FIX - TOPBAR/BRAND MUST NEVER SIT UNDER COLLAPSED SIDEBAR */
@media (min-width:801px){
  html body.sidebar-collapsed .sidebar{
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
  }
  html body.sidebar-collapsed .main{
    margin-left:76px!important;
    width:calc(100% - 76px)!important;
    max-width:none!important;
    min-width:0!important;
  }
  html body.sidebar-collapsed .topbar{
    width:100%!important;
    margin-left:0!important;
  }
  html body.sidebar-collapsed .top-left{
    margin-left:0!important;
    padding-left:8px!important;
    min-width:0!important;
  }
  html body.sidebar-collapsed .top-logo{
    margin-left:0!important;
    transform:none!important;
    position:relative!important;
  }
}

/* =========================================================
   PTOSP V5 - FINAL DASHBOARD TEXT / FOOTER NO-COVER FIX
   Ensures brand text in Dashboard never sits underneath sidebar.
   ========================================================= */
@media (min-width:801px){
  html body.sidebar-collapsed .main{
    margin-left:76px!important;
    width:calc(100% - 76px)!important;
    left:0!important;
    right:auto!important;
    transform:none!important;
    overflow-x:hidden!important;
  }
  html body.sidebar-collapsed .main > .content{
    margin-left:0!important;
    padding-left:22px!important;
    width:100%!important;
    max-width:none!important;
  }
  html body.sidebar-collapsed .main > .site-footer{
    position:relative!important;
    left:0!important;
    right:auto!important;
    margin-left:0!important;
    width:100%!important;
    max-width:none!important;
    transform:none!important;
    overflow:hidden!important;
  }
  html body.sidebar-collapsed .main > .site-footer .site-footer-inner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:28px!important;
    padding-right:22px!important;
    box-sizing:border-box!important;
  }
  html body.sidebar-collapsed .main > .site-footer .footer-brand{
    position:relative!important;
    left:0!important;
    margin-left:0!important;
    transform:none!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html body.sidebar-collapsed .main > .site-footer .footer-brand strong,
  html body.sidebar-collapsed .main > .site-footer .footer-brand span{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* PTOSP V5 - FOOTER BRAND MATCHES HEADER BRAND */
.site-footer .footer-top-brand{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:2px!important;
    min-width:180px!important;
    line-height:1!important;
}
.site-footer .footer-brand-title{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    white-space:nowrap!important;
}
.site-footer .footer-menu-icon{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#0a3b7a!important;
    font-size:18px!important;
    line-height:1!important;
    font-weight:700!important;
}
.site-footer .footer-brand-title strong{
    color:#0b2f69!important;
    font-size:20px!important;
    line-height:20px!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
}
.site-footer .footer-brand-subtitle{
    display:block!important;
    margin-left:25px!important;
    color:#315b9a!important;
    font-size:10px!important;
    line-height:12px!important;
    white-space:nowrap!important;
}
@media(max-width:800px){
  .site-footer .footer-brand-title strong{font-size:17px!important;line-height:18px!important}
  .site-footer .footer-menu-icon{font-size:16px!important}
  .site-footer .footer-brand-subtitle{font-size:9px!important;line-height:11px!important;margin-left:22px!important}
}
@media(max-width:520px){
  .site-footer .footer-top-brand{align-items:center!important}
  .site-footer .footer-brand-subtitle{margin-left:0!important}
}
@media(min-width:801px){
  html body.sidebar-collapsed .main > .site-footer .site-footer-inner{padding-left:22px!important}
}

/* =========================================================
   PTOSP V5 - FOOTER BRANDING PRIMARY / SIDEBAR SAFE FINAL
   Footer selalu berada di dalam area .main dan tidak pernah
   tertutup oleh sidebar.
   Branding:
   ☰ PTOSP
   Port Traffic and Service
   ========================================================= */
:root{--ptosp-footer-sidebar:280px;--ptosp-footer-collapsed:76px}

@media (min-width:801px){
  /* Normal sidebar */
  .main{
    margin-left:280px!important;
    width:calc(100% - 280px)!important;
    min-width:0!important;
    max-width:none!important;
    position:relative!important;
  }

  .site-footer{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin-left:0!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
    z-index:2!important;
    overflow:visible!important;
  }

  .site-footer-inner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
    padding:12px 22px 12px 24px!important;
    overflow:visible!important;
  }

  /* Collapsed sidebar = main/footer start at 76px */
  body.sidebar-collapsed .main{
    margin-left:76px!important;
    width:calc(100% - 76px)!important;
  }

  body.sidebar-collapsed .site-footer{
    margin-left:0!important;
    width:100%!important;
  }

  body.sidebar-collapsed .site-footer-inner{
    padding-left:24px!important;
    padding-right:22px!important;
  }

  /* Branding footer */
  .site-footer .footer-top-brand{
    position:relative!important;
    left:0!important;
    margin:0!important;
    transform:none!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 0 auto!important;
    min-width:190px!important;
    overflow:visible!important;
  }

  .site-footer .footer-brand-title{
    position:relative!important;
    left:0!important;
    margin:0!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  .site-footer .footer-menu-icon{
    display:inline-flex!important;
    width:22px!important;
    min-width:22px!important;
    margin:0 7px 0 0!important;
    font-size:20px!important;
    color:#0a3b7a!important;
  }

  .site-footer .footer-brand-title strong{
    display:inline-block!important;
    margin:0!important;
    font-size:23px!important;
    line-height:24px!important;
    color:#0b2f69!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  .site-footer .footer-brand-subtitle{
    display:block!important;
    margin:2px 0 0 29px!important;
    font-size:10px!important;
    line-height:12px!important;
    color:#315b9a!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
}

@media (min-width:801px) and (max-width:1200px){
  .main{margin-left:220px!important;width:calc(100% - 220px)!important}
  body.sidebar-collapsed .main{margin-left:76px!important;width:calc(100% - 76px)!important}
}

@media (max-width:800px){
  .main,body.sidebar-collapsed .main{
    margin-left:0!important;
    width:100%!important;
    max-width:none!important;
  }
  .site-footer{
    position:relative!important;
    left:auto!important;
    width:100%!important;
    margin-left:0!important;
    overflow:visible!important;
  }
  .site-footer-inner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:12px 14px!important;
    box-sizing:border-box!important;
  }
  .site-footer .footer-top-brand{
    position:relative!important;
    left:0!important;
    margin:0!important;
    transform:none!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* =========================================================
   FINAL UI FIX
   1. Footer hanya menampilkan copyright di tengah.
   2. Branding sidebar: logo dan tulisan berada berdampingan.
   3. Konten/footer tidak masuk ke bawah sidebar 280px.
   ========================================================= */

/* Sidebar branding normal: logo + teks berdampingan */
.sidebar-brand{
    position:relative !important;
    flex:0 0 112px !important;
    height:112px !important;
    min-height:112px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    padding:18px 14px !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.sidebar-brand .sidebar-toggle{
    position:absolute !important;
    left:12px !important;
    top:14px !important;
    z-index:5 !important;
}
.sidebar-brand img{
    width:64px !important;
    height:64px !important;
    object-fit:contain !important;
    flex:0 0 64px !important;
}
.sidebar-brand-text{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    min-width:0 !important;
    text-align:left !important;
    line-height:1.15 !important;
}
.sidebar-brand-text strong{
    display:block !important;
    color:#fff !important;
    font-size:22px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}
.sidebar-brand-text span{
    display:block !important;
    margin-top:4px !important;
    color:#c7d7ea !important;
    font-size:10px !important;
    white-space:nowrap !important;
}

/* Sidebar collapsed: hanya logo, teks disembunyikan */
body.sidebar-collapsed .sidebar-brand{
    flex:0 0 96px !important;
    height:96px !important;
    min-height:96px !important;
    flex-direction:column !important;
    gap:4px !important;
    padding:10px 4px !important;
}
body.sidebar-collapsed .sidebar-brand img{
    width:52px !important;
    height:52px !important;
    flex:0 0 52px !important;
}
body.sidebar-collapsed .sidebar-brand-text{
    display:none !important;
}

/* Footer hanya copyright di tengah */
.site-footer{
    margin-left:0 !important;
    width:100% !important;
    position:relative !important;
    box-sizing:border-box !important;
}
.site-footer-inner{
    width:100% !important;
    min-height:60px !important;
    padding:12px 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
}
.footer-copy{
    width:100% !important;
    flex:1 1 auto !important;
    text-align:center !important;
    font-size:11px !important;
    color:#64748b !important;
    white-space:nowrap !important;
}

/* Area konten mengikuti sidebar 280px */
.main{
    margin-left:280px !important;
    width:calc(100% - 280px) !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}
body.sidebar-collapsed .main{
    margin-left:76px !important;
    width:calc(100% - 76px) !important;
}

@media(max-width:1050px) and (min-width:801px){
    .sidebar{width:220px !important;}
    .main{margin-left:220px !important;width:calc(100% - 220px) !important;}
    body.sidebar-collapsed .main{margin-left:76px !important;width:calc(100% - 76px) !important;}
}

@media(max-width:800px){
    .main,body.sidebar-collapsed .main{
        margin-left:0 !important;
        width:100% !important;
    }
    .site-footer-inner{
        min-height:58px !important;
        padding:10px 12px !important;
    }
    .footer-copy{
        font-size:10px !important;
        white-space:normal !important;
        line-height:1.4 !important;
    }
}

/* FINAL: atur jarak icon ☰ dengan logo sidebar */
.sidebar-brand{
  justify-content:flex-start!important;
  padding:12px 18px 12px 58px!important;
  gap:12px!important;
}
.sidebar-toggle{
  left:18px!important;
  top:18px!important;
  width:28px!important;
  height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:3!important;
}
.sidebar-brand img{
  flex:0 0 auto!important;
}
.sidebar-brand-text{
  flex:0 0 auto!important;
}
body.sidebar-collapsed .sidebar-brand{
  justify-content:center!important;
  padding:12px 4px!important;
}
body.sidebar-collapsed .sidebar-toggle{
  left:50%!important;
  top:10px!important;
  transform:translateX(-50%)!important;
}
body.sidebar-collapsed .sidebar-brand img{
  margin-top:28px!important;
}


/* FIX: Samakan lebar background semua menu sidebar, termasuk Monitoring Kapal */
.side-nav > a{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    align-self:stretch !important;
}
.side-nav > a.active,
.side-nav > a:hover{
    width:100% !important;
    box-sizing:border-box !important;
}

/* FINAL FIX: halaman Monitoring Kapal tidak boleh mengubah ukuran sidebar */
body:has(#monitoringHistoryPage) .sidebar,
body:has(.monitoring-history-page) .sidebar{width:280px!important;min-width:280px!important;max-width:280px!important}
body:has(#monitoringHistoryPage) .main,
body:has(.monitoring-history-page) .main{margin-left:280px!important;width:calc(100% - 280px)!important}
body.sidebar-collapsed:has(#monitoringHistoryPage) .sidebar,
body.sidebar-collapsed:has(.monitoring-history-page) .sidebar{width:76px!important;min-width:76px!important;max-width:76px!important}
body.sidebar-collapsed:has(#monitoringHistoryPage) .main,
body.sidebar-collapsed:has(.monitoring-history-page) .main{margin-left:76px!important;width:calc(100% - 76px)!important}
@media(max-width:800px){body:has(#monitoringHistoryPage) .main,body:has(.monitoring-history-page) .main{margin-left:0!important;width:100%!important}}

/* FINAL MOBILE FIX - FORM BUAT PERMOHONAN */
@media (max-width: 800px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  .main,.content,.card,form.form-grid{min-width:0!important;max-width:100%!important;width:100%!important}
  .content{overflow-x:hidden!important}
  form.form-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  form.form-grid>div{min-width:0!important;width:100%!important}
  form.form-grid input,
  form.form-grid select,
  form.form-grid textarea{width:100%!important;max-width:100%!important;min-width:0!important}
  .document-upload-box{grid-column:1/-1!important;min-width:0!important;overflow:hidden!important}
  .document-upload-row{display:flex!important;flex-wrap:wrap!important;gap:10px!important;width:100%!important;min-width:0!important}
  .document-upload-row select{flex:1 1 100%!important;width:100%!important}
  .document-upload-row input[type=file]{flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:100%!important}
  .document-upload-row .btn{flex:1 1 100%!important;width:100%!important}
  .form-actions{grid-column:1/-1!important;width:100%!important}
  .form-actions .btn{width:100%!important}
}
@media (max-width: 520px){
  .card{padding:14px 12px!important;border-radius:10px!important}
  .card-head{gap:10px!important}
  .card-head .btn{width:100%!important}
  label{line-height:1.35!important}
  .document-upload-row{flex-direction:column!important;align-items:stretch!important}
  .document-upload-row>*{width:100%!important;max-width:100%!important}
  input[type=file]{padding:8px!important;height:auto!important;white-space:normal!important}
}

/* FIX FINAL MOBILE UPLOAD DOKUMEN - jangan gunakan flex-basis 100% saat kolom */
@media (max-width:800px){
  .document-upload-box{overflow:visible!important}
  .document-upload-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;overflow:visible!important}
  .document-upload-row select,
  .document-upload-row input[type=file],
  .document-upload-row .btn{
    display:block!important;
    flex:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  .document-upload-row input[type=file]{
    height:auto!important;
    min-height:44px!important;
    padding:8px 10px!important;
    background:#fff!important;
  }
}
@media (max-width:520px){
  .document-upload-row{grid-template-columns:1fr!important}
  .document-upload-row>*{flex:none!important;align-self:stretch!important}
  .document-upload-row .btn{min-height:46px!important;height:46px!important;white-space:normal!important}
}

/* =========================================================
   PTOSP responsive dashboard/header fix - 2026-08-24
   Prevent hero logo from overlapping text and keep PTOSP visible
   ========================================================= */
@media (max-width:760px){
  /* Keep application identity visible in the mobile header. */
  .top-logo{display:flex!important;min-width:0;max-width:calc(100vw - 180px)}
  .top-logo span{font-size:20px!important;line-height:1.05!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-logo small{display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-left{gap:10px;min-width:0}
  .mobile-menu{flex:0 0 auto}
  .top-actions{flex:0 0 auto;gap:10px!important}

  /* Reserve a separate area for the dashboard logo. */
  .dashboard-hero{min-height:235px!important}
  .hero-copy{padding:34px 18px 22px!important;width:64%;max-width:64%;box-sizing:border-box}
  .hero-copy h2{font-size:23px!important;word-break:normal}
  .hero-copy h2 strong{font-size:29px!important;line-height:1.08!important}
  .hero-copy p{font-size:14px!important}
  .hero-art{right:4px!important;top:18px!important;width:35%!important;height:190px!important;display:flex!important;align-items:center!important;justify-content:center!important;opacity:.62!important;pointer-events:none}
  .hero-art img{width:150px!important;height:150px!important;max-width:100%!important;object-fit:contain!important}
}

@media (max-width:500px){
  .topbar{height:68px!important;padding:0 14px!important}
  .top-logo{max-width:calc(100vw - 150px)}
  .top-logo span{font-size:19px!important}
  .top-logo small{font-size:9px!important}
  .user-menu{display:none!important}

  .dashboard-hero{min-height:245px!important}
  .hero-copy{width:68%!important;max-width:68%!important;padding:34px 16px 22px!important}
  .hero-kicker{font-size:13px!important;padding:7px 11px!important;white-space:nowrap}
  .hero-copy h2{font-size:21px!important;line-height:1.16!important}
  .hero-copy h2 strong{font-size:27px!important;letter-spacing:0!important}
  .hero-copy p{font-size:13px!important;line-height:1.45!important}
  .hero-art{width:32%!important;right:3px!important;top:42px!important;height:150px!important;opacity:.48!important}
  .hero-art img{width:118px!important;height:118px!important}
}

/* Dashboard layout alignment: align dashboard cards with the Port Traffic and Service hero */
body .main > .content .dashboard-grid,
body .main > .content .dashboard-grid.bottom-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  gap:16px!important;
}
body .main > .content .dashboard-grid > .card,
body .main > .content .dashboard-grid.bottom-grid > .card,
body .main > .content .dashboard-revenue-full,
body .main > .content .dashboard-revenue-full .dashboard-revenue-card{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  grid-column:1/-1!important;
}
body .main > .content .dashboard-revenue-full{clear:both!important;margin-top:0!important}
@media(max-width:760px){
 body .main > .content .dashboard-grid,
 body .main > .content .dashboard-grid.bottom-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
}

/* FIX FINAL: samakan batas kiri-kanan kartu dashboard dengan hero Port Traffic and Service */
body .main > .content .dashboard-hero,
body .main > .content .dashboard-grid,
body .main > .content .dashboard-grid.bottom-grid,
body .main > .content .dashboard-revenue-full {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  left:auto!important;
  right:auto!important;
}
body .main > .content .dashboard-grid,
body .main > .content .dashboard-grid.bottom-grid {
  grid-template-columns:minmax(0,1fr)!important;
}
body .main > .content .dashboard-grid > section.card,
body .main > .content .dashboard-grid.bottom-grid > section.card,
body .main > .content .dashboard-revenue-full > section.card,
body .main > .content .dashboard-revenue-full section.dashboard-revenue-card {
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  grid-column:1 / -1!important;
}
body .main > .content .dashboard-revenue-full {display:block!important; padding:0!important;}

/* Konsistensi tampilan kartu Pengaturan */
.settings-customer-card{margin-bottom:20px}.settings-customer-card .card-head{justify-content:flex-start;margin-bottom:12px}.settings-customer-card .card-head h2{display:flex;align-items:center;gap:9px;font-size:17px}.settings-customer-card .nav-ico{font-size:18px}.settings-customer-card p.muted{margin:0 0 16px;color:#667085;line-height:1.6}

/* Pengaturan menu Customer mengikuti gaya kontrol formulir PTOSP */
.customer-menu-settings .card-head{margin-bottom:8px}
.customer-menu-settings .card-head h2{margin:0;font-size:15px;color:#0a3470}
.customer-menu-settings>p.muted{margin:0 0 12px;line-height:1.6}
.customer-menu-list{border:1px solid var(--line,#dfe3e8);border-radius:8px;overflow:hidden;background:#fff}
.customer-menu-row{display:grid;grid-template-columns:30px minmax(320px, 44%) minmax(0,1fr);align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid #edf1f5;cursor:pointer;margin:0!important;font-weight:400!important}
.customer-menu-row:last-child{border-bottom:0}
.customer-menu-row:hover{background:#f8fbff}
.customer-menu-row input[type=checkbox]{width:16px!important;height:16px;margin:0;accent-color:#1677ff}
.customer-menu-name{font-weight:600;color:#172033}
.customer-menu-description{font-size:12px;color:#667085}
@media(max-width:700px){.customer-menu-row{grid-template-columns:20px minmax(0,1fr);gap:8px}.customer-menu-description{grid-column:2}}

/* Konsistensi ukuran dan jarak halaman Pengaturan dengan halaman index.php */
.content > section.card { padding:16px; margin:0 0 18px; border-radius:10px; }
.content > section.card:last-child { margin-bottom:0; }
.content > section.card > .card-head { margin-bottom:12px; }
.content > section.card .form-grid { gap:14px 16px; }
.content > section.card .form-grid > div { min-width:0; }
.content > section.card input:not([type="checkbox"]):not([type="file"]),
.content > section.card select { min-height:38px; height:38px; }
.content > section.card .customer-menu-settings { padding-top:14px !important; margin-top:2px !important; }
.content > section.card .customer-menu-settings .card-head { margin-bottom:10px; }
.content > section.card .customer-menu-list { border-radius:8px; }
.content > section.card .customer-menu-row { min-height:42px; padding:9px 20px; gap:12px; grid-template-columns:30px minmax(320px, 44%) minmax(0,1fr); }
.content > section.card .customer-menu-description { line-height:1.4; }
@media (max-width:700px) {
  .content > section.card { padding:12px; margin-bottom:14px; }
  .content > section.card .customer-menu-row { grid-template-columns:24px minmax(0,1fr); align-items:start; padding-left:16px; padding-right:16px; }
  .content > section.card .customer-menu-description { grid-column:2; }
}


/* PTOSP - ukuran logo pada banner Dashboard diperkecil */
.dashboard-hero .hero-art{
  right:28px!important;
  top:14px!important;
  width:190px!important;
  height:175px!important;
}
.dashboard-hero .hero-art img{
  width:138px!important;
  height:138px!important;
  max-width:100%!important;
  object-fit:contain!important;
}
@media(max-width:760px){
  .dashboard-hero .hero-art{right:8px!important;top:20px!important;width:34%!important;height:170px!important}
  .dashboard-hero .hero-art img{width:112px!important;height:112px!important}
}
@media(max-width:500px){
  .dashboard-hero .hero-art{right:4px!important;top:42px!important;width:31%!important;height:140px!important}
  .dashboard-hero .hero-art img{width:88px!important;height:88px!important}
}

/* PTOSP - perkecil kotak/banner utama Dashboard */
body .main > .content .dashboard-hero{
  min-height:165px!important;
  height:165px!important;
  margin-bottom:16px!important;
  border-radius:12px!important;
}
body .main > .content .dashboard-hero .hero-copy{
  padding:24px 20px 16px 24px!important;
}
body .main > .content .dashboard-hero .hero-art{
  top:2px!important;
  height:160px!important;
  width:165px!important;
}
body .main > .content .dashboard-hero .hero-art img{
  width:118px!important;
  height:118px!important;
}
@media(max-width:760px){
  body .main > .content .dashboard-hero{min-height:150px!important;height:150px!important}
  body .main > .content .dashboard-hero .hero-copy{padding:20px 16px 12px 18px!important}
  body .main > .content .dashboard-hero .hero-art{height:140px!important}
  body .main > .content .dashboard-hero .hero-art img{width:100px!important;height:100px!important}
}
@media(max-width:500px){
  body .main > .content .dashboard-hero{min-height:140px!important;height:140px!important}
  body .main > .content .dashboard-hero .hero-art{height:125px!important}
  body .main > .content .dashboard-hero .hero-art img{width:82px!important;height:82px!important}
}