/* SangkanLogiX v0.6.3-r16
   Unified interface scale for Client + Wangoon Control Room.
   Loaded last so legacy page-specific CSS cannot make navigation labels or controls
   unexpectedly larger/smaller. Information Pack print styles are intentionally left alone. */

:root{
    --sl-sidebar-width:250px;
    --sl-font-body:12px;
    --sl-font-nav:11px;
    --sl-font-subnav:9.75px;
    --sl-font-meta:9px;
    --sl-font-table:10.5px;
    --sl-font-label:10.5px;
    --sl-font-page-title:17px;
    --sl-font-section-title:13px;
    --sl-control-height:38px;
    --sl-radius-control:9px;
}

/* ---------- Global application scale ---------- */
.app-page{
    font-size:var(--sl-font-body);
    line-height:1.45;
}

.app-page .sidebar{
    width:var(--sl-sidebar-width);
    padding:18px 14px;
}
.app-page .main-area{
    margin-left:var(--sl-sidebar-width);
    width:calc(100% - var(--sl-sidebar-width));
}
.app-page .content-area{
    padding:20px 22px;
}

/* ---------- Brand / top bar ---------- */
.app-page .brand-block{
    gap:10px;
    padding:4px 7px 18px;
}
.app-page .brand-block img,
.app-page .brand-logo-placeholder{
    width:48px;
    height:48px;
    flex:0 0 48px;
    border-radius:10px;
}
.app-page .brand-title{
    font-size:12.5px;
    line-height:1.25;
}
.app-page .brand-subtitle{
    margin-top:2px;
    font-size:8.75px;
    line-height:1.3;
}
.app-page .topbar{
    min-height:70px;
    padding:13px 22px;
}
.app-page .topbar h1{
    margin:0;
    font-size:17px;
    line-height:1.2;
}
.app-page .topbar p{
    margin:3px 0 0;
    font-size:9.5px;
    line-height:1.35;
}
.app-page .user-panel{
    gap:11px;
}
.app-page .user-panel strong,
.app-page .user-panel small{
    font-size:9.5px;
    line-height:1.35;
}

/* ---------- Sidebar navigation ----------
   Important: old app.css contains `.sidebar-nav .nav-link span {font-size:7px}`.
   Some menu names were wrapped in <span> and others were plain text, which is why
   Ringkasan/Geolokasi/Shipment appeared much smaller. Everything is normalized here. */
.app-page .sidebar-nav{
    margin-top:14px;
    gap:2px;
}
.app-page .sidebar-nav .nav-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    min-height:35px;
    padding:7px 9px;
    border-radius:8px;
    font-size:var(--sl-font-nav) !important;
    font-weight:500;
    line-height:1.25;
}
.app-page .sidebar-nav .nav-link > span:not(.nav-icon):not(.badge){
    min-width:0;
    flex:1 1 auto;
    font-size:var(--sl-font-nav) !important;
    line-height:1.25;
}
.app-page .sidebar-nav .nav-link .nav-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 22px;
    width:22px;
    height:22px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:7px;
    font-size:8.5px !important;
    font-weight:600;
    line-height:1;
}
.app-page .sidebar-nav .nav-link.active .nav-icon{
    background:rgba(255,255,255,.92);
    border-color:rgba(255,255,255,.92);
    color:var(--tenant-primary,#005a70);
}
.app-page .sidebar-nav .nav-link .badge{
    flex:0 0 auto;
    min-width:18px;
    margin-left:auto !important;
    padding:3px 5px;
    font-size:7.5px !important;
    line-height:1.1;
}
.app-page .menu-label{
    margin:16px 10px 6px;
    font-size:8px !important;
    line-height:1.25;
    letter-spacing:.15em;
}
.app-page .nav-group-label{
    padding:5px 10px 2px;
    font-size:8px !important;
}
.app-page .nav-submenu{
    margin:1px 0 6px 11px;
    padding:2px 0 2px 18px;
}
.app-page .nav-sublink{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:27px;
    padding:5px 7px;
    font-size:var(--sl-font-subnav) !important;
    line-height:1.25;
}
.app-page .nav-sublink small,
.app-page .nav-sublink span{
    font-size:8px !important;
    line-height:1.2;
}

/* ---------- Page headings / cards ---------- */
.app-page .page-actions{
    gap:12px;
    margin-bottom:14px;
}
.app-page .page-actions h2,
.app-page .shipment-head h2{
    margin:0 0 4px;
    font-size:var(--sl-font-page-title) !important;
    line-height:1.25;
}
.app-page .page-intro,
.app-page .shipment-head p{
    font-size:10px !important;
    line-height:1.5;
}
.app-page .panel-card,
.app-page .metric-card{
    border-radius:13px;
    padding:16px;
}
.app-page .panel-card h3,
.app-page .section-title h3,
.app-page .form-section-heading{
    font-size:var(--sl-font-section-title) !important;
    line-height:1.3;
}
.app-page .panel-card p,
.app-page .section-title p{
    font-size:10px;
    line-height:1.5;
}
.app-page .section-title{
    margin-bottom:14px;
    padding-bottom:11px;
}
.app-page .metric-label{
    font-size:10px;
}
.app-page .metric-value{
    font-size:24px;
    line-height:1.15;
}
.app-page .metric-description{
    font-size:9px;
}

/* ---------- Forms ---------- */
.app-page .form-label,
.app-page label.form-label{
    margin-bottom:5px;
    font-size:var(--sl-font-label) !important;
    font-weight:600;
    line-height:1.3;
}
.app-page .form-control,
.app-page .form-select{
    min-height:var(--sl-control-height);
    padding:7px 10px;
    border-radius:var(--sl-radius-control);
    font-size:11px;
    line-height:1.35;
}
.app-page textarea.form-control{
    min-height:76px;
}
.app-page .form-hint,
.app-page .form-text{
    font-size:9px;
    line-height:1.45;
}
.app-page .input-group-text{
    min-height:var(--sl-control-height);
    padding:7px 10px;
    font-size:10.5px;
}

/* ---------- Buttons ---------- */
.app-page .btn{
    --bs-btn-padding-y:6px;
    --bs-btn-padding-x:11px;
    --bs-btn-font-size:10.5px;
    --bs-btn-border-radius:8px;
    min-height:34px;
    line-height:1.25;
    font-weight:500;
}
.app-page .btn-sm{
    --bs-btn-padding-y:5px;
    --bs-btn-padding-x:8px;
    --bs-btn-font-size:9.5px;
    --bs-btn-border-radius:7px;
    min-height:30px;
}
.app-page .btn-lg{
    --bs-btn-padding-y:8px;
    --bs-btn-padding-x:14px;
    --bs-btn-font-size:11.5px;
    min-height:40px;
}
.app-page .btn-primary{
    min-height:34px;
    border-radius:8px;
}

/* ---------- Tables / lists ---------- */
.app-page .table{
    margin-bottom:0;
    font-size:var(--sl-font-table);
}
.app-page .table > :not(caption) > * > *{
    padding:10px 12px;
}
.app-page .table th,
.app-page .table-panel th{
    font-size:9px !important;
    line-height:1.25;
    vertical-align:middle;
}
.app-page .table td,
.app-page .table-panel td{
    font-size:var(--sl-font-table) !important;
    line-height:1.4;
    vertical-align:middle;
}
.app-page .table td small,
.app-page .table-panel td small,
.app-page .text-body-secondary.small{
    font-size:9px !important;
    line-height:1.4;
}
.app-page .record-code{
    font-size:9.5px;
}
.app-page .record-meta{
    gap:6px;
}

/* ---------- Status / alerts / tabs ---------- */
.app-page .alert{
    padding:9px 12px;
    border-radius:10px;
    font-size:10px;
    line-height:1.5;
}
.app-page .badge,
.app-page .shipment-status,
.app-page .lock-badge,
.app-page .trace-status,
.app-page .verification-badge,
.app-page .screen-result,
.app-page .risk-recommendation{
    font-size:8px;
    line-height:1.2;
}
.app-page .nav-tabs .nav-link{
    padding:8px 11px;
    font-size:10px;
}
.app-page .modal-title{
    font-size:14px;
}
.app-page .modal-body,
.app-page .modal-footer{
    font-size:11px;
}

/* Keep detailed Information Pack and printable evidence on their established scale. */
.app-page .information-pack{
    font-size:inherit;
}
.app-page .information-pack .pack-header h2{
    font-size:22px !important;
}
.app-page .information-pack .pack-section h3{
    font-size:13px !important;
}
.app-page .information-pack .pack-table th,
.app-page .information-pack .pack-table td{
    font-size:9px !important;
    padding:9px;
}
.app-page .information-pack .pack-note{
    font-size:9px;
}
.app-page .information-pack .pack-footer{
    font-size:8px;
}

/* Desktop lists should not inherit accidental oversized Bootstrap helpers. */
@media (min-width:721px){
    .app-page .content-area .display-1,
    .app-page .content-area .display-2,
    .app-page .content-area .display-3,
    .app-page .content-area .display-4,
    .app-page .content-area .display-5,
    .app-page .content-area .display-6{
        font-size:24px;
        line-height:1.2;
    }
}

@media (max-width:720px){
    .app-page .sidebar{
        width:100%;
        padding:14px;
    }
    .app-page .main-area{
        margin-left:0;
        width:100%;
    }
    .app-page .topbar{
        min-height:auto;
        padding:12px 16px;
    }
    .app-page .topbar h1{
        font-size:15px;
    }
    .app-page .content-area{
        padding:14px;
    }
    .app-page .sidebar-nav .nav-link{
        min-height:36px;
        font-size:11px !important;
    }
    .app-page .table-responsive .table{
        min-width:720px;
    }
}