/* ============================================
   BASE STYLES
   ============================================ */

body {
    background-color: #f5f5f5;
    color: #333333;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
    padding: 0;
}

.naziv{
    font-weight:700;
    color:black;
}
body.dark-theme .naziv{
    font-weight:700;
    color:white;
}

.page {
    min-height: 100vh;
    background-color: inherit;
}

.content {
    background-color: inherit;
}

/* ============================================
   DARK THEME
   ============================================ */

/* Dark theme gradients i poboljšanja */
body.dark-theme {
    background: linear-gradient(135deg, 
        #1a1f25 0%,
        #1c2127 50%,
        #1e2329 100%
    ) !important;
    color: #e4e4e4 !important;
}

/* Gradient za page container */
body.dark-theme .page {
    background: radial-gradient(
        circle at top right,
        rgba(41, 98, 255, 0.03),
        transparent 40%
    ),
    radial-gradient(
        circle at bottom left,
        rgba(76, 161, 175, 0.03),
        transparent 40%
    ) !important;
}

/* Gradient za content */


/* Card gradients */
body.dark-theme .rz-card {
    background: linear-gradient(
        145deg,
        rgba(35, 39, 45, 0.95),
        rgba(28, 32, 38, 0.95)
    ) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* DataGrid dark mode */
body.dark-theme .rz-datatable-data td {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #2d2d2d !important;
}

body.dark-theme .rz-datatable thead th {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border-color: #2d2d2d !important;
}

body.dark-theme .rz-grid-table tr:not(.child-row):hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-left-color: #4a9eff;
}

/* Child rows in dark mode */
body.dark-theme .rz-grid-table .child-row {
    background-color: #252525 !important;
}

body.dark-theme .rz-grid-table .child-row:hover {
    background-color: #2d2d2d !important;
}

/* Inputs dark mode */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select,
body.dark-theme .rz-textbox,
body.dark-theme .rz-dropdown,
body.dark-theme .att-search {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #3d3d3d !important;
}

body.dark-theme input:focus,
body.dark-theme textarea:focus,
body.dark-theme .rz-textbox:focus,
body.dark-theme .att-search:focus {
    background-color: #353535 !important;
    border-color: #4a4a4a !important;
}

/* Dialog dark mode */
body.dark-theme .rz-dialog,
body.dark-theme .rz-dialog-content {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-theme .rz-dialog-titlebar {
    background-color: #252525 !important;
    border-color: #2d2d2d !important;
}

/* Dashboard dark mode */


body.dark-theme .hero {
    background: linear-gradient(135deg, rgba(50,110,80,.35), rgba(140,110,80,.35)) !important;
    border-color: rgba(255,255,255,.12) !important;
}

body.dark-theme .block-header {
    background: linear-gradient(135deg, rgba(78,110,76,.35), rgba(122,95,62,.35)) !important;
}

body.dark-theme .top-box {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
}

body.dark-theme .info-line {
    border-bottom-color: rgba(255,255,255,.12) !important;
}

/* Home page dark mode */
body.dark-theme .section-title {
    color: #e0e0e0 !important;
}

body.dark-theme .ql-card p {
    color: #b0b0b0 !important;
}

/* Navbar dark mode fix */
body.dark-theme .navbar-dark {
    background-color: #1a1a1a !important;
}

/* Navbar gradient */
body.dark-theme .nav-scrollable {
    background: linear-gradient(
        160deg,
        #1e2329 0%,
        #1a1f25 100%
    ) !important;
}

/* Hover efekti */
body.dark-theme .nav-link:hover {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.03)
    ) !important;
}

/* Active link gradient */
body.dark-theme .nav-link.active {
    background: linear-gradient(
        90deg,
        rgba(126, 217, 87, 0.15),
        rgba(126, 217, 87, 0.05)
    ) !important;
}

/* ============================================
   EXISTING STYLES (your original CSS)
   ============================================ */

/* Search bar */
.search-bar-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-container .grid-wide {
    min-width: 1200px;
}

.table-container .grid-wide .rz-grid-table{
    min-width: inherit;
}

/* Grid styles */
.rz-datatable-data td {
    padding: 0.7rem 1rem;
}

/* Parent row styles */
.rz-grid-table tr:not(.child-row) {
    border-left: 3px solid transparent;
}

.rz-grid-table tr:not(.child-row):hover {
    border-left: 3px solid #007bff;
    background-color: rgba(0, 123, 255, 0.03);
}

/* Child row styles */
.rz-grid-table .child-row {
    background-color: #f8f9fa;
    font-size: 0.95em;
    border-left: 3px solid transparent;
}

.rz-grid-table .child-row td:first-child {
    padding-left: 2.5rem;
}

.rz-grid-table .child-row:hover {
    background-color: #f1f3f5;
    border-left: 3px solid #6c757d;
}

.title-icon {
    width:40px;
    height:40px;
    object-fit:contain;
    color: #007bff;
}

/* Icon styles */
.rz-grid-table tr:not(.child-row) .d-flex .rz-icon {
    color: #007bff;
    opacity: 0.8;
}

.rz-grid-table .child-row .d-flex .rz-icon {
    color: #6c757d;
    opacity: 0.6;
    font-size: 0.9em;
}

.role-radio{
    width:100%;
    padding:.6rem .8rem;
    border:1px solid var(--rz-base-300);
    border-radius:8px;
}

.role-radio:focus-within{
    border-color: var(--rz-primary);
}

.att-wrap { width:100%; }

/* header with count badge */
.att-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:.5rem;
}

.att-title{
    font-weight:600;
    color:#4b5563;
}

.att-count{
    font-size:.85rem;
    background:#eef2ff;
    color:#3730a3;
    padding:.15rem .5rem;
    border-radius:999px;
}

/* search input */
.att-search{
    width:100%;
    padding:.5rem .65rem;
    border:1px solid #e5e7eb;
    border-radius:8px;
    margin-bottom:.75rem;
    outline:none;
}

.att-search:focus{
    border-color: var(--rz-primary);
}

/* list */
.att-list{
    list-style:none;
    padding:0;
    margin:0;
    max-height: 260px;
    overflow:auto;
    border:1px solid #e5e7eb;
    border-radius:10px;
}

.att-item{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.5rem .65rem;
    border-bottom:1px dashed #eee;
}

.att-item:last-child{
    border-bottom:0;
}

.att-item:hover{
    background:#fafafa;
}

/* avatar + name */
.att-avatar{
    width:32px;
    height:32px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:.85rem;
    background:#e0f2fe;
    color:#075985;
}

.att-name{
    font-weight:500;
}

.members-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin:.5rem .75rem;
    width:100%;
}

.members-actions .rz-button{
    flex:1 1 180px;
}

::deep .rz-datagrid td {
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    padding: 10px;
}

::deep .rz-datagrid th {
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    font-size: 14px;
}

/* Dark theme for attendance components */
body.dark-theme .att-list {
    background-color: #1e1e1e !important;
    border-color: #2d2d2d !important;
}

body.dark-theme .att-item {
    border-bottom-color: #2d2d2d !important;
}

body.dark-theme .att-item:hover {
    background-color: #252525 !important;
}

body.dark-theme .att-title {
    color: #b0b0b0 !important;
}

body.dark-theme .att-count {
    background-color: #2d3748 !important;
    color: #93c5fd !important;
}

body.dark-theme .att-avatar {
    background-color: #1e3a5f !important;
    color: #93c5fd !important;
}

body.dark-theme .att-name {
    color: #e0e0e0 !important;
}

/* Role radio dark mode */
body.dark-theme .role-radio {
    background-color: #2d2d2d !important;
    border-color: #3d3d3d !important;
}

/* Icons in dark mode */
body.dark-theme .title-icon {
    color: #4a9eff !important;
}

body.dark-theme .rz-grid-table tr:not(.child-row) .d-flex .rz-icon {
    color: #4a9eff !important;
}

body.dark-theme .rz-grid-table .child-row .d-flex .rz-icon {
    color: #8c8c8c !important;
}

/* Buttons in dark mode */
body.dark-theme .btn-outline-light {
    border-color: #4a4a4a !important;
    color: #e0e0e0 !important;
}

body.dark-theme .btn-outline-light:hover {
    background-color: #2d2d2d !important;
    border-color: #5a5a5a !important;
}

/* Responsive */
@media (max-width: 768px) {
    .search-bar-wrapper {
        flex-direction: column;
    }

    .rz-grid-table .child-row td:first-child {
        padding-left: 1.5rem;
    }

    .rz-datatable {
        min-width: 800px;
    }

    .rz-datatable-scrollable-wrapper {
        overflow-x: visible;
    }

    .rz-datatable-scrollable-view {
        overflow-x: visible;
    }

    .role-radio{
        padding:.5rem .7rem;
    }

    .members-actions{
        flex-direction:column;
        gap:.5rem;
        margin:.5rem 0;
    }

    .members-actions .rz-button{
        width:80%;
        flex:0 0 auto;
        margin-left: 3px;
    }
}
@media screen and (min-width: 425px) and (max-width: 767px) {
    .content {
        max-width: 100%; /* Osigurava da sadržaj koristi punu širinu */
        padding: 1.25rem;
    }

    /* Na mobilnim/tabletima, main ne treba da se pomjera */
    main, main.expanded {
        transform: none !important;
        margin-left: 0 !important;
    }

    .sidebar.collapsed {
        transform: translateX(-260px)  !important; /* Sidebar je skriven van ekrana */
    }

    .sidebar{
        position: fixed !important;
        z-index: 1050 !important;        }

    .sidebar-overlay {
        display: block; /* Pokazuje overlay kada sidebar nije collapsed */
    }

    .table-responsive {
        overflow-x: auto;
    }
}

/* Tablet veliki - između 768px i 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .content {
        max-width: 100%; /* Sadržaj na tabletu pun */
        padding: 1.5rem;
    }

    .sidebar{
        position: fixed !important ;
        z-index: 1050 !important;
    }
    /* Na mobilnim/tabletima, main ne treba da se pomjera */
    main, main.expanded {
        transform: none !important;
        margin-left: 0 !important;
    }

    .sidebar.collapsed {
        transform: translateX(-260px)  !important; /* Sidebar je skriven van ekrana */
    }

    .sidebar-overlay {
        display: block; /* Pokazuje overlay kada sidebar nije collapsed */
    }
}