body{background:#f5f7fb}.sidebar{min-height:calc(100vh - 58px);background:#111827}.sidebar a{display:block;color:#d1d5db;text-decoration:none;padding:10px 14px;margin:4px 8px;border-radius:8px}.sidebar a:hover{background:#1f2937;color:white}.card{border:0}.kpi{box-shadow:0 4px 16px rgba(0,0,0,.05)}.kanban-col{background:#eef2f7;border-radius:12px;padding:12px;min-height:420px;transition:background-color .2s ease}.kanban-col.drag-over{background:#e2e8f0!important;outline:2px dashed #0d6efd;outline-offset:-4px}.task-card{background:white;border-radius:10px;padding:12px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);cursor:grab;user-select:none;-webkit-user-drag:element;transition:transform .2s ease,opacity .2s ease}.task-card:active{cursor:grabbing}.task-card.dragging{opacity:.4;transform:scale(.98)}.history-btn{position:relative;width:20px!important;height:20px!important;min-height:20px!important;padding:0!important;line-height:1;font-size:12px;display:inline-flex;align-items:center;justify-content:center}.history-btn::after{content:'View History';position:absolute;bottom:115%;left:50%;transform:translateX(-50%);background:#111827;color:#fff;font-size:.7rem;padding:2px;border-radius:4px;white-space:nowrap;display:none;z-index:5}.history-btn:hover::after{display:block}.timeline-bar{height:16px;border-radius:8px;background:#0d6efd}.small-muted{font-size:.85rem;color:#6b7280}


/* ===== Mobile-first responsive enhancements ===== */
html, body { max-width: 100%; overflow-x: hidden; }
.navbar-brand { font-size: 1rem; }
.mobile-menu-btn { display: none; }

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table { min-width: 720px; }
.table th { white-space: nowrap; }

.btn, .form-control, .form-select {
    min-height: 42px;
}

.kanban-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.kanban-scroll > .kanban-mobile-col {
    flex: 0 0 320px;
    max-width: 320px;
    scroll-snap-align: start;
}

.mobile-bottom-space { padding-bottom: 72px; }

@media (max-width: 991.98px) {
    .desktop-sidebar { display: none !important; }
    .mobile-menu-btn { display: inline-flex; }
    main { width: 100% !important; padding: 1rem !important; }

    .navbar .user-info-text { display: none; }

    .kpi .card-body { padding: .85rem; }
    .kpi .h3 { font-size: 1.35rem; }

    .card-body { padding: 1rem; }

    h2 { font-size: 1.4rem; }

    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }

    .row.g-3 > [class*="col-"] {
        min-width: 0;
    }

    .offcanvas {
        width: 280px !important;
    }

    .offcanvas .nav-link {
        padding: .8rem 1rem;
        border-radius: .6rem;
        color: #d1d5db;
    }
    .offcanvas .nav-link:hover {
        background: #1f2937;
        color: #fff;
    }

    .d-flex.justify-content-between {
        gap: .75rem;
        flex-wrap: wrap;
    }

    .d-flex.justify-content-between > form,
    .d-flex.justify-content-between > .btn,
    .d-flex.justify-content-between > select {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    body { font-size: .95rem; }

    main { padding: .75rem !important; }

    .navbar {
        padding-left: .65rem !important;
        padding-right: .65rem !important;
    }

    .navbar-brand {
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    h2 { font-size: 1.25rem; }

    .card { border-radius: .8rem; }
    .card-body { padding: .85rem; }

    .btn {
        padding: .55rem .8rem;
    }

    .form-control, .form-select {
        font-size: 16px; /* mencegah auto-zoom iOS */
    }

    .table { min-width: 640px; }

    .kanban-scroll > .kanban-mobile-col {
        flex-basis: 86vw;
        max-width: 86vw;
    }

    .task-card {
        padding: .85rem;
    }

    .mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mobile-stack > * {
        width: 100% !important;
    }

    .mobile-full-btn {
        width: 100%;
    }

    .modal-footer {
        flex-direction: column-reverse;
    }
    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }
}