/**
 * VFM - Veno File Manager SKIN
 * Custom YPPI Skin: Clean File List (No Blue Highlight Backgrounds)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --- Variabel Warna Utama --- */
:root {
  --yppi-header-blue: #1e3a8a;      /* Biru Utama Header */
  --yppi-header-darkblue: #1e40af;  /* Biru Hover */
  --yppi-accent-yellow: #facc15;    /* Kuning Cerah Header & Button */
  --yppi-yellow-hover: #eab308;     
  
  --yppi-bg: #f5f5dc;               /* Classic Beige Background */
  --yppi-card-bg: #ffffff;          /* Latar Card Putih Bersih */
  --yppi-card-header: #f8f6ed;      /* Beige Muda Header Panel */
  --yppi-text-main: #0f172a;        /* Teks Utama Gelap & Jelas */
  --yppi-text-muted: #475569;       /* Sub-teks Slate */
  --yppi-border-strong: #d1c7ac;    /* Dark Beige Border */
  
  --yppi-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  --yppi-radius: 8px;
}

body, body.vfm-body {
    background: var(--yppi-bg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a, .btn-link, .round-butt {
    color: var(--yppi-header-blue) !important;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

a:hover, a:active, a:focus {
    color: var(--yppi-header-darkblue) !important;
    text-decoration: underline;
}

/* Sticky Footer Styles */
html {
  position: relative;
  min-height: 100%;
}

body {
    padding-bottom: 70px;
    padding-top: 70px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  vertical-align: middle;
  float: none;
  padding: 15px 0;
  background: var(--yppi-header-blue) !important;
  border-top: 3px solid var(--yppi-accent-yellow) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   HEADER & NAVBAR (1 LIST KUNING DI BAWAH NAVBAR)
   ========================================================================== */
header, .header, #header, .navbar-custom {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.navbar, .navbar-default, .navbar-inverse {
    background-color: var(--yppi-header-blue) !important;
    border: none !important;
    border-bottom: 3.5px solid var(--yppi-accent-yellow) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    margin-bottom: 0 !important;
}

.navbar-inverse .navbar-nav > li > a, 
.footer a,
.navbar-inverse .navbar-brand {
    color: #ffffff !important;
    font-weight: 600;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > .open > a, 
.navbar-inverse .navbar-nav > .open > a:hover, 
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: var(--yppi-header-darkblue) !important;
    color: var(--yppi-accent-yellow) !important;
    border-radius: 6px;
}

.navbar-inverse .navbar-nav .open .dropdown-menu {
    background-color: #ffffff !important;
    border: 2px solid var(--yppi-header-blue) !important;
    border-top: 3px solid var(--yppi-accent-yellow) !important;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: var(--yppi-text-main) !important;
    font-weight: 600;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
    background-color: var(--yppi-card-header) !important;
    color: var(--yppi-header-blue) !important;
}

/* ==========================================================================
   MENGHILANGKAN WARNA BIRU PADA DAFTAR LIST FILE & ICON
   ========================================================================== */

/* 1. Hilangkan Latar Biru pada Nama File, Link, & Thumbnail Box */
.table td a,
.table td .anchor,
.table td .thumb,
.table td .vfm-file,
.table td [class*="vfm-"],
.table td .file-item,
.table td div,
.table td span {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. Format Teks Nama File agar Bersih & Sangat Jelas */
.table td a {
    color: var(--yppi-text-main) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.table td a:hover {
    color: var(--yppi-header-blue) !important;
    text-decoration: underline !important;
}

/* 3. Hilangkan Highlight Biru pada Icon File/Folder Box */
.table td .fa,
.table td .fa-stack,
.table td .icon-container,
.table td .vfm-thumb {
    background: transparent !important;
    background-color: transparent !important;
}

/* Warna Icon Spesifik tanpa Background */
.table td .fa-folder,
.table td .fa-folder-open,
.table td [class*="-folder"] {
    color: #d97706 !important; /* Warna Folder Oranye-Cokelat */
    font-size: 1.15rem !important;
}

.table td .fa-file,
.table td [class*="-file"] {
    color: var(--yppi-header-blue) !important; /* Warna Icon File Biru */
    font-size: 1.05rem !important;
}

/* 4. Efek Hover Baris Tabel yang Lembut (Sesuai Latar Beige/Putih) */
.table > tbody > tr {
    background-color: #ffffff !important;
}

.table > tbody > tr:hover {
    background-color: #f8f6ed !important; /* Beige Sangat Muda saat Kursor Diarahkan */
}

/* ==========================================================================
   CARD & PANEL STYLING
   ========================================================================== */
.panel, .card, .box, .vfm-box, .table-white, .login-box, .well {
    background: var(--yppi-card-bg) !important;
    border-radius: var(--yppi-radius) !important;
    border: 1.5px solid var(--yppi-border-strong) !important;
    box-shadow: var(--yppi-shadow) !important;
    color: var(--yppi-text-main) !important;
}

.panel-heading, .card-header {
    background-color: var(--yppi-card-header) !important;
    border-bottom: 2px solid var(--yppi-accent-yellow) !important;
    color: var(--yppi-header-blue) !important;
    font-weight: 700 !important;
    font-size: 1rem;
}

.panel-title, .card-title {
    color: var(--yppi-header-blue) !important;
    font-weight: 700 !important;
}

.tableblock, .uploadarea {
    border-top: 4px solid var(--yppi-header-blue) !important;
    background: var(--yppi-card-bg) !important;
    border-radius: var(--yppi-radius) !important;
    border-left: 1.5px solid var(--yppi-border-strong) !important;
    border-right: 1.5px solid var(--yppi-border-strong) !important;
    border-bottom: 1.5px solid var(--yppi-border-strong) !important;
    box-shadow: var(--yppi-shadow) !important;
    padding: 15px;
    margin-bottom: 20px;
}

.uploadarea {
    border: 2px dashed var(--yppi-border-strong) !important;
    background: #faf8f2 !important;
}

/* ==========================================================================
   TOMBOL (BUTTONS) PADA CARD & PANEL
   ========================================================================== */
.label-primary,
.btn-primary {
    background-color: var(--yppi-header-blue) !important;
    border: 1px solid var(--yppi-header-darkblue) !important;
    border-bottom: 3px solid var(--yppi-accent-yellow) !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: var(--yppi-radius);
    transition: all 0.2s ease;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
    background-color: var(--yppi-header-darkblue) !important;
    color: var(--yppi-accent-yellow) !important;
    border-bottom-color: var(--yppi-yellow-hover) !important;
}

.btn-default {
    background-color: #ffffff !important;
    border: 1.5px solid var(--yppi-border-strong) !important;
    color: var(--yppi-text-main) !important;
    font-weight: 600;
    border-radius: var(--yppi-radius);
}

.btn-default:hover, 
.btn-default:focus, 
.btn-default:active {
    background-color: var(--yppi-card-header) !important;
    border-color: var(--yppi-header-blue) !important;
    color: var(--yppi-header-blue) !important;
}

/* Tombol Aksi Tabel Lingkaran */
.table .btn, 
.table .round-butt,
.table a[class*="btn"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
    padding: 0;
    border-radius: 50% !important;
    border: none !important;
    transition: all 0.2s ease-in-out;
    margin: 0 2px;
}

/* Download */
.table a[href*="download"],
.table .btn-primary,
.table .fa-download {
    background-color: #dbeafe !important;
    color: var(--yppi-header-blue) !important;
    font-weight: 700;
}

.table a[href*="download"]:hover {
    background-color: var(--yppi-header-blue) !important;
    color: var(--yppi-accent-yellow) !important;
}

/* Rename */
.table .fa-pencil,
.table .fa-edit,
.table a[class*="rename"] {
    background-color: #fef9c3 !important;
    color: #854d0e !important;
    font-weight: 700;
}

.table a[class*="rename"]:hover {
    background-color: var(--yppi-accent-yellow) !important;
    color: #0f172a !important;
}

/* Delete */
.table .fa-trash,
.table .fa-times,
.table .btn-danger,
.table a[class*="del"] {
    background-color: #fecaca !important;
    color: #991b1b !important;
    font-weight: 700;
}

.table a[class*="del"]:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   TABEL & FORM INPUT
   ========================================================================== */
.form-control, .dataTables_filter input {
    background-color: #ffffff !important;
    border-radius: var(--yppi-radius) !important;
    border: 1.5px solid var(--yppi-border-strong) !important;
    color: var(--yppi-text-main) !important;
    font-weight: 600;
    padding: 8px 12px;
}

.form-control:focus, .dataTables_filter input:focus {
    border-color: var(--yppi-header-blue) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.2) !important;
}

.table > thead > tr > th {
    background-color: #f8f6ed !important;
    border-bottom: 2px solid var(--yppi-accent-yellow) !important;
    color: var(--yppi-header-blue) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.table > thead > tr > th, 
.table > tbody > tr > th, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > tbody > tr > td, 
.table > tfoot > tr > td {
    padding: 8px 10px !important;
    vertical-align: middle !important;
}