/* ==========================================================================
   Plant DX — UI foundation (design tokens + shared resets)
   Additive layer on top of w3.css / jQuery UI / DataTables.
   Loaded globally; page-specific styling still lives in each page's own CSS.
   ========================================================================== */

:root {
    /* Neutral surfaces */
    --pdx-bg: #f5f6f8;
    --pdx-canvas: #dde1e6;
    --pdx-surface: #ffffff;
    --pdx-border: #e2e5e9;
    --pdx-border-strong: #cbd2d9;

    /* Text */
    --pdx-text: #1f2937;
    --pdx-text-muted: #6b7280;
    --pdx-text-on-accent: #ffffff;

    /* Accent (kept close to the existing brand teal / blue-grey) */
    --pdx-primary: #0d9488;
    --pdx-primary-hover: #0b7f74;
    --pdx-primary-soft: #e6f5f3;
    --pdx-primary-tint: #bfe8e2;
    --pdx-navbar-bg: #263238;
    --pdx-navbar-bg-alt: #37474f;
    --pdx-accent-indigo: #3f51b5;
    --pdx-navy: #1e3a6e;
    --pdx-navy-hover: #294d8c;

    /* Semantic */
    --pdx-danger: #dc2626;
    --pdx-danger-soft: #fdecea;
    --pdx-warning: #b45309;
    --pdx-warning-soft: #fff7e6;
    --pdx-success: #15803d;

    /* Spacing scale */
    --pdx-space-1: 4px;
    --pdx-space-2: 8px;
    --pdx-space-3: 12px;
    --pdx-space-4: 16px;
    --pdx-space-5: 24px;
    --pdx-space-6: 32px;

    /* Radius / shadow */
    --pdx-radius-sm: 4px;
    --pdx-radius-md: 10px;
    --pdx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --pdx-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.12);

    --pdx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Base resets (global — typography only, no layout/behavior changes) ---- */
html, body {
    background-color: var(--pdx-bg);
    color: var(--pdx-text);
    font-family: var(--pdx-font);
}
*, *::before, *::after { box-sizing: border-box; }

/* ==========================================================================
   Generic component classes — additive utilities for use on pages as we
   modernize them one at a time. Not applied anywhere automatically.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pdx-space-2);
    font-family: var(--pdx-font);
    font-size: 0.9rem;
    font-weight: 600;
    padding: var(--pdx-space-2) var(--pdx-space-4);
    border-radius: var(--pdx-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-block { display: flex; width: 100%; }

.btn-primary {
    background-color: var(--pdx-primary);
    color: var(--pdx-text-on-accent);
}
.btn-primary:hover:not(:disabled) { background-color: var(--pdx-primary-hover); }

.btn-secondary {
    background-color: var(--pdx-surface);
    color: var(--pdx-text);
    border-color: var(--pdx-border-strong);
}
.btn-secondary:hover:not(:disabled) { background-color: var(--pdx-bg); }

.btn-danger {
    background-color: var(--pdx-danger);
    color: var(--pdx-text-on-accent);
}
.btn-danger:hover:not(:disabled) { opacity: 0.9; }

.card {
    background-color: var(--pdx-surface);
    border: 1px solid var(--pdx-border);
    border-radius: var(--pdx-radius-md);
    box-shadow: var(--pdx-shadow-sm);
}

.field { margin-top: var(--pdx-space-4); }
.field label {
    display: block;
    margin-bottom: var(--pdx-space-1);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pdx-text-muted);
}
.field input, .field select, .field textarea {
    width: 100%;
    padding: var(--pdx-space-2) var(--pdx-space-3);
    font-family: var(--pdx-font);
    font-size: 0.95rem;
    color: var(--pdx-text);
    background-color: var(--pdx-surface);
    border: 1px solid var(--pdx-border-strong);
    border-radius: var(--pdx-radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--pdx-primary);
    box-shadow: 0 0 0 3px var(--pdx-primary-soft);
}

.alert {
    padding: var(--pdx-space-3) var(--pdx-space-4);
    border-radius: var(--pdx-radius-sm);
    font-size: 0.875rem;
}
.alert-error { background-color: var(--pdx-danger-soft); color: var(--pdx-danger); }
.alert-warning { background-color: var(--pdx-warning-soft); color: var(--pdx-warning); }

/* Navigation tiles (company → plants, plant → modules). Markup:
   <div class="pdx-tile" tabindex="0" role="link">
     <span class="pdx-tile-icon"><svg/></span>
     <span class="pdx-tile-body"><span class="pdx-tile-name"/><span class="pdx-tile-desc"/></span>
     <span class="pdx-tile-go"><svg/></span>
   </div>
   Inner parts are spans on purpose: the pages' click handlers are delegated on "div".
   Prefixed "pdx-" because bulma.min.css (loaded on some form/ pages) owns ".tile". */
.pdx-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--pdx-space-4);
    padding: var(--pdx-space-5);
}
.pdx-tile {
    display: flex;
    align-items: center;
    gap: var(--pdx-space-3);
    min-height: 88px;
    margin: 0;
    padding: var(--pdx-space-4);
    background-color: var(--pdx-navy);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%);
    color: #ffffff;
    border: 1px solid var(--pdx-navy);
    border-radius: var(--pdx-radius-md);
    box-shadow: var(--pdx-shadow-sm);
    font-family: var(--pdx-font);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.pdx-tile:hover {
    background-color: var(--pdx-navy-hover);
    transform: translateY(-2px);
    box-shadow: var(--pdx-shadow-md);
}
.pdx-tile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pdx-canvas), 0 0 0 5px var(--pdx-primary);
}
.pdx-tile-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--pdx-radius-md);
    background-color: rgba(255, 255, 255, 0.12);
}
.pdx-tile-icon svg { width: 24px; height: 24px; }
.pdx-tile-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pdx-tile-name,
.pdx-tile-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pdx-tile-name { font-weight: 600; }
.pdx-tile-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}
.pdx-tile-go {
    flex: none;
    display: flex;
    opacity: 0.5;
    transition: opacity 120ms ease, transform 120ms ease;
}
.pdx-tile-go svg { width: 20px; height: 20px; }
.pdx-tile:hover .pdx-tile-go {
    opacity: 1;
    transform: translateX(3px);
}

/* Count chip, e.g. next to a page heading */
.pdx-count-chip:not(:empty) {
    min-width: 1.6rem;
    padding: 2px var(--pdx-space-2);
    border-radius: 999px;
    background-color: var(--pdx-primary-soft);
    color: var(--pdx-primary-hover);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

/* ==========================================================================
   Global chrome — always present, so restyled now (CSS-only, no markup/JS
   selector changes; scoped to their existing containers).
   ========================================================================== */

/* Navbar — index.php wraps content/common/navbar.php in <nav> */
nav .w3-bar {
    display: flex;
    align-items: center;
    background-color: var(--pdx-navbar-bg) !important;
    padding: 0 var(--pdx-space-2);
    box-shadow: var(--pdx-shadow-sm);
}
/* Marks the start of the right-aligned group (the "Sign in" link when
   signed out, or the RDC shortcut just before the user menu when signed
   in) — pushes it, and everything after it, to the end of the flex bar. */
nav .w3-bar > .nav-push-right {
    margin-left: auto !important;
}
nav .w3-bar-item, nav .w3-button {
    font-family: var(--pdx-font);
    font-size: 0.9rem;
}
nav .nav-ext-icon {
    margin-left: var(--pdx-space-1);
    vertical-align: -2px;
}
nav .w3-blue-grey,
nav .w3-indigo,
nav .w3-teal,
nav #user-btn {
    background-color: transparent !important;
    color: #cfd8dc !important;
    border-radius: var(--pdx-radius-sm);
    transition: background-color 120ms ease, color 120ms ease;
}
nav .w3-bar > a.w3-bar-item:first-child {
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: 0.02em;
}
nav .w3-blue-grey:hover,
nav .w3-indigo:hover,
nav .w3-teal:hover,
nav #user-btn:hover {
    background-color: var(--pdx-navbar-bg-alt) !important;
    color: #ffffff !important;
}
nav .w3-dropdown-content.w3-card-4 {
    background-color: var(--pdx-surface);
    border: 1px solid var(--pdx-border);
    border-radius: var(--pdx-radius-sm);
    box-shadow: var(--pdx-shadow-md);
    overflow: hidden;
}
nav .w3-dropdown-content .w3-bar-item {
    color: var(--pdx-text) !important;
    background-color: transparent !important;
}
nav .w3-dropdown-content .w3-bar-item:hover {
    background-color: var(--pdx-bg) !important;
}

/* Footer */
footer.app-footer {
    font-family: var(--pdx-font);
    color: var(--pdx-text-muted);
    font-size: 0.8rem;
}
.app-lang-select {
    font-family: var(--pdx-font);
    font-size: 0.85rem;
    color: var(--pdx-text);
    background-color: var(--pdx-surface);
    border: 1px solid var(--pdx-border-strong);
    border-radius: var(--pdx-radius-sm);
    padding: var(--pdx-space-1) var(--pdx-space-2);
}

/* Confirmation / toast panels (content/common/onay_msg.php) */
#mesaj, #onay_delete, #onay_proceed, #qr_code {
    font-family: var(--pdx-font) !important;
    background-color: var(--pdx-surface) !important;
    border: 1px solid var(--pdx-border) !important;
    border-radius: var(--pdx-radius-md) !important;
    box-shadow: var(--pdx-shadow-md);
}
#onay_delete, #onay_proceed {
    color: var(--pdx-text) !important;
}
#onay_delete span, #onay_proceed span {
    display: block;
    margin-bottom: var(--pdx-space-3);
}
#onay_delete button, #onay_proceed button {
    font-family: var(--pdx-font);
    font-weight: 600;
    padding: var(--pdx-space-2) var(--pdx-space-4);
    border: none;
    border-radius: var(--pdx-radius-sm);
    background-color: var(--pdx-primary);
    color: var(--pdx-text-on-accent);
    cursor: pointer;
}
#onay_delete button:hover, #onay_proceed button:hover { background-color: var(--pdx-primary-hover); }

/* ==========================================================================
   jQuery UI / DataTables — visual reskin only (colors, borders, fonts,
   radius). No structural CSS, no JS/widget-option changes.
   ========================================================================== */

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: var(--pdx-font) !important;
}
.ui-widget-content {
    background-color: var(--pdx-surface);
    border: 1px solid var(--pdx-border);
    color: var(--pdx-text);
}
.ui-widget-header {
    background: var(--pdx-navbar-bg);
    border: 1px solid var(--pdx-navbar-bg);
    color: #ffffff;
}
.ui-state-default, .ui-widget-content .ui-state-default {
    background: var(--pdx-surface);
    border: 1px solid var(--pdx-border-strong);
    color: var(--pdx-text);
}
.ui-state-hover, .ui-widget-content .ui-state-hover,
.ui-state-active, .ui-widget-content .ui-state-active {
    background: var(--pdx-primary-soft);
    border: 1px solid var(--pdx-primary);
    color: var(--pdx-primary-hover);
}
.ui-dialog {
    border-radius: var(--pdx-radius-md);
    box-shadow: var(--pdx-shadow-md);
    padding: 0;
}
.ui-dialog .ui-dialog-titlebar {
    border-radius: var(--pdx-radius-md) var(--pdx-radius-md) 0 0;
}
.ui-datepicker {
    border-radius: var(--pdx-radius-sm);
    box-shadow: var(--pdx-shadow-md);
}

.dataTables_wrapper {
    font-family: var(--pdx-font);
    color: var(--pdx-text);
}
table.dataTable {
    border-collapse: collapse !important;
}
table.dataTable thead th {
    background-color: var(--pdx-bg);
    color: var(--pdx-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--pdx-border-strong) !important;
}
table.dataTable tbody td {
    border-color: var(--pdx-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--pdx-radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pdx-primary) !important;
    border-color: var(--pdx-primary) !important;
    color: var(--pdx-text-on-accent) !important;
}