/**
 * app.css - Sistem Manajemen File Berbasis Divisi
 * Custom stylesheet di atas Bootstrap 5
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
   --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

   /* Deep & Fresh Colors */
   --primary: #4361ee;
   --primary-light: #4895ef;
   --primary-dark: #3f37c9;
   --secondary: #b5179e;
   --accent: #4cc9f0;

   --success: #06d6a0;
   --warning: #ffd166;
   --danger: #ef476f;

   /* Neutral Shades (Adem) */
   --slate-50: #f8fafc;
   --slate-100: #f1f5f9;
   --slate-200: #e2e8f0;
   --slate-300: #cbd5e1;
   --slate-400: #94a3b8;
   --slate-500: #64748b;
   --slate-600: #475569;
   --slate-700: #334155;
   --slate-800: #1e293b;
   --slate-900: #0f172a;

   --white: #ffffff;
   --glass: rgba(255, 255, 255, 0.7);

   /* Layout */
   --sidebar-width: 270px;
   --topbar-height: 72px;

   /* Effects */
   --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
   --shadow-premium: 0 16px 32px -4px rgba(0, 0, 0, 0.08);
   --radius-sm: 8px;
   --radius-md: 14px;
   --radius-lg: 20px;
   --radius-xl: 30px;

   --t-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
   font-family: var(--font-main);
   font-size: 15px;
   color: var(--slate-700);
   background: #fdfdff;
   -webkit-font-smoothing: antialiased;
   background-image:
      radial-gradient(at 0% 0%, rgba(67, 97, 238, 0.03) 0, transparent 50%),
      radial-gradient(at 50% 0%, rgba(181, 23, 158, 0.02) 0, transparent 50%);
   background-attachment: fixed;
}

a {
   color: var(--blue-600);
   text-decoration: none;
   transition: all var(--t-normal);
}

a:hover {
   color: var(--blue-700);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.app-wrapper {
   display: flex;
   min-height: 100vh;
}

.main-content {
   flex: 1;
   margin-left: var(--sidebar-width);
   margin-top: var(--topbar-height);
   padding: 2rem;
   transition: all var(--t-normal);
   min-width: 0;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: var(--sidebar-width);
   background: var(--slate-900);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   z-index: 1100;
   /* Sidebar above topbar */
   transition: all var(--t-normal);
   box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
}

.sidebar-brand {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0 1.75rem;
   height: 80px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-brand-icon {
   width: 42px;
   height: 42px;
   border-radius: var(--radius-md);
   background: linear-gradient(135deg, var(--primary), var(--primary-light));
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 20px;
   box-shadow: 0 8px 20px -4px rgba(67, 97, 238, 0.5);
}

.brand-name {
   font-size: 18px;
   font-weight: 800;
   color: white;
   letter-spacing: -0.02em;
}

.brand-subtitle {
   font-size: 10px;
   color: var(--slate-500);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   opacity: 0.8;
}

.sidebar-menu-section {
   padding: 1.5rem 1rem 0.5rem;
}

.sidebar-section-label {
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.1em;
   color: var(--gray-500);
   text-transform: uppercase;
   margin-bottom: 0.75rem;
   padding-left: 0.75rem;
}

.sidebar-nav-link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 0.85rem 1.25rem;
   border-radius: var(--radius-md);
   color: var(--slate-400);
   font-weight: 500;
   font-size: 14.5px;
   margin-bottom: 4px;
   transition: all var(--t-normal);
   position: relative;
}

.sidebar-nav-link:hover {
   background: rgba(255, 255, 255, 0.06);
   color: white;
   transform: translateX(6px);
}

.sidebar-nav-link.active {
   background: linear-gradient(90deg, rgba(67, 97, 238, 0.15) 0%, rgba(67, 97, 238, 0.05) 100%);
   color: var(--accent);
   font-weight: 700;
   box-shadow: none;
}

.sidebar-nav-link.active::before {
   content: '';
   position: absolute;
   left: 0;
   top: 15%;
   height: 70%;
   width: 4px;
   background: var(--accent);
   border-radius: 0 4px 4px 0;
   box-shadow: 2px 0 10px var(--accent);
}

.nav-icon {
   font-size: 16px;
   opacity: 0.7;
}

.sidebar-footer {
   margin-top: auto;
   padding: 1.5rem;
   background: rgba(0, 0, 0, 0.2);
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-user-avatar {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: var(--slate-800);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: white;
   font-weight: 700;
}

.user-name {
   color: white;
   font-size: 14px;
}

.sidebar-logout-btn {
   margin-top: 1rem;
   color: #fca5a5;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0.5rem;
   border-radius: 8px;
   transition: all 0.2s;
}

.sidebar-logout-btn:hover {
   background: rgba(239, 68, 68, 0.1);
   color: #ef4444;
}

.sidebar-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .4);
   z-index: 999;
   backdrop-filter: blur(2px);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
   position: fixed;
   top: 0;
   left: var(--sidebar-width);
   right: 0;
   height: var(--topbar-height);
   background: var(--glass);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--slate-200);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 2rem;
   z-index: 1001;
   /* Above sidebar overlay if any */
   transition: all var(--t-normal);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.page-heading {
   font-size: 18px;
   font-weight: 700;
   color: var(--slate-900);
   letter-spacing: -0.01em;
   margin-bottom: 0;
}

.topbar-right {
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.topbar-user-btn {
   background: none;
   border: none;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 6px 12px;
   border-radius: 12px;
   transition: all 0.2s;
   cursor: pointer;
}

.topbar-user-btn:hover {
   background: var(--slate-100);
}

.user-avatar-sm {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 14px;
   box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
}

.user-info {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
   line-height: 1.2;
}

.user-name-top {
   font-size: 14px;
   font-weight: 700;
   color: var(--slate-900);
}

.user-role-top {
   font-size: 11px;
   color: var(--slate-400);
   font-weight: 500;
}

.search-input {
   background: var(--slate-100);
   border: 1px solid transparent;
   border-radius: 12px;
   padding: 0.5rem 1rem 0.5rem 2.25rem;
   font-size: 13.5px;
   transition: all 0.3s;
   width: 240px;
}

.search-input:focus {
   background: white;
   border-color: var(--blue-500);
   box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
   width: 300px;
}

/* CARDS */
.card {
   border: 1px solid rgba(0, 0, 0, 0.04);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-soft);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   background: var(--white);
   overflow: hidden;
}

.card:hover {
   box-shadow: var(--shadow-premium);
   transform: translateY(-4px);
}

.card-header {
   background: var(--white);
   border-bottom: 1px solid var(--slate-100);
   padding: 1.5rem 1.75rem;
   font-weight: 700;
   color: var(--slate-900);
   font-size: 16px;
}

/* BUTTONS */
/* BUTTONS */
.btn {
   padding: 0.75rem 1.5rem;
   font-weight: 700;
   border-radius: var(--radius-md);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   font-size: 14px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   letter-spacing: -0.01em;
}

.btn-primary {
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   border: none;
   color: white;
   box-shadow: 0 8px 20px -6px rgba(67, 97, 238, 0.5);
}

.btn-primary:hover {
   background: linear-gradient(135deg, var(--primary-light), var(--primary));
   transform: translateY(-2px);
   box-shadow: 0 12px 25px -6px rgba(67, 97, 238, 0.6);
   color: white;
}

.btn-outline-primary {
   border: 1.5px solid var(--primary);
   color: var(--primary);
   background: transparent;
}

.btn-outline-primary:hover {
   background: rgba(67, 97, 238, 0.05);
   border-color: var(--primary-light);
   color: var(--primary-dark);
}

/* DROPDOWNS */
/* DROPDOWNS */
.dropdown-menu {
   background-color: var(--white) !important;
   border: 1px solid rgba(0, 0, 0, 0.1) !important;
   border-radius: 12px !important;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
   padding: 8px !important;
   min-width: 220px !important;
   z-index: 2000 !important;
   margin-top: 5px !important;
}

.dropdown-item {
   padding: 10px 16px !important;
   border-radius: 8px !important;
   font-size: 14px !important;
   font-weight: 500 !important;
   color: var(--slate-700) !important;
   display: flex !important;
   align-items: center !important;
   gap: 12px !important;
   transition: all 0.2s !important;
   background: transparent !important;
   border: none !important;
}

.dropdown-item:hover {
   background-color: var(--slate-50) !important;
   color: var(--primary) !important;
   transform: translateX(3px) !important;
}

.dropdown-item i {
   font-size: 1.1rem !important;
   color: var(--slate-400) !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
   min-height: 100vh;
   background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 50%, #f5f3ff 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}

.login-bg {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 0;
}

.blob {
   position: absolute;
   border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
   animation: blobFloat 8s ease-in-out infinite;
   filter: blur(60px);
   opacity: .35;
}

.blob-1 {
   width: 500px;
   height: 500px;
   background: var(--blue-100);
   top: -100px;
   left: -100px;
}

.blob-2 {
   width: 400px;
   height: 400px;
   background: #e0e7ff;
   bottom: -80px;
   right: -80px;
   animation-delay: -3s;
}

.blob-3 {
   width: 300px;
   height: 300px;
   background: #f3e8ff;
   top: 40%;
   left: 40%;
   animation-delay: -5s;
}

@keyframes blobFloat {

   0%,
   100% {
      transform: translate(0, 0) scale(1)
   }

   33% {
      transform: translate(20px, -15px) scale(1.04)
   }

   66% {
      transform: translate(-15px, 10px) scale(.97)
   }
}

.login-container {
   position: relative;
   z-index: 1;
   width: 100%;
   max-width: 440px;
   padding: 1.5rem;
}

.login-card {
   background: white;
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   padding: 2.5rem 2rem;
   border: 1px solid rgba(255, 255, 255, .8);
}

.login-brand {
   text-align: center;
   margin-bottom: 2rem;
}

.login-logo {
   width: 64px;
   height: 64px;
   border-radius: var(--radius-lg);
   background: linear-gradient(135deg, var(--blue-600), var(--indigo-500));
   color: white;
   font-size: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem;
   box-shadow: 0 8px 24px rgba(37, 99, 235, .3);
}

.login-title {
   font-size: 24px;
   font-weight: 700;
   color: var(--gray-900);
   margin-bottom: .25rem;
}

.login-subtitle {
   font-size: 13px;
   color: var(--gray-400);
   margin: 0;
}

.form-label {
   font-size: 13px;
   font-weight: 600;
   color: var(--gray-700);
   margin-bottom: .4rem;
}

.form-control-modern {
   border: 1.5px solid var(--gray-200);
   border-radius: var(--radius-md);
   padding: .65rem .875rem;
   font-size: 14px;
   color: var(--gray-800);
   background: var(--gray-50);
   transition: all var(--t-fast);
   font-family: var(--font-main);
   width: 100%;
}

.form-control-modern:focus {
   outline: none;
   border-color: var(--blue-500);
   background: white;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.password-wrapper {
   position: relative;
   width: 100%;
}

.password-wrapper .form-control-modern {
   padding-right: 42px;
}

.password-toggle {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: none;
   border: none;
   color: var(--gray-400);
   cursor: pointer;
   padding: 2px;
   font-size: 16px;
   transition: color var(--t-fast);
}

.password-toggle:hover {
   color: var(--gray-700);
}

.forgot-link {
   font-size: 13px;
   color: var(--blue-600);
}

.btn-login {
   background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
   color: white;
   border: none;
   border-radius: var(--radius-md);
   padding: .7rem 1rem;
   font-size: 14px;
   font-weight: 600;
   transition: all var(--t-fast);
   box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
   font-family: var(--font-main);
}

.btn-login:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: 0 6px 20px rgba(37, 99, 235, .35);
   color: white;
}

.btn-login:disabled {
   opacity: .75;
}

.login-footer-text {
   text-align: center;
   font-size: 12px;
   color: var(--gray-400);
   margin-top: 1.75rem;
   margin-bottom: 0;
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.greeting-banner {
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
   border-radius: var(--radius-lg);
   padding: 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   box-shadow: 0 10px 30px -5px rgba(67, 97, 238, 0.3);
   position: relative;
   overflow: hidden;
}

.greeting-banner::after {
   content: '';
   position: absolute;
   top: -50%;
   right: -10%;
   width: 300px;
   height: 300px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 50%;
}

.greeting-hello {
   font-size: 18px;
   font-weight: 600;
   color: white;
}

.greeting-sub {
   font-size: 13px;
   color: rgba(255, 255, 255, .75);
}

.btn-upload-cta {
   background: white;
   color: var(--blue-600);
   border: none;
   border-radius: var(--radius-md);
   padding: .6rem 1.25rem;
   font-size: 13.5px;
   font-weight: 600;
   white-space: nowrap;
   transition: all var(--t-fast);
   font-family: var(--font-main);
   flex-shrink: 0;
}

.btn-upload-cta:hover {
   background: var(--blue-50);
   transform: translateY(-1px);
}

.stat-card {
   background: white;
   border-radius: var(--radius-lg);
   padding: 1.5rem;
   display: flex;
   align-items: center;
   gap: 1.25rem;
   box-shadow: var(--shadow-soft);
   border: 1px solid rgba(0, 0, 0, 0.02);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
}

.stat-icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   flex-shrink: 0;
}

.stat-card-blue .stat-icon {
   background: var(--blue-50);
   color: var(--blue-600);
}

.stat-card-indigo .stat-icon {
   background: #eef2ff;
   color: var(--indigo-500);
}

.stat-card-teal .stat-icon {
   background: #f0fdfa;
   color: var(--teal-500);
}

.stat-card-violet .stat-icon {
   background: #f5f3ff;
   color: var(--violet-500);
}

.stat-value {
   display: block;
   font-size: 22px;
   font-weight: 700;
   color: var(--gray-900);
   line-height: 1.1;
}

.stat-label {
   display: block;
   font-size: 12px;
   color: var(--gray-400);
   margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.section-card {
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
}

.card-header-custom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.25rem;
   border-bottom: 1px solid var(--gray-100);
}

.card-title-custom {
   font-size: 14px;
   font-weight: 600;
   color: var(--gray-800);
   margin: 0;
   display: flex;
   align-items: center;
}

.card-link-all {
   font-size: 12.5px;
   color: var(--blue-600);
   display: flex;
   align-items: center;
   gap: 4px;
}

.storage-progress {
   height: 6px;
   border-radius: var(--radius-full);
   background: var(--gray-100);
}

.bg-blue-gradient {
   background: linear-gradient(90deg, var(--blue-500), var(--indigo-500)) !important;
}

.file-table {
   font-size: 13.5px;
}

.file-table thead th {
   font-size: 11px;
   font-weight: 800;
   color: var(--slate-400);
   text-transform: uppercase;
   letter-spacing: .12em;
   border-bottom: 2px solid var(--slate-100);
   padding: 1.25rem 1.5rem;
   background: var(--white);
}

.file-table tbody td {
   padding: 1.25rem 1.5rem;
   vertical-align: middle;
   border-bottom: 1px solid var(--slate-50);
   transition: all 0.2s;
}

.file-table tbody tr:hover td {
   background: rgba(67, 97, 238, 0.02);
   color: var(--primary);
}

.file-table tbody tr:last-child td {
   border-bottom: none;
}

.file-table tbody tr:hover {
   background: var(--gray-50);
}

.file-name-text {
   font-weight: 500;
   color: var(--gray-800);
}

.file-icon-sm {
   width: 30px;
   height: 30px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   flex-shrink: 0;
}

.file-icon-pdf {
   background: #fef2f2;
   color: #ef4444;
}

.file-icon-word {
   background: #eff6ff;
   color: var(--blue-600);
}

.file-icon-excel {
   background: #f0fdf4;
   color: #22c55e;
}

.file-icon-ppt {
   background: #fff7ed;
   color: #f97316;
}

.file-icon-img {
   background: #f0f4ff;
   color: var(--indigo-500);
}

.file-icon-zip {
   background: #fefce8;
   color: #eab308;
}

.file-icon-text {
   background: var(--gray-100);
   color: var(--gray-500);
}

.file-icon-other {
   background: var(--gray-100);
   color: var(--gray-500);
}

.badge-ext {
   background: var(--gray-100);
   color: var(--gray-600);
   font-size: 10.5px;
   font-weight: 600;
   padding: 2px 7px;
   border-radius: var(--radius-full);
}

.btn-action-sm {
   background: white;
   border: 1px solid var(--gray-200);
   color: var(--gray-500);
   width: 32px;
   height: 32px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none !important;
   font-size: 14px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-action-sm:hover {
   background: var(--blue-50);
   border-color: var(--blue-200);
   color: var(--blue-600);
   transform: translateY(-2px);
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-action-sm.text-danger:hover {
   background: #fef2f2;
   border-color: #fecaca;
   color: #ef4444;
}

.btn-action-sm.text-teal:hover {
   background: #f0fdfa;
   border-color: #99f6e4;
   color: #0d9488;
}

.btn-indigo {
   background: var(--indigo-600);
   color: #ffffff !important;
   border: none;
   box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
   transition: all var(--t-fast);
}

.btn-indigo:hover {
   background: var(--indigo-700);
   color: #ffffff !important;
   transform: translateY(-1px);
   box-shadow: 0 6px 15px rgba(79, 70, 229, 0.3);
}

/* Quick Actions */
.quick-actions-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: .75rem;
}

.quick-action-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .5rem;
   padding: 1rem .75rem;
   border: 1.5px solid var(--gray-200);
   border-radius: var(--radius-lg);
   background: white;
   cursor: pointer;
   font-size: 12.5px;
   font-weight: 500;
   color: var(--gray-700);
   font-family: var(--font-main);
   transition: all var(--t-fast);
   text-decoration: none;
}

.quick-action-btn:hover {
   border-color: var(--blue-300);
   background: var(--blue-50);
   transform: translateY(-2px);
   box-shadow: var(--shadow-sm);
   color: var(--gray-800);
}

.qa-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
}

.qa-blue {
   background: var(--blue-50);
   color: var(--blue-600);
}

.qa-indigo {
   background: #eef2ff;
   color: var(--indigo-500);
}

.qa-teal {
   background: #f0fdfa;
   color: var(--teal-500);
}

.qa-violet {
   background: #f5f3ff;
   color: var(--violet-500);
}

/* ============================================================
   FILE MANAGER
   ============================================================ */
.file-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
}

.file-actions {
   display: flex;
   align-items: center;
   gap: .5rem;
   flex-wrap: wrap;
}

.file-breadcrumb .breadcrumb {
   font-size: 13px;
   margin-bottom: 0;
}

.file-breadcrumb .breadcrumb-item a {
   color: var(--blue-600);
}

.file-breadcrumb .breadcrumb-item.active {
   color: var(--gray-600);
}

.view-toggle-group {
   display: flex;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   overflow: hidden;
}

.view-toggle-btn {
   padding: .35rem .65rem;
   background: white;
   border: none;
   color: var(--gray-400);
   cursor: pointer;
   font-size: 15px;
   line-height: 1;
   transition: all var(--t-fast);
}

.view-toggle-btn.active {
   background: var(--gray-100);
   color: var(--blue-600);
}

.view-toggle-btn:hover {
   background: var(--gray-100);
   color: var(--gray-700);
}

.filter-bar {
   display: flex;
   gap: .75rem;
   align-items: center;
   flex-wrap: wrap;
}

.filter-search {
   flex: 1;
   min-width: 200px;
   position: relative;
}

.filter-search i {
   position: absolute;
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gray-400);
   font-size: 13px;
}

.filter-input {
   width: 100%;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   padding: .45rem .875rem .45rem 32px;
   font-size: 13px;
   color: var(--gray-700);
   background: white;
   font-family: var(--font-main);
   transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.filter-input:focus {
   outline: none;
   border-color: var(--blue-500);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

.sort-select {
   min-width: 160px;
   border-radius: var(--radius-md);
   border-color: var(--gray-200);
   font-size: 13px;
   color: var(--gray-700);
   font-family: var(--font-main);
}

.file-grid-section-label {
   font-size: 12px;
   font-weight: 700;
   color: var(--gray-400);
   text-transform: uppercase;
   letter-spacing: .06em;
   display: flex;
   align-items: center;
   gap: .35rem;
   margin-bottom: .75rem;
}

.item-count {
   font-size: 11px;
   background: var(--gray-100);
   color: var(--gray-500);
   padding: 0 6px;
   border-radius: var(--radius-full);
   font-weight: 600;
}

.file-grid-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: .875rem;
}

.file-card {
   background: white;
   border: 1.5px solid var(--gray-200);
   border-radius: var(--radius-lg);
   overflow: hidden;
   position: relative;
   transition: all var(--t-fast);
   cursor: pointer;
}

.file-card:hover {
   border-color: var(--blue-300);
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
}

.file-card:hover .btn-card-action {
   opacity: 1;
}

.file-card-body {
   padding: 1rem .875rem .6rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: .6rem;
}

.file-card-icon {
   width: 52px;
   height: 52px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
}

.folder-icon {
   background: #fef9ee;
   color: #f59e0b;
}

.file-card-name {
   font-size: 12.5px;
   font-weight: 600;
   color: var(--gray-800);
   margin: 0 0 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 130px;
}

.file-card-meta {
   font-size: 11px;
   color: var(--gray-400);
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.file-card-action {
   position: absolute;
   top: 6px;
   right: 6px;
}

.btn-card-action {
   width: 26px;
   height: 26px;
   background: white;
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-sm);
   color: var(--gray-500);
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: all var(--t-fast);
   box-shadow: var(--shadow-sm);
}

.btn-card-action:hover {
   background: var(--gray-100);
   color: var(--gray-800);
}

.action-dropdown {
   border-radius: var(--radius-md);
   border-color: var(--gray-200);
   box-shadow: var(--shadow-lg);
   font-size: 13.5px;
   min-width: 170px;
   overflow: hidden;
   padding: .25rem;
}

.action-dropdown .dropdown-item {
   border-radius: var(--radius-sm);
   padding: .5rem .75rem;
}

.file-list-name {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   font-weight: 500;
   color: var(--gray-800);
}

.file-list-icon {
   width: 26px;
   height: 26px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   flex-shrink: 0;
}

.folder-icon-sm {
   background: #fef9ee;
   color: #f59e0b;
}

/* Empty & Access Denied */
.empty-state {
   text-align: center;
   padding: 4rem 2rem;
}

.empty-icon {
   font-size: 52px;
   color: var(--gray-300);
   margin-bottom: 1rem;
   display: block;
}

.empty-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--gray-600);
   margin-bottom: .5rem;
}

.empty-desc {
   font-size: 13.5px;
   color: var(--gray-400);
   margin-bottom: 1.25rem;
}

.access-denied-state {
   text-align: center;
   padding: 5rem 2rem;
   max-width: 440px;
   margin: 0 auto;
}

.denied-icon {
   font-size: 64px;
   color: #ef4444;
   opacity: .4;
   margin-bottom: 1rem;
   display: block;
}

.denied-title {
   font-size: 20px;
   font-weight: 700;
   color: var(--gray-800);
   margin-bottom: .5rem;
}

.denied-desc {
   font-size: 13.5px;
   color: var(--gray-500);
   margin-bottom: 1.5rem;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-modern {
   border: none;
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   overflow: hidden;
}

.modal-modern .modal-header {
   background: var(--gray-50);
   border-bottom: 1px solid var(--gray-200);
   padding: 1rem 1.25rem;
}

.modal-modern .modal-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--gray-800);
   display: flex;
   align-items: center;
}

.modal-modern .modal-body {
   padding: 1.5rem;
}

.modal-modern .modal-footer {
   padding: .875rem 1.25rem;
   border-top: 1px solid var(--gray-100);
}

/* Upload Modal */
.form-select-modern {
   border: 1.5px solid var(--gray-200);
   border-radius: var(--radius-md);
   padding: .6rem .875rem;
   font-size: 13.5px;
   color: var(--gray-700);
   background: var(--gray-50);
   font-family: var(--font-main);
   transition: all var(--t-fast);
}

.form-select-modern:focus {
   outline: none;
   border-color: var(--blue-500);
   box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
   background: white;
}

.drop-zone {
   border: 2px dashed var(--gray-300);
   border-radius: var(--radius-lg);
   background: var(--gray-50);
   padding: 2.5rem 1.5rem;
   text-align: center;
   cursor: pointer;
   transition: all var(--t-fast);
   position: relative;
   overflow: hidden;
}

.drop-zone:hover,
.drop-zone.drag-over {
   border-color: var(--blue-500);
   background: var(--blue-50);
}

.drop-zone-content {
   position: relative;
   z-index: 1;
}

.drop-icon {
   font-size: 44px;
   color: var(--blue-400);
   display: block;
   margin-bottom: .75rem;
   transition: transform var(--t-fast);
}

.drop-zone:hover .drop-icon {
   transform: translateY(-4px);
}

.drop-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--gray-700);
   margin-bottom: .25rem;
}

.drop-subtitle {
   font-size: 13px;
   color: var(--gray-400);
   margin-bottom: .75rem;
}

.drop-overlay {
   position: absolute;
   inset: 0;
   background: rgba(37, 99, 235, .08);
   border-radius: inherit;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   font-size: 15px;
   font-weight: 600;
   color: var(--blue-600);
   z-index: 2;
   pointer-events: none;
}

.drop-overlay i {
   font-size: 32px;
}

.file-preview-list {
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   overflow: hidden;
}

.preview-items-container {
   max-height: 220px;
   overflow-y: auto;
}

.preview-item {
   display: flex;
   align-items: center;
   gap: .75rem;
   padding: .6rem .875rem;
   border-bottom: 1px solid var(--gray-100);
   font-size: 13px;
}

.preview-item:last-child {
   border-bottom: none;
}

.preview-item-icon {
   width: 32px;
   height: 32px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   flex-shrink: 0;
}

.preview-item-info {
   flex: 1;
   min-width: 0;
}

.preview-item-name {
   font-weight: 500;
   color: var(--gray-800);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.preview-item-size {
   font-size: 11px;
   color: var(--gray-400);
}

.btn-remove-preview {
   background: none;
   border: none;
   color: var(--gray-400);
   cursor: pointer;
   font-size: 15px;
   padding: 2px;
   border-radius: var(--radius-sm);
   transition: color var(--t-fast);
   flex-shrink: 0;
}

.btn-remove-preview:hover {
   color: #ef4444;
}

.upload-progress {
   height: 8px;
   border-radius: var(--radius-full);
}

.upload-success {
   text-align: center;
   padding: 1.5rem;
   animation: fadeInUp .35s ease;
}

.success-icon {
   font-size: 52px;
   color: #22c55e;
   display: block;
   margin-bottom: .75rem;
}

/* Share Modal */
.share-target-info {
   display: flex;
   align-items: center;
   gap: .875rem;
   background: var(--gray-50);
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   padding: .875rem 1rem;
}

.share-target-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-md);
   background: var(--blue-50);
   color: var(--blue-600);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
}

.share-target-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--gray-800);
}

.share-division-stack {
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-md);
   overflow: hidden;
   max-height: 220px;
   overflow-y: auto;
}

.share-division-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: .75rem 1rem;
   border-bottom: 1px solid var(--gray-100);
   cursor: pointer;
   transition: background var(--t-fast);
   margin-bottom: 0;
}

.share-division-item:last-child {
   border-bottom: none;
}

.share-division-item:hover {
   background: var(--blue-50);
}

.share-div-left {
   display: flex;
   align-items: center;
   gap: .75rem;
}

.share-div-avatar {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-md);
   background: linear-gradient(135deg, var(--blue-500), var(--indigo-500));
   color: white;
   font-size: 11px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
}

.div-name {
   font-size: 13.5px;
   font-weight: 600;
   color: var(--gray-800);
   display: block;
}

.permission-group {
   display: flex;
   gap: .75rem;
   flex-direction: column;
}

.permission-card {
   cursor: pointer;
   margin-bottom: 0;
}

.permission-radio {
   display: none;
}

.permission-card-body {
   display: flex;
   align-items: center;
   gap: .875rem;
   padding: .875rem 1rem;
   border: 1.5px solid var(--gray-200);
   border-radius: var(--radius-md);
   transition: all var(--t-fast);
}

.permission-card-body:hover {
   border-color: var(--blue-300);
   background: var(--blue-50);
}

.permission-radio:checked+.permission-card-body {
   border-color: var(--blue-600);
   background: var(--blue-50);
}

.permission-icon {
   width: 38px;
   height: 38px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
}

.perm-read {
   background: #f0fdf4;
   color: #22c55e;
}

.perm-write {
   background: #fff7ed;
   color: #f97316;
}

.permission-label {
   font-size: 14px;
   font-weight: 600;
   color: var(--gray-800);
   display: block;
}

.permission-check-indicator {
   margin-left: auto;
   color: var(--gray-200);
   font-size: 18px;
   transition: color var(--t-fast);
}

.permission-radio:checked+.permission-card-body .permission-check-indicator {
   color: var(--blue-600);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(12px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

.animate-fade-in {
   animation: fadeIn .25s ease;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
   .sidebar {
      transform: translateX(-100%);
      box-shadow: none;
   }

   .sidebar.sidebar-open {
      transform: translateX(0);
      box-shadow: var(--shadow-xl);
   }

   .topbar {
      left: 0;
   }

   .main-content {
      margin-left: 0;
   }

   .sidebar-overlay.active {
      display: block !important;
   }

   .greeting-banner {
      flex-direction: column;
      align-items: flex-start;
   }

   .btn-upload-cta {
      align-self: flex-start;
   }
}

@media (max-width: 575.98px) {
   .main-content {
      padding: 1rem;
   }

   .file-grid-items {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: .625rem;
   }

   .topbar {
      padding: 0 1rem;
   }

   .topbar-search {
      display: none;
   }
}

/* ============================================================
   ACTIVITY LIST
   ============================================================ */
.activity-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.activity-item {
   display: flex;
   align-items: flex-start;
   gap: .75rem;
   padding: .65rem 1rem;
   border-bottom: 1px solid var(--gray-100);
}

.activity-item:last-child {
   border-bottom: none;
}

.act-dot {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   flex-shrink: 0;
   margin-top: 5px;
}

.act-dot-blue {
   background: var(--blue-500);
}

.act-dot-green {
   background: #22c55e;
}

.act-dot-violet {
   background: var(--violet-500);
}

.act-dot-orange {
   background: #f97316;
}

.act-info {
   flex: 1;
   min-width: 0;
}

.act-text {
   font-size: 13px;
   color: var(--gray-700);
   margin-bottom: 1px;
}

.act-time {
   font-size: 11px;
   color: var(--gray-400);
}

/* ============================================================
   PREMIUM FLOATING NAV HUB (Quick Pick)
   ============================================================ */
.quick-pick-hub {
   display: none;
   /* Hidden by default */
}

@media (max-width: 991.98px) {
   body {
      padding-bottom: 90px;
      /* More space for the floating island */
   }

   .quick-pick-hub {
      display: flex !important;
      position: fixed !important;
      bottom: 24px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      background: rgba(255, 255, 255, 0.75) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
      border: 1px solid rgba(255, 255, 255, 0.45) !important;
      border-radius: 28px !important;
      padding: 8px 12px !important;
      align-items: center !important;
      gap: 8px !important;
      z-index: 9999 !important;
      box-shadow:
         0 10px 30px -10px rgba(0, 0, 0, 0.15),
         0 20px 40px -15px rgba(0, 0, 0, 0.1) !important;
      width: max-content !important;
      max-width: 95vw !important;
   }

   .hub-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--gray-600);
      text-decoration: none !important;
      width: 52px;
      height: 52px;
      border-radius: 18px;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
   }

   .hub-item i {
      font-size: 20px;
   }

   .hub-label {
      font-size: 8.5px;
      font-weight: 700;
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: 0.02em;
   }

   /* Active State */
   .hub-item.active {
      background: var(--blue-600);
      color: white !important;
      box-shadow: 0 8px 16px rgba(37, 99, 235, 0.25);
      transform: translateY(-4px) scale(1.05);
   }

   /* Primary Center Button */
   .hub-item-primary {
      background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
      color: white !important;
      width: 62px;
      height: 62px;
      border-radius: 22px;
      margin: 0 4px;
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
   }

   .hub-item-primary i {
      font-size: 26px;
   }

   .hub-item-primary:active {
      transform: scale(0.9) translateY(2px);
   }

   .hub-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      background: #ef4444;
      color: white;
      font-size: 9px;
      font-weight: 800;
      min-width: 18px;
      height: 18px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid white;
   }
}
/* Mobile Quick Actions (Dashboard) */
.mobile-qa-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   padding: 12px 8px;
   background: white;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-soft);
   transition: all var(--t-normal);
   text-decoration: none !important;
}

.mobile-qa-item:active {
   transform: scale(0.95);
   background: var(--slate-50);
}

.mobile-qa-icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.mobile-qa-text {
   font-size: 11px;
   font-weight: 600;
   color: var(--slate-600);
}

/* Background combinations for QA */
.bg-soft-blue { background: #eff6ff; }
.bg-soft-indigo { background: #eef2ff; }
.bg-soft-teal { background: #f0fdfa; }
.bg-soft-violet { background: #f5f3ff; }
.bg-soft-amber { background: #fffbeb; }

.text-indigo { color: #6366f1; }
.text-teal { color: #14b8a6; }
.text-violet { color: #8b5cf6; }
.text-amber { color: #f59e0b; }

.bg-soft-orange { background: #fff7ed; }
.text-orange { color: #f97316; }