// Ray Support - Global Styles (modernized — consciencia design language)

@import "variables/colors.less";
@import "variables/typography.less";
@import "variables/spacing.less";

// Fonts: Inter (body) + Montserrat (headings). Global so every page gets them.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap');

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: @font-family-base;
    line-height: 1.6;
    color: @color-slate-700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Headings use Montserrat globally (works on real h1–h6 across all pages).
h1, h2, h3, h4, h5, h6, .font-display {
    font-family: @font-family-heading;
    letter-spacing: -0.018em;
}

[v-cloak] { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: @color-slate-100; }
::-webkit-scrollbar-thumb {
    background: @color-slate-300;
    border-radius: 4px;
    &:hover { background: @color-slate-400; }
}

::selection { background: fade(@color-indigo, 22%); color: @color-indigo-dark; }
:focus-visible { outline: 2px solid @color-primary-500; outline-offset: 2px; }

a { text-decoration: none; transition: color 0.2s ease; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

// ── Console shell ────────────────────────────────────────────────────────────
.console-layout { display: flex; min-height: 100vh; }

.console-sidebar {
    width: 264px;
    min-height: 100vh;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 40;
    transition: transform 0.3s ease;
    // Deep slate with a subtle Aurora violet undertone (top + bottom).
    background: linear-gradient(180deg, #0c0a1d 0%, @color-slate-900 52%, #1a1440 100%) !important;
    border-right: 1px solid fade(@color-violet, 14%);
    box-shadow: 4px 0 24px -12px rgba(2, 6, 23, 0.6);
}

.console-main {
    margin-left: 264px;
    flex: 1;
    min-height: 100vh;
    // Soft, airy background tint (very light brand smudges).
    background:
        radial-gradient(1200px 520px at 100% -10%, fade(@color-indigo, 7%), transparent 60%),
        radial-gradient(900px 480px at -10% 110%, fade(@color-fuchsia, 6%), transparent 55%),
        @color-slate-50;
}

// ── Tables ─────────────────────────────────────────────────────────────────
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;

    th {
        font-family: @font-family-base;
        font-weight: @font-weight-semibold;
        font-size: @font-size-xs;
        text-transform: uppercase;
        letter-spacing: @letter-spacing-wider;
        color: @color-slate-500;
        padding: @spacing-sm @spacing-md;
        text-align: left;
        border-bottom: 1px solid @color-slate-200;
    }
    td {
        padding: @spacing-sm @spacing-md;
        border-bottom: 1px solid @color-slate-100;
        font-size: @font-size-sm;
        color: @color-slate-700;
    }
    tbody tr {
        transition: background-color 0.15s ease;
        &:hover { background-color: fade(@color-primary-500, 5%); }
    }
}

// ── Badges (with leading dot) ────────────────────────────────────────────────
.status-badge, .priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: @radius-full;
    font-size: @font-size-xs;
    font-weight: @font-weight-semibold;
    line-height: 1.4;
    &::before {
        content: '';
        width: 6px; height: 6px;
        border-radius: @radius-full;
        background: currentColor;
        opacity: 0.85;
    }
}
.status-badge {
    &.open    { background: @color-info-light;    color: @color-primary-700; }
    &.pending { background: @color-warning-light; color: darken(@color-warning, 18%); }
    &.solved  { background: @color-success-light; color: darken(@color-success, 18%); }
    &.closed  { background: @color-slate-100;     color: @color-slate-500; }
    &.active  { background: @color-success-light; color: darken(@color-success, 18%); }
    &.inactive{ background: @color-slate-100;     color: @color-slate-500; }
}
.priority-badge {
    &.urgent { background: #fee2e2; color: #b91c1c; }
    &.high   { background: #ffedd5; color: #c2410c; }
    &.normal { background: @color-info-light; color: @color-primary-700; }
    &.low    { background: @color-slate-100;  color: @color-slate-500; }
}

// ── Cards ──────────────────────────────────────────────────────────────────
.admin-stat-card, .ray-card {
    background: #fff;
    border-radius: @radius-2xl;
    padding: @spacing-lg;
    border: 1px solid fade(@color-slate-300, 55%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px -18px rgba(30, 41, 59, 0.28);
        border-color: fade(@color-indigo, 35%);
    }
}

// ── Forms ────────────────────────────────────────────────────────────────────
.form-group {
    margin-bottom: @spacing-lg;
    label {
        display: block;
        font-weight: @font-weight-medium;
        font-size: @font-size-sm;
        color: @color-slate-700;
        margin-bottom: @spacing-1;
    }
    input, textarea, select {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid @color-slate-300;
        border-radius: @radius-xl;
        font-size: @font-size-sm;
        background: #fff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        &:focus {
            border-color: @color-primary-500;
            box-shadow: 0 0 0 4px fade(@color-primary-500, 14%);
            outline: none;
        }
    }
    textarea { resize: vertical; min-height: 100px; }
}

// ── Toggle switch (.toggle-switch > input + .toggle-slider) ──────────────────
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    input { opacity: 0; width: 0; height: 0; position: absolute; }
    .toggle-slider {
        position: absolute;
        inset: 0;
        cursor: pointer;
        background: @color-slate-300;
        border-radius: @radius-full;
        transition: background 0.2s ease;
        &::before {
            content: '';
            position: absolute;
            height: 18px; width: 18px;
            left: 3px; top: 3px;
            background: #fff;
            border-radius: @radius-full;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
            transition: transform 0.2s ease;
        }
    }
    input:checked + .toggle-slider { background: @color-violet; }       // Aurora
    input:checked + .toggle-slider::before { transform: translateX(20px); }
    input:focus-visible + .toggle-slider { box-shadow: 0 0 0 3px fade(@color-violet, 30%); }
}

// ── Reusable modern utilities (usable in any page markup) ─────────────────────
.gradient-text {
    background: linear-gradient(110deg, @color-primary-500, @color-indigo 45%, @color-fuchsia);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.brand-mark { // gradient logo square
    background: @gradient-brand;
    color: #fff;
    box-shadow: 0 10px 24px -8px fade(@color-indigo, 60%);
}

.ray-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 26px;
    border-radius: @radius-full;
    font-family: @font-family-heading;
    font-weight: @font-weight-semibold;
    font-size: @font-size-base;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ray-btn-primary {
    .ray-btn();
    background: @gradient-brand;
    color: #fff;
    box-shadow: 0 12px 28px -12px fade(@color-indigo, 75%);
    &:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px fade(@color-indigo, 85%); }
}
.ray-btn-ghost {
    .ray-btn();
    border: 1.5px solid @color-slate-200;
    color: @color-slate-700;
    background: fade(#fff, 70%);
    &:hover { border-color: @color-indigo; color: @color-indigo; transform: translateY(-2px); }
}

.glass {
    background: fade(#ffffff, 70%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid fade(#ffffff, 60%);
}

// Big, soft, blurred background orb for hero sections. Color via inline style/bg utility.
.ray-blob {
    position: absolute;
    border-radius: @radius-full;
    filter: blur(120px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

// ── Animations ───────────────────────────────────────────────────────────────
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes raySlideUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rayFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rayFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes rayGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes rayPulseSlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.7; } }

.animate-slide-up { animation: raySlideUp 0.6s ease-out both; }
.animate-fade-in  { animation: rayFadeIn 0.7s ease-out both; }
.animate-float    { animation: rayFloat 6s ease-in-out infinite; }
.animate-gradient { background-size: 200% auto; animation: rayGradient 8s ease infinite; }
.animate-pulse-slow { animation: rayPulseSlow 5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.36s; }

// ── Responsive ────────────────────────────────────────────────────────────────
@media (max-width: 768px) {
    .console-sidebar { transform: translateX(-100%); &.open { transform: translateX(0); } }
    .console-main { margin-left: 0; }
}