/* =========================================================================
   THEME REFRESH — modern visual layer for the UniPro admin theme
   =========================================================================
   This file is loaded AFTER css/bootstrap.min.css, css/main.css and
   css/responsive.css on every screen (dashboard.php + index.php), so it
   overrides them purely through the cascade -- it does not remove or edit
   any existing rule, and it does not touch layout mechanics (position,
   width, left/top, flex direction) that the existing markup/JS depends on.
   Only color, radius, shadow, spacing-within-elements, typography and
   transitions are refreshed, so structure and behavior stay identical.
   ========================================================================= */

:root {
    /* Core brand */
    --main-color: #4F46E5;              /* redefines the theme's own variable
                                            so every existing var(--main-color)
                                            use (card headers, rcn_table, etc.)
                                            automatically picks up the new look */
    --brand-primary: #4F46E5;
    --brand-primary-dark: #4338CA;
    --brand-primary-light: #EEF2FF;
    --brand-primary-ring: rgba(79, 70, 229, .18);

    --brand-accent: #0EA5A4;            /* teal accent for secondary actions */
    --brand-accent-dark: #0B8483;

    --status-success: #16A34A;
    --status-success-bg: #ECFDF3;
    --status-danger: #E11D48;
    --status-danger-bg: #FEF1F3;
    --status-warning: #D97706;
    --status-warning-bg: #FFFBEB;
    --status-info: #2563EB;
    --status-info-bg: #EFF6FF;

    /* Neutrals */
    --canvas: #0B1020;
    --canvas-soft: #141B2E;
    --surface: #FFFFFF;
    --surface-muted: #F4F5FA;
    --border-soft: #E6E8F0;
    --text-strong: #1B1F3B;
    --text-muted: #6B7280;

    /* Shape & elevation */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 2px 8px rgba(17, 20, 45, .06);
    --shadow-md: 0 10px 30px rgba(17, 20, 45, .10);
    --shadow-lift: 0 14px 34px rgba(79, 70, 229, .18);
}

/* -------------------------------------------------------------------------
   Global feel: type rendering, selection, focus, scrollbars
   ------------------------------------------------------------------------- */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    color: var(--text-strong);
}

::selection {
    background: var(--brand-primary);
    color: #fff;
}

a {
    transition: color .15s ease;
}

.btn, .accordion-button, .card, .table .td-actions a.icon, .page-link,
.field-wrapper input, .field-wrapper select, .field-wrapper textarea {
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* Slim, modern scrollbars wherever content scrolls (webkit browsers) */
.content-wrapper::-webkit-scrollbar,
#faqAccordion::-webkit-scrollbar,
.sidebar-wrapper .sidebar-tabs .nav::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.content-wrapper::-webkit-scrollbar-thumb,
#faqAccordion::-webkit-scrollbar-thumb,
.sidebar-wrapper .sidebar-tabs .nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 10px;
}

.content-wrapper::-webkit-scrollbar-track,
#faqAccordion::-webkit-scrollbar-track {
    background: transparent;
}

/* -------------------------------------------------------------------------
   Shell: canvas + floating panels (sidebar / main container)
   ------------------------------------------------------------------------- */
.page-wrapper {
    background: linear-gradient(160deg, var(--canvas) 0%, var(--canvas-soft) 100%);
}

.main-container {
    background: var(--surface-muted);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.content-wrapper, .content-wrapper-scroll {
    background: transparent;
}

.app-footer {
    color: var(--text-muted);
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   Sidebar: logo, accordion menu, sub-menu links
   ------------------------------------------------------------------------- */
.sidebar-wrapper .sidebar-tabs .nav {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.sidebar-wrapper .sidebar-tabs .nav a.logo {
    padding: .5rem .25rem 1rem .25rem;
}

.accordion {
    background: var(--surface);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.accordion-item {
    border: none;
    background: transparent;
}

.accordion .accordion-button {
    color: var(--text-strong);
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: var(--radius-sm);
    margin: 3px 8px;
    padding: .65rem .85rem;
}

.accordion .accordion-button.collapsed {
    border-bottom-width: 0;
}

.accordion .accordion-button:hover {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary-dark);
}

.accordion .accordion-button:not(.collapsed) {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    box-shadow: var(--shadow-lift);
}

.accordion .accordion-button::after {
    filter: none;
}

.accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.accordion .accordion-button:focus {
    box-shadow: none;
}

.accordion .accordion-collapse {
    border-width: 0;
}

.accordion .accordion-body {
    padding-top: .15rem;
    padding-bottom: .35rem;
}

.sub_line_menu {
    list-style: none;
    margin: 0 8px;
    padding: 0;
}

.sub_line_menu li a {
    display: flex;
    align-items: center;
    line-height: 1.4;
    border-bottom: none;
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    margin: 2px 0;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 500;
}

.sub_line_menu li a i {
    margin-right: .5rem;
    font-size: .7rem;
    opacity: .6;
}

.sub_line_menu li a:hover {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    text-decoration: none;
}

.this_active, .sub_line_menu li a.this_active {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark) !important;
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   Top action bar (quick action buttons per module)
   ------------------------------------------------------------------------- */
.quick_btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .78rem;
    box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card .card-header {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card .card-header-lg {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card .card-footer {
    border-top: 1px solid var(--border-soft);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
    font-weight: 600;
    letter-spacing: .01em;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.dropdown-toggle.show,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    box-shadow: 0 0 0 .2rem var(--brand-primary-ring);
}

.btn-secondary {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.field-wrapper input,
.field-wrapper select,
.field-wrapper textarea {
    border-radius: var(--radius-sm);
}

.field-wrapper input:focus,
.field-wrapper select:focus,
.field-wrapper textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem var(--brand-primary-ring);
}

/* -------------------------------------------------------------------------
   Tables, badges, breadcrumbs, pagination
   ------------------------------------------------------------------------- */
.table {
    background: var(--surface);
    border-radius: var(--radius-md);
}

.table th,
.table td {
    border-color: var(--border-soft);
}

.table th {
    color: var(--text-strong);
    background: var(--surface-muted);
    border-color: var(--border-soft);
    font-weight: 700;
}

.table tbody tr:hover {
    background-color: var(--brand-primary-light);
}

.table a.link {
    color: var(--brand-primary);
}

.table .td-actions a.icon {
    width: 26px;
    height: 26px;
    box-shadow: var(--shadow-sm);
}

.table .td-actions a.icon:hover {
    transform: translateY(-1px) scale(1.05);
}

.table .td-actions a.icon.red {
    background: var(--status-danger);
}

.table .td-actions a.icon.green {
    background: var(--status-success);
}

.table .td-actions a.icon.blue {
    background: var(--status-info);
}

.badge {
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.breadcrumb {
    background: transparent;
}

.breadcrumb .breadcrumb-item a {
    color: var(--brand-primary);
}

.pagination .page-link {
    border-radius: var(--radius-sm);
    color: var(--brand-primary);
    border-color: var(--border-soft);
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Generic DataTables chrome (search box, length select, pager) --
   selectors are the library's own stable class names, unaffected by
   whichever DataTables vendor CSS build is loaded before this file. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   Login screen
   ------------------------------------------------------------------------- */
body.authentication {
    background: linear-gradient(160deg, var(--canvas) 0%, var(--canvas-soft) 100%);
}

.login-screen {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.login-screen::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
}

.login-screen .login-body {
    padding-top: 2rem;
}

.login-screen .login-body .field-wrapper input {
    border: 1px solid var(--border-soft);
}

.login-screen .login-body .field-wrapper input:hover {
    border-color: var(--brand-primary);
}

.login-screen .login-body .field-wrapper input:focus {
    outline-color: var(--brand-primary);
}

.login-screen .actions a {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary) !important;
}

.login-screen .login-footer {
    border-top: 1px solid var(--border-soft);
}

.login-screen .login-footer .additional-link a {
    color: var(--text-muted);
}