/* ============================================================
   AssetPro — Main Stylesheet
   Standalone: tidak bergantung pada Tailwind CDN
   ============================================================ */

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f8fafc; color: #0f172a; font-size: 14px; line-height: 1.5; }
a { text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }

/* ===== APP LAYOUT ===== */
#app-layout { display: flex; height: 100vh; overflow: hidden; }

/* ===== SIDEBAR ===== */
.sidebar {
    width: 256px; flex-shrink: 0;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
    display: flex; flex-direction: column;
    height: 100vh; overflow-y: auto;
    position: relative; z-index: 50;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

/* ===== MAIN CONTENT ===== */
#main-content {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; min-width: 0;
}
#page-content { flex: 1; padding: 24px; overflow-y: auto; }

/* ===== TOPBAR ===== */
#topbar {
    height: 56px; background: #fff;
    border-bottom: 1px solid #f1f5f9;
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 24px; flex-shrink: 0;
    position: sticky; top: 0; z-index: 30;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform .3s ease;
        z-index: 50;
    }
    .sidebar.open { transform: translateX(0); }
    #sidebar-toggle { display: inline-flex !important; }
}
@media (min-width: 1025px) {
    #sidebar-toggle { display: none !important; }
    #sidebar-overlay { display: none !important; }
}

/* ===== BUTTONS ===== */
.btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white; font-weight: 600; font-size: 13px;
    border-radius: 10px; border: none; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: all .2s; box-shadow: 0 4px 12px rgba(59,130,246,.25);
    justify-content: center;
}
.btn-primary:hover { background: linear-gradient(135deg, #2563eb, #4f46e5); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    background: white; color: #475569;
    font-weight: 600; font-size: 13px;
    border-radius: 10px; border: 1.5px solid #e2e8f0;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: all .2s; justify-content: center;
}
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; }

/* ===== FORM ELEMENTS ===== */
.form-label {
    display: block; font-size: 12px; font-weight: 600;
    color: #374151; margin-bottom: 5px;
}
.input-field {
    display: block; width: 100%;
    padding: 9px 14px; font-size: 13px;
    font-family: inherit; color: #1e293b;
    background: #f8fafc; border: 1.5px solid #e2e8f0;
    border-radius: 10px; transition: all .15s;
    outline: none; appearance: none; -webkit-appearance: none;
}
.input-field:focus { background: white; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.input-field::placeholder { color: #94a3b8; }
select.input-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px; cursor: pointer;
}
textarea.input-field { resize: vertical; min-height: 80px; }

/* ===== ACTION BUTTONS ===== */
.action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    border: none; background: transparent;
    cursor: pointer; transition: background .15s; text-decoration: none;
}
.action-btn:hover { background: #f1f5f9; }

/* ===== PAGINATION ===== */
.pagination-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border-radius: 8px; font-size: 12px; font-weight: 500;
    color: #475569; background: white;
    border: 1.5px solid #e2e8f0;
    cursor: pointer; transition: all .15s; text-decoration: none;
}
.pagination-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.pagination-btn.active { background: #3b82f6; border-color: #3b82f6; color: white; font-weight: 700; }

/* ===== BADGES ===== */
.badge-blue    { display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:600;background:#dbeafe;color:#1d4ed8; }
.badge-gray    { display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:600;background:#f1f5f9;color:#475569; }
.badge-outline { display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:11px;font-weight:500;border:1.5px solid #e2e8f0;color:#64748b; }

/* Status badges from Helper::statusBadge() */
.bg-emerald-100 { background: #d1fae5; }
.text-emerald-700 { color: #065f46; }
.bg-red-100 { background: #fee2e2; }
.text-red-700 { color: #b91c1c; }
.bg-gray-100 { background: #f1f5f9; }
.text-gray-700 { color: #374151; }
.bg-orange-100 { background: #ffedd5; }
.text-orange-700 { color: #c2410c; }
.bg-yellow-100 { background: #fef9c3; }
.text-yellow-700 { color: #a16207; }
.bg-purple-100 { background: #f3e8ff; }
.text-purple-700 { color: #7e22ce; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.px-2\.5 { padding-left: 10px; padding-right: 10px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.rounded-full { border-radius: 9999px; }
.text-xs { font-size: 11px; }
.font-medium { font-weight: 500; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== FLASH MESSAGE ===== */
#flash-message { animation: slideDown .3s ease; }
@keyframes slideDown {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ===== MISC ===== */
tbody tr { transition: background-color .1s ease; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* ===== DEPRECIATION TABLE ROW BG ===== */
.bg-blue-50\/50 { background: rgba(239,246,255,.5) !important; }
.bg-gray-50\/50 { background: rgba(249,250,251,.5) !important; }

/* ===== PRINT ===== */
@media print {
    .sidebar, #topbar, .no-print { display: none !important; }
    #page-content { padding: 0 !important; }
}

/* ===== ASSET DETAIL PAGE - 2 COLUMN LAYOUT ===== */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
.detail-left  { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.detail-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-right { position: static; }
}

/* ===== FORCE DETAIL PAGE 2-COLUMN ===== */
.detail-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
}
.detail-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.detail-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 300px !important;
    min-width: 0 !important;
}
@media (max-width: 960px) {
    .detail-grid {
        grid-template-columns: 1fr !important;
    }
    .detail-right {
        width: 100% !important;
    }
}