{{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}

<!-- BEGIN: Font awesome cdn-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
<!-- END: Font awesome cdn-->
<!-- Remix Icons -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<!-- MDI Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/light-font@0.2.63/css/materialdesignicons-light.min.css" />
<!-- MDI Icons End -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">
<!-- END: Page CSS-->


<!-- plugins css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" />
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.0/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.all.min.js"></script>

<style>
    :root {
        --admin-brand: #da8661;
        --admin-brand-hover: #c87452;
        --admin-brand-soft: #f7e4da;
    }

    .main-menu a {
        text-decoration: none !important;
    }

    .main-menu a:hover {
        text-decoration: none !important;
    }

    .main-menu .nav-item a.active {
        text-decoration: none !important;
    }

    .dropify-wrapper .dropify-message p {
        font-size: 23px;
    }

    .card-body {
        padding: 24px 22px;
    }

    .card .card-title {
        font-weight: 600;
        font-size: 23px;
    }

    .dt-length {
        margin-bottom: 15px;
    }

    .dt-length label {
        text-transform: capitalize;
    }

    input#select_all {
        padding: 6px;
        margin-left: 1px;
    }

    .select_data {
        margin-left: 1px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 13px !important;
    }

    .bg-nest,
    .btn-nest,
    .btn-primary {
        background-color: var(--admin-brand) !important;
        border-color: var(--admin-brand) !important;
    }

    .btn-nest,
    .btn-primary,
    .bg-nest {
        color: #ffffff !important;
    }

    .btn-nest:hover,
    .btn-primary:hover,
    .bg-nest:hover {
        background-color: var(--admin-brand-hover) !important;
        border-color: var(--admin-brand-hover) !important;
    }

    .navbar-custom {
        border-bottom: 1px solid #f0d5c6;
    }

    .navbar-vertical {
        border-right: 1px solid #f0d5c6;
    }

    .navbar-vertical .navbar-heading {
        color: #9b5a3f;
    }

    .navbar-vertical .navbar-nav .nav-item .nav-link.active,
    .navbar-vertical .navbar-nav .nav-item .nav-link:hover,
    .navbar-vertical .navbar-nav .nav .nav-item .nav-link.active,
    .navbar-vertical .navbar-nav .nav .nav-item .nav-link:hover {
        color: #8f4f34 !important;
        background-color: var(--admin-brand-soft);
    }

    .navbar-vertical .navbar-nav .nav-item .nav-link.active .nav-icon,
    .navbar-vertical .navbar-nav .nav-item .nav-link:hover .nav-icon {
        color: var(--admin-brand) !important;
    }

    .navbar-custom .btn-ghost.btn-icon:hover,
    .navbar-custom .dropdown-item:active,
    .navbar-custom .dropdown-item.active {
        background-color: var(--admin-brand-soft);
        color: #8f4f34;
    }

    html[data-bs-theme="dark"] {
        --admin-bg: #0f1520;
        --admin-surface: #161e2d;
        --admin-surface-soft: #1b2536;
        --admin-border: #2a3550;
        --admin-text: #e5ebf6;
        --admin-muted: #9eabc3;
        --admin-accent: #f09a75;
        --admin-accent-hover: #e18862;
    }

    html[data-bs-theme="dark"] .navbar-custom,
    html[data-bs-theme="dark"] .navbar-vertical {
        background-color: #121a28 !important;
        border-color: var(--admin-border) !important;
    }

    html[data-bs-theme="dark"] .navbar-vertical .navbar-heading {
        color: #b8c4d9;
    }

    html[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item .nav-link {
        color: #cdd9ec;
    }

    html[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item .nav-link.active,
    html[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item .nav-link:hover,
    html[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav .nav-item .nav-link.active,
    html[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav .nav-item .nav-link:hover {
        color: #ffd9c8 !important;
        background-color: rgba(240, 154, 117, 0.18);
    }

    html[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item .nav-link.active .nav-icon,
    html[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-item .nav-link:hover .nav-icon {
        color: var(--admin-accent) !important;
    }

    html[data-bs-theme="dark"] body,
    html[data-bs-theme="dark"] .app-content-area,
    html[data-bs-theme="dark"] .container-fluid {
        background-color: var(--admin-bg) !important;
        color: var(--admin-text);
    }

    html[data-bs-theme="dark"] .card,
    html[data-bs-theme="dark"] .modal-content,
    html[data-bs-theme="dark"] .dropdown-menu,
    html[data-bs-theme="dark"] .offcanvas,
    html[data-bs-theme="dark"] .list-group-item {
        background-color: var(--admin-surface) !important;
        border-color: var(--admin-border) !important;
        color: var(--admin-text) !important;
    }

    html[data-bs-theme="dark"] .card-header,
    html[data-bs-theme="dark"] .card-footer,
    html[data-bs-theme="dark"] .table thead th,
    html[data-bs-theme="dark"] .table-light,
    html[data-bs-theme="dark"] .bg-light {
        background-color: var(--admin-surface-soft) !important;
        color: var(--admin-text) !important;
        border-color: var(--admin-border) !important;
    }

    html[data-bs-theme="dark"] .table,
    html[data-bs-theme="dark"] .table td,
    html[data-bs-theme="dark"] .table th,
    html[data-bs-theme="dark"] .table tr,
    html[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
        color: var(--admin-text) !important;
        border-color: var(--admin-border) !important;
    }

    html[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
        background-color: rgba(255, 255, 255, 0.02) !important;
    }

    html[data-bs-theme="dark"] .form-control,
    html[data-bs-theme="dark"] .form-select,
    html[data-bs-theme="dark"] .input-group-text,
    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
    html[data-bs-theme="dark"] .select2-dropdown {
        background-color: #131b29 !important;
        border-color: var(--admin-border) !important;
        color: var(--admin-text) !important;
    }

    html[data-bs-theme="dark"] .form-control::placeholder {
        color: #7f8ba2;
    }

    html[data-bs-theme="dark"] .text-muted,
    html[data-bs-theme="dark"] .form-text,
    html[data-bs-theme="dark"] .small,
    html[data-bs-theme="dark"] .text-secondary {
        color: var(--admin-muted) !important;
    }

    html[data-bs-theme="dark"] a,
    html[data-bs-theme="dark"] .nav-link,
    html[data-bs-theme="dark"] .dropdown-item {
        color: #d6e3ff;
    }

    html[data-bs-theme="dark"] a:hover,
    html[data-bs-theme="dark"] .nav-link:hover,
    html[data-bs-theme="dark"] .dropdown-item:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.05);
    }

    html[data-bs-theme="dark"] .btn-primary,
    html[data-bs-theme="dark"] .bg-nest,
    html[data-bs-theme="dark"] .btn-admin,
    html[data-bs-theme="dark"] .btn-nest {
        background-color: var(--admin-accent) !important;
        border-color: var(--admin-accent) !important;
        color: #17120f !important;
    }

    html[data-bs-theme="dark"] .btn-primary:hover,
    html[data-bs-theme="dark"] .bg-nest:hover,
    html[data-bs-theme="dark"] .btn-admin:hover,
    html[data-bs-theme="dark"] .btn-nest:hover {
        background-color: var(--admin-accent-hover) !important;
        border-color: var(--admin-accent-hover) !important;
        color: #17120f !important;
    }

    html[data-bs-theme="dark"] .ck.ck-toolbar,
    html[data-bs-theme="dark"] .ck.ck-editor__main>.ck-editor__editable,
    html[data-bs-theme="dark"] .ck.ck-list,
    html[data-bs-theme="dark"] .ck.ck-dropdown__panel {
        background: #131d2d !important;
        border-color: var(--admin-border) !important;
        color: var(--admin-text) !important;
    }

    html[data-bs-theme="dark"] .ck.ck-editor__main>.ck-editor__editable {
        min-height: 220px;
    }

    html[data-bs-theme="dark"] .ck.ck-button,
    html[data-bs-theme="dark"] .ck.ck-button .ck-icon,
    html[data-bs-theme="dark"] .ck.ck-list__item .ck-button {
        color: #dbe6f7 !important;
    }

    html[data-bs-theme="dark"] .ck.ck-button:hover,
    html[data-bs-theme="dark"] .ck.ck-list__item .ck-button:hover,
    html[data-bs-theme="dark"] .ck.ck-button.ck-on {
        background: rgba(240, 154, 117, 0.18) !important;
        color: #ffd9c8 !important;
    }

    html[data-bs-theme="dark"] .ck.ck-editor__editable>.ck-placeholder::before {
        color: #7f8ba2 !important;
    }

    html[data-bs-theme="dark"] .dropify-wrapper {
        background: #131d2d;
        border-color: var(--admin-border);
        color: var(--admin-text);
    }

    html[data-bs-theme="dark"] .dropify-wrapper .dropify-preview,
    html[data-bs-theme="dark"] .dropify-wrapper .dropify-infos {
        background: #131d2d;
    }

    html[data-bs-theme="dark"] .dropify-wrapper .dropify-message p,
    html[data-bs-theme="dark"] .dropify-wrapper .dropify-filename-inner {
        color: #cfd8e8;
    }

    html[data-bs-theme="dark"] .dropify-wrapper .dropify-clear {
        background: var(--admin-accent);
        border-color: var(--admin-accent);
        color: #17120f;
    }

    html[data-bs-theme="dark"] .dashboard-date {
        color: var(--admin-text);
        background: var(--admin-surface-soft);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    }

    html[data-bs-theme="dark"] .dashboard-date i {
        color: var(--admin-accent);
    }

    html[data-bs-theme="dark"] #timer {
        color: #ff8f8f;
    }
</style>

<style>
    .dashboard-date {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        background: #f8f9fa;
        padding: 8px 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .dashboard-date i {
        color: #DA8661;
        font-size: 18px;
        padding-top: 2px;
    }

    #timer {
        font-weight: bold;
        color: #d9534f;
    }
</style>


@stack('style')