/* Theme: aqua */
/* Author: Shahed Mohammad Hridoy */

:root {
    --primary-color-light: #f0f8fa;

    --btn-primary-txt-color: var(--color-white);
    --btn-danger-txt-color: var(--color-white);
    --tab-active-txt-color: var(--color-white);

    --input-color: #f7fcfe;

    --color-primary: #0a7c8f;
    --color-primary-rgb: 10, 124, 143;
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --color-primary-dark: #0c6272;
    --color-primary-darker: #134e5d;
    --color-secondary: #5a717d;
    --color-danger: #dc3545;
    --color-danger-dark: #b02a37;
    --color-success: #198754;
    --color-success-dark: #146c43;
    --color-warning: #d97706;
    --color-warning-dark: #b45309;
    --color-info: #0284c7;
    --color-info-dark: #0369a1;
    --color-border: #d4e5ea;
    --color-border-dark: #b8d2db;

    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray: #8fa6b0;
    --color-gray-dark: #4b626d;
    --color-transparent: transparent;

    --color-light-orange: #fff8f0;
    --color-light-indigo: #eef6f8;

    --color-link: #097384;
    --sidenav-menu-color: #cde7eb;
    --sidenav-section-bg: #0e3f4c;
    --color-focus: #0a7c8f;
    --color-action: var(--color-primary);
    --color-action-hover: var(--color-primary-dark);
    --overlay-backdrop: rgba(10, 48, 58, 0.58);
    --shadow-soft: rgba(10, 48, 58, 0.06);
    --shadow-raised: rgba(10, 48, 58, 0.10);
    --shadow-strong: rgba(8, 35, 42, 0.24);
    --focus-ring-color: rgba(10, 124, 143, 0.25);
    --resize-handle-gradient: linear-gradient(135deg, var(--color-transparent) 50%, var(--focus-ring-color) 50%);

    --surface-hover: #e8f5f8;
    --surface-page: var(--color-white);
    --surface-muted: #f5fbfc;
    --surface-subtle: #ebf3f5;
    --surface-success: #f0fdf4;
    --surface-danger: #fef2f2;
    --surface-warning: #fffbeb;
    --color-border-hover: #9ec2cc;
    --color-border-control: #c5dbe1;
    --color-border-accent: #bfe0e7;
    --color-text-primary: #ffffff;
    --color-text-light: #ffffff;
    --color-text-dark: #0f242c;
    --color-text: #1e293b;
    --color-text-strong: #0f242c;
    --color-text-muted: #526a74;
    --color-text-subtle: #7b96a1;
    --color-accent: #0ea5b5;
    --color-accent-dark: #0a7f8d;
    --color-accent-soft: #e4f4f6;
    --color-success-emphasis: var(--color-success-dark);
    --surface-control-hover: rgba(10, 124, 143, 0.08);
    --surface-card: var(--surface-page);
    --surface-input: var(--input-color);
    --surface-input-disabled: var(--surface-subtle);
    --form-control-background: var(--surface-page);
    --form-control-background-disabled: var(--surface-input-disabled);
    --form-control-text: var(--color-text);
    --form-control-placeholder: var(--color-text-subtle);
    --form-control-disabled-text: var(--color-text-muted);
    --editor-surface: var(--surface-page);
    --editor-toolbar-surface: var(--surface-muted);
    --editor-border: var(--color-border-control);
    --editor-text: var(--color-text);
    --editor-muted: var(--color-text-muted);
    --background-color: #f0f6f8;
    --shadow: 0 14px 32px var(--shadow-raised);
    --border: 1px solid var(--color-border);

    --gradient-primary: linear-gradient(135deg, #104c5a 0%, #155d6e 100%);
}

/* Links */
a {
    color: var(--color-link);
}

a:hover,
a:focus {
    color: var(--color-primary-dark);
}

/* Bootstrap Primary Color Overrides */
.text-primary,
.link-primary {
    color: var(--color-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus,
.link-primary:hover,
.link-primary:focus {
    color: var(--color-primary-dark) !important;
}

.bg-primary,
.badge-primary {
    background-color: var(--color-primary) !important;
    color: var(--btn-primary-txt-color) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.alert-primary,
.list-group-item-primary,
.table-primary {
    color: var(--color-primary-dark);
    background-color: var(--color-accent-soft);
    border-color: var(--color-border-accent);
}

.m-navbar .dropdown-btn,
.m-navbar #services_btn,
.m-navbar .sidenav-collapse-all,
.m-navbar .notification-toggle {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.m-navbar #services_btn:hover,
.m-navbar #services_btn:focus-visible,
.m-navbar .sidenav-collapse-all:hover,
.m-navbar .sidenav-collapse-all:focus-visible,
.m-navbar .notification-toggle:hover,
.m-navbar .notification-toggle:focus {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-border-hover);
    box-shadow: 0 2px 8px var(--shadow-raised);
}

.m-navbar .language-switch-select {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.m-navbar .notice-scroll {
    color: #e6f7f9;
}

.m-navbar #user_system {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
}

/* Sidebar Menu Section Headers */
.menu-section {
    background-color: var(--sidenav-section-bg) !important;
    color: #e2f5f4 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.menu-section .section-toggle,
.menu-section .section-toggle:hover,
.menu-section .section-toggle:focus {
    color: #e2f5f4 !important;
}

/* Sidebar Links: Normal, Hover, Active, and Focus States */
.sidebar-list li a.dropdown-link {
    color: var(--sidenav-menu-color);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar-list li a.dropdown-link i {
    color: #8ed4dc;
    transition: color 0.18s ease;
}

.sidebar-list li a.dropdown-link:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--color-white) !important;
}

.sidebar-list li a.dropdown-link:hover i {
    color: var(--color-white) !important;
}

.sidebar-list li a.dropdown-link.active {
    background-color: #147d8d !important;
    color: var(--color-white) !important;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    border-left: 3px solid #5eead4;
}

.sidebar-list li a.dropdown-link.active i {
    color: var(--color-white) !important;
}

.sidebar-list li a.dropdown-link:focus-visible {
    outline: 2px solid #5eead4;
    outline-offset: -2px;
}

.menuitem .collapse ul,
.menuitem div.collapse>ul {
    background-color: rgba(0, 0, 0, 0.12);
    border-left: 2px solid rgba(255, 255, 255, 0.10);
    margin-left: 0.75rem;
    padding-left: 0.25rem;
}

/* Main Content Surface */
.main--content {
    background-color: var(--background-color);
}

/* Cards */
.m-card,
.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.card-header {
    background-color: var(--surface-muted);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-strong);
}

.card-footer {
    background-color: var(--surface-muted);
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
}

/* Buttons */
.btn-primary,
.common-button,
.all-button,
.edit-button,
.create-button,
.forward-button,
.switch-view {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--btn-primary-txt-color) !important;
}

.btn-primary:not(:disabled):not(.disabled):hover,
.common-button:not(:disabled):not(.disabled):hover,
.all-button:not(:disabled):not(.disabled):hover,
.edit-button:not(:disabled):not(.disabled):hover,
.create-button:not(:disabled):not(.disabled):hover,
.forward-button:not(:disabled):not(.disabled):hover,
.switch-view:not(:disabled):not(.disabled):hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--btn-primary-txt-color) !important;
}

.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):focus-visible,
.common-button:not(:disabled):not(.disabled):focus,
.create-button:not(:disabled):not(.disabled):focus,
.all-button:not(:disabled):not(.disabled):focus,
.edit-button:not(:disabled):not(.disabled):focus {
    box-shadow: 0 0 0 0.2rem var(--focus-ring-color) !important;
    outline: none;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.common-button:not(:disabled):not(.disabled):active,
.common-button:not(:disabled):not(.disabled).active,
.create-button:not(:disabled):not(.disabled):active,
.create-button:not(:disabled):not(.disabled).active {
    background-color: #085360 !important;
    border-color: #085360 !important;
}

.btn-primary:disabled,
.btn-primary.disabled,
.common-button:disabled,
.common-button.disabled,
.create-button:disabled,
.create-button.disabled,
.all-button:disabled,
.all-button.disabled,
.edit-button:disabled,
.edit-button.disabled,
.forward-button:disabled,
.forward-button.disabled,
.switch-view:disabled,
.switch-view.disabled {
    background-color: #83b6bf !important;
    border-color: #83b6bf !important;
    color: var(--btn-primary-txt-color) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

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

.btn-outline-primary:not(:disabled):not(.disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--color-text-subtle) !important;
    border-color: var(--color-border-dark) !important;
    background-color: var(--surface-subtle) !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Ensure inner icons and text inside disabled buttons inherit disabled styles and don't block cursor */
.btn-outline-primary:disabled *,
.btn-outline-primary.disabled *,
.btn-primary:disabled *,
.btn-primary.disabled *,
.common-button:disabled *,
.common-button.disabled *,
.create-button:disabled *,
.create-button.disabled *,
.all-button:disabled *,
.all-button.disabled *,
.edit-button:disabled *,
.edit-button.disabled *,
.forward-button:disabled *,
.forward-button.disabled *,
.switch-view:disabled *,
.switch-view.disabled * {
    color: inherit !important;
    pointer-events: none;
}

/* Prevent hover / active / focus state transitions on disabled buttons */
.btn-outline-primary:disabled:hover,
.btn-outline-primary:disabled:focus,
.btn-outline-primary:disabled:active,
.btn-outline-primary.disabled:hover,
.btn-outline-primary.disabled:focus,
.btn-outline-primary.disabled:active {
    color: var(--color-text-subtle) !important;
    border-color: var(--color-border-dark) !important;
    background-color: var(--surface-subtle) !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-primary:disabled:hover,
.btn-primary:disabled:focus,
.btn-primary:disabled:active,
.btn-primary.disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled:active,
.common-button:disabled:hover,
.common-button:disabled:focus,
.common-button:disabled:active,
.common-button.disabled:hover,
.common-button.disabled:focus,
.common-button.disabled:active,
.create-button:disabled:hover,
.create-button:disabled:focus,
.create-button:disabled:active,
.create-button.disabled:hover,
.create-button.disabled:focus,
.create-button.disabled:active,
.all-button:disabled:hover,
.all-button:disabled:focus,
.all-button:disabled:active,
.all-button.disabled:hover,
.all-button.disabled:focus,
.all-button.disabled:active,
.edit-button:disabled:hover,
.edit-button:disabled:focus,
.edit-button:disabled:active,
.edit-button.disabled:hover,
.edit-button.disabled:focus,
.edit-button.disabled:active,
.forward-button:disabled:hover,
.forward-button:disabled:focus,
.forward-button:disabled:active,
.forward-button.disabled:hover,
.forward-button.disabled:focus,
.forward-button.disabled:active,
.switch-view:disabled:hover,
.switch-view:disabled:focus,
.switch-view:disabled:active,
.switch-view.disabled:hover,
.switch-view.disabled:focus,
.switch-view.disabled:active {
    background-color: #83b6bf !important;
    border-color: #83b6bf !important;
    color: var(--btn-primary-txt-color) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Secondary & Destructive disabled buttons in aqua theme */
.btn-secondary:disabled,
.btn-secondary.disabled,
.config-button:disabled,
.config-button.disabled {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    color: var(--color-text-subtle) !important;
    border-color: var(--color-border) !important;
    background-color: var(--surface-subtle) !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Semantic destructive actions stay in clear red */
.btn-danger,
.bulk-create-button,
.btn-due-date {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-white) !important;
}

.btn-danger:not(:disabled):not(.disabled):hover,
.bulk-create-button:not(:disabled):not(.disabled):hover {
    background-color: var(--color-danger-dark) !important;
    border-color: var(--color-danger-dark) !important;
}

.btn-danger:disabled,
.btn-danger.disabled,
.bulk-create-button:disabled,
.bulk-create-button.disabled {
    background-color: #e88d96 !important;
    border-color: #e88d96 !important;
    color: var(--color-white) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    color: #e88d96 !important;
    border-color: var(--color-border-dark) !important;
    background-color: var(--surface-danger) !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Base rule for all disabled buttons */
.btn:disabled,
.btn.disabled,
button:disabled {
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.btn:disabled *,
.btn.disabled *,
button:disabled * {
    pointer-events: none;
}

/* Form Controls */
.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
textarea,
select {
    background-color: var(--form-control-background);
    border-color: var(--color-border-control);
    color: var(--form-control-text);
}

.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--form-control-placeholder);
}

.form-control:focus,
.form-select:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):focus,
textarea:focus,
select:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 0.2rem var(--focus-ring-color);
}

.form-control:disabled,
.form-control[readonly],
input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly],
select:disabled {
    background-color: var(--form-control-background-disabled);
    color: var(--form-control-disabled-text);
}

/* Select2 Customization */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--color-border-control);
    background-color: var(--form-control-background);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 0.2rem var(--focus-ring-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Tables */
.table thead th,
.p-table thead th {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
    border-color: rgba(255, 255, 255, 0.15);
}

.table tbody tr:hover,
.p-table tbody tr:hover,
.table-hover tbody tr:hover {
    background-color: var(--surface-hover);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--surface-muted);
}

/* Modals */
.modal-content {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 40px var(--shadow-strong);
}

.modal-header,
.modal-footer {
    background-color: var(--surface-muted);
    border-color: var(--color-border);
}

.modal-title {
    color: var(--color-text-strong);
}

/* Dropdown Menus */
.dropdown-menu,
.m-navbar .dropdown,
#notification_system {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 25px var(--shadow-strong);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--surface-hover);
    color: var(--color-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Pagination */
.pagination .page-item .page-link {
    color: var(--color-primary);
    border-color: var(--color-border-control);
    background-color: var(--color-white);
}

.pagination .page-item:hover .page-link {
    color: var(--color-primary-dark);
    background-color: var(--surface-hover);
    border-color: var(--color-border-hover);
}

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

.pagination .page-item.disabled .page-link {
    color: var(--color-text-subtle);
    background-color: var(--surface-subtle);
    border-color: var(--color-border);
}

/* Tabs */
.nav.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--tab-active-txt-color) !important;
}

.nav.nav-tabs .nav-link.active i,
.nav-tabs .nav-link.active i,
.nav-pills .nav-link.active i,
.nav-pills .show>.nav-link i {
    color: var(--tab-active-txt-color) !important;
}

/* Background Colors */
.bg-light-red {
    background: var(--surface-danger);
}

.light-purple {
    background: var(--color-accent-soft);
}

.light-green {
    background: var(--surface-success);
}

.bg-white {
    background: var(--color-white);
}

.bg-primary-light {
    background: rgba(var(--color-primary-rgb), 0.08);
}

.bg-light-blue {
    background: var(--color-light-indigo);
}

.bg-light-orange {
    background: var(--color-light-orange);
}

.bg-teal-blue {
    background: var(--color-info-dark);
}

.bg-dark-teal-blue {
    background: var(--color-primary-dark);
}

.bg-purple {
    background: linear-gradient(135deg, var(--color-focus), var(--color-accent));
}

.bg-green {
    background: linear-gradient(135deg, var(--color-success-dark), var(--color-success));
}

.bg-orange {
    background: linear-gradient(135deg, var(--color-warning-dark), var(--color-warning));
}

.bg-danger {
    background: var(--color-danger) !important;
}

.bg-success {
    background: var(--color-success) !important;
}

.bg-warning {
    background: var(--color-warning) !important;
}

/* Text Colors */
.text-light {
    color: var(--color-white) !important;
}

.text-dark {
    color: var(--color-black) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.asteriskField {
    color: var(--color-danger);
}
