/* ============================================================
   Biolis Cloud Drive — Global styles
   shadcn-inspired design system: HSL CSS variables + Inter font
   + button/card/input/badge component classes.
   ============================================================ */

/* --- Inter font (variable, antialiased) --- */
@import url('https://rsms.me/inter/inter.css');

/* --- shadcn-style color tokens (blue theme) --- */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
}
.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
}

/* --- Base --- */
* { border-color: hsl(var(--border)); }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
    font-variation-settings: 'opsz' 32;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}
@supports (font-variation-settings: normal) {
    body { font-family: 'Inter var', sans-serif; }
}

/* --- Button base + variants (shadcn-style) --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    white-space: nowrap; border-radius: calc(var(--radius) - 2px);
    font-size: .875rem; font-weight: 500; line-height: 1.25rem;
    transition: all .15s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer; user-select: none;
    height: 2.25rem; padding: 0 1rem;
    border: 1px solid transparent;
    font-family: inherit;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-primary    { background: hsl(var(--primary));        color: hsl(var(--primary-foreground)); }
.btn-primary:hover    { background: hsl(var(--primary) / .9); }
.btn-secondary  { background: hsl(var(--secondary));      color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover  { background: hsl(var(--secondary) / .8); }
.btn-outline    { background: hsl(var(--background));     color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-outline:hover    { background: hsl(var(--accent));   color: hsl(var(--accent-foreground)); }
.btn-ghost      { background: transparent;                color: hsl(var(--foreground)); }
.btn-ghost:hover      { background: hsl(var(--accent));   color: hsl(var(--accent-foreground)); }
.btn-destructive{ background: hsl(var(--destructive));    color: hsl(var(--destructive-foreground)); }
.btn-destructive:hover{ background: hsl(var(--destructive) / .9); }
.btn-link       { background: transparent; color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 4px; height: auto; padding: 0; }

.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.btn-lg { height: 2.75rem; padding: 0 2rem; font-size: 1rem; }
.btn-icon { height: 2.25rem; width: 2.25rem; padding: 0; }
.btn-icon-sm { height: 2rem; width: 2rem; padding: 0; }
.btn-icon-xs { height: 1.75rem; width: 1.75rem; padding: 0; }

/* --- Card --- */
.card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
}

/* --- Input --- */
.input {
    display: flex; height: 2.25rem; width: 100%;
    border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px);
    background: hsl(var(--background)); color: hsl(var(--foreground));
    padding: 0 .75rem; font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / .35); }
.input::placeholder { color: hsl(var(--muted-foreground)); }

/* --- Badge --- */
.badge {
    display: inline-flex; align-items: center;
    padding: .125rem .625rem;
    border-radius: 9999px;
    font-size: .75rem; font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-default    { background: hsl(var(--primary));     color: hsl(var(--primary-foreground)); }
.badge-secondary  { background: hsl(var(--secondary));   color: hsl(var(--secondary-foreground)); }
.badge-outline    { background: transparent;             color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.badge-destructive{ background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }

/* --- Sidebar nav link --- */
.nav-link {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .75rem; border-radius: calc(var(--radius) - 2px);
    color: hsl(var(--muted-foreground));
    font-size: .875rem; font-weight: 500;
    transition: all .15s;
}
.nav-link:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.nav-link.active { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

/* --- Separator --- */
.separator { background: hsl(var(--border)); }
.separator-h { height: 1px; width: 100%; }
.separator-v { width: 1px; height: 100%; }

/* --- File card (grid view) hover effect --- */
.file-card { transition: all .15s cubic-bezier(.4, 0, .2, 1); }
.file-card:hover { border-color: hsl(var(--ring) / .5); transform: translateY(-1px); box-shadow: 0 4px 12px hsl(var(--foreground) / .04); }
.file-card.selected { border-color: hsl(var(--ring) / .6); box-shadow: 0 0 0 2px hsl(var(--ring) / .2); }

/* --- Scrollbar styling --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); }

/* --- Form elements default styling --- */
input, textarea, button, select { font-family: inherit; }
textarea { tab-size: 4; }

/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.animate-in { animation: fadeIn .2s ease-out; }

/* --- Empty state (inviting drop zone) --- */
.empty-state {
    position: relative;
    padding: 4rem 1.5rem 3rem;
    text-align: center;
    border: 2px dashed hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--muted) / 0.4);
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}
.empty-state:hover {
    border-color: hsl(var(--primary) / .5);
    background: hsl(var(--primary) / .03);
}
/* Subtle radial spotlight in the center */
.empty-state::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at center 35%, hsl(var(--primary) / .06) 0%, transparent 50%);
    pointer-events: none;
}

/* Illustration container */
.empty-illust {
    position: relative;
    width: 220px; height: 170px;
    margin: 0 auto 1.5rem;
}

/* Cloud — gentle bob */
.empty-illust .cloud {
    position: absolute;
    left: 50%; top: 24px;
    transform: translateX(-50%);
    animation: bob 3.4s ease-in-out infinite;
    filter: drop-shadow(0 8px 16px hsl(var(--primary) / .25));
}
@keyframes bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-10px); }
}

/* Upward arrow inside cloud */
.empty-illust .uparrow {
    position: absolute;
    left: 50%; top: 50px;
    transform: translateX(-50%);
    animation: pulseArrow 1.6s ease-in-out infinite;
}
@keyframes pulseArrow {
    0%, 100% { opacity: .35; transform: translateX(-50%) translateY(0); }
    50%      { opacity: 1;   transform: translateX(-50%) translateY(-6px); }
}

/* Floating files (3 of them, staggered) */
.empty-illust .file-fly {
    position: absolute;
    bottom: 0;
    animation: floatUp 4.5s ease-in-out infinite;
    opacity: 0;
}
.empty-illust .file-fly.f1 { left: 22%;  animation-delay: 0s;     color: #3b82f6; }
.empty-illust .file-fly.f2 { left: 47%;  animation-delay: -1.5s;  color: #ec4899; }
.empty-illust .file-fly.f3 { left: 72%;  animation-delay: -3s;    color: #10b981; }
@keyframes floatUp {
    0%        { transform: translateY(20px) scale(.7); opacity: 0; }
    15%, 75%  { opacity: 1; }
    50%       { transform: translateY(-80px) scale(1); opacity: 1; }
    100%      { transform: translateY(-120px) scale(.6); opacity: 0; }
}

/* Tip badges (checkmark + text) */
.empty-tip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .375rem .75rem;
    border-radius: 9999px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    font-size: .75rem;
    color: hsl(var(--muted-foreground));
}
.empty-tip svg { color: hsl(142.1 76.2% 36.3%); }   /* emerald check */

/* When the user is dragging files OVER the page, highlight the empty zone */
body.is-dragging .empty-state {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / .08);
    transform: scale(1.01);
}

/* --- Drop overlay (drag-drop upload) --- */
.drop-overlay {
    position: fixed; inset: 0;
    background: hsl(var(--primary) / .1);
    border: 4px dashed hsl(var(--primary));
    border-radius: 12px;
    display: none; z-index: 50;
    pointer-events: none;
    align-items: center; justify-content: center;
}
.drop-overlay.show { display: flex; }
.drop-overlay-text {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    padding: 16px 32px; border-radius: 8px;
    font-size: 15px; font-weight: 600;
    box-shadow: 0 10px 25px hsl(var(--foreground) / .1);
}

/* --- Context menu --- */
.context-menu {
    position: fixed; z-index: 60;
    min-width: 200px;
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    box-shadow: 0 10px 38px -10px hsl(var(--foreground) / .35), 0 10px 20px -15px hsl(var(--foreground) / .2);
    padding: 4px;
    animation: fadeIn .12s ease-out;
}
.context-menu button {
    display: flex; align-items: center; gap: .625rem;
    width: 100%; text-align: left;
    padding: .375rem .625rem;
    font-size: .875rem;
    color: hsl(var(--popover-foreground));
    background: transparent; border: 0;
    border-radius: calc(var(--radius) - 4px);
    cursor: pointer;
    transition: background-color .1s;
}
.context-menu button:hover { background: hsl(var(--accent)); }
.context-menu button.destructive { color: hsl(var(--destructive)); }
.context-menu button.destructive:hover { background: hsl(var(--destructive) / .1); }
.context-menu hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 4px 0; }

/* --- Thumb (small file thumbnail in list) --- */
.thumb {
    width: 36px; height: 36px;
    object-fit: cover;
    border-radius: 4px;
    background: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
}

/* --- Selected row (list view) --- */
.row-selected { background: hsl(var(--primary) / .08) !important; }
.row-selected:hover { background: hsl(var(--primary) / .12) !important; }

/* --- Backdrop blur header --- */
.header-blur {
    background: hsl(var(--background) / .85);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* --- Kbd hint chip --- */
kbd {
    display: inline-flex; align-items: center;
    height: 1.25rem; padding: 0 .375rem;
    border-radius: calc(var(--radius) - 4px);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .6875rem; font-weight: 500;
}

/* --- Saturated colored buttons get light text by default
   (fallback for non-.btn elements; Tailwind text-X classes still win) --- */
:where(
    .bg-blue-500, .bg-blue-600, .bg-blue-700,
    .bg-red-500,  .bg-red-600,  .bg-red-700,
    .bg-green-500, .bg-green-600, .bg-green-700,
    .bg-purple-500, .bg-purple-600, .bg-purple-700,
    .bg-cyan-500, .bg-cyan-600,
    .bg-orange-500, .bg-orange-600
) {
    color: #fff;
}