/* =========================================================
   CIDD GASTRO — Diamond & Crystalline Glassmorphism Theme
   Inspired by official CIDD banner: Deep Blue Gradient,
   Glass Reflection & Animated Diamond Rays / Light Sweeps.
   ========================================================= */

:root {
    /* Palette Tokens */
    --cg-blue-deep:       #0a192f;
    --cg-blue-dark:       #0d2e5c;
    --cg-blue-mid:        #164e8c;
    --cg-blue-light:      #2573c0;
    --cg-blue-accent:     #38bdf8;
    
    --cg-gold-diamond:    #f59e0b;
    --cg-cyan-glow:       #06b6d4;

    /* Surfaces */
    --cg-bg:              #0a192f;
    --cg-card-glass:      rgba(15, 34, 64, 0.75);
    --cg-border-glass:    rgba(255, 255, 255, 0.22);
    --cg-border-glow:     rgba(56, 189, 248, 0.6);
    --cg-text:            #f8fafc;
    --cg-text-muted:      #cbd5e1;

    /* Radii & Shadows */
    --cg-radius-sm:       0.5rem;
    --cg-radius:          0.85rem;
    --cg-radius-lg:       1.25rem;
    --cg-shadow-glass:    0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --cg-shadow-diamond:  0 0 25px rgba(56, 189, 248, 0.3);
}

/* Global Reset & Crystalline Background */
html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background: radial-gradient(circle at 20% 20%, #164e8c 0%, #0d2e5c 45%, #0a192f 100%);
    background-attachment: fixed;
    color: var(--cg-text);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Background Animated Diamond Glints & Light Rays */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.08) 45%, rgba(56, 189, 248, 0.18) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 60%),
        radial-gradient(ellipse at 80% 10%, rgba(56, 189, 248, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 10% 90%, rgba(245, 158, 11, 0.1) 0%, transparent 60%);
    background-size: 200% 200%, 100% 100%, 100% 100%;
    pointer-events: none;
    z-index: 0;
    animation: diamondSweep 10s ease-in-out infinite alternate;
}

@keyframes diamondSweep {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }
    50% {
        background-position: 100% 100%, 20% 20%, 20% 20%;
    }
    100% {
        background-position: 0% 100%, 0% 0%, 0% 0%;
    }
}

/* Page Layout & Container relative z-index */
.page, main, .container, nav {
    position: relative;
    z-index: 1;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

p, label, span {
    color: #e2e8f0;
}

/* Glassmorphism Cards with Crystalline Borders & Glint Reflections */
.card {
    background: var(--cg-card-glass) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--cg-border-glass) !important;
    border-radius: var(--cg-radius-lg);
    box-shadow: var(--cg-shadow-glass);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Text Readability Overrides */
.card p, .card div, .card span, .card li, .card td, .card label, .card small {
    color: #e2e8f0 !important;
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card .card-title {
    color: #ffffff !important;
}

.text-muted {
    color: #cbd5e1 !important;
}

.text-dark {
    color: #ffffff !important;
}

.card .bg-light {
    background-color: rgba(10, 25, 47, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #f8fafc !important;
}

.card .bg-white {
    background-color: rgba(13, 46, 92, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Diamond Ray Edge Glint for Cards */
.card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(
        45deg,
        transparent 42%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(56, 189, 248, 0.4) 52%,
        transparent 58%
    );
    transform: rotate(30deg);
    pointer-events: none;
    transition: opacity 0.5s ease;
    opacity: 0.3;
    animation: borderGlint 6s infinite linear;
}

@keyframes borderGlint {
    0% { transform: translateY(-100%) rotate(30deg); }
    100% { transform: translateY(100%) rotate(30deg); }
}

.card:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: var(--cg-border-glow) !important;
    box-shadow: var(--cg-shadow-diamond);
}

.card:hover::before {
    opacity: 1;
}

/* Crystalline Buttons with Ray Sweeps */
.btn {
    border-radius: var(--cg-radius);
    font-weight: 700;
    padding: 0.65rem 1.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.btn::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(
        60deg,
        transparent 30%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 70%
    );
    transform: rotate(25deg);
    pointer-events: none;
    animation: btnRaySweep 4s infinite linear;
}

@keyframes btnRaySweep {
    0% { transform: translateX(-150%) rotate(25deg); }
    100% { transform: translateX(150%) rotate(25deg); }
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

.btn-primary {
    background: linear-gradient(135deg, #164e8c 0%, #2573c0 100%) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2573c0 0%, #38bdf8 100%) !important;
}

.btn-success {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #fff !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
}

.btn-warning, .btn-accent {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    color: #fff !important;
}

/* Badge Contrast Overrides */
.badge-info, .badge.bg-info {
    background-color: #38bdf8 !important;
    color: #090d16 !important;
    font-weight: 700;
}

.badge-warning, .badge.bg-warning {
    background-color: #f59e0b !important;
    color: #090d16 !important;
    font-weight: 700;
}

.badge-success, .badge.bg-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
    font-weight: 700;
}

.badge-primary, .badge.bg-primary {
    background-color: #2573c0 !important;
    color: #ffffff !important;
    font-weight: 700;
}

/* Glass Form Controls */
.form-control, .form-select {
    background: rgba(10, 25, 47, 0.7) !important;
    border: 1px solid var(--cg-border-glass) !important;
    color: #ffffff !important;
    backdrop-filter: blur(10px);
    border-radius: var(--cg-radius);
}

.form-control::placeholder {
    color: #94a3b8 !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cg-blue-accent) !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

/* Sidebar Glass Navigation */
.sidebar, .navbar {
    background: rgba(13, 46, 92, 0.85) !important;
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--cg-border-glass) !important;
}

.nav-link {
    color: #cbd5e1 !important;
    transition: all 0.3s ease;
    border-radius: var(--cg-radius-sm);
    margin: 2px 8px;
}

.nav-link:hover, .nav-link.active {
    background: rgba(56, 189, 248, 0.15) !important;
    color: var(--cg-blue-accent) !important;
    box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.2);
}

/* Table Glass Styling */
.table {
    color: #f8fafc !important;
}

.table thead th {
    background: rgba(22, 78, 140, 0.8) !important;
    color: #ffffff !important;
    border-bottom: 2px solid var(--cg-border-glow) !important;
}

.table tbody tr {
    background: rgba(15, 34, 64, 0.4) !important;
    border-bottom: 1px solid var(--cg-border-glass) !important;
}

.table tbody tr:hover {
    background: rgba(56, 189, 248, 0.15) !important;
}

/* Hero Section Glass Banner */
.hero-section {
    background: linear-gradient(135deg, rgba(13, 46, 92, 0.9) 0%, rgba(22, 78, 140, 0.8) 50%, rgba(37, 115, 192, 0.9) 100%) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 30px rgba(56, 189, 248, 0.2);
}

/* Content Page Fade Animation */
.content {
    animation: fadeSlideIn 0.5s ease-out;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}