/* ============================================
   MATERIAM DARK - Custom PrimeFaces Theme
   Low contrast, streamlined, modern design
   ============================================ */

/* === Color Variables (via CSS custom properties) === */
/* Monochromatic Minimalism Palette */
:root {
    /* Backgrounds - deep to light */
    --md-bg-primary: #1C1C1C;      /* Sumi Black - main background */
    --md-bg-secondary: #242424;    /* Slightly lighter */
    --md-bg-tertiary: #2E2E2E;     /* Elevated surfaces */
    --md-bg-hover: #383838;        /* Hover state */
    --md-bg-active: #444444;       /* Active/pressed state */

    /* Borders */
    --md-border: #333333;          /* Subtle borders */
    --md-border-light: #444444;    /* Highlighted borders */

    /* Text */
    --md-text-primary: #F5F5F5;    /* Off-white for readability */
    --md-text-secondary: #A0A0A0;  /* Secondary text */
    --md-text-muted: #666666;      /* Muted/disabled text */

    /* Accent - monochromatic white/light gray */
    --md-accent: #E0E0E0;          /* Light gray accent */
    --md-accent-hover: #FFFFFF;    /* Pure white on hover */

    /* Semantic colors - subtle variations */
    --md-danger: #505050;          /* Darker gray for danger */
    --md-danger-hover: #606060;    /* Lighter on hover */
    --md-success: #404040;         /* Success state */
    --md-warning: #484848;         /* Warning state */

    /* Table rows - two gray tones */
    --md-row-even: #2a2a2a;        /* Lighter gray */
    --md-row-odd: #323232;         /* Slightly lighter gray */
}

/* === Base Reset === */
.ui-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
}

.ui-widget-content {
    background: var(--md-bg-primary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
}

.ui-widget-header {
    background: var(--md-bg-secondary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    font-weight: 500;
}

.ui-state-default {
    background: var(--md-bg-secondary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
}

.ui-state-hover {
    background: var(--md-bg-hover);
    color: var(--md-text-primary);
    border-color: var(--md-border-light);
}

.ui-state-active {
    background: var(--md-bg-active);
    color: var(--md-text-primary);
    border-color: var(--md-accent);
}

.ui-state-highlight {
    background: var(--md-accent);
    color: var(--md-text-primary);
}

.ui-state-error {
    background: var(--md-danger);
    color: var(--md-text-primary);
    border-color: var(--md-danger);
}

/* === Buttons === */
.ui-button {
    background: var(--md-bg-tertiary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    padding: 6px 12px;
    font-weight: 400;
    transition: background 0.15s ease;
    box-shadow: none;
    text-shadow: none;
}

.ui-button:hover,
.ui-button:focus {
    background: var(--md-bg-hover);
    color: var(--md-text-primary);
    border-color: var(--md-border-light);
    box-shadow: none;
}

.ui-button:active,
.ui-button.ui-state-active {
    background: var(--md-bg-active);
    border-color: var(--md-accent);
}

/* Danger button - inverted monochrome style */
.ui-button.ui-button-danger {
    background: var(--md-text-secondary);
    color: var(--md-bg-primary);
    border-color: var(--md-text-secondary);
}

.ui-button.ui-button-danger:hover {
    background: var(--md-text-primary);
    color: var(--md-bg-primary);
    border-color: var(--md-text-primary);
}

.ui-button.ui-button-danger .ui-button-text,
.ui-button.ui-button-danger .ui-icon {
    color: var(--md-bg-primary);
}

/* Secondary button - outlined style */
.ui-button.ui-button-secondary {
    background: transparent;
    color: var(--md-text-secondary);
    border: 1px solid var(--md-border-light);
}

.ui-button.ui-button-secondary:hover {
    background: var(--md-bg-hover);
    color: var(--md-text-primary);
    border-color: var(--md-text-secondary);
}

.ui-button .ui-button-text {
    color: var(--md-text-primary);
}

.ui-button .ui-icon {
    color: var(--md-text-primary);
}

/* Command links */
.ui-commandlink {
    color: var(--md-accent);
}

.ui-commandlink:hover {
    color: var(--md-accent-hover);
}

/* === Input Fields === */
.ui-inputfield,
.ui-inputtext,
.ui-inputtextarea {
    background: var(--md-bg-primary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    padding: 6px 8px;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

.ui-inputfield:hover,
.ui-inputtext:hover {
    border-color: var(--md-border-light);
}

.ui-inputfield:focus,
.ui-inputtext:focus {
    border-color: var(--md-accent);
    box-shadow: none;
    outline: none;
}

.ui-inputfield.ui-state-error,
.ui-inputtext.ui-state-error {
    border-color: var(--md-danger);
}

/* InputNumber */
.ui-inputnumber {
    background: var(--md-bg-primary);
}

.ui-inputnumber-input {
    background: var(--md-bg-primary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
}

.ui-inputnumber-button {
    background: var(--md-bg-tertiary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
}

.ui-inputnumber-button:hover {
    background: var(--md-bg-hover);
}

/* === Select/Dropdown === */
.ui-selectonemenu {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
}

.ui-selectonemenu .ui-selectonemenu-label {
    background: transparent;
    color: var(--md-text-primary);
    padding: 6px 8px;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
    background: var(--md-bg-tertiary);
    color: var(--md-text-primary);
    border-left: 1px solid var(--md-border);
    border-radius: 0;
    width: 28px;
}

.ui-selectonemenu:hover {
    border-color: var(--md-border-light);
}

.ui-selectonemenu-panel {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ui-selectonemenu-items {
    background: var(--md-bg-secondary);
}

.ui-selectonemenu-item {
    color: var(--md-text-primary);
    padding: 8px 12px;
    border-radius: 0;
}

.ui-selectonemenu-item:hover {
    background: var(--md-bg-hover);
    color: var(--md-text-primary);
}

.ui-selectonemenu-item.ui-state-highlight {
    background: var(--md-accent);
    color: var(--md-text-primary);
}

/* === Checkbox & Radio === */
.ui-chkbox .ui-chkbox-box,
.ui-radiobutton .ui-radiobutton-box {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    width: 18px;
    height: 18px;
}

.ui-chkbox .ui-chkbox-box:hover,
.ui-radiobutton .ui-radiobutton-box:hover {
    border-color: var(--md-border-light);
}

.ui-chkbox .ui-chkbox-box.ui-state-active,
.ui-radiobutton .ui-radiobutton-box.ui-state-active {
    background: var(--md-accent);
    border-color: var(--md-accent);
}

.ui-chkbox .ui-chkbox-icon,
.ui-radiobutton .ui-radiobutton-icon {
    color: var(--md-text-primary);
}

/* === DataTable === */
.ui-datatable {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
}

.ui-datatable .ui-datatable-header {
    background: var(--md-bg-secondary);
    color: var(--md-text-primary);
    border: none;
    border-bottom: 1px solid var(--md-border);
    padding: 10px 12px;
    font-weight: 500;
}

.ui-datatable .ui-datatable-footer {
    background: var(--md-bg-secondary);
    color: var(--md-text-primary);
    border: none;
    border-top: 1px solid var(--md-border);
    padding: 10px 12px;
}

.ui-datatable thead th {
    background: var(--md-bg-secondary);
    color: var(--md-text-secondary);
    border: none;
    border-bottom: 1px solid var(--md-border);
    padding: 10px 12px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.ui-datatable thead th.ui-state-hover {
    background: var(--md-bg-hover);
}

.ui-datatable thead th.ui-state-active {
    background: var(--md-bg-active);
}

.ui-datatable tbody td {
    background: transparent;
    color: var(--md-text-primary);
    border: none;
    border-bottom: 1px solid var(--md-border);
    padding: 10px 12px;
}

/* Alternating row colors */
.ui-datatable tbody tr.ui-datatable-even {
    background: var(--md-row-even);
}

.ui-datatable tbody tr.ui-datatable-odd {
    background: var(--md-row-odd);
}

.ui-datatable tbody tr:hover td {
    background: var(--md-bg-hover);
}

.ui-datatable tbody tr.ui-state-highlight td {
    background: var(--md-accent);
    color: var(--md-text-primary);
}

/* Editable cells */
.ui-datatable .ui-cell-editor-input {
    padding: 0;
}

.ui-datatable .ui-cell-editor-input .ui-inputfield {
    width: 100%;
    padding: 4px 6px;
}

/* Sortable columns */
.ui-datatable .ui-sortable-column-icon {
    color: var(--md-text-muted);
}

.ui-datatable .ui-sortable-column:hover .ui-sortable-column-icon {
    color: var(--md-text-secondary);
}

/* === Panel === */
.ui-panel {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    box-shadow: none;
}

.ui-panel .ui-panel-titlebar {
    background: var(--md-bg-secondary);
    color: var(--md-text-primary);
    border: none;
    border-bottom: 1px solid var(--md-border);
    border-radius: 0;
    padding: 10px 14px;
    font-weight: 500;
}

.ui-panel .ui-panel-content {
    background: var(--md-bg-primary);
    color: var(--md-text-primary);
    padding: 14px;
    border: none;
}

/* === TabView === */
.ui-tabs {
    background: transparent;
    border: none;
}

.ui-tabs .ui-tabs-nav {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-bottom: none;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin: 0;
    top: 0;
}

.ui-tabs .ui-tabs-nav li a {
    color: var(--md-text-secondary);
    padding: 12px 20px;
    font-weight: 400;
}

.ui-tabs .ui-tabs-nav li:hover {
    background: var(--md-bg-hover);
}

.ui-tabs .ui-tabs-nav li:hover a {
    color: var(--md-text-primary);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected,
.ui-tabs .ui-tabs-nav li.ui-state-active {
    background: var(--md-bg-primary);
    border-bottom: 2px solid var(--md-accent);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: var(--md-text-primary);
}

.ui-tabs .ui-tabs-panels {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
    border-top: none;
    color: var(--md-text-primary);
    padding: 14px;
}

/* === Dialog === */
.ui-dialog {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--md-bg-secondary);
    color: var(--md-text-primary);
    border: none;
    border-bottom: 1px solid var(--md-border);
    border-radius: 0;
    padding: 12px 16px;
}

.ui-dialog .ui-dialog-title {
    font-weight: 500;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: transparent;
    border: none;
    color: var(--md-text-secondary);
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background: var(--md-bg-hover);
    color: var(--md-text-primary);
}

.ui-dialog .ui-dialog-content {
    background: var(--md-bg-primary);
    color: var(--md-text-primary);
    padding: 16px;
}

.ui-dialog .ui-dialog-footer {
    background: var(--md-bg-secondary);
    border-top: 1px solid var(--md-border);
    padding: 12px 16px;
    text-align: right;
}

/* Confirm Dialog */
.ui-confirm-dialog .ui-confirm-dialog-message {
    color: var(--md-text-primary);
}

/* === Growl / Messages === */
.ui-growl {
    top: 70px;
}

.ui-growl-item {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ui-growl-item-container {
    background: transparent;
    padding: 12px;
}

.ui-growl-image {
    background: none;
}

.ui-growl-message {
    color: var(--md-text-primary);
}

.ui-growl-title {
    color: var(--md-text-primary);
    font-weight: 500;
}

.ui-growl-message p {
    color: var(--md-text-secondary);
}

/* Messages - monochromatic with left border accent */
.ui-messages {
    border-radius: 0;
}

.ui-messages-info {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-left: 3px solid var(--md-text-secondary);
    color: var(--md-text-primary);
}

.ui-messages-warn {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-left: 3px solid var(--md-text-muted);
    color: var(--md-text-primary);
}

.ui-messages-error {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-left: 3px solid var(--md-text-primary);
    color: var(--md-text-primary);
}

/* === Menu === */
.ui-menu {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ui-menu .ui-menuitem-link {
    color: var(--md-text-primary);
    padding: 10px 14px;
    border-radius: 0;
}

.ui-menu .ui-menuitem-link:hover {
    background: var(--md-bg-hover);
    color: var(--md-text-primary);
}

.ui-menu .ui-menu-separator {
    border-top: 1px solid var(--md-border);
}

/* === Tree === */
.ui-tree {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
    color: var(--md-text-primary);
}

.ui-tree .ui-treenode-content {
    padding: 6px;
}

.ui-tree .ui-treenode-content:hover {
    background: var(--md-bg-hover);
}

.ui-tree .ui-treenode-content.ui-state-highlight {
    background: var(--md-accent);
}

.ui-tree .ui-tree-toggler {
    color: var(--md-text-secondary);
}

.ui-tree .ui-treenode-icon {
    color: var(--md-text-secondary);
}

.ui-tree .ui-treenode-label {
    color: var(--md-text-primary);
}

/* === Tooltip === */
.ui-tooltip {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ui-tooltip .ui-tooltip-text {
    background: transparent;
    color: var(--md-text-primary);
    padding: 8px 12px;
}

/* === ProgressBar === */
.ui-progressbar {
    background: var(--md-bg-tertiary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    height: 20px;
}

.ui-progressbar .ui-progressbar-value {
    background: var(--md-accent);
    border-radius: 0;
}

.ui-progressbar .ui-progressbar-label {
    color: var(--md-text-primary);
    font-size: 11px;
}

/* === Calendar === */
.ui-datepicker {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ui-datepicker .ui-datepicker-header {
    background: var(--md-bg-tertiary);
    border: none;
    color: var(--md-text-primary);
    padding: 10px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    color: var(--md-text-secondary);
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    color: var(--md-text-primary);
}

.ui-datepicker table {
    border-collapse: collapse;
}

.ui-datepicker th {
    color: var(--md-text-muted);
    font-weight: 500;
    padding: 8px;
}

.ui-datepicker td {
    padding: 2px;
}

.ui-datepicker td a {
    background: transparent;
    color: var(--md-text-primary);
    padding: 8px;
    border-radius: 0;
}

.ui-datepicker td a:hover {
    background: var(--md-bg-hover);
}

.ui-datepicker td a.ui-state-active {
    background: var(--md-accent);
    color: var(--md-text-primary);
}

.ui-datepicker td.ui-datepicker-today a {
    border: 1px solid var(--md-text-secondary);
    background: var(--md-bg-tertiary);
}

/* === Slider === */
.ui-slider {
    background: var(--md-bg-tertiary);
    border: none;
    border-radius: 0;
}

.ui-slider .ui-slider-range {
    background: var(--md-accent);
}

.ui-slider .ui-slider-handle {
    background: var(--md-accent);
    border: none;
    border-radius: 0;
    width: 16px;
    height: 16px;
}

/* === Spinner === */
.ui-spinner {
    background: var(--md-bg-primary);
}

.ui-spinner-input {
    background: var(--md-bg-primary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
}

.ui-spinner-button {
    background: var(--md-bg-tertiary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
}

.ui-spinner-button:hover {
    background: var(--md-bg-hover);
}

/* === Fieldset === */
.ui-fieldset {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
}

.ui-fieldset .ui-fieldset-legend {
    background: var(--md-bg-secondary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    padding: 8px 12px;
}

/* === Accordion === */
.ui-accordion {
    background: transparent;
}

.ui-accordion .ui-accordion-header {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    color: var(--md-text-primary);
    margin-top: -1px;
}

.ui-accordion .ui-accordion-header:hover {
    background: var(--md-bg-hover);
}

.ui-accordion .ui-accordion-header.ui-state-active {
    background: var(--md-bg-tertiary);
    border-color: var(--md-accent);
}

.ui-accordion .ui-accordion-content {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
    border-top: none;
    border-radius: 0;
    color: var(--md-text-primary);
}

/* === Overlay Panel === */
.ui-overlaypanel {
    background: var(--md-bg-secondary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ui-overlaypanel .ui-overlaypanel-content {
    color: var(--md-text-primary);
}

/* === File Upload === */
.ui-fileupload {
    background: var(--md-bg-primary);
    border: 1px solid var(--md-border);
}

.ui-fileupload .ui-fileupload-buttonbar {
    background: var(--md-bg-secondary);
    border-bottom: 1px solid var(--md-border);
}

.ui-fileupload .ui-fileupload-content {
    background: var(--md-bg-primary);
    color: var(--md-text-primary);
}

/* === Output Label === */
.ui-outputlabel {
    color: var(--md-text-primary);
}

/* === Paginator === */
.ui-paginator {
    background: var(--md-bg-secondary);
    border: none;
    border-top: 1px solid var(--md-border);
    padding: 8px;
}

.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last {
    background: var(--md-bg-tertiary);
    color: var(--md-text-primary);
    border: 1px solid var(--md-border);
    border-radius: 0;
    min-width: 28px;
    height: 28px;
}

.ui-paginator .ui-paginator-page:hover,
.ui-paginator .ui-paginator-first:hover,
.ui-paginator .ui-paginator-prev:hover,
.ui-paginator .ui-paginator-next:hover,
.ui-paginator .ui-paginator-last:hover {
    background: var(--md-bg-hover);
}

.ui-paginator .ui-paginator-page.ui-state-active {
    background: var(--md-accent);
    border-color: var(--md-accent);
}

/* === Icons === */
.ui-icon {
    color: var(--md-text-secondary);
}

.ui-button .ui-icon {
    color: var(--md-text-primary);
}

/* PrimeIcons */
.pi {
    color: inherit;
}

/* === Misc === */
a {
    color: var(--md-accent);
}

a:hover {
    color: var(--md-accent-hover);
}

/* Focus outline */
*:focus {
    outline: none;
}

/* Selection */
::selection {
    background: var(--md-accent);
    color: var(--md-text-primary);
}