/* ==========================================================================
   DRS ITAM - Statik Özel CSS Dosyası (Zero-Build Custom Styles)
   --------------------------------------------------------------------------
   Bu dosya sunucuda veya cPanel ortamında 'npm run build' veya Node.js 
   çalıştırma imkanı olmadığında statik CSS yazmanız için eklenmiştir.
   
   Bu dosyaya yazacağınız tüm CSS kuralları derleme gerektirmeden anında aktif olur.
   ========================================================================== */

/* ==========================================
   CUSTOM COMPONENTS
========================================== */

/* =====================================
   FUTURISTIC GLASSMORPHISM
   MARY UI DARK + LIGHT
===================================== */

/* DEFAULT DARK */
:root {
    --glass-bg: rgba(255, 255, 255, .08);
    --glass-border: rgba(255, 255, 255, .18);
    --glass-hover: rgba(255, 255, 255, .12);
    --shadow: rgba(0, 0, 0, .45);
    --shine: rgba(255, 255, 255, .45);
    --blue-glow: rgba(0, 190, 255, .35);
    --purple-glow: rgba(120, 80, 255, .30);
}

/* LIGHT MODE */
[data-theme="light"] {
    --glass-bg: rgba(255, 255, 255, .65);
    --glass-border: rgba(255, 255, 255, .85);
    --glass-hover: rgba(255, 255, 255, .85);
    --shadow: rgba(0, 0, 0, .15);
    --shine: rgba(255, 255, 255, .9);
    --blue-glow: rgba(0, 160, 255, .20);
    --purple-glow: rgba(120, 80, 255, .12);
}

/* =========================
      BACKGROUND GLOW
========================= */

body {
    background: #050816;
}

[data-theme="light"] body {
    background: #eef3f9;
}

body::before {
    content: "";
    position: fixed;
    width: 700px;
    height: 700px;
    top: -150px;
    left: -150px;

    background:
        radial-gradient(circle,
            var(--blue-glow),
            transparent 70%);

    filter: blur(80px);
    pointer-events: none;

    animation: move1 15s infinite alternate;
}

body::after {
    pointer-events: none !important;

    content: "";
    position: fixed;
    width: 650px;
    height: 650px;

    right: -200px;
    bottom: -200px;

    background:
        radial-gradient(circle,
            var(--purple-glow),
            transparent 70%);

    filter: blur(90px);
    pointer-events: none;

    z-index: -1;

    animation: move2 18s infinite alternate;
}

@keyframes move1 {
    to {
        transform: translate(200px, 150px);
    }
}

@keyframes move2 {
    to {
        transform: translate(-180px, -120px);
    }
}

/* =========================
        CARD
========================= */

.card {
    position: relative;
    overflow: hidden;

    background: var(--glass-bg) !important;

    backdrop-filter:
        blur(25px) saturate(180%);

    -webkit-backdrop-filter:
        blur(25px) saturate(180%);

    border:
        1px solid var(--glass-border);

    border-radius: 24px;

    box-shadow:
        inset 0 1px 1px var(--shine),
        0 20px 50px var(--shadow);

    transition: .45s;
}

/* SHINE */

.card::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(130deg,
            transparent 20%,
            rgba(255, 255, 255, .45) 50%,
            transparent 80%);

    transform: translateX(-130%);

    transition: 1s;

    pointer-events: none;
}

.card:hover::before {
    transform: translateX(130%);
}

/* NEON BORDER */

.card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(45deg,
            #00d0ff,
            #6f5cff,
            #00ffe7,
            #00d0ff);

    opacity: 0;

    transition: .4s;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;
}

.card:hover::after {
    opacity: 1;

}

.card:hover {
    transform:
        translateY(-8px) scale(1.02);

    background: var(--glass-hover) !important;

    box-shadow:
        0 25px 70px var(--shadow),
        0 0 60px var(--blue-glow),
        0 0 100px var(--purple-glow);
}

/* TABLE */

table {
    background: transparent !important;
}

thead {
    background: rgba(255, 255, 255, .05);
}

[data-theme="light"] thead {
    background: rgba(0, 0, 0, .04);
}

tbody tr:hover {
    background: rgba(255, 255, 255, .08);
}

[data-theme="light"] tbody tr:hover {
    background: rgba(0, 150, 255, .08);
}



/* =========================================================
   FUTURISTIC GLASS MODAL
   MaryUI + DaisyUI
   Dark / Light Theme
========================================================= */

/* ==========================
   VARIABLES
========================== */

:root {
    --modal-bg: rgba(15, 23, 42, .78);
    --modal-border: rgba(255, 255, 255, .15);
    --modal-shadow: rgba(0, 0, 0, .45);

    --input-bg: rgba(255, 255, 255, .06);
    --input-border: rgba(255, 255, 255, .15);

    --label-color: #cbd5e1;
}

[data-theme="light"] {
    --modal-bg: rgba(255, 255, 255, .78);
    --modal-border: rgba(0, 0, 0, .10);
    --modal-shadow: rgba(0, 0, 0, .18);

    --input-bg: rgba(255, 255, 255, .65);
    --input-border: rgba(0, 0, 0, .12);

    --label-color: #475569;
}

/* ==========================
        MODAL BACKDROP
========================== */

.modal::backdrop {
    background: rgba(0, 0, 0, .45);

    backdrop-filter:
        blur(8px);
}

/* ==========================
        MODAL BOX
========================== */

.modal-box {
    position: relative;

    background: var(--modal-bg) !important;

    backdrop-filter:
        blur(30px) saturate(170%);

    -webkit-backdrop-filter:
        blur(30px) saturate(170%);

    border:
        1px solid var(--modal-border);

    border-radius: 28px;

    box-shadow:
        0 30px 90px var(--modal-shadow),
        inset 0 1px rgba(255, 255, 255, .25);
    max-height: 90vh;
    overflow-x: hidden;
}

/* ==========================
      MODAL GLOW
========================== */

.modal-box::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -180px;
    right: -120px;

    background:
        radial-gradient(circle,
            rgba(0, 200, 255, .25),
            transparent 70%);

    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.modal-box::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -150px;
    left: -120px;

    background:
        radial-gradient(circle,
            rgba(130, 80, 255, .18),
            transparent 70%);

    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

/* ==========================
        CONTENT ABOVE GLOW
========================== */

.modal-box>* {
    position: relative;
    z-index: 2;
}

/* ==========================
        TITLE
========================== */

.modal-box h1,
.modal-box h2,
.modal-box .text-xl {
    text-shadow:
        0 0 20px rgba(0, 180, 255, .25);
}

/* ==========================
        INPUTS
========================== */

.modal-box .input,
.modal-box .textarea,
.modal-box select {
    background: var(--input-bg) !important;

    border:
        1px solid var(--input-border);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition: .3s;
}

.modal-box .input:focus,
.modal-box .textarea:focus,
.modal-box select:focus {
    border-color:
        rgba(0, 200, 255, .6);

    box-shadow:
        0 0 25px rgba(0, 190, 255, .25);
}

/* ==========================
        LABEL
========================== */

.modal-box .fieldset-legend {
    color: var(--label-color);
}

/* ==========================
        DIVIDER
========================== */

.modal-box .divider {
    opacity: .5;
}

/* ==========================
        BUTTONS
========================== */

.modal-box .btn {
    border-radius: 14px;

    transition: .3s;
}

.modal-box .btn-primary {
    box-shadow:
        0 0 25px rgba(0, 180, 255, .35);
}

.modal-box .btn-primary:hover {
    transform:
        translateY(-2px);
}

/* ==========================
        CLOSE BUTTON
========================== */

.modal-box .btn-ghost {
    backdrop-filter:
        blur(10px);
    margin-top: 15px
}

.modal-box .btn-ghost:hover {
    background:
        rgba(255, 255, 255, .12);
}

.modal-box form button {

    z-index: 9999 !important;
}

.modal-box form button * {
    pointer-events: none !important;
}

/* =========================================================
   FUTURISTIC GLASS SIDEBAR
   MaryUI + DaisyUI
   Dark / Light Theme
========================================================= */

/* ==========================
   VARIABLES
========================== */

:root {
    --sidebar-bg: rgba(18, 24, 38, .72);
    --sidebar-border: rgba(255, 255, 255, .10);
    --sidebar-shadow: rgba(0, 0, 0, .35);
    --menu-hover: rgba(255, 255, 255, .07);

    --menu-active:
        linear-gradient(90deg,
            rgba(0, 190, 255, .18),
            rgba(120, 80, 255, .15));

    --menu-text: #cbd5e1;
    --menu-text-active: white;
    --icon-color: #94a3b8;
    --icon-active: #54c8ff;
}

/* ==========================
       LIGHT MODE
========================== */

[data-theme="light"] {
    --sidebar-bg: rgba(255, 255, 255, .72);
    --sidebar-border: rgba(0, 0, 0, .08);
    --sidebar-shadow: rgba(0, 0, 0, .15);
    --menu-hover: rgba(0, 120, 255, .08);

    --menu-active:
        linear-gradient(90deg,
            rgba(0, 150, 255, .15),
            rgba(120, 80, 255, .10));

    --menu-text: #475569;
    --menu-text-active: #0f172a;
    --icon-color: #64748b;
    --icon-active: #0284c7;
}

/* ==========================
       SIDEBAR
========================== */

[drawer="main-drawer"] {
    background: var(--sidebar-bg) !important;

    backdrop-filter:
        blur(25px) saturate(170%);

    -webkit-backdrop-filter:
        blur(25px) saturate(170%);

    border-right:
        1px solid var(--sidebar-border);

    box-shadow:
        inset -1px 0 rgba(255, 255, 255, .15),
        20px 0 60px var(--sidebar-shadow);

    transition: .35s;
}

/* ==========================
       SIDEBAR GLOW
========================== */

[drawer="main-drawer"]::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 500px;

    left: -150px;
    top: 100px;

    background:
        radial-gradient(circle,
            rgba(0, 190, 255, .18),
            transparent 70%);

    filter: blur(70px);

    pointer-events: none;
}

/* ==========================
       MENU
========================== */

[drawer="main-drawer"] .menu {
    padding: 12px;
}

[drawer="main-drawer"] .menu li>a,
[drawer="main-drawer"] summary {
    min-height: 46px;

    border-radius: 14px;

    color: var(--menu-text);

    border: 1px solid transparent;

    transition: .3s;
}

/* ==========================
       HOVER
========================== */

[drawer="main-drawer"] .menu li>a:hover,
[drawer="main-drawer"] summary:hover {
    background: var(--menu-hover);

    border-color: var(--sidebar-border);

    color: var(--menu-text-active);

    transform: translateX(4px);
}

/* ==========================
       ACTIVE MENU
========================== */

[drawer="main-drawer"] .menu li>a.active,
[drawer="main-drawer"] .menu li>a[aria-current="page"] {
    background: var(--menu-active);

    border-color: rgba(0, 180, 255, .25);

    color: var(--menu-text-active);

    box-shadow:
        0 0 25px rgba(0, 180, 255, .15),
        inset 0 1px rgba(255, 255, 255, .25);
}

/* ==========================
       ICONS
========================== */

[drawer="main-drawer"] svg {
    color: var(--icon-color);

    transition: .25s;
}

[drawer="main-drawer"] a:hover svg,
[drawer="main-drawer"] summary:hover svg {
    color: #38bdf8;

    transform: scale(1.1);
}

[drawer="main-drawer"] a.active svg,
[drawer="main-drawer"] a[aria-current="page"] svg {
    color: var(--icon-active);

    filter:
        drop-shadow(0 0 8px rgba(0, 180, 255, .5));
}

/* ==========================
       SCROLLBAR
========================== */

[drawer="main-drawer"]::-webkit-scrollbar {
    width: 6px;
}

[drawer="main-drawer"]::-webkit-scrollbar-thumb {
    background: rgba(120, 150, 180, .25);

    border-radius: 20px;
}

[data-theme="light"] [drawer="main-drawer"]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
}




.modal-box::before,
.modal-box::after {
    z-index: -1 !important;
    pointer-events: none !important;
}

.modal-box form {
    position: static !important;
}

.modal-box form button {
    position: absolute !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

.modal-box form button * {
    pointer-events: none !important;
}

/* Custom Scrollbar for Dual Scrollbar Table */
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}



/* Tabs'ın alt satıra geçmesini sağla */
.tabs {
    display: flex;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 0.5rem;
}

/* Her tab kendi genişliği kadar yer kaplasın */
.tabs .tab {
    flex: 0 0 auto;
    white-space: nowrap;
}