@tailwind base;
@tailwind components;
@tailwind utilities;

@layer theme {
    :root {
        /* Professional Corporate BUKUKU Palette (Sourced from logo) */
        --brand-primary: #334192; /* Deep Blue */
        --brand-primary-hover: #2b367a; 
        --brand-accent: #3ab5e9; /* Cyan Accent */
        --brand-accent-hover: #3098c4;
        
        --text-main: #0f172a; /* Slate-900 */
        --text-muted: #475569; /* Slate-600 */
        --text-light: #94a3b8; /* Slate-400 */
        
        --border-color: #e2e8f0; /* Slate-200 */
        --border-hover: #cbd5e1; /* Slate-300 */
        
        --surface-main: #ffffff;
        --surface-subtle: #f8fafc; /* Slate-50 */
        --surface-hover: #f1f5f9; /* Slate-100 */
    }
}

@layer base {
    body {
        @apply bg-slate-50 text-slate-900 antialiased selection:bg-blue-100 selection:text-blue-900;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-bold tracking-tight text-slate-900;
    }

    /* Minimalist unified scrollbar */
    ::-webkit-scrollbar {
        @apply w-2 h-2;
    }
    ::-webkit-scrollbar-track {
        @apply bg-transparent;
    }
    ::-webkit-scrollbar-thumb {
        @apply bg-slate-200 hover:bg-slate-300;
    }
}

@layer components {
    /* Application Shell & Layout */
    .app-shell {
        @apply min-h-screen bg-slate-50;
    }

    .app-topbar {
        @apply bg-white border-b border-slate-200 w-full px-6 py-4 flex items-center justify-between z-40;
    }

    /* Minimalist Panels */
    .panel-card {
        @apply bg-white border border-slate-200 shadow-sm overflow-hidden;
    }
    
    .panel-card--hero {
        @apply bg-white border border-slate-200 shadow-sm overflow-hidden;
    }

    .panel-card--soft {
        @apply bg-slate-50 border border-slate-200;
    }

    .panel-card--accent {
        @apply bg-[#334192] border border-[#2b367a] text-white;
    }
    
    .panel-card--accent h1, .panel-card--accent h2, .panel-card--accent h3 {
        @apply text-white;
    }

    /* Typography Utilities */

    .section-label {
        @apply text-[0.7rem] font-bold tracking-widest text-slate-500 uppercase;
    }

    /* Professional Buttons */
    .btn-base {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed rounded-md;
    }

    .action-primary {
        @apply btn-base bg-[#334192] text-white border border-transparent hover:bg-[#2b367a] focus:ring-[#3ab5e9] shadow-sm;
    }
    
    .action-copper {
        @apply action-primary;
    }

    .action-secondary {
        @apply btn-base bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 hover:text-slate-900 focus:ring-slate-200 shadow-sm;
    }

    .action-google {
        @apply btn-base w-full border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:ring-slate-200 shadow-sm;
        min-height: 46px;
    }

    .action-danger {
        @apply btn-base bg-white text-red-600 border border-red-200 hover:bg-red-50 hover:border-red-300 focus:ring-red-500 shadow-sm;
    }

    .action-ghost {
        @apply btn-base bg-transparent text-slate-600 border border-transparent hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-200;
    }
    
    .action-icon {
        @apply btn-base bg-transparent p-2 text-slate-500 hover:text-slate-900 hover:bg-slate-100 focus:ring-slate-200 rounded-md;
    }

    /* Form Controls */
    .field-control {
        @apply block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors disabled:bg-slate-50 disabled:text-slate-500 outline-none;
    }

    .field-label {
        @apply block text-sm font-medium text-slate-700 mb-1.5;
    }

    .field-hint {
        @apply mt-1 text-xs text-slate-500;
    }

    /* Standardized Book Tile */
    .book-tile {
        @apply flex flex-col bg-white border border-slate-200 overflow-hidden transition-all hover:border-slate-300 shadow-sm;
    }
    
    .book-tile-img {
        @apply w-full h-full object-cover transition-transform duration-300;
    }
    
    .book-tile:hover .book-tile-img {
        @apply scale-105;
    }
    
    .book-tile-fallback {
        @apply w-full h-full flex items-center justify-center bg-slate-100 text-slate-300 text-6xl font-black tracking-tighter;
    }

    /* Surface Chips (Badges/Tags) */
    .surface-chip {
        @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded text-xs font-semibold tracking-wide border;
    }

    .surface-chip--neutral {
        @apply bg-slate-50 text-slate-600 border-slate-200;
    }

    .surface-chip--accent {
        @apply bg-blue-50 text-blue-700 border-blue-200;
    }
    
    .surface-chip--warm {
        @apply bg-slate-50 text-slate-700 border-slate-200;
    }
    
    .surface-chip--cool {
        @apply bg-slate-50 text-slate-700 border-slate-200;
    }

    /* Mobile Bottom Nav */
    .mobile-nav-shell {
        @apply fixed bottom-0 left-0 w-full bg-white border-t border-slate-200 z-50 sm:hidden;
    }

    /* --- Reader Specific UI --- */
    .reader-button {
        @apply inline-flex items-center justify-center rounded-md border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-all hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50;
    }

    .reader-button--accent {
        @apply border-[#334192] bg-[#334192] text-white hover:bg-[#2b367a] shadow-sm;
    }

    .book-stage {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

    .reader-shell {
        @apply h-full overflow-hidden selection:bg-blue-100 selection:text-blue-900 transition-colors duration-500;
    }

    .reader-frame {
        @apply relative flex flex-col h-full min-h-0 overflow-hidden transition-colors duration-500;
    }

    /* Mobile: zero padding so book fills full screen edge-to-edge */
    .reader-stage {
        @apply relative flex-1 min-h-0 flex items-center justify-center overflow-auto p-0 sm:p-6;
        padding-top: 48px;   /* space for topbar */
        padding-bottom: 56px; /* space for controls */
        /* Prevent flex from clipping overflow on the left when content is zoomed wider than stage */
        min-width: 0;
    }
    /* When the zoomed content is wider than the viewport, allow horizontal scroll from start */
    .reader-stage > * {
        flex-shrink: 0;
    }

    .reader-stage--flip {
        overscroll-behavior: contain;
    }

    .reader-stage--flip .flip-book-mount,
    .reader-stage--flip .stf__parent,
    .reader-stage--flip .stf__block {
        touch-action: pan-y pinch-zoom;
    }

    .reader-stage--slide {
        touch-action: pan-y pinch-zoom;
    }

    /* Topbar: translucent blur on mobile for immersion, solid on desktop */
    .reader-topbar {
        @apply absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-2 px-3 py-2 sm:px-4 sm:py-3;
        @apply border-b border-white/20 shadow-sm;
        min-height: 52px;
        background: rgba(255,255,255,0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .reader-overlay-btn {
        @apply inline-flex items-center justify-center rounded-md border border-slate-200 bg-white/80 px-2.5 py-1 text-xs sm:text-sm font-medium text-slate-700 transition-all hover:bg-slate-50 shadow-sm;
    }

    .reader-page-pill {
        @apply inline-flex items-center rounded-md px-2 py-1 text-xs sm:text-sm font-medium text-slate-700 border border-slate-200 bg-white/80 shadow-sm;
    }

    .reader-page-pill__label {
        @apply text-blue-600 font-semibold;
    }

    .reader-page-pill__divider {
        @apply px-1.5 text-slate-400;
    }

    .reader-controls {
        @apply absolute inset-x-0 bottom-0 z-30 grid grid-cols-[auto_1fr_auto] items-center gap-3 border-t px-3 py-2 sm:px-4 sm:p-3;
        @apply border-white/20 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)];
        min-height: 52px;
        background: rgba(255,255,255,0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .reader-controls__meta {
        @apply flex min-w-0 flex-col items-center justify-center px-2 text-center;
    }

    .reader-controls__title {
        @apply text-sm font-semibold text-slate-900 truncate;
    }

    .reader-controls__hint {
        @apply text-xs text-slate-500 truncate;
    }

    .reader-button--icon {
        @apply inline-flex h-9 w-9 items-center justify-center p-0;
    }

    .reader-loading {
        @apply absolute inset-0 flex items-center justify-center bg-white z-20;
    }

    .reader-error {
        @apply absolute inset-6 flex items-center justify-center border-2 border-dashed border-slate-300 bg-slate-50 text-slate-600 rounded-lg z-20;
    }

    .reader-drawer-backdrop {
        @apply fixed inset-0 z-40 bg-slate-900/50 transition-opacity;
    }

    .reader-drawer {
        @apply absolute inset-y-0 right-0 z-50 w-full max-w-sm bg-white shadow-xl transition-transform overflow-y-auto sm:inset-y-4 sm:right-4 sm:h-[calc(100svh-2rem)] sm:rounded-2xl sm:border border-slate-200;
    }

    .bg-option-btn {
        @apply w-8 h-8 rounded-full border border-slate-300 ring-2 ring-transparent transition-all hover:scale-110 focus:outline-none focus:ring-slate-400;
    }
    .bg-option-btn.active {
        @apply ring-blue-500 ring-offset-2 border-transparent scale-110;
    }

    .flip-book-mount {
        /* The actual book shadow — only shows on the rendered book element itself */
        filter: drop-shadow(0 25px 50px rgba(0,0,0,0.5)) drop-shadow(0 8px 16px rgba(0,0,0,0.30));
        will-change: transform;
    }

    @media (min-width: 1024px) {
        .reader-frame {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
        }

        .reader-topbar {
            @apply relative inset-auto border-b border-slate-200 px-5 py-2.5;
            min-height: 56px;
            background: rgba(255,255,255,0.98);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .reader-stage {
            @apply items-start px-3 py-1;
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
        }

        .reader-controls {
            @apply relative inset-auto border-t border-slate-200 px-5 py-2.5;
            min-height: 56px;
            background: rgba(255,255,255,0.98);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .reader-controls__meta {
            @apply px-3;
        }

        .reader-controls__hint {
            @apply hidden;
        }

        .reader-loading {
            @apply inset-0;
        }

        .reader-error {
            @apply inset-0 rounded-2xl;
        }
    }

    /* Wood grain desk background */
    .bg-wood-desk {
        background-color: #7a5230;
        background-image:
            repeating-linear-gradient(
                92deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.04) 2px,
                rgba(0,0,0,0.04) 3px
            ),
            repeating-linear-gradient(
                180deg,
                transparent,
                transparent 18px,
                rgba(255,255,255,0.03) 18px,
                rgba(255,255,255,0.03) 19px
            ),
            linear-gradient(
                135deg,
                #8b5e34 0%,
                #7a4d26 25%,
                #8d6033 50%,
                #6b4220 75%,
                #7d5230 100%
            );
    }
}