/* ============================================================
   NovaSello — Premium Light Design System
   Clean modern light UI with violet/indigo accent palette
   ============================================================ */

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

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Brand */
    --accent:         #7c3aed;
    --accent-dark:    #6d28d9;
    --accent-light:   #ede9fe;
    --accent-mid:     #ddd6fe;
    --accent-text:    #5b21b6;
    --cyan:           #0891b2;
    --cyan-light:     #e0f2fe;

    /* Backgrounds (Light) */
    --bg-app:         #f4f4f8;
    --bg-surface:     #ffffff;
    --bg-elevated:    #f9f9fb;
    --bg-hover:       #f3f0ff;

    /* Borders */
    --border:         #e4e4eb;
    --border-accent:  #c4b5fd;
    --border-focus:   #7c3aed;

    /* Text */
    --text-primary:   #1a1523;
    --text-secondary: #4b5563;
    --text-muted:     #9ca3af;

    /* Misc */
    --radius-xs:  6px;
    --radius-sm:  10px;
    --radius-md:  14px;
    --radius-lg:  20px;

    --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:  0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.1);
    --shadow-accent: 0 4px 14px rgba(124,58,237,0.25);

    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* Safe areas */
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    overflow: hidden;
    height: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-app);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Safe area padding for the entire body */
    padding-top:    var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left:   var(--safe-left);
    padding-right:  var(--safe-right);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs) !important;
    /* Navbar does NOT add extra safe-top padding — body already covers it */
    padding-top:   8px  !important;
    padding-bottom: 8px !important;
    padding-left:  calc(16px + var(--safe-left))  !important;
    padding-right: calc(16px + var(--safe-right)) !important;
}

.navbar-brand {
    font-family: var(--font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.3px;
}

/* Hamburger Menu Toggle */
.btn-menu-toggle {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    padding: 0 !important;
}

.btn-menu-toggle:hover {
    background-color: var(--bg-hover) !important;
    color: var(--accent) !important;
}

/* Offcanvas Sidebar Styles */
.offcanvas .list-group-item-action {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-left: 3px solid transparent !important;
    transition: all 0.15s ease !important;
    padding-left: 20px !important;
}

.offcanvas .list-group-item-action:hover {
    background: var(--bg-hover) !important;
    color: var(--accent) !important;
    border-left-color: var(--accent) !important;
}

.offcanvas .list-group-item-action i {
    color: var(--text-secondary);
    transition: color 0.15s ease !important;
}

.offcanvas .list-group-item-action:hover i {
    color: var(--accent) !important;
}

.brand-icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    box-shadow: var(--shadow-accent);
}

/* ── Download Button ─────────────────────────────────────── */
#download-all-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-shadow: var(--shadow-accent) !important;
    transition: all 0.2s ease !important;
}

#download-all-btn:hover:not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124,58,237,0.35) !important;
}

#download-all-btn.disabled {
    opacity: 0.4 !important;
    pointer-events: none;
}

/* ── Workspace Layout ────────────────────────────────────── */
.app-workspace-container {
    /* Subtract navbar height (56px). Body already consumed safe-top/bottom */
    height: calc(100vh - 56px - var(--safe-top) - var(--safe-bottom));
    height: calc(100dvh - 56px - var(--safe-top) - var(--safe-bottom));
    display: flex;
    overflow: hidden;
}

/* ── Preview Area ────────────────────────────────────────── */
.preview-area-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
    padding: 20px;
    /* Subtle dot-grid background in light mode */
    background-color: var(--bg-app);
    background-image: radial-gradient(circle, #d1d5db 1px, transparent 0);
    background-size: 22px 22px;
}

/* Safe area for preview on mobile (landscape safe-left/right) */
.preview-area-wrapper {
    padding-left:  calc(20px + var(--safe-left));
    padding-right: calc(20px + var(--safe-right));
}

#preview-canvas-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#preview-canvas {
    max-height: 85%;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md);
    background: #fff !important;
}

/* Empty State */
#canvas-empty-state { text-align: center; }

.empty-icon-wrapper {
    width: 72px;
    height: 72px;
    background: var(--accent-light);
    border: 1.5px solid var(--border-accent);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
    color: var(--accent);
}

#canvas-empty-state h5 {
    color: var(--text-primary) !important;
    font-size: 1rem;
    margin-bottom: 6px;
}

#canvas-empty-state p {
    color: var(--text-muted) !important;
    font-size: 13px;
}

/* Preview toggle bar */
#preview-controls-overlay .btn-group {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: 4px !important;
    box-shadow: var(--shadow-sm) !important;
}

#btn-toggle-watermark, #btn-toggle-original, #btn-crop-start {
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 6px 14px !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    transition: all 0.18s ease !important;
}

#btn-toggle-watermark.active {
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: var(--shadow-accent) !important;
}

#btn-toggle-original.active {
    background: var(--cyan) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(8,145,178,0.3) !important;
}

#btn-crop-start { color: #dc2626 !important; }
#btn-crop-start:not(:disabled):hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

/* ── Controls Sidebar ────────────────────────────────────── */
.controls-sidebar {
    width: 360px;
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    /* Safe area for sidebar bottom (gesture bar) and sides (landscape) */
    padding-bottom: var(--safe-bottom);
    padding-left:   var(--safe-left);
    padding-right:  var(--safe-right);
}

/* ── Bottom Nav Tabs ─────────────────────────────────────── */
.bottom-nav-tabs {
    display: flex;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    padding: 6px;
    gap: 4px;
}

.bottom-nav-tab {
    flex: 1;
    text-align: center;
    padding: 9px 4px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.18s ease;
    letter-spacing: 0.2px;
}

.bottom-nav-tab i {
    display: block;
    font-size: 16px;
    margin-bottom: 3px;
}

.bottom-nav-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.bottom-nav-tab.active {
    color: var(--accent);
    background: var(--accent-light);
}

/* ── Controls Content Area ───────────────────────────────── */
.controls-content-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.controls-content-body::-webkit-scrollbar { width: 4px; }
.controls-content-body::-webkit-scrollbar-track { background: transparent; }
.controls-content-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Form Labels ─────────────────────────────────────────── */
.form-label {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

/* ── Inputs ──────────────────────────────────────────────── */
.form-control, .form-select {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
    outline: none !important;
}

.form-control::placeholder { color: var(--text-muted) !important; }

/* Color Picker Input */
.form-control-color {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #9ca3af !important; /* Solid visible gray border */
    background-color: var(--bg-surface) !important;
    border-radius: 0px !important; /* Force square */
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.form-control-color::-webkit-color-swatch-wrapper {
    padding: 0 !important;
}
.form-control-color::-webkit-color-swatch {
    border: none !important;
    border-radius: 0px !important;
    height: 100% !important;
    width: 100% !important;
    display: block !important;
}
.form-control-color::-moz-color-swatch {
    border: none !important;
    border-radius: 0px !important;
    height: 100% !important;
    width: 100% !important;
    display: block !important;
}

/* ── Range Sliders ───────────────────────────────────────── */
.form-range { accent-color: var(--accent); }

.form-range::-webkit-slider-runnable-track {
    background: var(--accent-mid);
    height: 5px;
    border-radius: 3px;
}

.form-range::-webkit-slider-thumb {
    background: var(--accent);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    margin-top: -6px;
    border: 2px solid #fff;
    box-shadow: var(--shadow-accent);
    transition: transform 0.15s;
}

.form-range:active::-webkit-slider-thumb { transform: scale(1.2); }

/* Slider value badge */
.slider-val {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-text);
    background: var(--accent-light);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-xs);
    padding: 1px 8px;
}

/* Slider Reset Button */
.btn-slider-reset {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    cursor: pointer;
    font-size: 11px;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.btn-slider-reset:hover:not(:disabled) {
    color: var(--accent) !important;
}

.btn-slider-reset:disabled {
    opacity: 0.25 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* ── Toggle Switch ───────────────────────────────────────── */
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.form-check-label {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ── Dropzone ─────────────────────────────────────────────── */
.dropzone-box {
    border: 1.5px dashed var(--border-accent);
    border-radius: var(--radius-md);
    background: var(--accent-light);
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropzone-box:hover {
    border-color: var(--accent);
    background: var(--accent-mid);
    box-shadow: var(--shadow-accent);
}

.dropzone-box .dz-icon {
    font-size: 22px;
    color: var(--accent);
    margin-bottom: 6px;
    display: block;
}

.dropzone-box .dz-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.dropzone-box .dz-label span {
    color: var(--accent);
    font-weight: 700;
}

/* ── Logo Preview Row ────────────────────────────────────── */
.logo-preview-row {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Watermark Type Tabs ─────────────────────────────────── */
.wm-type-tabs {
    display: flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 3px;
    margin-bottom: 14px;
}

.wm-type-tab {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    border: none;
    background: transparent;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.18s ease;
}

.wm-type-tab.active {
    color: var(--accent);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

/* ── Position 9-dot Grid ─────────────────────────────────── */
.position-dots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 14px;
    border-radius: var(--radius-md);
    width: 120px;
    height: 120px;
    margin: auto;
}

.position-dot-btn {
    background: var(--border);
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: auto;
    cursor: pointer;
    transition: all 0.18s ease;
}

.position-dot-btn:hover {
    background: var(--accent-mid);
    transform: scale(1.15);
}

.position-dot-btn.active {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.2);
    transform: scale(1.1);
}

.position-grid-wrapper.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Gallery Thumbnails ──────────────────────────────────── */
.gallery-thumb {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.gallery-thumb:hover { border-color: var(--border-accent); }
.gallery-thumb.active-thumb {
    border-color: var(--accent);
    box-shadow: var(--shadow-accent);
}

.thumb-wrapper {
    position: relative;
    flex-shrink: 0;
}

.thumb-remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.thumb-wrapper:hover .thumb-remove-btn { opacity: 1; }

/* Carousel nav */
#carousel-prev, #carousel-next {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    border-radius: 50% !important;
    transition: all 0.15s !important;
}

#carousel-prev:hover, #carousel-next:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-light) !important;
}

/* ── Divider ─────────────────────────────────────────────── */
.ns-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}

/* ── Toast ───────────────────────────────────────────────── */
#toast-notification {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary) !important;
    /* Respect bottom safe area so toast clears gesture bar */
    bottom: calc(12px + var(--safe-bottom)) !important;
}

#toast-notification .toast-body {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Spinner in light toast */
.toast-spinner {
    color: var(--accent) !important;
}

/* ── Crop Mode (Full Screen) ─────────────────────────────── */
body.crop-mode-active .navbar,
body.crop-mode-active .controls-sidebar {
    display: none !important;
}

body.crop-mode-active .app-workspace-container {
    height: 100vh !important;
    height: 100dvh !important;
}

body.crop-mode-active .preview-area-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    /* Cinematic dark backdrop only for the crop focus view */
    background-color: #0f0f0f !important;
    background-image: none !important;
    z-index: 99999;
    /* Honour safe areas even in fullscreen crop */
    padding-top:    var(--safe-top)    !important;
    padding-left:   var(--safe-left)   !important;
    padding-right:  var(--safe-right)  !important;
    padding-bottom: 0                  !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
}

body.crop-mode-active #preview-canvas-container {
    flex-grow: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

body.crop-mode-active #preview-canvas {
    max-height: 75vh !important;
    max-width: 90vw !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

body.crop-mode-active #crop-actions-bar {
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    width: 100% !important;
    /* No fixed height — let content determine height freely */
    height: auto !important;
    min-height: 0 !important;
    /* Generous bottom padding: base 16px + safe-area-inset-bottom so
       buttons always sit above the Android gesture bar / iOS home indicator */
    padding-top:    16px !important;
    padding-bottom: max(20px, calc(16px + var(--safe-bottom))) !important;
    padding-left:   calc(16px + var(--safe-left))   !important;
    padding-right:  calc(16px + var(--safe-right))  !important;
    flex-shrink: 0 !important;
    background: rgba(255,255,255,0.98) !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 200000 !important;
    backdrop-filter: blur(10px);
}

body.crop-mode-active #crop-actions-bar .small {
    color: var(--text-secondary);
    font-size: 12px;
}

/* ── Bootstrap Light Overrides ───────────────────────────── */
.btn-outline-primary {
    color: var(--accent) !important;
    border-color: var(--border-accent) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active {
    background-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: var(--shadow-accent) !important;
}

.btn-outline-secondary {
    color: var(--text-secondary) !important;
    border-color: var(--border) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

.btn-outline-danger {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

.btn-outline-danger:hover:not(:disabled) {
    background-color: #fef2f2 !important;
}

.btn-danger  { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-success { background: #059669 !important; border-color: #059669 !important; }
.btn-warning { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }

/* ── Responsive (Mobile) ─────────────────────────────────── */
@media (max-width: 991px) {
    .app-workspace-container {
        flex-direction: column;
    }

    .preview-area-wrapper {
        flex-grow: 1;
        min-height: 0;
        padding-top:    10px;
        padding-bottom: 10px;
        /* Safe areas on the sides in landscape, zero in portrait */
        padding-left:  calc(10px + var(--safe-left));
        padding-right: calc(10px + var(--safe-right));
    }

    .controls-sidebar {
        width: 100%;
        /* Taller panel so ALL sliders in Ajustes are reachable by scrolling */
        height: 380px;
        flex-shrink: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
        /* Safe area: bottom for gesture bar, sides for landscape notch */
        padding-bottom: var(--safe-bottom);
        padding-left:   var(--safe-left);
        padding-right:  var(--safe-right);
    }

    .controls-content-body {
        padding: 10px 14px;
    }

    /* Compact sliders in Settings on mobile to reduce scroll distance */
    #sec-settings .mb-3 { margin-bottom: 10px !important; }
    #sec-settings .mb-2 { margin-bottom: 8px !important; }
    .position-dots-grid {
        width: 100px;
        height: 100px;
        padding: 10px;
        gap: 8px;
    }
    .position-dot-btn {
        width: 18px;
        height: 18px;
    }
}