* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Auth Loading Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Match the html element's background to the body background so that
   when iOS Safari (or any mobile browser) lets the user pinch-zoom out,
   the area beyond the layout viewport (100vw) is painted in the same
   page gray instead of stark white. Without this, the user sees white
   "empty margins" on the sides during a zoom-out gesture and assumes
   the layout is broken. The html element's background naturally
   extends to fill the visual viewport on iOS, so this single rule
   handles the zoom-out gap on every page in the app.

   `overflow-x: clip` on both html and body is a defensive safety net:
   any future element that's wider than the viewport (a stray fixed
   width, a long unbreakable string, an unscoped wide table) won't
   create a horizontal scrollbar that compounds the zoom-out gap.
   `clip` (vs `hidden`) doesn't create a new scroll container, so it
   doesn't break position:sticky on descendants like .navbar. */
html {
    background-color: #f5f5f5;
    overflow-x: clip;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    overflow-x: clip;
    min-width: 100%;
}

/* Navigation Bar */
.navbar {
    background-color: #2c3e50;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a252f;
    padding: 0;
}

.navbar-brand {
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.navbar-brand-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Hamburger toggle - hidden on desktop */
.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.navbar-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}
.navbar-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.25s;
}
.navbar.open .navbar-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.navbar.open .navbar-toggle-bar:nth-child(2) {
    opacity: 0;
}
.navbar.open .navbar-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.navbar-menu-wrapper {
    flex: 1;
}
.navbar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.25s;
}
.navbar.open .navbar-backdrop {
    opacity: 1;
}

.navbar-brand h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    margin-left: auto;
}

.user-profile-photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin-right: 10px;
    transition: all 0.2s;
}

.user-profile-photo:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.user-info .user-email {
    font-size: 13px;
    color: #ffffff !important;
    font-weight: 500;
}

.btn-logout {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-logout svg {
    width: 16px;
    height: 16px;
}

.btn-logout:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
}

.navbar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    color: white;
    white-space: nowrap;
}

.navbar-btn .btn-icon {
    font-size: 18px;
}

.navbar-btn-export {
    background-color: #27ae60;
    border: 2px solid #27ae60;
}

.navbar-btn-export:hover {
    background-color: #229954;
    border-color: #229954;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.navbar-btn-import {
    background-color: #3498db;
    border: 2px solid #3498db;
}

.navbar-btn-import:hover {
    background-color: #2980b9;
    border-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
}

.navbar-btn-template {
    background-color: #6c757d;
    border: 2px solid #6c757d;
}

.navbar-btn-template:hover {
    background-color: #5a6268;
    border-color: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
}

.navbar-btn-excel {
    background-color: #17a2b8;
    border: 2px solid #17a2b8;
}

.navbar-btn-excel:hover {
    background-color: #138496;
    border-color: #138496;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
}

.navbar-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    background-color: #2c3e50;
}

/* Anti-flash gate for the permission-filtered navbar.
   On pages that load roles.js, <body> gets `rbac-managed` immediately. The menu
   is then held hidden until `menu-perms-ready` is set — added by roles.js right
   AFTER it filters the menu (updateMenuByRole), or by a shared-navbar.js timeout
   fallback so it can never get stuck. This stops the brief "flash" of items the
   user isn't allowed to see (e.g. on a full page load of wiki.html). Pages
   without roles.js never get `rbac-managed`, so their menus are never gated.
   visibility (not display) keeps layout stable; brand/logo sit outside .navbar-menu. */
body.rbac-managed:not(.menu-perms-ready) .navbar-menu {
    visibility: hidden;
}

.navbar-menu li {
    margin: 0;
}

.nav-link {
    display: block;
    padding: 15px 25px;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s;
    border-bottom: 3px solid transparent;
}

.nav-link svg {
    color: #91a1cf;
}

.nav-link:hover {
    background-color: #34495e;
}

.nav-link.active {
    background-color: #34495e;
    border-bottom: 3px solid #3498db;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #34495e;
    min-width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border-radius: 0 0 6px 6px;
}

.dropdown-content a {
    display: block;
    padding: 12px 20px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
    border-bottom: 1px solid #2c3e50;
}

.dropdown-content a:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.dropdown-content a:hover {
    background-color: #2c3e50;
}

/* Color Picker */
.color-picker-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-picker-group input[type="color"] {
    width: 60px;
    height: 40px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
}

.color-picker-group input[type="text"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    background-color: #f8f9fa;
}

.color-preview {
    width: 40px;
    height: 25px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    margin: 0 auto;
}

/* Filter Section */
.filter-section {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    align-items: center;
    flex-wrap: wrap;
}

.filter-clear-btn {
    margin-left: auto;
    padding: 8px 16px;
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.filter-clear-btn:hover {
    background-color: #dee2e6;
    border-color: #adb5bd;
}

.filter-clear-btn svg {
    width: 16px;
    height: 16px;
}

.filter-input-wrapper {
    flex: 1;
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.filter-input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}

.filter-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.filter-input:focus + .search-icon,
.filter-input-wrapper:focus-within .search-icon {
    color: #007bff;
}

.filter-input::placeholder {
    color: #6c757d;
}

.filter-select {
    background-color: white;
    cursor: pointer;
    padding-left: 15px;
}

.filter-select option {
    padding: 8px;
}

/* Product Categories */
.product-categories-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.product-category-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.product-category-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #007bff;
}

.category-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f8f9fa;
}

.category-card-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.category-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sub-category-tag {
    display: inline-block;
    padding: 5px 12px;
    background-color: #e7f3ff;
    color: #0c5460;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #bee5eb;
}

.sub-categories-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.sub-category-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sub-category-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
}

.sub-category-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* Page Management */
.page {
    display: none;
}

.page.active {
    display: block;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

/* Teklif Ekip Yönetimi: use full viewport width on large screens (wide kanban) */
.container:has(#teklif-teamPage.active) {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* CEO Paneli: dashboard layout.
   - max-width 2200px: capped wider than the global 1600px so the 2-column
     rows have breathing room on large monitors. Below 2200px the cap is
     invisible (the page fills the viewport, just like the navbar above).
   - padding 40px (vs the global 20px): roomier "breathing frame" around
     the dashboard cards, equal on all four sides. The 40px top padding
     also doubles as a chrome strip for the floating refresh button (the
     standard <header> block is omitted on this page) — see the
     .ceo-panel-refresh-fab rule below for the geometry. */
.container:has(#ceoPage.active) {
    max-width: 2200px;
    padding: 40px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 30px;
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header h2 {
    font-size: 24px;
    color: #2c3e50;
    margin: 0;
    flex: 1;
}

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #0056b3;
}

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

.btn-primary:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-primary svg {
    vertical-align: middle;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

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

.btn-secondary svg {
    vertical-align: middle;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn-add {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 15px;
    transition: background-color 0.2s;
}

.btn-add:hover {
    background-color: #218838;
}

.btn-add-inline {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;
    transition: background-color 0.2s;
}

.btn-add-inline:hover {
    background-color: #0056b3;
}

.btn-info {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;
    transition: background-color 0.2s;
}

.btn-info:hover {
    background-color: #138496;
}

.btn-warning {
    background-color: #ffc107;
    color: #000;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-warning:hover {
    background-color: #e0a800;
}

.btn-success {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-success:hover {
    background-color: #218838;
}

.table-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background-color: #495057;
    color: white;
}

th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 25px;
}

th.sortable:hover {
    background-color: #3d4f5d;
}

th.sortable::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    opacity: 0.3;
    font-size: 12px;
}

th.sortable.asc::after {
    content: '↑';
    opacity: 1;
}

th.sortable.desc::after {
    content: '↓';
    opacity: 1;
}

td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    font-size: 14px;
}

tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

tbody tr:hover {
    background-color: #f8f9fa;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

/* ✅ Phase Closure Modal - Higher z-index to appear above project modal */
#phaseClosureModal {
    z-index: 1100;
}

/* ✅ Closure Category Modal - Higher z-index to appear above other modals */
#closureCategoryModal {
    z-index: 1100;
}

/* ✅ Phase Closure Information Display */
.phase-closure-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.closure-info-header {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 8px;
}

.closure-info-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.closure-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.closure-info-item.closure-note-item {
    flex-direction: column;
    align-items: flex-start;
}

.closure-info-label {
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    min-width: 140px;
}

.closure-info-value {
    font-size: 13px;
    color: #212529;
    font-weight: 500;
}

.closure-category-badge {
    padding: 4px 12px;
    border-radius: 12px;
    background-color: #6c757d;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.closure-info-note {
    font-size: 13px;
    color: #495057;
    background-color: #fff;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
    width: 100%;
    min-height: 40px;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background-color: #fefefe;
    margin: 2% auto;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s;
}

.modal-content.small {
    max-width: 500px;
}

.modal-content.modal-wide {
    max-width: 1400px;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 8px 20px;
    background-color: #495057;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
}

.modal-header h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover,
.close:focus {
    color: #ddd;
}

.modal-body {
    padding: 30px;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

.modal-body.modal-split {
    display: flex;
    gap: 0;
    padding: 0;
    max-height: calc(90vh - 80px);
    height: calc(90vh - 80px);
}

.modal-left-panel {
    width: 50%;
    background-color: #f8f9fa;
    padding: 15px;
    padding-top: 12px;
    border-right: 2px solid #dee2e6;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    height: 100%;
}

.modal-right-panel {
    width: 50%;
    padding: 15px;
    padding-top: 12px;
    overflow-y: auto;
    height: 100%;
}

.panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.form-section {
    margin-bottom: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.form-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bff;
}

.section-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bff;
}

.section-header-inline h3 {
    margin: 0;
    padding: 0;
    border: none;
}

.btn-add-inline-small {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-add-inline-small:hover {
    background-color: #218838;
}

.btn-edit-inline-small {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-edit-inline-small:hover {
    background-color: #0056b3;
}

.btn-edit-inline-small:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Searchable Select Styles */
.searchable-select-wrapper {
    position: relative;
    width: 100%;
}

.searchable-select-wrapper .search-input {
    width: 100%;
    padding: 8px 30px 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    cursor: pointer;
    color: #212529;
}

.searchable-select-wrapper .search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.searchable-select-wrapper .search-input.has-value {
    color: #212529;
    font-weight: normal;
}

.searchable-select-wrapper .search-input.placeholder {
    color: #6c757d;
}

.searchable-select-wrapper .clear-button {
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    font-size: 18px;
    color: #6c757d;
    font-weight: normal;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    width: 18px;
}

.searchable-select-wrapper .clear-button:hover {
    color: #dc3545;
}

.searchable-select-wrapper .dropdown-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: #6c757d;
}

.searchable-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: -1px;
}

.searchable-select-dropdown .dropdown-option {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
    transition: background-color 0.15s;
}

.searchable-select-dropdown .dropdown-option:hover {
    background-color: #f8f9fa;
}

.searchable-select-dropdown .dropdown-option.highlighted {
    background-color: #e9ecef;
}

.searchable-select-dropdown .dropdown-option.selected {
    background-color: #007bff;
    color: white;
}

.searchable-select-dropdown .dropdown-option.highlighted.selected {
    background-color: #0056b3;
}

.searchable-select-dropdown .dropdown-option.no-results {
    padding: 12px 10px;
    color: #6c757d;
    text-align: center;
    cursor: default;
}

.searchable-select-dropdown .dropdown-option.no-results:hover {
    background-color: transparent;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-items: start;
}

/* NDA indicator (project modal - customer contact section) */
.nda-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
}
.nda-indicator .nda-icon {
    font-size: 14px;
    line-height: 1;
}
.nda-indicator.nda-yes {
    background: #e6f7ec;
    color: #1e7e34;
    border-color: #b6e3c5;
}
/* "No NDA" is intentionally neutral/gray — it's fine for a customer not to have one */
.nda-indicator.nda-no,
.nda-indicator.nda-none {
    background: #f1f3f5;
    color: #868e96;
    border-color: #ced4da;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-self: start;
}

/* Team Members Tag Box (Outlook-style) */
.team-members-box {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px;
    min-height: 80px;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

.team-members-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.team-member-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 13px;
    color: #004085;
    transition: background-color 0.2s;
}

.team-member-tag:hover {
    background: #d1e7ff;
}

.team-member-tag .remove-tag {
    cursor: pointer;
    font-size: 14px;
    color: #666;
    padding: 0 2px;
    border-radius: 50%;
    transition: color 0.2s;
}

.team-member-tag .remove-tag:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

.team-members-tags .empty-state {
    color: #999;
    font-size: 13px;
    font-style: italic;
    padding: 4px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.form-group label {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #495057;
    min-height: 36px;
    display: flex;
    align-items: flex-end;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.products-table-container {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.products-table {
    width: 100%;
    background: white;
    border-radius: 4px;
}

.products-table thead {
    background-color: #6c757d;
}

.products-table th {
    padding: 10px;
    font-size: 13px;
}

.products-table td {
    padding: 10px;
    font-size: 13px;
}

/* Contacts Table */
.contacts-table-container {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.contacts-table {
    width: 100%;
    background: white;
    border-radius: 4px;
}

.contacts-table thead {
    background-color: #6c757d;
}

.contacts-table th {
    padding: 10px;
    font-size: 13px;
}

.contacts-table td {
    padding: 10px;
    font-size: 13px;
}

/* Status Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-success {
    background-color: #d4edda;
    color: #155724;
}

.badge-inactive {
    background-color: #f8d7da;
    color: #721c24;
}

/* User Badges */
.user-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.badge-confirmed {
    background: #d4edda;
    color: #155724;
}

.badge-unconfirmed {
    background: #fff3cd;
    color: #856404;
}

/* Home Page Styles */
.home-welcome-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* New Welcome Card Design */
.welcome-card-new {
    background: linear-gradient(135deg, #525e82 0%, #5771b9 100%);
    border-radius: 20px;
    padding: 50px 60px;
    color: white;
    margin-bottom: 25px;
    box-shadow: 0 8px 24px rgba(82, 94, 130, 0.25);
}

.welcome-title-new {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: white;
    line-height: 1.2;
}

.welcome-title-new span {
    color: white;
}

.welcome-subtitle {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 30px 0;
    font-weight: 400;
    line-height: 1.5;
}

.welcome-subtitle span {
    font-weight: 600;
    text-decoration: underline;
}

/* Quick Search Container */
.quick-search-container {
    position: relative;
    z-index: 10;
}

/* Quick Search Box */
.quick-search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 5px;
    gap: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.quick-search-box:hover,
.quick-search-box:focus-within {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-search-input {
    flex: 1;
    /* min-width:0 lets the flex item shrink below its content's intrinsic
       size on narrow viewports — otherwise the long placeholder forces
       the input wider than the parent and gets clipped at the right edge
       of the welcome card. */
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 15px 10px;
    font-size: 16px;
    color: white;
    font-weight: 400;
    /* Truncate placeholder cleanly with "…" if it still doesn't fit
       instead of harshly cutting mid-word. */
    text-overflow: ellipsis;
}

.quick-search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

/* On phones the welcome card's inner width can't fit the full
   "Proje adı / proje kodu / müşteri adı..." placeholder at 16px.
   Shrink font + tighten padding so the whole hint reads on one line.
   The icon button also gets slightly tighter so input gets more room. */
@media (max-width: 600px) {
    .quick-search-input {
        font-size: 13px;
        padding: 12px 8px;
    }
    .search-btn-home {
        padding: 9px 12px;
    }
    .search-btn-home svg {
        width: 17px;
        height: 17px;
    }
}

.search-btn-home {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: white;
    flex-shrink: 0;
}

.search-btn-home:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

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

.search-btn-home svg {
    display: block;
}

/* Search Results - Floating */
.home-search-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 500px;
    overflow: hidden;
    animation: slideDown 0.3s ease;
    z-index: 1000;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid #f0f0f0;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
}

.results-count {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.btn-close-search {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #6c757d;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.2s;
    border-radius: 4px;
}

.btn-close-search:hover {
    background: #e9ecef;
    color: #dc3545;
}

.search-results-list {
    max-height: 440px;
    overflow-y: auto;
    padding: 10px;
}

.search-result-item {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.search-result-item:hover {
    background: #e7f3ff;
    border-left-color: #007bff;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-result-item:last-child {
    margin-bottom: 0;
}

.result-project-code {
    font-size: 14px;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 5px;
}

.result-project-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.result-customer-name {
    font-size: 13px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 5px;
}

.result-customer-name::before {
    content: "👤";
    font-size: 12px;
}

.no-search-results {
    padding: 40px 20px;
    text-align: center;
    color: #6c757d;
    font-size: 15px;
}

.no-search-results::before {
    content: "🔍";
    display: block;
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* New Daily Quote Card Design */
.daily-quote-card-new {
    background: linear-gradient(135deg, #7c4d82 0%, #aa6852 100%);
    border-radius: 20px;
    padding: 30px 40px;
    margin-bottom: 30px;
    box-shadow: 0 6px 20px rgba(170, 104, 82, 0.2);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.daily-quote-card-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(170, 104, 82, 0.3);
}

.daily-quote-card-new .quote-icon-new {
    font-size: 48px;
    flex-shrink: 0;
    opacity: 0.9;
}

.daily-quote-card-new .quote-content-new {
    flex: 1;
    color: white;
}

.daily-quote-card-new .quote-text-new {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 8px 0;
    color: white;
    font-style: italic;
}

.daily-quote-card-new .quote-author-new {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Old styles - keep for backward compatibility */
.welcome-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    color: white;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.welcome-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-20deg); }
}

.welcome-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: white;
}

.welcome-title span {
    background: linear-gradient(to right, #fff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-message {
    font-size: 20px;
    opacity: 0.95;
    font-weight: 400;
    margin: 0;
}

.welcome-message span {
    font-weight: 600;
    text-decoration: underline;
}

/* Old Daily Quote Card */
.daily-quote-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 12px;
    padding: 30px 40px;
    margin-bottom: 40px;
    box-shadow: 0 8px 24px rgba(245, 87, 108, 0.3);
    display: flex;
    align-items: center;
    gap: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.daily-quote-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(245, 87, 108, 0.4);
}

.daily-quote-card .quote-icon {
    font-size: 56px;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.daily-quote-card .quote-content {
    flex: 1;
    color: white;
}

.daily-quote-card .quote-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 12px;
    font-style: italic;
    color: white;
}

.daily-quote-card .quote-author {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* New Stat Cards Design */
.home-stat-card-new {
    background: white;
    border-radius: 16px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.home-stat-card-new:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-icon-new {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.stat-icon-new svg {
    stroke: white;
}

.stat-icon-teklif {
    background: linear-gradient(135deg, #5cb85c 0%, #4cae4c 100%);
}

.stat-icon-uretim {
    background: linear-gradient(135deg, #f26430 0%, #e85d2a 100%);
}

.stat-icon-tahsilat {
    background: linear-gradient(135deg, #f9b233 0%, #f5a623 100%);
}

.stat-content-new {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-label-new {
    font-size: 14px;
    color: #4a5568;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    order: -1; /* Ensure it's always on top */
}

.stat-number-new {
    font-size: 42px;
    font-weight: 700;
    color: #3a4557;
    line-height: 1;
}

.stat-action-btn {
    background: transparent;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
    align-self: flex-start;
}

.stat-action-btn:hover {
    background: #4a5568;
    color: white;
    border-color: #4a5568;
    transform: translateX(2px);
}

/* Loading States */
.loading-text {
    display: inline-block;
    min-width: 60px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    color: transparent !important;
}

.loading-spinner::before {
    content: "";
    width: 28px;
    height: 28px;
    border: 3px solid #e9ecef;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Hareketler Page Loading */
.hareketler-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner-large {
    width: 48px;
    height: 48px;
    border: 4px solid #f0f0f0;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Old Stat Cards - keep for backward compatibility */
.home-stat-card {
    background: white;
    border-radius: 12px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.home-stat-card.clickable-card {
    cursor: pointer;
}

.home-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.home-stat-card.clickable-card:hover {
    border-color: #667eea;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
}

.home-stat-card .stat-icon {
    font-size: 48px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
}

.home-stat-card .stat-content {
    flex: 1;
}

.home-stat-card .stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 4px;
}

.home-stat-card .stat-label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

/* User Card */
.user-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    transition: box-shadow 0.2s;
}

.user-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.user-email {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}

.user-details {
    font-size: 13px;
    color: #6c757d;
    margin-bottom: 10px;
}

/* Phase Status Badges in Table - Simplified to 3 states */
.phase-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    min-width: 100px;
}

.phase-badge.phase-none {
    background-color: #e9ecef;
    color: #6c757d;
}

.phase-badge.phase-active {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.phase-badge.phase-stopped {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Phase Tabs in Modal */
.phase-tabs {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.phase-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    position: relative;
    margin-right: 2px;
    z-index: 2;
    pointer-events: auto;
}

.phase-tab-btn:last-child {
    margin-right: 0;
}

.phase-tab-btn .tab-icon {
    font-size: 18px;
    pointer-events: none;
}

.phase-tab-btn .tab-text {
    pointer-events: none;
}

.phase-tab-btn:hover {
    background-color: #dee2e6;
    color: #495057;
}

.phase-tab-btn.active {
    background-color: white;
    color: #2c3e50;
    border-color: #dee2e6;
    border-bottom: 1px solid white;
    font-weight: 600;
    z-index: 3;
    position: relative;
    margin-bottom: -1px;
}

.phase-tab-content {
    background-color: white;
    padding: 15px;
    border-radius: 0 0 6px 6px;
    border: 1px solid #dee2e6;
    position: relative;
}

.phase-tab-panel {
    display: none;
}

.phase-tab-panel.active {
    display: block;
}

.phase-status-info {
    margin-bottom: 12px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border-left: 4px solid #6c757d;
}

.phase-status-info.phase-exists {
    background-color: #d1ecf1;
    border-left-color: #17a2b8;
}

.phase-status-info.phase-active {
    background-color: #d4edda;
    border-left-color: #28a745;
}

.phase-status-info.phase-stopped {
    background-color: #f8d7da;
    border-left-color: #dc3545;
}

.status-text {
    margin: 0;
    font-size: 12px;
    color: #495057;
    line-height: 1.4;
}

.btn-start-phase,
.btn-view-phase,
.btn-stop-phase,
.btn-delete-phase {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-start-phase {
    background-color: #28a745;
    color: white;
}

.btn-start-phase:hover {
    background-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-view-phase {
    background-color: #17a2b8;
    color: white;
}

.btn-view-phase:hover {
    background-color: #138496;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.btn-stop-phase {
    background-color: #28a745 !important;
    color: white !important;
    border: none !important;
    width: 100% !important;
}

.btn-stop-phase:hover {
    background-color: #218838 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

/* Specific override for calisma modal button */
#completeCalismaBtn {
    background-color: #28a745 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    width: auto !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s !important;
}

#completeCalismaBtn:hover {
    background-color: #218838 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3) !important;
}

.btn-delete-phase {
    background-color: #dc3545;
    color: white;
}

.btn-delete-phase:hover {
    background-color: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Inline Phase Forms */
.phase-not-started {
    padding: 10px 0;
}

.phase-form-container {
    padding: 10px 0;
}

.phase-form-group {
    margin-bottom: 12px;
}

.phase-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
}

.phase-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s;
}

.phase-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.phase-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Actions Sections */
.actions-section {
    margin-top: 15px;
    padding: 12px;
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 5px;
}

.actions-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f8f9fa;
}

.actions-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    padding: 0;
    border: none;
}

.btn-add-action {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-add-action:hover {
    background-color: #218838;
}

.actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.actions-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

.actions-table thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.actions-table th {
    padding: 8px 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

.actions-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s;
}

.actions-table tbody tr:last-child {
    border-bottom: none;
}

.action-row:hover {
    background-color: #f8f9fa;
}

.action-datetime-cell {
    padding: 10px;
    font-size: 12px;
    vertical-align: top;
}

.action-datetime-cell strong {
    color: #2c3e50;
    display: block;
    margin-bottom: 2px;
}

.action-description-cell {
    padding: 10px;
    font-size: 12px;
    color: #495057;
    line-height: 1.5;
    cursor: pointer;
}

.action-checkbox-cell {
    padding: 10px;
    font-size: 12px;
    vertical-align: middle;
}

.action-item {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    transition: box-shadow 0.2s;
}

.action-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.action-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #495057;
}

.action-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.action-checkbox.completed {
    color: #28a745;
    font-weight: 600;
}

.btn-delete-action {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.btn-delete-action:hover {
    background-color: #c82333;
}

.action-description-display {
    margin-top: 8px;
    padding: 8px;
    background-color: white;
    border-radius: 3px;
    font-size: 12px;
    color: #495057;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Payment Periods Section */
.payment-periods-section {
    margin-top: 20px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.payment-periods-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f8f9fa;
}

.payment-periods-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.payment-periods-table-wrapper {
    overflow-x: auto;
    margin-bottom: 15px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.payment-periods-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    font-size: 12px;
}

.payment-periods-table thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.payment-periods-table th {
    padding: 10px 8px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}

.payment-periods-table tbody tr {
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s, transform 0.1s;
    cursor: pointer;
}

.payment-periods-table tbody tr:last-child {
    border-bottom: none;
}

.payment-periods-table tbody tr:hover {
    background-color: #e7f3ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.payment-periods-table tbody tr.payment-received {
    background-color: #d4edda !important;
}

.payment-periods-table tbody tr.payment-received:hover {
    background-color: #b8e0c3 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.payment-periods-table td {
    padding: 8px;
    vertical-align: middle;
}

.payment-periods-table input[type="text"],
.payment-periods-table input[type="number"],
.payment-periods-table input[type="date"],
.payment-periods-table select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 12px;
    box-sizing: border-box;
}

.payment-periods-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.payment-dates-inputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.payment-dates-inputs input {
    width: 100%;
}

.payment-dates-inputs label {
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 2px;
}

.btn-delete-payment {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.2s, transform 0.1s;
    position: relative;
    z-index: 1;
}

.btn-delete-payment:hover {
    background-color: #c82333;
    transform: scale(1.05);
}

.btn-edit-payment {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.2s, transform 0.1s;
    margin-right: 4px;
    position: relative;
    z-index: 1;
}

.btn-edit-payment:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Checkbox label styling for modal */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 0;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-label span {
    font-size: 13px;
    color: #495057;
    user-select: none;
}

/* Payment received group - side by side layout */
.payment-received-group {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.payment-checkbox-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: 60px;
}

.tahsilat-date-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tahsilat-date-wrapper label {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
}

.tahsilat-date-wrapper input[type="date"] {
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
}

.tahsilat-date-wrapper input[type="date"]:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.tahsilat-date-wrapper input[type="date"]:enabled {
    background-color: #fff;
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
}

/* Currency Rate Info */
.currency-rate-info {
    display: flex;
    gap: 30px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    margin-bottom: 20px;
    color: white;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rate-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rate-label {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
}

.rate-value {
    font-size: 14px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 4px;
}

/* Tahsilat Statistics Section */
.tahsilat-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
    padding: 0;
}

.tahsilat-stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tahsilat-stat-card:nth-child(1) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tahsilat-stat-card:nth-child(2) {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.tahsilat-stat-card:nth-child(3) {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

.tahsilat-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.tahsilat-stat-card .stat-icon {
    font-size: 36px;
    opacity: 0.9;
}

.tahsilat-stat-card .stat-content {
    flex: 1;
}

.tahsilat-stat-card .stat-number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.tahsilat-stat-card .stat-label {
    font-size: 12px;
    opacity: 0.95;
    font-weight: 500;
    line-height: 1.4;
}

/* Payment Summary Container */
.payment-summary-container {
    margin-top: 15px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.summary-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.summary-row:last-child {
    margin-bottom: 0;
}

.summary-row:nth-child(1) {
    grid-template-columns: repeat(2, 1fr);
}

.summary-row:nth-child(2) {
    grid-template-columns: repeat(3, 1fr);
}

.summary-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.summary-item label {
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-input {
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
}

.summary-input:read-only {
    background-color: #e9ecef;
    color: #495057;
}

.summary-input[id="kalanTutar"] {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #856404;
    font-weight: 600;
}

.summary-input[id="toplamTutar"],
.summary-input[id="anlasilanPlusKdv"] {
    background-color: #d1ecf1;
    border-color: #17a2b8;
    color: #0c5460;
    font-weight: 600;
}

/* Phase Management Cards */
.phase-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.phase-card {
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s;
}

.phase-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #007bff;
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
}

.phase-icon {
    font-size: 28px;
}

.phase-header h4 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    color: #2c3e50;
}

.phase-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    background-color: #e9ecef;
    color: #6c757d;
}

.phase-status.active {
    background-color: #d4edda;
    color: #155724;
}

.phase-status.stopped {
    background-color: #f8d7da;
    color: #721c24;
}

.phase-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-phase {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-phase.btn-start {
    background-color: #28a745;
    color: white;
}

.btn-phase.btn-start:hover {
    background-color: #218838;
}

.btn-phase.btn-view {
    background-color: #17a2b8;
    color: white;
}

.btn-phase.btn-view:hover {
    background-color: #138496;
}

.btn-phase.btn-stop {
    background-color: #dc3545;
    color: white;
}

.btn-phase.btn-stop:hover {
    background-color: #c82333;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.auto-save-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #28a745;
    font-size: 12px;
    font-weight: 500;
}

.action-modal-buttons {
    display: flex;
    gap: 10px;
}

.auto-save-indicator.saving {
    color: #ffc107;
}

.auto-save-indicator.error {
    color: #dc3545;
}

.save-status {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .navbar-top {
        flex-wrap: wrap;
    }
    
    .navbar-brand {
        flex: 1;
    }
    
    .navbar-actions {
        padding: 10px 30px;
    }
}

/* Medium widths: shrink horizontal nav so more items fit per row before wrapping */
@media (min-width: 993px) and (max-width: 1400px) {
    .nav-link {
        padding: 12px 14px;
        font-size: 14px;
    }
    .nav-link svg {
        width: 14px;
        height: 14px;
    }
}

/* Mobile: hamburger menu and compact top bar */
@media (max-width: 992px) {
    .navbar-toggle {
        display: flex;
    }

    /* Top bar: single row  [hamburger] [logo] [...spacer...] [dark] [user] [logout] */
    .navbar-top {
        flex-direction: row;
        align-items: center;
        padding: 0 12px;
        gap: 0;
    }
    .navbar-brand {
        padding: 10px 0;
        flex: 1;
        min-width: 0;
    }
    .navbar-brand-inner {
        gap: 8px;
    }
    .navbar-brand-inner img {
        height: 30px !important;
    }
    .navbar-brand h1 {
        font-size: 16px;
    }

    /* User info row: compact, no wrapping */
    .user-info {
        gap: 8px;
        padding: 0 4px 0 0;
        flex-shrink: 0;
    }
    .user-profile-photo {
        width: 28px !important;
        height: 28px !important;
        margin-right: 0 !important;
    }
    .user-info .user-email {
        font-size: 11px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .btn-logout {
        padding: 5px 8px;
        font-size: 0;
        gap: 0;
    }
    .btn-logout svg {
        width: 18px;
        height: 18px;
    }
    .dark-mode-toggle {
        padding: 6px 8px;
        margin-left: 0;
        margin-right: 4px;
        font-size: 16px;
    }

    /* Slide-in menu drawer */
    .navbar-menu-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: min(300px, 82vw);
        height: 100vh;
        background: #2c3e50;
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
    }
    .navbar.open .navbar-menu-wrapper {
        transform: translateX(0);
    }
    .navbar-backdrop {
        display: block;
        pointer-events: none;
    }
    .navbar.open .navbar-backdrop {
        pointer-events: auto;
    }
    .navbar-menu {
        flex-direction: column;
        padding: 16px 0 20px 0;
        background: transparent;
    }
    .navbar-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .nav-link {
        padding: 14px 24px;
        font-size: 15px;
    }
    .dropdown-content {
        position: static;
        display: none;
        min-width: 100%;
        background: #1a252f;
        box-shadow: none;
        border-radius: 0;
        padding-left: 16px;
        border-left: 3px solid #3498db;
        margin-bottom: 4px;
    }
    .navbar.open .dropdown.open .dropdown-content,
    .dropdown.open-mobile .dropdown-content {
        display: block;
    }
    .dropdown > .nav-link::after {
        content: '';
        display: inline-block;
        margin-left: 8px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid rgba(255, 255, 255, 0.7);
        vertical-align: middle;
        transition: transform 0.2s;
    }
    .dropdown.open-mobile > .nav-link::after {
        transform: rotate(180deg);
    }
    .dropdown-content a {
        padding: 10px 20px;
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
}

@media (max-width: 768px) {
    .navbar-actions {
        justify-content: center;
        padding: 12px 20px;
        border-top: 1px solid #34495e;
    }
    
    .navbar-btn {
        padding: 8px 14px;
    }
    
    .navbar-btn .btn-text {
        display: none;
    }
    
    .navbar-btn .btn-icon {
        font-size: 20px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        width: 95%;
        margin: 5% auto;
    }
    
    .modal-body.modal-split {
        flex-direction: column;
    }
    
    .modal-left-panel {
        width: 100%;
        border-right: none;
        border-bottom: 2px solid #dee2e6;
    }
    
    .modal-right-panel {
        padding: 20px;
    }
    
    table {
        font-size: 12px;
    }
    
    th, td {
        padding: 8px;
    }

    /* Extra-small: hide email, keep only avatar + logout */
    .user-info .user-email {
        display: none;
    }
}

/* Notification styles */
.notification {
    position: fixed;
    top: -100px;
    right: 20px;
    background-color: #28a745;
    color: white;
    padding: 15px 25px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    transition: top 0.3s ease;
}

.notification.show {
    top: 20px;
}

.notification-error {
    background-color: #dc3545;
}

.notification-warning {
    background-color: #ffc107;
    color: #333;
}


/* Team Board - Kanban Style */
/* Stats row: shrink tracks before wrapping (auto-fit + low min + min-width 0 on items) */
.team-board-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr));
    gap: 10px 12px;
    margin-bottom: 20px;
}

.team-board-stats-grid > .stat-card {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 15px 20px;
}

/* Explicit classes — matches legacy inline stats (bold numerals, clear hierarchy) */
.team-board-stats-grid .team-board-stat-value {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
    color: inherit;
}

.team-board-stats-grid .team-board-stat-label {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.9;
    color: inherit;
}

.team-board-stats-grid .team-board-stat-card-total .team-board-stat-label {
    font-size: 13px;
}

.team-board-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.team-columns {
    display: flex;
    gap: 20px;
    min-height: 500px;
    padding-bottom: 20px;
}

.team-column {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #dee2e6;
}

.team-column-header {
    background: #495057;
    color: white;
    padding: 15px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    border-radius: 6px 6px 0 0;
}

.team-cards-container {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 200px;
}

.team-card {
    background: white;
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.team-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

.team-card:hover .team-card-rank-buttons {
    display: flex;
}

.team-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.team-card-content {
    padding: 12px;
}

.team-card-row {
    display: flex;
    align-items: stretch;
    min-height: 50px;
}

.team-card-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    padding: 8px;
    text-align: center;
    word-wrap: break-word;
}

.team-card-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 4px 0;
}

.team-card-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 8px;
    text-align: center;
    word-wrap: break-word;
}

.team-card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -12px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 0 0 6px 6px;
}

.badge-icon {
    font-size: 14px;
}

.team-card-rank-buttons {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.rank-btn {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #333;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.rank-btn:hover {
    background: #333;
    color: white;
    transform: scale(1.1);
}

.rank-btn:active {
    transform: scale(0.95);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* File View Toggle Buttons */
.view-toggle-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    border-radius: 3px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-toggle-btn:hover {
    background: #e0e0e0;
    color: #333;
}

.view-toggle-btn.active {
    background: white;
    color: #007bff;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Folder View Styles */
.file-folder {
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: white;
}

.folder-header {
    background: #f8f9fa;
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.2s;
}

.folder-header:hover {
    background: #e9ecef;
}

.folder-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.folder-icon {
    font-size: 18px;
    transition: transform 0.2s;
}

.folder-header.collapsed .folder-icon {
    transform: rotate(-90deg);
}

.folder-name {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.folder-count {
    background: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.folder-files {
    padding: 0;
    max-height: 500px;
    overflow-y: auto;
    transition: max-height 0.3s ease-out;
}

.folder-files.collapsed {
    max-height: 0;
    overflow: hidden;
}

.folder-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.folder-file-item:last-child {
    border-bottom: none;
}

.folder-file-item:hover {
    background: #f8f9fa;
}

.folder-file-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.folder-file-name {
    flex: 1;
    min-width: 0;
}

.folder-file-name a {
    color: #007bff;
    text-decoration: none;
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-file-name a:hover {
    text-decoration: underline;
}

.folder-file-size {
    color: #6c757d;
    font-size: 12px;
    white-space: nowrap;
    margin-left: 10px;
}

.folder-file-actions {
    display: flex;
    gap: 5px;
}


/* ============================================================================
   FILE BROWSER - 3 Column Layout (File Management Page)
   ============================================================================ */

/* Main 3-Column Container */
.file-browser-layout {
    display: flex;
    height: calc(100vh - 140px);
    gap: 0;
    background: #f5f5f5;
    overflow: hidden;
}

/* Left Panel - Projects/Folders */
.file-browser-left {
    width: 280px;
    background: #263238;
    color: #eceff1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1c2529;
    flex-shrink: 0;
}

/* Middle Panel - Files List */
.file-browser-middle {
    flex: 1;
    background: white;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid #e0e0e0;
}

/* Right Panel - Preview */
.file-browser-right {
    width: 350px;
    background: white;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.file-browser-right.hidden {
    display: none;
}

/* Panel Headers */
.file-browser-panel-header {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: #1c2529;
}

.file-browser-middle .file-browser-panel-header,
.file-browser-right .file-browser-panel-header {
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
}

.file-browser-panel-header h3 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #b0bec5;
    letter-spacing: 0.5px;
}

.file-browser-middle .file-browser-panel-header h3,
.file-browser-right .file-browser-panel-header h3 {
    color: #666;
}

/* Search Input */
.file-search-input {
    width: 100%;
    padding: 8px 10px;
    background: #37474f;
    border: 1px solid #455a64;
    border-radius: 4px;
    color: white;
    font-size: 12px;
}

.file-search-input::placeholder {
    color: #90a4ae;
}

.file-search-input:focus {
    outline: none;
    border-color: #607d8b;
    background: #455a64;
}

/* Breadcrumb */
.file-breadcrumb {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.file-count-badge {
    font-size: 12px;
    color: #999;
}

/* Folders List */
.file-browser-folders {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.file-folder-item {
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    transition: all 0.2s;
}

.file-folder-item:hover {
    background: #37474f;
}

.file-folder-item.active {
    background: #455a64;
    border-left: 3px solid #2196f3;
}

.file-folder-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.file-folder-info {
    flex: 1;
    min-width: 0;
}

.file-folder-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #eceff1;
}

.file-folder-subtitle {
    font-size: 11px;
    color: #90a4ae;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-folder-badge {
    background: #2196f3;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Files List */
.file-browser-files {
    flex: 1;
    overflow-y: auto;
}

.file-list-item {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.file-list-item:hover {
    background: #f5f9ff;
}

.file-list-item.selected {
    background: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.file-list-icon {
    font-size: 28px;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.file-list-details {
    flex: 1;
    min-width: 0;
}

.file-list-name {
    font-weight: 500;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.file-list-meta {
    font-size: 12px;
    color: #999;
}

/* Preview Panel */
.file-browser-preview {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.file-preview-image {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    background: #f8f8f8;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.file-preview-icon {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 80px;
    border: 1px solid #e0e0e0;
}

.file-preview-filename {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.file-preview-filetype {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

.file-preview-detail {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.file-preview-detail-label {
    color: #666;
}

.file-preview-detail-value {
    color: #333;
    font-weight: 500;
}

/* Preview Actions */
.file-browser-actions {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Empty States */
.file-browser-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    padding: 40px 20px;
    text-align: center;
}

/* Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #37474f;
    border-top: 3px solid #2196f3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Scrollbar Styling for Dark Panel */
.file-browser-folders::-webkit-scrollbar {
    width: 8px;
}

.file-browser-folders::-webkit-scrollbar-track {
    background: #1c2529;
}

.file-browser-folders::-webkit-scrollbar-thumb {
    background: #455a64;
    border-radius: 4px;
}

.file-browser-folders::-webkit-scrollbar-thumb:hover {
    background: #607d8b;
}

/* Scrollbar Styling for Light Panels */
.file-browser-files::-webkit-scrollbar,
.file-browser-preview::-webkit-scrollbar {
    width: 8px;
}

.file-browser-files::-webkit-scrollbar-track,
.file-browser-preview::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.file-browser-files::-webkit-scrollbar-thumb,
.file-browser-preview::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.file-browser-files::-webkit-scrollbar-thumb:hover,
.file-browser-preview::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* File Category Headers (for organized file display) */
.file-category-header {
    padding: 10px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    position: sticky;
    top: 0;
    z-index: 1;
}

.file-category-icon {
    font-size: 16px;
}

.file-category-name {
    flex: 1;
}

.file-category-count {
    background: #dee2e6;
    color: #495057;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* 4-Column Layout - Add Folders Column */
.file-browser-folders-col {
    width: 240px;
    background: #37474f;
    color: #eceff1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #2c3942;
    flex-shrink: 0;
}

.file-browser-folders-col .file-browser-panel-header {
    background: #2c3942;
    border-bottom: 1px solid #455a64;
}

.file-browser-folders-col .file-browser-folders {
    background: #37474f;
}

/* Category items in folders column */
.category-folder-item {
    padding: 12px 15px;
    margin-bottom: 2px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.category-folder-item:hover {
    background: #455a64;
}

.category-folder-item.active {
    background: #546e7a;
    border-left: 3px solid #4caf50;
}

.category-folder-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.category-folder-details {
    flex: 1;
    min-width: 0;
}

.category-folder-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #eceff1;
    font-size: 13px;
}

.category-folder-subtitle {
    font-size: 11px;
    color: #b0bec5;
    margin-top: 2px;
}

.category-folder-badge {
    background: #4caf50;
    color: white;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* File Management Page - Fullscreen Layout */
#file-managementPage {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

#file-managementPage .file-browser-layout {
    /* Full height minus the navbar (live-measured by navigation.js into
       --navbar-h) and minus our new hub strip at the top. */
    height: calc(100vh - var(--navbar-h, 120px) - var(--fm-hub-h, 0px) - 28px);
    margin: 0;
}

/* Override container padding for file management page */
.container:has(#file-managementPage.active) {
    padding: 0 !important;
    max-width: none !important;
}

/* Alternative if :has() not supported - direct styling.
   Uses live --navbar-h so the page always sits flush under the (possibly
   wrapped, multi-row) navbar instead of the old hardcoded 120px. */
#file-managementPage.active {
    position: fixed;
    top: var(--navbar-h, 120px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* Light page bg matching the rest of the ERP. Stat tiles + frame sit
       on this soft gray and feel like one continuous surface. */
    background: #f1f5f9;
    overflow-y: auto;
}

/* Enhanced project folder display */
.file-folder-item {
    padding: 12px !important;
    gap: 10px !important;
}

.file-folder-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 4px;
}

.file-folder-subtitle {
    font-size: 12px !important;
    color: #b0bec5 !important;
    margin-bottom: 3px;
}

.file-folder-desc {
    font-size: 11px;
    color: #78909c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* Category folder subtitle (for date/time) */
.category-folder-subtitle {
    font-size: 11px;
    color: #b0bec5;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drag and Drop File Upload Zone */
.file-drop-zone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    background: #fafafa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-drop-zone:hover {
    border-color: #2196f3;
    background: #f0f8ff;
}

.file-drop-zone.drag-over {
    border-color: #4caf50;
    background: #e8f5e9;
    transform: scale(1.02);
}

.file-drop-icon {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.6;
}

.file-drop-text {
    font-size: 15px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
}

.file-drop-or {
    font-size: 13px;
    color: #999;
    margin: 12px 0;
}

.btn-small {
    padding: 8px 16px !important;
    font-size: 13px !important;
}

/* Icon button for delete in action tables */
.btn-icon-danger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-icon-danger:hover {
    background-color: #fee;
    transform: scale(1.1);
}

/* Large modal for action forms */
.modal-content.large {
    max-width: 1100px;
    max-height: 85vh;
}

/* Gizlilik Badge in Project Table */
.gizlilik-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    white-space: nowrap;
}

/* AI Confidential Project Toggle */
.ai-confidential-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bff;
}

.ai-confidential-header h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.ai-confidential-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.45;
    transition: opacity 0.2s;
}

.ai-confidential-toggle.is-active {
    opacity: 1;
}

/* RBAC read-only project form: lock data entry for users without projects.edit.
   Native controls also receive `disabled` from JS (modal.js); these rules cover
   the searchable-select custom widgets — which hide their native <select> and so
   ignore `disabled` — and give a clear "not editable" cue. */
#projectForm.rbac-readonly .searchable-select-wrapper {
    pointer-events: none;
    opacity: 0.7;
}
#projectForm.rbac-readonly input:disabled,
#projectForm.rbac-readonly select:disabled,
#projectForm.rbac-readonly textarea:disabled {
    cursor: not-allowed;
    background-color: #f1f3f5;
}
.ai-confidential-toggle.is-readonly {
    pointer-events: none;
}

.ai-confidential-text {
    display: flex;
    flex-direction: column;
}

.ai-confidential-title {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.ai-confidential-sub {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.3;
}

/* Classic iOS-style toggle switch */
.ai-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.ai-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ai-switch-track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.25s;
    border-radius: 20px;
}

.ai-switch-track:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.25s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.ai-switch input:checked + .ai-switch-track {
    background-color: #ef4444;
}

.ai-switch input:checked + .ai-switch-track:before {
    transform: translateX(16px);
}

/* ============================================================================
   AI Chat Page Styles
   ============================================================================ */

#ai-chatPage {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

#ai-chatPage.active {
    position: fixed;
    top: var(--navbar-h, 120px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #f5f5f5;
}

.ai-chat-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Sidebar */
.ai-chat-sidebar {
    width: 280px;
    min-width: 280px;
    background: #1e293b;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #334155;
}

.ai-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #334155;
}

.ai-sidebar-header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #f1f5f9;
}

.ai-new-chat-btn {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-new-chat-btn:hover {
    background: #2563eb;
}

.ai-session-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.ai-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 2px;
}

.ai-session-item:hover {
    background: #334155;
}

.ai-session-item.active {
    background: #334155;
    border-left: 3px solid #3b82f6;
}

.ai-session-info {
    flex: 1;
    min-width: 0;
}

.ai-session-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e2e8f0;
}

.ai-session-date {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.ai-session-delete {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s;
}

.ai-session-item:hover .ai-session-delete {
    opacity: 1;
}

.ai-session-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.ai-no-sessions {
    text-align: center;
    color: #64748b;
    font-size: 13px;
    padding: 30px 15px;
}

/* Main Chat Area */
.ai-chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
}

.ai-chat-header {
    padding: 14px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-model-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ai-model-selector label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.ai-model-select {
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    color: #334155;
    background: #f8fafc;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.ai-model-select:hover {
    border-color: #94a3b8;
}

.ai-model-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Reasoning effort selector — visible only when a reasoning model is selected */
.ai-reasoning-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ai-reasoning-selector[hidden] {
    display: none;
}

.ai-reasoning-selector label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.ai-reasoning-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    cursor: help;
    border-radius: 50%;
    outline: none;
}

.ai-reasoning-info:hover,
.ai-reasoning-info:focus {
    color: #3b82f6;
}

.ai-reasoning-info-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: 320px;
    max-width: 90vw;
    padding: 12px 14px;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s linear;
    pointer-events: none;
}

.ai-reasoning-info-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #1e293b;
    transform: rotate(45deg);
}

.ai-reasoning-info:hover .ai-reasoning-info-tooltip,
.ai-reasoning-info:focus .ai-reasoning-info-tooltip,
.ai-reasoning-info:focus-within .ai-reasoning-info-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.ai-reasoning-info-tooltip strong {
    color: #f1f5f9;
    font-weight: 600;
}

.ai-reasoning-info-tooltip em {
    color: #cbd5e1;
    font-style: normal;
    font-size: 11px;
}

.ai-chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ai-chat-header-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.ai-chat-header-sub {
    font-size: 12px;
    color: #64748b;
}

/* Messages */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: aiFadeIn 0.2s ease-out;
}

.ai-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-message.assistant {
    align-self: flex-start;
}

@keyframes aiFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: #f1f5f9;
}

.ai-msg-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ai-message.user .ai-msg-avatar {
    background: #3b82f6;
    color: white;
    font-size: 14px;
}

.ai-msg-body {
    flex: 1;
    min-width: 0;
}

.ai-msg-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-message.user .ai-msg-label {
    text-align: right;
}

.ai-msg-content {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
}

.ai-message.user .ai-msg-content {
    background: #3b82f6;
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-message.assistant .ai-msg-content {
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 4px;
}

.ai-msg-content h1,
.ai-msg-content h2,
.ai-msg-content h3,
.ai-msg-content h4,
.ai-msg-content h5,
.ai-msg-content h6 {
    margin: 12px 0 6px 0;
    color: #1e293b;
    line-height: 1.35;
}

.ai-msg-content h1 { font-size: 18px; }
.ai-msg-content h2 { font-size: 16px; }
.ai-msg-content h3 { font-size: 15px; }
.ai-msg-content h4 { font-size: 14px; }
.ai-msg-content h5,
.ai-msg-content h6 { font-size: 13px; }

.ai-msg-content > *:first-child { margin-top: 0; }
.ai-msg-content > *:last-child { margin-bottom: 0; }

.ai-msg-content p {
    margin: 8px 0;
}

.ai-msg-content ul,
.ai-msg-content ol {
    margin: 8px 0;
    padding-left: 22px;
}

.ai-msg-content li {
    margin-bottom: 4px;
}

.ai-msg-content li > p {
    margin: 0;
}

.ai-msg-content strong {
    font-weight: 600;
}

.ai-msg-content blockquote {
    margin: 8px 0;
    padding: 6px 12px;
    border-left: 3px solid #cbd5e1;
    color: #475569;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 0 6px 6px 0;
}

.ai-msg-content blockquote p {
    margin: 4px 0;
}

.ai-msg-content hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 12px 0;
}

.ai-msg-content a {
    color: #2563eb;
    text-decoration: underline;
}

.ai-msg-content a:hover {
    color: #1d4ed8;
}

.ai-msg-content code,
.ai-msg-content code.ai-inline-code {
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Consolas', 'Monaco', monospace;
}

.ai-msg-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 12px 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 13px;
}

.ai-msg-content pre code {
    color: #e2e8f0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: 'Consolas', 'Monaco', monospace;
}

.ai-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 8px 0;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.ai-msg-content table,
.ai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ai-table-wrap table {
    margin: 0;
    border: 0;
}

.ai-msg-content th,
.ai-msg-content td,
.ai-table td,
.ai-table th {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}

.ai-msg-content thead th,
.ai-msg-content thead td,
.ai-table thead th,
.ai-table thead td,
.ai-table tr:first-child td {
    background: #f1f5f9;
    font-weight: 600;
}

/* Typing indicator */
.ai-typing-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 0 0 0;
}

.ai-typing-indicator span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    animation: aiTypingBounce 1.4s infinite ease-in-out both;
}

.ai-typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.ai-typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes aiTypingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Progress strip — shown above the assistant answer while tools run */
.ai-progress-strip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(148, 163, 184, 0.08);
    border-left: 2px solid #cbd5e1;
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    color: #475569;
    transition: opacity 0.4s ease;
}

.ai-progress-strip-dimmed {
    opacity: 0.55;
}

.ai-progress-line {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
    animation: aiProgressFadeIn 0.25s ease-out;
}

.ai-progress-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}

.ai-progress-text {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-progress-tool-label {
    font-weight: 600;
    color: #334155;
}

.ai-progress-tool-status {
    color: #64748b;
    font-size: 11px;
}

.ai-progress-tool-done .ai-progress-icon {
    color: #16a34a;
}

.ai-progress-tool-done .ai-progress-tool-status {
    color: #16a34a;
}

.ai-progress-tool-error .ai-progress-icon,
.ai-progress-tool-error .ai-progress-tool-status,
.ai-progress-error {
    color: #dc2626;
}

.ai-progress-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid #cbd5e1;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: aiProgressSpin 0.8s linear infinite;
}

.ai-progress-stage-thinking .ai-progress-text,
.ai-progress-stage-writing .ai-progress-text {
    color: #1e293b;
    font-weight: 500;
}

.ai-progress-stage-rate_limit .ai-progress-text {
    color: #b45309;
}

@keyframes aiProgressSpin {
    to { transform: rotate(360deg); }
}

@keyframes aiProgressFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Token Usage Badge */
.ai-token-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 10px;
    background: rgba(100, 116, 139, 0.08);
    border-radius: 12px;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
    line-height: 1;
}

.ai-token-separator {
    color: #cbd5e1;
    font-size: 9px;
}

.ai-token-cost {
    color: #64748b;
    font-weight: 500;
}

.ai-token-model {
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.3px;
}

/* Session Token Display */
.ai-session-token-display {
    font-size: 11px;
    color: #94a3b8;
    padding: 4px 12px;
    background: rgba(100, 116, 139, 0.06);
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Shortcuts Button */
.ai-shortcuts-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.ai-shortcuts-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

/* Shortcuts Dropdown */
.ai-shortcuts-dropdown {
    position: absolute;
    bottom: 100%;
    left: 16px;
    right: 16px;
    max-height: 420px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 100;
    margin-bottom: 8px;
}

.ai-shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.ai-shortcuts-add-btn {
    background: none;
    border: 1px solid #e2e8f0;
    color: #64748b;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ai-shortcuts-add-btn:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.ai-shortcuts-list {
    padding: 6px;
}

.ai-shortcuts-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 20px;
}

.ai-shortcut-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    transition: background 0.12s;
}

.ai-shortcut-item:hover {
    background: #f8fafc;
}

.ai-shortcut-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
}

.ai-shortcut-emoji {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.ai-shortcut-text {
    flex: 1;
    min-width: 0;
}

.ai-shortcut-label {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-shortcut-prompt {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.ai-shortcut-actions {
    display: flex;
    gap: 2px;
    padding-right: 8px;
    opacity: 0;
    transition: opacity 0.12s;
}

.ai-shortcut-item:hover .ai-shortcut-actions {
    opacity: 1;
}

.ai-shortcut-actions button {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.ai-shortcut-actions button:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.ai-shortcut-actions button:last-child:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

/* Shortcut Add/Edit Form */
.ai-shortcut-form {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.ai-shortcut-form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.ai-shortcut-form-emoji {
    width: 44px;
    text-align: center;
    font-size: 18px;
    padding: 8px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    outline: none;
    flex-shrink: 0;
}

.ai-shortcut-form-emoji:focus {
    border-color: #3b82f6;
}

.ai-shortcut-form-label {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
}

.ai-shortcut-form-label:focus {
    border-color: #3b82f6;
}

.ai-shortcut-form-prompt {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.ai-shortcut-form-prompt:focus {
    border-color: #3b82f6;
}

.ai-shortcut-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.ai-shortcut-form-cancel {
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.12s;
}

.ai-shortcut-form-cancel:hover {
    background: #f8fafc;
}

.ai-shortcut-form-save {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}

.ai-shortcut-form-save:hover {
    background: #2563eb;
}

/* Input Area */
.ai-chat-input-area {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    position: relative;
}

.ai-chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 12px;
    transition: border-color 0.2s;
}

.ai-chat-input-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ai-chat-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    color: #1e293b;
    line-height: 1.5;
    max-height: 150px;
}

.ai-chat-input::placeholder {
    color: #94a3b8;
}

.ai-voice-btn {
    background: transparent;
    color: #64748b;
    border: none;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
}

.ai-voice-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.ai-voice-btn.recording {
    color: #ef4444;
    animation: ai-pulse-recording 1.2s ease-in-out infinite;
}

.ai-voice-btn.recording::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 8px;
    border: 2px solid #ef4444;
    animation: ai-ring-recording 1.2s ease-in-out infinite;
    pointer-events: none;
}

.ai-voice-btn.transcribing {
    color: #f59e0b;
    animation: ai-spin-transcribing 1s linear infinite;
}

@keyframes ai-pulse-recording {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes ai-ring-recording {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes ai-spin-transcribing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ai-chat-send-btn {
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.ai-chat-send-btn:hover {
    background: #2563eb;
}

.ai-tts-btn {
    background: transparent;
    color: #94a3b8;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.ai-tts-btn:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.ai-tts-btn.loading {
    color: #f59e0b;
    pointer-events: none;
    position: relative;
}

.ai-tts-btn.loading svg {
    animation: ai-spin-transcribing 1s linear infinite;
}

.ai-tts-btn.playing {
    color: #3b82f6;
    animation: ai-pulse-recording 1s ease-in-out infinite;
}

.ai-tts-cost {
    font-size: 10px;
    color: #94a3b8;
    margin-left: 2px;
    white-space: nowrap;
}

.ai-voice-mode-wrapper {
    position: relative;
    display: inline-flex;
}

.ai-voice-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;
}

.ai-voice-mode-badge:hover {
    background: rgba(59, 130, 246, 0.15);
}

.ai-voice-response-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
    cursor: help;
}

.ai-voice-prompt-popup {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    width: 340px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    line-height: 1.6;
    color: #334155;
}

.ai-voice-prompt-popup.visible {
    display: block;
}

.ai-voice-prompt-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ai-voice-prompt-content {
    white-space: pre-wrap;
    color: #475569;
}

/* Recording wave animation */
.ai-recording-wave {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    padding: 4px 0;
}

.ai-wave-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 28px;
}

.ai-wave-bars span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: #ef4444;
    animation: ai-wave-bar 0.8s ease-in-out infinite;
}

.ai-wave-bars span:nth-child(1) { height: 8px; animation-delay: 0s; }
.ai-wave-bars span:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.ai-wave-bars span:nth-child(3) { height: 24px; animation-delay: 0.15s; }
.ai-wave-bars span:nth-child(4) { height: 12px; animation-delay: 0.25s; }
.ai-wave-bars span:nth-child(5) { height: 20px; animation-delay: 0.3s; }
.ai-wave-bars span:nth-child(6) { height: 10px; animation-delay: 0.35s; }
.ai-wave-bars span:nth-child(7) { height: 22px; animation-delay: 0.4s; }
.ai-wave-bars span:nth-child(8) { height: 14px; animation-delay: 0.5s; }
.ai-wave-bars span:nth-child(9) { height: 18px; animation-delay: 0.55s; }
.ai-wave-bars span:nth-child(10) { height: 6px; animation-delay: 0.6s; }

@keyframes ai-wave-bar {
    0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
}

.ai-wave-label {
    font-size: 13px;
    color: #ef4444;
    font-weight: 500;
    white-space: nowrap;
}

/* Voice Settings Page */
.voice-settings-container {
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0;
}

.voice-settings-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
}

.voice-settings-card h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.voice-settings-desc {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: #64748b;
}

.voice-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.voice-option {
    cursor: pointer;
}

.voice-option input { display: none; }

.voice-option-inner {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    transition: all 0.15s;
}

.voice-option input:checked + .voice-option-inner {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.voice-option:hover .voice-option-inner {
    border-color: #94a3b8;
}

.voice-option-name {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 2px;
}

.voice-option-desc {
    font-size: 11px;
    color: #64748b;
}

.voice-preview-btn {
    font-size: 13px;
}

.voice-settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.voice-save-status {
    font-size: 13px;
    color: #22c55e;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
}

.voice-save-status.visible {
    opacity: 1;
}

.voice-model-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.voice-model-option {
    cursor: pointer;
}

.voice-model-option input { display: none; }

.voice-model-inner {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    transition: all 0.15s;
}

.voice-model-option input:checked + .voice-model-inner {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.voice-model-option:hover .voice-model-inner {
    border-color: #94a3b8;
}

.voice-model-name {
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 2px;
}

.voice-model-tag {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.voice-model-tag.hd {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
}

.voice-model-desc {
    font-size: 12px;
    color: #64748b;
}

.voice-speed-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.voice-speed-label {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.voice-speed-control input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e2e8f0;
    border-radius: 3px;
    outline: none;
}

.voice-speed-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.voice-speed-value {
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
    min-width: 36px;
    text-align: center;
}

@media (max-width: 600px) {
    .voice-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ai-chat-disclaimer {
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 8px;
}

/* Empty State */
.ai-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px 20px;
    text-align: center;
}

.ai-empty-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.ai-empty-state h3 {
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.ai-empty-state p {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px 0;
    max-width: 400px;
}

.ai-suggestions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 500px;
}

.ai-suggestion-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}

.ai-suggestion-btn:hover {
    background: #f1f5f9;
    border-color: #3b82f6;
    color: #1e293b;
}

/* AI sidebar toggle button - visible only on mobile */
.ai-sidebar-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.ai-sidebar-toggle:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.ai-sidebar-toggle svg {
    flex-shrink: 0;
}
.ai-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
}

/* Responsive: mobile AI chat */
@media (max-width: 992px) {
    .ai-sidebar-toggle {
        display: flex;
    }
    .ai-chat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(300px, 85vw);
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }
    .ai-chat-sidebar.open {
        transform: translateX(0);
    }
    .ai-chat-layout.has-sidebar-open .ai-sidebar-overlay {
        display: block;
    }
    .ai-chat-header {
        gap: 10px;
        padding: 10px 14px;
    }
    .ai-chat-header-info {
        flex: 1;
        min-width: 0;
    }
    .ai-chat-header-sub {
        display: block;
        font-size: 11px;
    }
    .ai-model-selector {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .ai-sidebar-toggle .ai-sidebar-toggle-label {
        display: none;
    }
    .ai-chat-header {
        flex-wrap: wrap;
    }
    .ai-chat-header-info {
        order: 1;
        flex: 1;
        min-width: 0;
    }
    .ai-sidebar-toggle {
        order: 0;
    }
    .ai-model-selector {
        order: 2;
        width: 100%;
    }
    .ai-chat-header-sub {
        display: none;
    }
    .ai-chat-header-info h3 {
        font-size: 14px;
    }
    .ai-chat-header-avatar {
        width: 32px;
        height: 32px;
    }
    .ai-suggestions {
        grid-template-columns: 1fr;
    }
    .ai-message {
        max-width: 95%;
    }
}

/* Use --navbar-h set by JS so full-height pages sit right below the navbar */
@media (max-width: 992px) {
    #ai-chatPage.active,
    #file-managementPage.active {
        top: var(--navbar-h, 52px);
    }
    #file-managementPage .file-browser-layout {
        height: calc(100vh - var(--navbar-h, 52px));
    }
}

/* ============================================================================
   AI Email Tasks Styles
   ============================================================================ */

.modal-content.ai-email-modal {
    max-width: 1280px;
    width: 94%;
}

/* Tabs */
.ai-email-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
}

.ai-email-tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-email-tab-btn:hover {
    color: #333;
    background: #f5f5f5;
}

.ai-email-tab-btn.active {
    color: #007bff;
    border-bottom-color: #007bff;
    font-weight: 600;
}

.ai-email-tab-panel {
    display: none;
}

.ai-email-tab-panel.active {
    display: block;
}

/* Filters */
.ai-email-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ai-email-filter-btn {
    padding: 6px 14px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
}

.ai-email-filter-btn:hover {
    background: #e0e0e0;
}

.ai-email-filter-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* Badges */
.ai-email-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ai-email-badge.schedule {
    background: #e8f0fe;
    color: #1a73e8;
}

.ai-email-badge.active {
    background: #e6f4ea;
    color: #137333;
}

.ai-email-badge.paused {
    background: #fce8e6;
    color: #c5221f;
}

.ai-email-badge.info {
    background: #e8f0fe;
    color: #1a73e8;
}

.ai-email-badge.success {
    background: #e6f4ea;
    color: #137333;
}

.ai-email-badge.warning {
    background: #fef7e0;
    color: #ea8600;
}

.ai-email-badge.danger {
    background: #fce8e6;
    color: #c5221f;
}

.ai-email-badge.sent {
    background: #f3e8fd;
    color: #7c3aed;
}

/* Action Buttons */
.ai-email-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    color: #555;
}

.ai-email-btn:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.ai-email-btn.generate {
    color: #007bff;
    border-color: #b3d4fc;
}

.ai-email-btn.generate:hover {
    background: #e8f0fe;
}

.ai-email-btn.approve {
    color: #137333;
    border-color: #b7e1cd;
}

.ai-email-btn.approve:hover {
    background: #e6f4ea;
}

.ai-email-btn.view {
    color: #555;
    border-color: #ccc;
}

.ai-email-btn.view:hover {
    background: #f0f0f0;
}

.ai-email-btn.delete {
    color: #c5221f;
    border-color: #f5c6c2;
}

.ai-email-btn.delete:hover {
    background: #fce8e6;
}

.ai-email-btn.schedule-btn {
    color: #8e44ad;
    border-color: #ddc4ec;
}

.ai-email-btn.schedule-btn:hover {
    background: #f3e9fa;
}

.ai-email-btn.schedule-btn.active {
    color: #fff;
    background: #8e44ad;
    border-color: #8e44ad;
}

.ai-email-child-row td {
    border-top: 1px dashed #e3e7eb;
}

/* Weekly day picker chips */
.ai-email-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #d4dae0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
    margin-bottom: 0;
    transition: background 0.12s, border-color 0.12s;
}

.ai-email-day-chip input {
    margin: 0;
}

.ai-email-day-chip:hover {
    border-color: #8e44ad;
}

.ai-email-day-chip:has(input:checked) {
    background: #f3e9fa;
    border-color: #8e44ad;
    color: #8e44ad;
    font-weight: 600;
}

.ai-email-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Draft editor toggle */
.draft-edit-toggle {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.draft-edit-toggle-btn {
    padding: 3px 12px;
    border: none;
    background: #f0f0f0;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: #666;
    transition: all 0.15s;
}

.draft-edit-toggle-btn + .draft-edit-toggle-btn {
    border-left: 1px solid #ddd;
}

.draft-edit-toggle-btn.active {
    background: #007bff;
    color: #fff;
}

/* Spinner */
.ai-email-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #ddd;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Multi-email recipient tags */
.email-recipients-wrapper {
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    padding: 6px;
    transition: border-color 0.15s;
}
.email-recipients-wrapper:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}
.email-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 2px;
}
.email-tags-container:empty {
    margin-bottom: 0;
}
.email-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e8f0fe;
    color: #1a53a0;
    border: 1px solid #b3d4fc;
    border-radius: 16px;
    padding: 3px 6px 3px 10px;
    font-size: 12.5px;
    line-height: 1.3;
    max-width: 260px;
    animation: emailTagIn 0.15s ease;
}
@keyframes emailTagIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.email-tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-tag-remove {
    background: none;
    border: none;
    color: #1a53a0;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 3px;
    border-radius: 50%;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
}
.email-tag-remove:hover {
    opacity: 1;
    background: rgba(26,83,160,0.1);
}
.email-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.email-input-row input[type="email"] {
    flex: 1;
    border: none;
    outline: none;
    padding: 6px 4px;
    font-size: 13px;
    background: transparent;
    min-width: 180px;
}
.btn-team-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #f8f9fa;
    color: #495057;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.btn-team-add:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}
.btn-team-add svg {
    flex-shrink: 0;
}
.team-dropdown-wrapper {
    position: relative;
}
.team-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 300px;
    max-height: 320px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1050;
    overflow: hidden;
}
.team-dropdown.show {
    display: block;
    animation: dropdownSlide 0.15s ease;
}
@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.team-dropdown-search {
    padding: 8px;
    border-bottom: 1px solid #eee;
}
.team-dropdown-search input {
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.team-dropdown-search input:focus {
    border-color: #007bff;
}
.team-dropdown-list {
    max-height: 260px;
    overflow-y: auto;
}
.team-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.team-dropdown-item:hover {
    background: #f0f5ff;
}
.team-dropdown-item.added {
    background: #e6f4ea;
}
.team-dropdown-item.added:hover {
    background: #fce8e6;
}
.team-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.team-item-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #6c757d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.team-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.team-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.team-item-email {
    font-size: 11.5px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.team-item-check {
    color: #137333;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

/* Dark mode: multi-email */
[data-theme="dark"] .email-recipients-wrapper {
    background: #1e1e1e;
    border-color: #444;
}
[data-theme="dark"] .email-recipients-wrapper:focus-within {
    border-color: #4dabf7;
    box-shadow: 0 0 0 2px rgba(77,171,247,0.15);
}
[data-theme="dark"] .email-tag {
    background: #1a3a5c;
    color: #90caf9;
    border-color: #2a5a8c;
}
[data-theme="dark"] .email-tag-remove {
    color: #90caf9;
}
[data-theme="dark"] .email-input-row input[type="email"] {
    color: #e0e0e0;
}
[data-theme="dark"] .btn-team-add {
    background: #2a2a2a;
    border-color: #444;
    color: #ccc;
}
[data-theme="dark"] .btn-team-add:hover {
    background: #333;
}
[data-theme="dark"] .team-dropdown {
    background: #2a2a2a;
    border-color: #444;
}
[data-theme="dark"] .team-dropdown-search {
    border-bottom-color: #444;
}
[data-theme="dark"] .team-dropdown-search input {
    background: #1e1e1e;
    border-color: #444;
    color: #e0e0e0;
}
[data-theme="dark"] .team-dropdown-item:hover {
    background: #333;
}
[data-theme="dark"] .team-dropdown-item.added {
    background: #1a3a2c;
}
[data-theme="dark"] .team-dropdown-item.added:hover {
    background: #3a1a1a;
}
[data-theme="dark"] .team-item-avatar-placeholder {
    background: #555;
}
[data-theme="dark"] .team-item-name {
    color: #e0e0e0;
}
[data-theme="dark"] .team-item-email {
    color: #999;
}

/* Email body: data tables only (not layout tables in branded shell — see wrapEmailBody .ai-email-body-content) */
#draftViewBody .ai-email-body-content table,
#draftEditVisual table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

#draftViewBody .ai-email-body-content th,
#draftViewBody .ai-email-body-content td,
#draftEditVisual th,
#draftEditVisual td {
    border: 1px solid #dee2e6;
    padding: 8px 10px;
    text-align: left;
}

#draftViewBody .ai-email-body-content th,
#draftEditVisual th {
    background: #495057;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
}

#draftViewBody .ai-email-body-content tr:nth-child(even),
#draftEditVisual tr:nth-child(even) {
    background: #f8f9fa;
}

#draftViewBody .ai-email-body-content tr:hover,
#draftEditVisual tr:hover {
    background: #e9ecef;
}

#draftViewBody .ai-email-body-content ul,
#draftViewBody .ai-email-body-content ol,
#draftEditVisual ul,
#draftEditVisual ol {
    margin: 8px 0;
    padding-left: 20px;
}

#draftViewBody .ai-email-body-content li,
#draftEditVisual li {
    margin-bottom: 4px;
}

#draftViewBody .ai-email-body-content p,
#draftEditVisual p {
    margin: 8px 0;
}

#draftViewBody .ai-email-body-content h3,
#draftEditVisual h3 {
    margin: 14px 0 8px 0;
    font-size: 15px;
}

/* Dark mode */
[data-theme="dark"] .ai-email-tab-btn {
    color: #999;
}

[data-theme="dark"] .ai-email-tab-btn.active {
    color: #4dabf7;
    border-bottom-color: #4dabf7;
}

[data-theme="dark"] .ai-email-tabs {
    border-bottom-color: #333;
}

[data-theme="dark"] .ai-email-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #ccc;
}

[data-theme="dark"] .ai-email-btn:hover {
    background: #333;
}

[data-theme="dark"] .ai-email-filter-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #ccc;
}

[data-theme="dark"] .ai-email-filter-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* Mobile new chat button (in header, hidden on desktop) */
.ai-new-chat-btn-mobile {
    display: none;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ai-new-chat-btn-mobile:hover {
    background: #2563eb;
}

@media (max-width: 992px) {
    .ai-new-chat-btn-mobile {
        display: flex;
    }
}

/* Email tasks responsive */
@media (max-width: 768px) {
    .ai-email-tabs {
        overflow-x: auto;
    }

    .ai-email-tab-btn {
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    #ai-email-tasksPage .container {
        padding: 12px;
    }

    #ai-email-tasksPage header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 16px;
    }

    #ai-email-tasksPage header h2 {
        font-size: 20px;
    }

    #aiEmailTemplatesTable,
    #aiEmailDraftsTable,
    #aiEmailHistoryTable {
        font-size: 13px;
    }

    #aiEmailTemplatesTable th,
    #aiEmailTemplatesTable td,
    #aiEmailDraftsTable th,
    #aiEmailDraftsTable td,
    #aiEmailHistoryTable th,
    #aiEmailHistoryTable td {
        padding: 8px 6px;
    }

    .ai-email-filters {
        gap: 6px;
    }

    .ai-email-filter-btn {
        padding: 5px 10px;
        font-size: 12px;
    }

    .modal-content.ai-email-modal {
        width: 96%;
        margin: 3% auto;
        max-height: 92vh;
    }

    #aiEmailTemplateModal .modal-body div[style*="display: flex; gap: 15px"] {
        flex-direction: column !important;
    }

    #aiEmailDraftModal #draftViewMode div[style*="display: flex; gap: 15px"] {
        flex-wrap: wrap;
    }

    #aiEmailDraftModal #draftViewMode div[style*="display: flex; gap: 15px"] > .form-group {
        flex: 1 1 45% !important;
        min-width: 120px;
    }

    #draftViewBody {
        max-height: 40vh !important;
    }

    #draftEditVisual {
        max-height: 40vh !important;
    }

    #draftEditCode {
        max-height: 40vh !important;
    }
}

@media (max-width: 480px) {
    #aiEmailTemplatesTable .prompt-col,
    #aiEmailTemplatesTable th:nth-child(3),
    #aiEmailTemplatesTable td:nth-child(3),
    #aiEmailTemplatesTable th:nth-child(6),
    #aiEmailTemplatesTable td:nth-child(6),
    #aiEmailTemplatesTable th:nth-child(7),
    #aiEmailTemplatesTable td:nth-child(7) {
        display: none;
    }

    #aiEmailDraftsTable th:nth-child(3),
    #aiEmailDraftsTable td:nth-child(3) {
        display: none;
    }

    #aiEmailHistoryTable th:nth-child(3),
    #aiEmailHistoryTable td:nth-child(3) {
        display: none;
    }

    .ai-email-badge {
        padding: 2px 6px;
        font-size: 10px;
    }

    .ai-email-btn {
        width: 26px;
        height: 26px;
    }

    .ai-email-btn svg {
        width: 12px;
        height: 12px;
    }

    #aiEmailDraftModal #draftViewMode div[style*="display: flex; gap: 15px"] > .form-group {
        flex: 1 1 100% !important;
    }
}

/* Email draft preview: HTML tables must not inherit pre-wrap (causes horizontal clipping) */
#aiEmailDraftModal #draftViewBody {
    white-space: normal;
    overflow-x: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================ */
/* HR (İnsan Kaynakları) MODULE                                  */
/* ============================================================ */

/* --- Toolbar (search + filters) --- */
.hr-toolbar {
    display: flex;
    gap: 12px;
    margin: 16px 0 20px;
    flex-wrap: wrap;
}
.hr-search-input {
    flex: 1 1 280px;
    min-width: 260px;
    padding: 10px 14px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
}
.hr-filter-select {
    padding: 10px 14px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    min-width: 180px;
}

/* --- Employee list table --- */
#hrActiveTable tbody tr.employee-row,
#hrArchivedTable tbody tr.employee-row {
    cursor: pointer;
    transition: background-color 0.12s ease;
}
#hrActiveTable tbody tr.employee-row:hover,
#hrArchivedTable tbody tr.employee-row:hover {
    background-color: #f8f9fa;
}
.employee-empty-row {
    text-align: center;
    color: #6c757d;
    padding: 40px 20px !important;
    font-size: 14px;
}
.employee-row-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #e9ecef;
    flex-shrink: 0;
}
.employee-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.employee-row-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.employee-row-action {
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    margin: 0 2px;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.employee-row-action:hover {
    background: #fff;
    border-color: #adb5bd;
}
.employee-row-action-danger:hover {
    color: #dc3545;
    border-color: #dc3545;
}

/* Yaka türü badge */
.yaka-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.yaka-badge-mavi {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.yaka-badge-beyaz {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}

/* --- Photo placeholder (used inside the employee modal photo uploader) --- */
.employee-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.employee-card-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 1px;
    border-radius: 50%;
}

/* --- Employee modal: section panes (split-panel layout) --- */
.employee-tab-pane { display: block; }

/* The form must stretch to fill modal-body.modal-split and host both panels */
.employee-form-split {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
}
.employee-left-panel {
    width: 55%;
}
.employee-right-panel {
    width: 45%;
}

/* On narrow screens, stack left/right vertically */
@media (max-width: 900px) {
    .employee-form-split {
        flex-direction: column;
        height: auto;
    }
    .employee-left-panel,
    .employee-right-panel {
        width: 100%;
        border-right: 0;
        border-bottom: 2px solid #dee2e6;
        height: auto;
    }
}

/* --- Employee modal: photo + name top row --- */
.employee-photo-row {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}
.employee-photo-uploader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.employee-photo-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #e9ecef;
    border: 2px solid #dee2e6;
}
.employee-photo-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.employee-photo-side .form-group { margin-bottom: 0; }

/* --- Employee modal: section title --- */
.employee-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e9ecef;
}

/* --- Employee modal: form grid --- */
#employeeModal .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
}
#employeeModal .form-grid .form-group { margin-bottom: 0; }
#employeeModal .form-grid .form-group-wide { grid-column: 1 / -1; }
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 24px;
}
.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* --- Btn small variant --- */
.btn-sm {
    padding: 6px 12px !important;
    font-size: 12px !important;
}

/* --- Documents tab --- */
.employee-doc-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.employee-doc-group {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 14px;
}
.employee-doc-group-title {
    font-size: 13px;
    font-weight: 700;
    color: #495057;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.employee-doc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 6px;
}
.employee-doc-row:last-child { margin-bottom: 0; }
.employee-doc-info { flex: 1; min-width: 0; }
.employee-doc-name {
    font-size: 13.5px;
    font-weight: 500;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.employee-doc-meta {
    font-size: 11.5px;
    color: #6c757d;
    margin-top: 2px;
}
.employee-doc-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* --- HR Settings page --- */
.hr-settings-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.hr-settings-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.hr-settings-section-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #212529;
}
.hr-inactive-badge {
    display: inline-block;
    padding: 1px 8px;
    background: #dee2e6;
    color: #495057;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 6px;
}

/* ============================================================================
   GÖREV TANIMI MODAL — rich-text job definition editor + version history
   ============================================================================ */
.gorev-tanimi-btn {
    min-width: 76px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
}
.gorev-tanimi-empty {
    background: #fff !important;
    color: #868e96 !important;
    border: 1px dashed #ced4da !important;
    font-style: italic;
}
.gorev-tanimi-empty:hover {
    background: #f8f9fa !important;
    color: #495057 !important;
    border-color: #adb5bd !important;
}
.gorev-tanimi-filled {
    background: #e7f5ff !important;
    color: #1971c2 !important;
    border: 1px solid #a5d8ff !important;
}
.gorev-tanimi-filled:hover {
    background: #d0ebff !important;
    border-color: #74c0fc !important;
}
.gorev-tanimi-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 16px;
}
.gorev-tanimi-tab {
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: #495057;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.gorev-tanimi-tab:hover {
    color: #1971c2;
}
.gorev-tanimi-tab.active {
    color: #1971c2;
    border-bottom-color: #1971c2;
}
.gorev-tanimi-pane {
    display: none;
}
.gorev-tanimi-pane.active {
    display: block;
}
.gorev-tanimi-meta {
    font-size: 12px;
    color: #6c757d;
    background: #f1f3f5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.gorev-tanimi-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #212529;
    margin-bottom: 6px;
}
.gorev-tanimi-textarea {
    width: 100%;
    min-height: 220px;
    padding: 12px 14px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    color: #212529;
    resize: vertical;
    box-sizing: border-box;
}
.gorev-tanimi-textarea:focus {
    outline: none;
    border-color: #1971c2;
    box-shadow: 0 0 0 3px rgba(25, 113, 194, 0.12);
}
.gorev-tanimi-hint {
    display: block;
    margin-top: 6px;
    color: #6c757d;
    font-size: 11px;
}
.gorev-tanimi-hint code {
    background: #f1f3f5;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}
.gorev-tanimi-preview-wrap {
    margin-top: 16px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fdfdfd;
}
.gorev-tanimi-preview-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    padding: 8px 12px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 6px 6px 0 0;
}
.gorev-tanimi-preview {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #212529;
    max-height: 260px;
    overflow-y: auto;
}
.gorev-tanimi-preview p {
    margin: 0 0 8px 0;
}
.gorev-tanimi-preview .gorev-tanimi-spacer {
    height: 8px;
}
.gorev-tanimi-bullets {
    margin: 4px 0 12px 0;
    padding-left: 22px;
}
.gorev-tanimi-bullets li {
    margin-bottom: 4px;
}
.gorev-tanimi-preview-readonly {
    max-height: none;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fdfdfd;
    margin-bottom: 16px;
}

.gorev-tanimi-history-empty {
    text-align: center;
    color: #6c757d;
    padding: 28px 12px;
    font-style: italic;
}
.gorev-tanimi-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 460px;
    overflow-y: auto;
}
.gorev-tanimi-history-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #fff;
}
.gorev-tanimi-history-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}
.gorev-tanimi-history-ver {
    background: #1971c2;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.gorev-tanimi-history-editor {
    color: #212529;
    font-weight: 500;
}
.gorev-tanimi-history-date {
    color: #6c757d;
    margin-left: auto;
}
.gorev-tanimi-history-snippet {
    color: #495057;
    font-size: 12px;
    line-height: 1.5;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    word-break: break-word;
}
.gorev-tanimi-history-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* ============================================================================
   ORG CHART (Organizasyon Şeması)
   ============================================================================ */
/* Org chart page header — packs title, search, toggle and actions in one row */
.org-chart-header {
    margin-top: 16px;
    margin-bottom: 12px;
    padding: 12px 18px;
    gap: 16px;
    flex-wrap: wrap;
}
.org-chart-header h2 {
    flex: 0 0 auto;
}
.org-chart-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 240px;
}
.org-chart-header-search {
    flex: 0 1 320px;
    min-width: 180px;
}
.org-chart-header-toggle {
    white-space: nowrap;
}
.org-chart-header-stats {
    margin-left: auto;
    color: #6c757d;
    font-size: 13px;
    white-space: nowrap;
}

.org-chart-container {
    position: relative;
    width: 100%;
    /* Height is set dynamically by hr-org-chart.js so the bottom edge tracks
       the viewport bottom regardless of the user's window size. The values
       below act as fallbacks before JS runs. */
    height: calc(100vh - 180px);
    min-height: 420px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.org-chart-svg-host {
    width: 100%;
    height: 100%;
}
.org-chart-svg-host svg {
    background: transparent !important;
}
/* Make connector lines more prominent */
.org-chart-svg-host svg path.link,
.org-chart-svg-host svg .link {
    stroke: #6c757d;
    stroke-width: 2.25px;
    fill: none;
}

.org-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    color: #6c757d;
}
.org-chart-empty p {
    margin: 8px 0;
    max-width: 480px;
    line-height: 1.5;
}

/* ---- Node slot (centers a fixed-width card in a possibly wider layout slot) ---- */
.org-node-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* ---- Node card ---- */
.org-node {
    width: 290px;
    height: 100%;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
}
.org-node:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
    transform: translateY(-1px);
    border-color: #adb5bd;
    cursor: pointer;
}
.org-node-match {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35) !important;
}

.org-node-virtual {
    background: linear-gradient(135deg, #e9ecef, #f8f9fa);
    border: 1px dashed #adb5bd;
    align-items: center;
    justify-content: center;
}
.org-node-title {
    font-weight: 600;
    font-size: 16px;
    color: #495057;
}

/* Department header — sits at the top of the node */
.org-node-dept {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 30px;
    padding: 4px 8px;
    background: #f1f3f5;
    border-radius: 6px;
}
.org-node-dept-name {
    font-weight: 700;
    font-size: 12px;
    color: #343a40;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.org-headcount-badge {
    background: #0d6efd;
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Member / leader rows (used for both the leader and each team member) */
.org-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.org-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 4px 6px;
    border-radius: 6px;
    background: #fafbfc;
    box-sizing: border-box;
    flex-shrink: 0;
}
.org-row-leader {
    background: #e7f1ff;
    border: 1px solid #cfe2ff;
}
.org-row-leader.org-row-vacant {
    background: #f8f9fa;
    border: 1px dashed #ced4da;
}
.org-row-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e9ecef;
}
.org-row-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6c757d;
    color: #fff;
    font-weight: 600;
    font-size: 11px;
}
.org-row-leader .org-row-photo-placeholder {
    background: #0d6efd;
}
.org-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}
.org-row-name {
    font-weight: 600;
    font-size: 13px;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.org-row-leader .org-row-name {
    font-size: 13.5px;
    color: #0a4cab;
}
.org-row-vacant .org-row-name {
    color: #adb5bd;
    font-style: italic;
    font-weight: 500;
}
.org-row-title {
    font-size: 11px;
    color: #6c757d;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.org-row-leader .org-row-title {
    color: #4a6fa5;
}

/* =====================================================================
   CEO Dashboard — Settings Page
   ===================================================================== */
.ceo-settings-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 4px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Hero card: derived quarterly target */
.ceo-derived-card {
    background: linear-gradient(135deg, #1f3a5f 0%, #2c5282 100%);
    color: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 4px 20px rgba(31, 58, 95, 0.25);
}
.ceo-derived-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 8px;
}
.ceo-derived-value {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.ceo-derived-formula {
    font-size: 14px;
    opacity: 0.85;
    font-family: 'Consolas', 'Monaco', monospace;
    margin-bottom: 14px;
}
.ceo-derived-hint {
    font-size: 13px;
    opacity: 0.78;
    line-height: 1.55;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-top: 14px;
    max-width: 720px;
}

/* Editable settings grid */
.ceo-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}
.ceo-setting-card {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ceo-setting-label {
    font-size: 15px;
    font-weight: 600;
    color: #1f3a5f;
}
.ceo-setting-desc {
    font-size: 12.5px;
    color: #5a6978;
    line-height: 1.5;
}
.ceo-setting-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.ceo-input-prefix,
.ceo-input-suffix {
    font-size: 16px;
    font-weight: 600;
    color: #5a6978;
    min-width: 18px;
    text-align: center;
}
.ceo-setting-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ceo-setting-input:focus {
    outline: none;
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.15);
}
.ceo-save-btn {
    white-space: nowrap;
    padding: 9px 16px;
    font-size: 13px;
}
.ceo-setting-meta {
    font-size: 11.5px;
    color: #8a96a3;
    margin-top: 4px;
}

/* Live summary */
.ceo-summary-card {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 22px 26px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.ceo-summary-card h3 {
    margin: 0 0 14px 0;
    font-size: 15px;
    color: #1f3a5f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ceo-summary-table {
    width: 100%;
    border-collapse: collapse;
}
.ceo-summary-table td {
    padding: 9px 0;
    border-bottom: 1px solid #eef1f4;
    font-size: 14px;
    color: #2c3e50;
}
.ceo-summary-table tr:last-child td {
    border-bottom: none;
}
.ceo-summary-table .ceo-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.ceo-summary-subtotal td {
    font-weight: 600;
    border-top: 2px solid #e3e6ea;
    padding-top: 12px;
}
.ceo-summary-total td {
    font-weight: 700;
    color: #1f3a5f;
    font-size: 15px;
    background: linear-gradient(90deg, rgba(44, 82, 130, 0.06), transparent);
    padding: 12px 8px;
    border-radius: 4px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .ceo-derived-value { font-size: 32px; }
    .ceo-derived-card { padding: 22px 20px; }
    .ceo-setting-card { padding: 16px 18px; }
}

/* =====================================================================
   CEO Paneli — Dashboard
   ===================================================================== */
.ceo-dash-wrap {
    /* Match the surrounding .container (1600px) so the dashboard cards
       span the same width as the page header rather than being visibly
       narrower. */
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px 4px 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Hero card */
.ceo-hero {
    background: linear-gradient(135deg, #1f3a5f 0%, #2c5282 100%);
    color: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 6px 24px rgba(31, 58, 95, 0.28);
}
/* Twin hero cards — calendar year + trailing 12 months side-by-side.
   Custom-manufacturing revenue is lumpy, so the trailing card gives the
   CEO a "are we behind or just early in the year?" reference in one
   glance. Same gradient as the yearly card (intentional — comparison is
   apples-to-apples), but its own subtle right-edge accent + the smaller
   value font keep both cards readable side-by-side on desktop. */
.ceo-hero-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.ceo-hero-row .ceo-hero { margin: 0; }
.ceo-hero-row .ceo-hero-value { font-size: 42px; }
.ceo-hero-trailing {
    /* Subtle right-edge accent so the trailing card is glance-distinct
       from the yearly card without changing the overall gradient. */
    background: linear-gradient(135deg, #1f3a5f 0%, #2c5282 70%, #355d9a 100%);
}
.ceo-hero-window {
    display: inline-block;
    background: rgba(255, 255, 255, 0.14);
    padding: 3px 10px;
    margin-left: 8px;
    border-radius: 10px;
    font-size: 11px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    vertical-align: middle;
}
.ceo-hero-disclosure {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.82;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.ceo-hero-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
@media (max-width: 1100px) {
    .ceo-hero-row { grid-template-columns: 1fr; }
    .ceo-hero-row .ceo-hero-value { font-size: 48px; }
}

/* Twin Runway charts — calendar year + trailing 12 months side-by-side.
   Same engine, different windows. They share the same height and
   structure so a CEO can compare them at-a-glance row-by-row. Stacks on
   narrower screens where each chart would otherwise be too narrow for
   the 12 monthly bars + KPI strip + footnote to breathe. */
.ceo-runway-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    /* Avoid horizontal overflow if a child becomes too wide. amCharts
       respects the container width, but the KPI strip and sub-text can
       expand when content is unusually long. */
    min-width: 0;
}
.ceo-runway-row > .ceo-runway-col,
.ceo-runway-row > .ceo-runway-card { min-width: 0; }
@media (max-width: 1280px) {
    .ceo-runway-row { grid-template-columns: 1fr; }
}
/* Trailing-12-month Runway card — subtle left-edge accent so it reads
   as the "sibling" view next to the calendar-year card. Same chart
   engine and same component classes otherwise. */
.ceo-runway-card-trailing {
    border-left: 3px solid #355d9a;
}

/* Each runway-col is a vertical stack: chart card on top + supporting
   metric cards below. The supp-row inside it lays the supplementary
   cards out in a flexible auto-fit grid so the same wrapper handles
   both the 3-card year column and the 2-card trailing column without
   needing different classes per column. */
.ceo-runway-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.ceo-supp-row {
    display: grid;
    /* auto-fit + minmax means: as many equal-width cards as fit at >=200px;
       wraps to next line when the column gets narrow (stacked layout). */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
/* Compress the value font inside the new compact supp-row so a long
   number like €1.234.567 still fits when 3 cards share a ~700px column. */
.ceo-supp-row .ceo-supp-card { padding: 18px 18px; }
.ceo-supp-row .ceo-supp-value { font-size: 26px; }
.ceo-supp-row .ceo-supp-label { margin-bottom: 8px; }

/* ---- Unified runway column ---------------------------------------------
   Inside the runway twin-column row, each column reads as ONE box: a
   single border + shadow wraps the chart on top and the supp metrics
   below it, with a thin internal divider instead of an empty gap. The
   per-metric color accent stays as a tiny left strip on each supp card
   so Gerçekleşen / Beklenen / Toplam Satış remain identifiable.

   Scoped to `.ceo-runway-row >` so the standalone .ceo-runway-card used
   on the CEO Paneli (Beklenen Projeler card) is unaffected. */
.ceo-runway-row > .ceo-runway-col {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    gap: 0;
    overflow: hidden;
}
/* Inner sections lose their own card chrome — they're now panes inside
   the unified col, separated by a top divider on the supp-row. The
   chart pane absorbs any slack height (flex:1) and the supp-row pins
   to the bottom (margin-top:auto) so the two columns end on the same
   line even when one has fewer supp cards or shorter footnotes. */
.ceo-runway-row > .ceo-runway-col > .ceo-runway-card,
.ceo-runway-row > .ceo-runway-col > .ceo-supp-row {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ceo-runway-row > .ceo-runway-col > .ceo-runway-card {
    flex: 1 1 auto;
}
.ceo-runway-row > .ceo-runway-col > .ceo-supp-row {
    margin-top: auto;
    border-top: 1px solid #e3e6ea;
    padding: 18px 22px 22px 22px;
}
.ceo-runway-row > .ceo-runway-col > .ceo-supp-row .ceo-supp-card {
    background: transparent;
    border: 0;
    border-left: 3px solid #2c5282;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 14px;
}
.ceo-runway-row > .ceo-runway-col > .ceo-supp-row .ceo-supp-card.ceo-supp-realized { border-left-color: #198754; }
.ceo-runway-row > .ceo-runway-col > .ceo-supp-row .ceo-supp-card.ceo-supp-expected { border-left-color: #fd7e14; }
.ceo-runway-row > .ceo-runway-col > .ceo-supp-row .ceo-supp-card.ceo-supp-sales    { border-left-color: #355d9a; }
/* Drop the trailing-12mo blue accent on the chart card — both columns
   now read identically; the heading text alone tells them apart. */
.ceo-runway-row > .ceo-runway-col > .ceo-runway-card.ceo-runway-card-trailing {
    border-left: 0;
}
/* Tighten the formula footer so it doesn't introduce a heavy dashed
   line inside an already-divided box. */
.ceo-runway-row > .ceo-runway-col > .ceo-supp-row .ceo-supp-formula {
    border-top: 0;
    padding-top: 0;
    margin-top: 4px;
}

/* Toplam Gerçekleşen Satış Tutarı card — uses the blue brand accent
   (same family as the chart card border) to distinguish it from the
   green Gerçekleşen Katkı Payı and orange Beklenen Katkı Payı. */
.ceo-supp-sales { border-left-color: #355d9a; }

/* Twin detail tables — Yılı vs. Son 12 Ay Katkı Marjı Detayı, side-by-side.
   Same column structure, just a different realized-row window. Each table
   wrap already has overflow-x:auto so it'll scroll horizontally inside its
   column if a long customer/project name pushes columns wider than the
   available half-width. Stacks below 1280px to match the runway row above. */
/* Detail tables stack full-width — Yılı first, Son 12 Ay below — so
   each 9-column table gets its natural width with no horizontal scroll.
   The runway charts above keep their twin-column layout because they
   compare visually; the detail tables are read on their own. */
.ceo-detail-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-width: 0;
}
.ceo-detail-row > .ceo-detail-section { min-width: 0; }
.ceo-detail-section-trailing {
    border-left: 3px solid #355d9a;
}
.ceo-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ceo-hero-coverage {
    background: rgba(255, 255, 255, 0.16);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
}
.ceo-hero-value {
    font-size: 52px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    margin-bottom: 6px;
}
.ceo-hero-target {
    font-size: 14px;
    opacity: 0.92;
    margin-bottom: 16px;
}
.ceo-hero-gap {
    color: #ffd166;
    font-weight: 600;
}
.ceo-hero-surplus {
    color: #95f0b8;
    font-weight: 600;
}
.ceo-hero-bar {
    position: relative;
    height: 12px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}
.ceo-hero-bar-fill {
    height: 100%;
    background: var(--hero-color, #198754);
    border-radius: 8px;
    transition: width 0.6s ease-out;
}
.ceo-hero-bar-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 100%;
    width: 2px;
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(-1px);
}
.ceo-hero-formula {
    font-size: 12.5px;
    opacity: 0.78;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* =====================================================================
   CEO Paneli — strategic glanceable dashboard (NEW tile-based version)
   ===================================================================== */
.ceo-panel-loading {
    text-align: center;
    padding: 80px 20px;
    color: #6c757d;
}
.ceo-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* No padding-bottom: the cards sit at .container's bottom 20px padding,
       matching the 20px gutter on the left/right sides for a balanced 4-side
       frame. (The standard <header> block is also omitted on this page —
       see #ceoPage in index.html.) */
}

/* CEO Paneli — anchor floating refresh button to top-right of the page.
   #ceoPage needs `position: relative` so the absolutely-positioned FAB
   inside it is anchored to the page area (not the document). */
#ceoPage {
    position: relative;
}

/* Page-level refresh button. Replaces the standard <header> block. Lives
   inside .container's 40px top padding strip (above where #ceoPage's
   content begins), so it doesn't overlap with any of the dashboard cards
   below. Geometry:
     - .container has padding: 40px on all four sides (CEO Paneli only).
     - #ceoPage's coordinate (0,0) is at the inner edge of that padding,
       i.e., 40px below the container's outer top edge.
     - FAB is `top: -36px`, height 32px → it occupies #ceoPage y=-36..-4
       which maps to container y=4..36 — fully inside the 40px top
       padding strip with 4px breathing room above and below.
     - Cards begin at #ceoPage y=0 (container y=40), 4px below FAB bottom.
   Z-index is kept just in case content from below ever floats up. The
   plain unicode ↻ glyph (vs the AI report card's 🔄 emoji) keeps page
   refresh visually distinct from the card's "Yeni Rapor" action. */
.ceo-panel-refresh-fab {
    position: absolute;
    top: -36px;
    right: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: white;
    color: #2c3e50;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.15s ease, background 0.15s ease;
    z-index: 5;
}
.ceo-panel-refresh-fab:hover {
    background: #f8f9fa;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transform: rotate(90deg);
}
.ceo-panel-refresh-fab:active {
    transform: rotate(180deg);
}
.ceo-panel-refresh-fab:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}
/* small inline tags used to label real vs mock data */
.tag-real, .tag-mock {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
}
.tag-real { background: #d8f5e3; color: #176f3a; }
.tag-mock { background: #fff1d6; color: #8a5b00; }

/* ---------- CEO Paneli — runway + expected-detail mount slots ---------- */
.ceo-panel-runway-mount,
.ceo-panel-expected-mount {
    /* These slots receive child cards (Runway brings its own
       .ceo-runway-card; Expected Detail brings its own .ceo-panel-card)
       so the slot itself stays bare. min-width:0 lets the wide tables /
       chart canvases shrink properly inside a 1fr 1fr grid column. */
    min-height: 180px;
    min-width: 0;
}
.ceo-runway-unavailable {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    color: #95a3b3;
    font-size: 13px;
}

/* ---------- Teklif Aktivitesi & İletişim Sağlığı ---------- */
.ceo-tact-compact {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 14px 16px 16px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.ceo-tact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ceo-tact-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 14.5px;
    font-weight: 600;
}
.ceo-tact-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-tiny {
    padding: 4px 10px !important;
    font-size: 12px !important;
}

/* Internal split: Teklif Durumu (left) | İletişim Sağlığı (right) */
.ceo-tact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 720px) {
    .ceo-tact-split { grid-template-columns: 1fr; }
}
.ceo-tact-col {
    display: flex;
    flex-direction: column;
    min-width: 0; /* allow children to shrink/wrap inside narrow column */
}
.ceo-tact-col + .ceo-tact-col {
    border-left: 1px dashed #e3e6ea;
    padding-left: 12px;
}
@media (max-width: 720px) {
    .ceo-tact-col + .ceo-tact-col {
        border-left: none;
        padding-left: 0;
        padding-top: 12px;
        border-top: 1px dashed #e3e6ea;
    }
}
.ceo-tact-col-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef1f5;
}
.ceo-tact-col-head strong {
    color: #2c3e50;
    font-size: 13px;
    font-weight: 600;
}
.ceo-tact-col-head small {
    color: #6b7480;
    font-size: 11.5px;
    line-height: 1.4;
}
.ceo-tact-col-head small strong { color: #d04a4a; font-weight: 700; }

/* Status category rows (vertical list, color = left accent bar) */
.ceo-tact-status-list,
.ceo-silence-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ceo-tact-row {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--accent, #c5ccd6);
    color: #fff;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform .12s ease, box-shadow .12s ease;
    min-width: 0;
}
.ceo-tact-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}
.ceo-tact-row.ceo-tact-total {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.ceo-tact-row-num {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-align: right;
}
.ceo-tact-row-label {
    font-size: 12px;
    color: #fff;
    line-height: 1.3;
    overflow-wrap: anywhere;
    opacity: 0.95;
}

/* ---------- Status distribution: horizontal stacked bar + legend ----
   New layout (replaces the old vertical .ceo-tact-row stack). The total
   sits as a small headline; the bar encodes proportions; the legend
   lists every status with count + percent. All three regions navigate
   on click (total → teklif-active, bar segments & legend → teklif-team).
   ------------------------------------------------------------------- */
.ceo-tact-status-dist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ceo-tact-stack-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 2px;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s ease;
}
.ceo-tact-stack-total:hover {
    background: #f3f5f9;
}
.ceo-tact-stack-total-num {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ceo-tact-stack-total-label {
    font-size: 12px;
    color: #6b7480;
    letter-spacing: 0.2px;
}
.ceo-tact-stack-bar {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 4px;
    overflow: hidden;
    background: #eef1f5;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.ceo-tact-stack-seg {
    height: 100%;
    min-width: 4px;
    cursor: pointer;
    transition: filter .12s ease;
}
.ceo-tact-stack-seg + .ceo-tact-stack-seg {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35);
}
.ceo-tact-stack-seg:hover {
    filter: brightness(1.1) saturate(1.05);
}
.ceo-tact-stack-empty {
    padding: 10px;
    text-align: center;
    color: #6b7480;
    font-size: 12px;
    background: #f7f9fc;
    border: 1px dashed #e3e6ea;
    border-radius: 6px;
}
.ceo-tact-legend {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
}
.ceo-tact-legend-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .12s ease;
    min-width: 0;
}
.ceo-tact-legend-row:hover {
    background: #f3f5f9;
}
.ceo-tact-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c5ccd6;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.ceo-tact-legend-label {
    font-size: 12px;
    color: #2c3e50;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.ceo-tact-legend-count {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    text-align: right;
    min-width: 22px;
    font-variant-numeric: tabular-nums;
}
.ceo-tact-legend-pct {
    font-size: 11.5px;
    color: #6b7480;
    line-height: 1;
    text-align: right;
    min-width: 34px;
    font-variant-numeric: tabular-nums;
}

/* Silence rows — neutral, just count + date range */
.ceo-silence-row {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f7f9fc;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
    min-width: 0;
}
.ceo-silence-row:hover {
    background: #eef3fa;
    border-color: #c7d3e3;
}
.ceo-silence-num {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    text-align: right;
}
.ceo-silence-range {
    font-size: 12.5px;
    color: #2c3e50;
    line-height: 1.3;
}

/* ---------- Two-column row: Action Queue + Funnel ---------- */
.ceo-panel-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 960px) {
    .ceo-panel-row-2col { grid-template-columns: 1fr; }
}

/* shared card */
.ceo-panel-card {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    /* Defensive: keep any wide child (table, button row, header strip)
       from visually escaping the card's rounded border. The card's
       interior scroll wrappers (.ceo-table-wrap, .ceo-report-table-wrap)
       still scroll internally, but their geometry is clipped to the
       card's rounded rect. min-width:0 lets the card itself shrink
       inside narrow grid columns instead of demanding its content's
       intrinsic width. */
    overflow: hidden;
    min-width: 0;
}
.ceo-panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.ceo-panel-card-header h3,
.ceo-panel-card-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 14.5px;
    font-weight: 600;
}
.ceo-panel-card-header h4 { font-size: 13.5px; }
/* Compact variant — title on the left, meta line right-aligned on the
   same row. Smaller h3 + smaller meta + tighter bottom margin so the
   header strip is as slim as possible inside the right-stack cards. */
.ceo-panel-card-header-compact {
    margin-bottom: 8px;
    flex-wrap: nowrap;
    align-items: baseline;
}
.ceo-panel-card-header-compact h3 {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}
.ceo-panel-card-header-compact .ceo-panel-card-meta {
    font-size: 11.5px;
    line-height: 1.3;
    text-align: right;
    /* Allow the meta line to ellipsize gracefully when the card is very
       narrow; on common widths it sits comfortably on the right. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ceo-card-hint {
    margin-top: 12px;
    color: #95a3b3;
    font-size: 11.5px;
    line-height: 1.45;
}

.ceo-card-hint {
    color: #95a3b3;
    font-size: 11.5px;
}
.ceo-muted { color: #95a3b3; }

/* ---------- Top row column stacks ----------
   The grid `.ceo-panel-row-2col` makes both columns share the tallest
   item's height. On the top row the LEFT stack now carries two cards
   (Yıllık Nakit Runway + 2026 Beklenen Projeler), and the RIGHT stack
   carries the AI weekly report card on top of the Proje Sorumluları
   tile grid. Whichever side ends up taller dictates the row height;
   the other side stretches and one of its children expands to absorb
   the slack. */
.ceo-panel-row-top {
    /* Both grid items stretch to the row's height; min-height:0 lets
       each stack's flex children honor their own min-height:0 without
       overflowing the row. */
    align-items: stretch;
}

/* ----- LEFT stack (runway → expected-projects) ----- */
.ceo-panel-left-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}
/* Runway sits at its natural chart height (no flex grow). The expected
   mount below absorbs whatever remaining height the row offers, so its
   table can show as many rows as possible without pushing the row
   taller than the right stack. */
.ceo-panel-left-stack > .ceo-panel-runway-mount {
    flex: 0 0 auto;
    min-height: 0;
}
.ceo-panel-left-stack > .ceo-panel-expected-mount {
    /* The expected mount is a wrapper that gets its own .ceo-panel-card
       injected by renderCeoExpectedDetail(); make the wrapper a flex
       column so the inner card can fill its share of the height.

       min-height floor: ~290px is enough to show 4 data rows + the
       table header + card header + card padding without the user
       having to scroll inside the table. The exact math:
         - row ≈ 36px (10+10 padding + 13px text + 1px border)
         - 4 rows + thead row ≈ 180px
         - card header line (Müşteri/Tutar summary) ≈ 60–80px
         - card padding (top + bottom) ≈ 20px
         - safety margin ≈ 10px
       The flex:1 1 0 still lets the mount grow above 290px when the
       right column is taller than the runway + this floor combined,
       so we keep the "absorb leftover height" behaviour as a bonus
       on top of the guaranteed minimum. */
    flex: 1 1 0;
    min-height: 290px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ceo-panel-left-stack > .ceo-panel-expected-mount > .ceo-panel-card {
    /* CRITICAL: display:flex column on the card itself. Without this,
       the .ceo-table-wrap rule below (flex:1 1 auto) is a no-op and
       the table-wrap stays at its content-natural height — exactly
       the bug that was capping the card to ~2 visible rows. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Match the tighter padding used elsewhere in the CEO panel so the
       card has a consistent compact look against the runway above. */
    padding: 10px 12px;
}
/* The expected-detail card's table is the part that scrolls — the
   header stays put. */
.ceo-panel-left-stack .ceo-panel-card .ceo-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* ----- RIGHT stack (AI report card → Proje Sorumluları) ----- */
.ceo-panel-right-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}
/* Proje Sorumluları card pins to its content height; the AI report card
   above it takes the remaining slack so the right column lines up
   visually with the (typically taller) left column. The report body
   already has its own internal max-height + scroll so growing the card
   never produces an unbounded report. */
.ceo-panel-right-stack > .ceo-pm-card {
    flex: 0 0 auto;
    min-height: 0;
}

/* ------ Mobile / narrow viewport (single-column row) ------
   When `.ceo-panel-row-2col` collapses to a single column (<960px),
   neither stack has a sibling-driven height to fill. The desktop flex
   sizing (`height:100%` + `flex:1 1 0` + `min-height:0` on children)
   would cause the grow-children to collapse to 0 height because there's
   no parent height to inherit from. Reset both stacks to natural
   block-flow stacking so each card sizes to its own content. */
@media (max-width: 960px) {
    .ceo-panel-left-stack,
    .ceo-panel-right-stack { height: auto; }
    .ceo-panel-left-stack > .ceo-panel-runway-mount,
    .ceo-panel-left-stack > .ceo-panel-expected-mount,
    .ceo-panel-left-stack > .ceo-panel-expected-mount > .ceo-panel-card,
    .ceo-panel-right-stack > .ceo-pm-card {
        flex: 0 0 auto;
    }
    .ceo-panel-left-stack .ceo-panel-card .ceo-table-wrap {
        flex: 0 0 auto;
        overflow: visible;
    }
}

/* ---------- Proje Sorumluları — top row right column of CEO Paneli ----
   Mirrors the manager set shown on the Ekip Yönetimi page. Tiles wrap
   to fit the half-width column next to the Yıllık Nakit Runway chart;
   tiles are clickable and route to the team board page. Avatar uses
   the same styling vocabulary as the team board column header (white
   border, soft shadow, purple-gradient initials fallback). */
.ceo-pm-card {
    /* Sized to content via flex:0 0 auto on the parent stack. Tighter
       padding than the default `.ceo-panel-card` (16px 18px) to maximize
       vertical space for the Beklenen Projeler table below. */
    min-width: 0;
    min-height: 0;
    padding: 10px 12px;
}
.ceo-pm-card .ceo-pm-grid {
    /* No flex/overflow needed now that the card sizes to content; the
       grid simply takes whatever room its tiles need. */
    padding-right: 0;
}
.ceo-pm-grid {
    display: grid;
    /* 4 columns at the half-width column next to the runway. minmax(0,1fr)
       lets columns shrink under their content's intrinsic size so long
       names ellipsize via `.ceo-pm-name` rather than forcing horizontal
       overflow. Falls back to fewer columns on narrower viewports below. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
@media (max-width: 1280px) {
    /* Half-width column gets too tight for 4 tiles + 40px avatar +
       readable name; drop to 3 columns. */
    .ceo-pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    /* Top row collapses to 1 column (see .ceo-panel-row-2col rule); at
       this point the card is full-width again so 4 fits comfortably. */
    .ceo-pm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .ceo-pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ceo-pm-tile {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #f7f9fc;
    border: 1px solid #e3e6ea;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease,
                transform .12s ease, box-shadow .12s ease;
    min-width: 0;
}
.ceo-pm-tile:hover {
    background: #eef3fa;
    border-color: #c7d3e3;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.ceo-pm-tile-unassigned {
    background: #fff7ed;
    border-color: #fde2c5;
}
.ceo-pm-tile-unassigned:hover {
    background: #ffeed8;
    border-color: #f5c990;
}
.ceo-pm-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    background: #e3e6ea;
}
.ceo-pm-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.ceo-pm-avatar-unassigned {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.ceo-pm-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ceo-pm-name {
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.ceo-pm-count {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px;
    font-size: 10.5px;
    color: #6b7480;
    line-height: 1.2;
}
.ceo-pm-count strong {
    color: #1f3a5f;
    font-weight: 700;
    font-size: 12px;
}
/* Pending-offer indicator — drawn red so a manager with a growing
   backlog of unsent teklifler reads at a glance. The number itself is
   bold (matches the totals), the descriptor is regular weight so the
   number carries the visual emphasis. */
.ceo-pm-count-pending {
    color: #dc3545 !important;
    font-weight: 700;
    font-size: 12px;
}
.ceo-pm-count-pending-label {
    color: #dc3545;
}
.ceo-pm-count-sep {
    color: #c5ccd6;
    margin: 0 1px;
}

/* ---------- Coğrafi Dağılım — live world map ---------- */
.ceo-map-card {
    /* Force the card to fill the row alongside the Teklif Aktivitesi
       column so the world map gets a useful surface to render into. */
    min-height: 380px;
}
.ceo-map-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* On narrow viewports the right block can't fit alongside the title
   without overflowing the card. Allow the whole header to stack and
   left-align so the "Tam haritaya git →" button drops below the title
   instead of escaping the card edge. */
@media (max-width: 600px) {
    .ceo-map-card .ceo-panel-card-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .ceo-map-header-right {
        flex-shrink: 1;
        flex-basis: 100%;
        justify-content: flex-start;
    }
}
.ceo-map-stats {
    font-size: 12px;
    color: #6b7480;
    white-space: nowrap;
}
.ceo-map-stat-num {
    font-weight: 700;
    color: #1f2937;
}
.ceo-map-chart {
    position: relative;
    width: 100%;
    /* Tracks the Teklif Aktivitesi column height (header + status list +
       silence list) so both columns of the row stay roughly balanced. */
    min-height: 320px;
    height: 320px;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f6f9;
}
.ceo-map-loading,
.ceo-map-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7480;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}
.ceo-map-error { color: #d04a4a; }

.ceo-map-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 10px;
    font-size: 11.5px;
    color: #6b7480;
}
.ceo-map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ceo-map-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ceo-map-dot.active    { background: #EF4444; }
.ceo-map-dot.completed { background: #28a745; }

/* footer note */
.ceo-panel-footer {
    text-align: center;
    color: #95a3b3;
    padding-top: 4px;
}
.ceo-panel-footer small { font-size: 11.5px; line-height: 1.6; }

/* Runway chart card */
.ceo-runway-card {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ceo-runway-header {
    margin-bottom: 14px;
}
/* Tight title row — H3 on the left, year picker (or other controls) on
   the right, always on the same line so both runway columns have an
   identical 1-line title strip. The verbose sub text sits below as a
   full-width block, so a 720px-wide explanation can never push the
   year picker onto its own row and break the alignment between the
   left and right columns. */
.ceo-runway-titlerow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 4px;
    min-height: 32px;
}
.ceo-runway-titlerow h3 {
    margin: 0;
    font-size: 16px;
    color: #1f3a5f;
    font-weight: 700;
}
/* Compact title variant — used ONLY when the runway card is mounted
   inside the CEO Paneli (left stack), where vertical real estate is
   shared with the Beklenen Projeler card below. The standalone Yıllık
   Hedef Tablosu page (which uses the same renderCeoRunwayCard()) keeps
   the larger 16px / 700 title because it has the whole page to itself.
   Numbers below match `.ceo-panel-card-header h3` so the runway title
   visually matches the Beklenen Projeler title in the same column. */
.ceo-panel-runway-mount .ceo-runway-titlerow {
    min-height: 0;
    margin-bottom: 2px;
}
.ceo-panel-runway-mount .ceo-runway-titlerow h3 {
    font-size: 14.5px;
    font-weight: 600;
    color: #2c3e50;
}
.ceo-runway-sub {
    font-size: 12.5px;
    color: #6c757d;
    line-height: 1.4;
    max-width: 720px;
}
.ceo-runway-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: #495057;
    flex-wrap: wrap;
}
.ceo-runway-year {
    padding: 5px 10px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #1f3a5f;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.ceo-runway-year:focus {
    outline: 2px solid rgba(31, 58, 95, 0.25);
    outline-offset: 0;
}
.ceo-runway-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.ceo-runway-kpi {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 3px solid #1f3a5f;
}
.ceo-runway-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 2px;
}
.ceo-runway-kpi-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ceo-kpi-pos { color: #198754; }
.ceo-kpi-neg { color: #dc3545; }
.ceo-kpi-neutral { color: #495057; }
.ceo-runway-chart-container {
    width: 100%;
    height: 360px;
    /* amCharts injects an SVG inside; ensure no scrollbars */
    overflow: hidden;
}
.ceo-runway-footnote {
    margin-top: 10px;
    font-size: 12px;
    color: #6c757d;
    line-height: 1.5;
}
@media (max-width: 720px) {
    .ceo-runway-kpis { grid-template-columns: 1fr; }
    .ceo-runway-chart-container { height: 280px; }
}

/* Two supporting cards */
.ceo-two-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.ceo-supp-card {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #2c5282;
}
.ceo-supp-realized { border-left-color: #198754; }
.ceo-supp-expected { border-left-color: #fd7e14; }
.ceo-supp-label {
    font-size: 13px;
    font-weight: 600;
    color: #1f3a5f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.ceo-supp-label small {
    text-transform: none;
    letter-spacing: 0;
    color: #5a6978;
    font-weight: 400;
    margin-left: 6px;
}
.ceo-supp-value {
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #2c3e50;
    line-height: 1.1;
    margin-bottom: 8px;
}
.ceo-supp-meta {
    font-size: 13px;
    color: #5a6978;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ceo-supp-formula {
    font-size: 12px;
    color: #8a96a3;
    font-family: 'Consolas', 'Monaco', monospace;
    border-top: 1px dashed #e3e6ea;
    padding-top: 10px;
    margin-top: 4px;
}
.ceo-warning-pill {
    background: #fff3cd;
    color: #856404;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: help;
}
.ceo-warning-stale {
    background: #ffe4d1;
    color: #92400e;
}
.ceo-warning-info {
    background: #e7f1ff;
    color: #1f3a5f;
}

/* Action queue */
.ceo-actions-card {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 22px 26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ceo-actions-card h3 {
    margin: 0 0 14px 0;
    font-size: 15px;
    color: #1f3a5f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ceo-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ceo-action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #f8f9fa;
    border-left: 4px solid #6c757d;
}
.ceo-action-high { border-left-color: #dc3545; background: #fff5f5; }
.ceo-action-med  { border-left-color: #fd7e14; background: #fff9f0; }
.ceo-action-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.ceo-action-body {
    flex: 1;
    min-width: 0;
}
.ceo-action-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    margin-bottom: 2px;
}
.ceo-action-detail {
    font-size: 12.5px;
    color: #5a6978;
}
.ceo-action-btn {
    background: #2c5282;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.ceo-action-btn:hover { background: #1f3a5f; }
.ceo-empty-action {
    text-align: center;
    padding: 24px;
    color: #198754;
    font-weight: 500;
    background: #f0fdf4;
    border-radius: 8px;
}

/* Detail tables */
.ceo-detail-section {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 22px 26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ceo-detail-section h3 {
    margin: 0 0 14px 0;
    font-size: 15px;
    color: #1f3a5f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Header row above the detail table — title on the left, action pills on the
   right. Pills surface "X aktif teklif eksik veri" / "X tahsilat eksik
   ekipman" without consuming a separate Aksiyon Kuyruğu card below. */
.ceo-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ceo-detail-header .ceo-detail-header-text h3 {
    margin: 0 0 4px 0;
}
.ceo-detail-header .ceo-detail-header-text .ceo-runway-sub {
    margin-top: 2px;
}
.ceo-detail-warnings {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    padding-top: 2px;
}
.ceo-warn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: #856404;
    background: #fff3cd;
    border: 1px solid #ffe08a;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    line-height: 1.2;
}
.ceo-warn-pill:hover {
    background: #ffe9a3;
}
.ceo-warn-pill:active {
    transform: translateY(1px);
}
.ceo-table-wrap {
    overflow-x: auto;
}
.ceo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ceo-table th {
    text-align: left;
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 2px solid #e3e6ea;
    color: #5a6978;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.ceo-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f4;
    vertical-align: top;
    color: #2c3e50;
}
.ceo-table td small {
    color: #8a96a3;
    font-size: 11px;
}
.ceo-table .ceo-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ceo-table tbody tr:hover {
    background: #fafbfc;
}
.ceo-row-excluded {
    opacity: 0.65;
}
.ceo-row-excluded td {
    background: #fafafa;
}
.ceo-dim {
    color: #adb5bd;
    font-style: italic;
}
.ceo-onem-pill {
    display: inline-block;
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.ceo-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.ceo-badge-ok      { background: #d1fae5; color: #065f46; }
.ceo-badge-stale   { background: #ffe4d1; color: #92400e; }
.ceo-badge-missing { background: #fff3cd; color: #856404; }

/* Faz column badges (Alındı / Teklif Aşamasında) */
.ceo-faz-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.25;
}
/* Multi-line variant for labels like "Teklif Aşamasında" — the <br>
   stacks the two words vertically; the pill is centered and slightly
   pill-shaped so it still reads as a single badge. The Faz column
   ends up ~40% narrower vs. a single-line pill in the side-by-side
   detail tables. */
.ceo-faz-badge.ceo-faz-multiline {
    padding: 4px 10px;
    border-radius: 10px;
}
.ceo-faz-alindi   { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.ceo-faz-beklenen { background: #dbeafe; color: #1e3a8a; border: 1px solid #93c5fd; }

/* Row tint by phase — Beklenen rows get a subtle blue stripe so the
   eye can scan the table by phase without reading the badge. */
.ceo-row-alindi   td { background: transparent; }
.ceo-row-beklenen td { background: #f0f7ff; }
.ceo-row-beklenen.ceo-row-excluded td { background: #f5f8fc; }
.ceo-table tbody tr.ceo-row-beklenen:hover td { background: #e0eeff; }

/* Clickable rows — used by the CEO Paneli's "Beklenen Projeler" card so
   each row opens the same Teklif modal as renderTeklifActiveList. */
.ceo-table tbody tr.ceo-row-clickable { cursor: pointer; }
.ceo-table tbody tr.ceo-row-clickable:hover td { background: #e0eeff; }
.ceo-empty-table {
    text-align: center;
    padding: 30px;
    color: #8a96a3;
    font-style: italic;
}

/* "Kalan Hedef" liquid-flow column — running balance text only. The
   start row prints the full target as the baseline; subsequent rows
   show what's left after each row's katkı has been deducted. Once the
   balance reaches zero we swap to a "✓ Hedef tamam" label. */
.ceo-flow-value {
    font-variant-numeric: tabular-nums;
    color: #1f3a5f;
    font-weight: 600;
}
.ceo-flow-neg {
    color: #b91c1c;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ceo-flow-pos {
    color: #166534;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ceo-flow-done-label {
    color: #166534;
    font-weight: 700;
    font-size: 12px;
}
.ceo-flow-surplus {
    display: block;
    color: #16a34a;
    font-weight: 600;
    font-size: 11px;
    margin-top: 1px;
}
.ceo-flow-start-row td {
    background: #f1f7ff !important;
    border-bottom: 2px solid #cfe1ff !important;
}
.ceo-flow-start-label {
    text-align: right;
    font-weight: 700;
    color: #1e3a8a;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: 0.05em;
}


.ceo-footer-note {
    text-align: center;
    font-size: 12px;
    color: #8a96a3;
    padding-top: 4px;
}

@media (max-width: 768px) {
    .ceo-two-cards { grid-template-columns: 1fr; }
    .ceo-hero-value,
    .ceo-hero-row .ceo-hero-value { font-size: 36px; }
    .ceo-supp-value { font-size: 26px; }
    .ceo-action-item { flex-wrap: wrap; }
    .ceo-action-btn { width: 100%; margin-top: 6px; }
}

/* ============================================================================
   CEO PANELİ — "Son 7 Günlük Aktif Tekliflerde Yaşanan Gelişmeler Özeti" card
   ============================================================================
   Sits as the FIRST (and now top) item in the right-stack, above the Proje
   Sorumluları tile grid. The Beklenen Projeler card it used to share this
   column with has moved under the runway chart on the LEFT, so the right
   stack is just (this card) + (proje sorumluları) now.

   flex:0 0 auto keeps the card at its natural content height; the inline
   body has its own max-height + internal scroll so a long 3-table report
   doesn't push the row taller than the (typically taller) left column. */
.ceo-panel-right-stack > .ceo-report-card {
    flex: 0 0 auto;
    min-height: 0;
    padding: 10px 12px;
}

/* Compact header: title on the left, meta pills + action buttons on
   the right — all on a single row. The card is wide enough at the
   half-column width to fit everything on one line. */
.ceo-report-card-header {
    align-items: center;
    flex-wrap: wrap;        /* still allow wrap on very narrow viewports as a safety net */
    gap: 8px;
    margin-bottom: 6px;
}
.ceo-report-title {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: #2c3e50;
    flex: 1 1 auto;         /* title pushes left, lets the side block sit flush to the right */
    min-width: 0;
    white-space: nowrap;    /* keep the title on one line */
    overflow: hidden;
    text-overflow: ellipsis;
}
.ceo-report-header-side {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;         /* hug the content on the right; don't fill leftover row width */
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
}
.ceo-report-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.ceo-report-icon-btn {
    background: transparent;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    padding: 2px 7px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    color: #5a6772;
    transition: background .12s ease, border-color .12s ease;
}
.ceo-report-icon-btn:hover {
    background: #f1f4f7;
    border-color: #c8ced5;
}
.ceo-report-header-actions .ceo-report-generate-btn {
    /* Slightly tighter than .btn-tiny defaults so the header strip
       doesn't grow taller than 28px even with the spinner version. */
    padding: 4px 9px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
}
.ceo-report-header-actions .ceo-report-generate-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Meta block — left-aligned alongside the action buttons inside the
   header-side row. Single-row layout: timestamp pill + model + token +
   cost pills all sit on one line. Falls back to wrapping only if the
   container truly can't fit them. */
.ceo-report-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #6b7480;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
}
.ceo-report-meta-empty {
    color: #95a3b3;
    font-style: italic;
}
.ceo-report-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
}
.ceo-report-meta-line strong {
    color: #34404c;
    font-weight: 600;
}
.ceo-report-meta-label {
    color: #95a3b3;
}
.ceo-report-meta-pill {
    display: inline-block;
    padding: 1px 7px;
    background: #eef2f7;
    border: 1px solid #dbe2eb;
    border-radius: 999px;
    font-size: 10.5px;
    color: #4a5562;
    line-height: 1.5;
    white-space: nowrap;
}
.ceo-report-cost {
    background: #fff7e6;
    border-color: #f5d9a0;
    color: #8a5a0c;
    font-weight: 600;
}

/* ---- Inline report body (rendered markdown — 4 tables + Genel Özet)
   Half-width column inside the right-stack — body has its own max-height
   + scroll so a long report doesn't push the column taller than the
   runway chart on the left. The user can scroll inside the card to read
   all 4 tables; for a wider view they can open a historical report in
   the modal viewer. ---- */
.ceo-report-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eaeef2;
    font-size: 12.5px;
    line-height: 1.55;
    color: #2c3e50;
    max-height: 560px;
    overflow-y: auto;
    /* Reserve a bit of horizontal padding so internal table-wrapper
       horizontal scrollbars don't visually collide with the vertical one. */
    padding-right: 4px;
}
.ceo-report-body-empty {
    border-top: 1px dashed #e3e6ea;
    max-height: none;
    overflow: visible;
}
.ceo-report-empty-body {
    text-align: center;
    color: #95a3b3;
    font-size: 12.5px;
    padding: 20px 10px;
    font-style: italic;
}
.ceo-report-body h2 {
    font-size: 17px;
    margin: 14px 0 8px;
    color: #1a2935;
    font-weight: 700;
}
.ceo-report-body h2:first-child { margin-top: 0; }

/* Table-section title bar.
   When an h2 is IMMEDIATELY followed by a table-wrap, treat the h2 as
   the table's caption and dock it visually against the table top: dark
   solid bar with white text, rounded only on the top corners, no
   margin-bottom; the table itself loses its top border and top corners
   so the two render as a single block. Falls back to the regular h2
   style for any h2 not followed by a table (e.g. future "Genel
   Değerlendirme" sections — currently removed but the rule stays
   resilient).
   `:has()` is supported in all major evergreen browsers since 2023, so
   it's safe for an internal app. */
.ceo-report-body h2:has(+ .ceo-report-table-wrap) {
    background: #1f2937;
    color: #f4f6fa;
    padding: 8px 12px;
    margin: 16px 0 0;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.ceo-report-body h2:has(+ .ceo-report-table-wrap):first-child {
    margin-top: 0;
}
.ceo-report-body h2:has(+ .ceo-report-table-wrap) + .ceo-report-table-wrap {
    margin-top: 0;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.ceo-report-body h3 {
    font-size: 14px;
    margin: 14px 0 6px;
    color: #1a2935;
    font-weight: 600;
}
.ceo-report-body p { margin: 6px 0 10px; }
.ceo-report-body ul,
.ceo-report-body ol {
    margin: 6px 0 10px;
    padding-left: 22px;
}
.ceo-report-body li { margin: 2px 0; }
/* Clickable rows in the AI report — same visual contract as the
   Beklenen Projeler card's clickable rows (cursor + hover-highlight).
   The class is added by ceo-report.js's bindReportRowClicks() after
   it parses out the [pid:UUID] anchor token and verifies the project
   exists in window.projects. Scoped to .ceo-report-body so unrelated
   markdown tables elsewhere don't pick up the styling. */
.ceo-report-body table tr.ceo-row-clickable { cursor: pointer; }
.ceo-report-body table tr.ceo-row-clickable:hover td {
    background: #e0eeff;
}

.ceo-report-body .ceo-report-table-wrap {
    /* The shared markdown wrapper (created by renderMd()) provides
       horizontal scrolling so wide 7-column tables don't blow out the
       layout when Lokasyon/Sorumlu names are long. */
    margin-top: 10px;
    margin-bottom: 16px;
}

/* Settings modal — model + reasoning effort */
.ceo-report-settings-body {
    padding-top: 6px;
}
.ceo-report-settings-hint {
    margin: 0 0 16px;
    color: #6b7480;
    font-size: 12.5px;
    line-height: 1.45;
}
.ceo-report-settings-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d6dce3;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #34404c;
    cursor: pointer;
}
.ceo-report-settings-select:focus {
    outline: none;
    border-color: #8aa6cc;
    box-shadow: 0 0 0 2px rgba(138, 166, 204, 0.18);
}
.ceo-report-settings-help {
    margin-top: 5px;
    font-size: 11.5px;
    color: #95a3b3;
    line-height: 1.45;
}
.ceo-report-settings-help strong { color: #5a6772; }
.ceo-report-settings-help em     { color: #5a6772; font-style: italic; }

.ceo-report-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ceoReportSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes ceoReportSpin {
    to { transform: rotate(360deg); }
}

.ceo-report-inline-status {
    margin-top: 8px;
    padding: 6px 10px;
    background: #f1f7fc;
    border: 1px solid #d6e6f2;
    border-radius: 6px;
    font-size: 11.5px;
    color: #345a7a;
    line-height: 1.4;
}
.ceo-report-inline-status-error {
    background: #fdeded;
    border-color: #f5c2c2;
    color: #842029;
}

/* ---- Report viewer modal (wide) ---- */
.ceo-report-modal-content {
    /* The 4-table report is wide; .modal-wide already sets max-width: 1400px,
       we just bump the height a bit. */
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.ceo-report-modal-body {
    overflow-y: auto;
    padding: 18px 22px;
}
.ceo-report-modal-meta {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeef2;
    color: #5a6772;
    font-size: 12.5px;
    line-height: 1.6;
}
.ceo-report-modal-meta strong {
    color: #34404c;
    font-weight: 600;
}
.ceo-report-modal-content-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: #2c3e50;
}
.ceo-report-modal-content-body h2 {
    font-size: 18px;
    margin: 18px 0 8px;
    color: #1a2935;
    font-weight: 700;
}
.ceo-report-modal-content-body h3 {
    font-size: 15px;
    margin: 16px 0 6px;
    color: #1a2935;
    font-weight: 600;
}
.ceo-report-modal-content-body p {
    margin: 6px 0 10px;
}
.ceo-report-modal-content-body ul,
.ceo-report-modal-content-body ol {
    margin: 6px 0 10px;
    padding-left: 22px;
}
.ceo-report-modal-content-body li {
    margin: 2px 0;
}
.ceo-report-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 10px 0 16px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}
.ceo-report-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 12.5px;
}
.ceo-report-table th,
.ceo-report-table td {
    padding: 8px 11px;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}
.ceo-report-table th {
    background: #f4f7fa;
    font-weight: 600;
    color: #34404c;
    white-space: nowrap;
}
.ceo-report-table tr:nth-child(even) td {
    background: #fafbfd;
}

/* ----------------------------------------------------------------
   Manager-grouped report tables (Bekleyen Geri Dönüşler + Gelecek
   Hafta Planlananlar) — first column is always a short urgency
   label ("🔴 Acil" / "🟠 Bu Hafta" / "🔵 Aktif"), so the default
   `table-layout: auto` over-allocates space to it (the spanning
   title row prevents the browser from sampling normal cell widths,
   so it falls back to the header word "Aksiyon Zamanı" length).
   Pinning a small fixed width here keeps the Aksiyon Özeti and
   Açık Talep / Ne Zaman columns wide enough to be readable.
   Scoped to these two cards by id so the weekly report card's
   wider "Firma" first column is unaffected. The same scope also
   applies inside the per-card viewer/history modals because the
   markdown body uses the same .ceo-report-table class. */
#ceoReportCardBekleyen .ceo-report-table th:first-child,
#ceoReportCardBekleyen .ceo-report-table td:first-child,
#ceoReportCardPlanlar  .ceo-report-table th:first-child,
#ceoReportCardPlanlar  .ceo-report-table td:first-child,
#ceoReportViewerBodyBekleyen .ceo-report-table th:first-child,
#ceoReportViewerBodyBekleyen .ceo-report-table td:first-child,
#ceoReportViewerBodyPlanlar  .ceo-report-table th:first-child,
#ceoReportViewerBodyPlanlar  .ceo-report-table td:first-child {
    width: 90px;
    min-width: 90px;
    max-width: 110px;
    white-space: normal;     /* let "Aksiyon Zamanı" wrap rather than force-wide */
    text-align: center;
}

/* Second column ("Sorumlu") in both reports — a short person name. Give
   it just enough room to fit a typical "Ad Soyad" on one line; don't
   reserve as much space as the Firma column. */
#ceoReportCardBekleyen .ceo-report-table th:nth-child(2),
#ceoReportCardBekleyen .ceo-report-table td:nth-child(2),
#ceoReportCardPlanlar  .ceo-report-table th:nth-child(2),
#ceoReportCardPlanlar  .ceo-report-table td:nth-child(2),
#ceoReportViewerBodyBekleyen .ceo-report-table th:nth-child(2),
#ceoReportViewerBodyBekleyen .ceo-report-table td:nth-child(2),
#ceoReportViewerBodyPlanlar  .ceo-report-table th:nth-child(2),
#ceoReportViewerBodyPlanlar  .ceo-report-table td:nth-child(2) {
    width: 120px;
    min-width: 110px;
    max-width: 150px;
    white-space: normal;
    word-break: break-word;
}

/* Bekleyen Geri Dönüşler: column 3 is now "Firma" — wide enough to fit
   the phase-label · customer · project string without squeezing the
   data columns, but capped so very long names wrap. */
#ceoReportCardBekleyen .ceo-report-table th:nth-child(3),
#ceoReportCardBekleyen .ceo-report-table td:nth-child(3),
#ceoReportViewerBodyBekleyen .ceo-report-table th:nth-child(3),
#ceoReportViewerBodyBekleyen .ceo-report-table td:nth-child(3) {
    min-width: 200px;
    max-width: 320px;
    white-space: normal;
    word-break: break-word;
}

/* Gelecek Hafta Planlananlar: column 3 is "Tipi" (short emoji + label,
   e.g. "🤝 Toplantı"); column 4 is "Firma". */
#ceoReportCardPlanlar .ceo-report-table th:nth-child(3),
#ceoReportCardPlanlar .ceo-report-table td:nth-child(3),
#ceoReportViewerBodyPlanlar .ceo-report-table th:nth-child(3),
#ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(3) {
    width: 110px;
    min-width: 100px;
    max-width: 130px;
    white-space: nowrap;
    text-align: center;
}

#ceoReportCardPlanlar .ceo-report-table th:nth-child(4),
#ceoReportCardPlanlar .ceo-report-table td:nth-child(4),
#ceoReportViewerBodyPlanlar .ceo-report-table th:nth-child(4),
#ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(4) {
    min-width: 200px;
    max-width: 320px;
    white-space: normal;
    word-break: break-word;
}

/* ---------------- Section title "pseudo-row" ----------------
   The two new manager-grouped reports (Bekleyen, Planlar) need a
   colspan'd heading row to identify each section (e.g.
   "Canay Işıkman — Açık Müşteri Talepleri"). Markdown doesn't
   support colspan, and marked won't process markdown inside an
   inline HTML <td> — so we adopt a "two-table sandwich" pattern:
     1. A tiny inline-HTML table containing ONLY the title row
        (class: .ceo-report-section-title-table), immediately
        followed by
     2. The normal markdown data table (gets .ceo-report-table
        via the renderMd() post-processor in ceo-report.js).
   CSS fuses them visually by stripping the bottom margin of the
   title table and the top border of the data table that follows
   it (via :has() — works on all modern browsers).

   Matches the dark `#1f2937` heading style of the weekly card's
   section headings (see `h2:has(+ .ceo-report-table-wrap)` rule
   earlier in this file) so the three CEO AI report cards feel
   visually consistent. */
.ceo-report-section-title-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 0;
    border: 1px solid #1f2937;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}
/* When the title table is the first element in the report body, drop
   the top margin so it doesn't double-up with the body's own top
   padding. Mirrors the weekly card's
   `h2:has(+ .ceo-report-table-wrap):first-child { margin-top: 0 }`
   rule, so all three cards have the same gap above the dark header. */
.ceo-report-body > .ceo-report-section-title-table:first-child {
    margin-top: 0;
}
.ceo-report-section-title {
    background: #1f2937;
    color: #f4f6fa;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: left;
    padding: 8px 12px;       /* match weekly card's h2 padding */
    white-space: normal;     /* let long "Sorumlu — Kategori Adı" wrap */
    border: 0;
}
/* When the renderMd() wrapper (.ceo-report-table-wrap) directly
   follows a section-title-table, drop the wrapper's top margin and
   round-off so the two tables visually merge into one box.  */
.ceo-report-section-title-table + .ceo-report-table-wrap {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.ceo-report-section-title-table + .ceo-report-table-wrap .ceo-report-table {
    border-top: 0;
}
.ceo-report-section-title-table + .ceo-report-table-wrap .ceo-report-table thead tr:first-child th {
    border-top: 0;
}

/* ---------------- Mobile zoom-out for wide CEO tables ----------------
   Several CEO views render multi-column tables whose summed min-widths
   overflow a phone-sized viewport:
     - The three AI report cards (.ceo-report-table-wrap) — 5–6 columns,
       ~700–1000px wide, with their preceding HTML section-title bar
       (.ceo-report-section-title-table) which must scale together so
       the two stay visually fused as one box.
     - The CEO Paneli "Beklenen Projeler" detail card and the Yıllık
       Hedef Tablosu page (.ceo-table inside .ceo-table-wrap) — 6 and
       9 columns respectively.
   Each wrap already provides horizontal scroll, but on a phone the
   user only sees the leftmost 2 columns and the rest is invisible.

   Solution: below 768px, shrink the wrap (and any sibling header) via
   CSS `zoom`. `zoom` (unlike `transform: scale`) actually collapses
   the rendered box so no phantom empty space is left in the flow.
   Supported in Chrome/Safari/Edge since forever and in Firefox since
   126 (Apr 2024) — fine for an internal app. Tap targets shrink
   accordingly but row-click handlers still work at the smaller hit
   area. */
@media (max-width: 768px) {
    .ceo-report-body .ceo-report-section-title-table,
    .ceo-report-body .ceo-report-table-wrap,
    .ceo-table-wrap {
        zoom: 0.65;
    }
}
@media (max-width: 480px) {
    .ceo-report-body .ceo-report-section-title-table,
    .ceo-report-body .ceo-report-table-wrap,
    .ceo-table-wrap {
        zoom: 0.5;
    }
}

/* ---------------- Mobile column merge for AI report tables ----------
   Even at zoom 0.65, the 5–6 column AI report tables don't all fit
   inside the half-card width on a phone. To recover horizontal space
   WITHOUT switching to a full stacked-card layout, we visually merge
   adjacent columns into a single vertical stack on ≤768px.

   Mechanism: each merged TD is `display: block` so it no longer
   participates in table-cell layout — adjacent block-display TDs in
   the same TR stack vertically inside the column slot. The matching
   TH (column header) is hidden so only the FIRST merged TH remains
   visible above the stacked TDs. Borders between the inner TDs are
   collapsed so the stack reads as one cell.

   Per-card merges:
     • Weekly — one merge:
         · cols 1+2 (Firma + Proje Tanımı) → one column
       Header shown is the leftmost one (Firma). Sorumlu and
       Sunum Durumu stay as their own columns. Saves ~180px.
     • Bekleyen Geri Dönüşler — merge cols 1+2+3 (Aksiyon Zamanı +
       Sorumlu + Firma) into one column. Saves ~310px.
     • Gelecek Hafta Planlananlar — two merges:
         · cols 1+2+3 (Aksiyon Zamanı + Sorumlu + Tipi) → one column
         · cols 5+6 (Aksiyon Özeti + Ne Zaman) → one column
       Saves ~290px total. The Firma column stays full-width
       because it carries the row's main identity.

   The first (primary) line of each stack reads at normal size;
   secondary lines are slightly smaller and muted gray so they
   read as metadata under the primary value.

   Scoped to viewer modals too so the same compact layout applies
   when a stored report is opened from history. */
@media (max-width: 768px) {
    /* ============ Weekly: cols 1 (Firma) + 2 (Proje Tanımı) ============ */
    #ceoReportCard .ceo-report-table th:nth-child(2),
    #ceoReportViewerBody .ceo-report-table th:nth-child(2) {
        display: none;
    }
    #ceoReportCard .ceo-report-table td:first-child,
    #ceoReportCard .ceo-report-table td:nth-child(2),
    #ceoReportViewerBody .ceo-report-table td:first-child,
    #ceoReportViewerBody .ceo-report-table td:nth-child(2) {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
    }
    #ceoReportCard .ceo-report-table td:first-child,
    #ceoReportViewerBody .ceo-report-table td:first-child {
        padding-bottom: 2px;
        border-bottom: 0;
    }
    #ceoReportCard .ceo-report-table td:nth-child(2),
    #ceoReportViewerBody .ceo-report-table td:nth-child(2) {
        padding-top: 2px;
        border-top: 0;
        font-size: 11.5px;
        color: #5a6772;
    }
    /* Trim Sunum Durumu (col 4) on mobile so the Proje Durum Özeti column
       (col 5) has room to render without forcing a horizontal scroll.
       The label "Sadece çizim verildi" / "Sadece teklif sunuldu" wraps
       to 2 lines comfortably at ~85px. */
    #ceoReportCard .ceo-report-table th:nth-child(4),
    #ceoReportCard .ceo-report-table td:nth-child(4),
    #ceoReportViewerBody .ceo-report-table th:nth-child(4),
    #ceoReportViewerBody .ceo-report-table td:nth-child(4) {
        width: 85px;
        min-width: 75px;
        max-width: 95px;
        white-space: normal;
        word-break: normal;
    }
    /* Tighten Sorumlu too — typical "Ad Soyad" fits in ~75px when wrapped. */
    #ceoReportCard .ceo-report-table th:nth-child(3),
    #ceoReportCard .ceo-report-table td:nth-child(3),
    #ceoReportViewerBody .ceo-report-table th:nth-child(3),
    #ceoReportViewerBody .ceo-report-table td:nth-child(3) {
        width: 75px;
        min-width: 65px;
        max-width: 90px;
        white-space: normal;
        word-break: normal;
    }

    /* ============ Bekleyen: cols 1+2+3 (Aksiyon Zamanı + Sorumlu + Firma) ============
       The merged stack holds an urgency dot, a person name, and a full
       phase-label · firma · proje string. The desktop rule pins col 1
       (TH) to 90–110px which is far too narrow for the Firma string
       and causes mid-word breaks like "Boyam a İşi". Widen the column
       1 TH on mobile so the column slot has enough breathing room for
       the Firma line to wrap on word boundaries. The block-display
       TDs inside (set above to width:auto) inherit the column width
       naturally. */
    #ceoReportCardBekleyen .ceo-report-table th:first-child,
    #ceoReportViewerBodyBekleyen .ceo-report-table th:first-child {
        width: 140px;
        min-width: 130px;
        max-width: 160px;
    }
    /* Stop forcing break-anywhere inside the merged TDs; only break
       on natural word boundaries so "Boyama İşi" doesn't become
       "Boyam a İşi" anymore. */
    #ceoReportCardBekleyen .ceo-report-table td:first-child,
    #ceoReportCardBekleyen .ceo-report-table td:nth-child(2),
    #ceoReportCardBekleyen .ceo-report-table td:nth-child(3),
    #ceoReportViewerBodyBekleyen .ceo-report-table td:first-child,
    #ceoReportViewerBodyBekleyen .ceo-report-table td:nth-child(2),
    #ceoReportViewerBodyBekleyen .ceo-report-table td:nth-child(3) {
        word-break: normal;
        overflow-wrap: break-word;
    }

    #ceoReportCardBekleyen .ceo-report-table th:nth-child(2),
    #ceoReportCardBekleyen .ceo-report-table th:nth-child(3),
    #ceoReportViewerBodyBekleyen .ceo-report-table th:nth-child(2),
    #ceoReportViewerBodyBekleyen .ceo-report-table th:nth-child(3) {
        display: none;
    }
    #ceoReportCardBekleyen .ceo-report-table td:first-child,
    #ceoReportCardBekleyen .ceo-report-table td:nth-child(2),
    #ceoReportCardBekleyen .ceo-report-table td:nth-child(3),
    #ceoReportViewerBodyBekleyen .ceo-report-table td:first-child,
    #ceoReportViewerBodyBekleyen .ceo-report-table td:nth-child(2),
    #ceoReportViewerBodyBekleyen .ceo-report-table td:nth-child(3) {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        text-align: center;
        white-space: normal;
    }
    #ceoReportCardBekleyen .ceo-report-table td:first-child,
    #ceoReportViewerBodyBekleyen .ceo-report-table td:first-child {
        padding-bottom: 2px;
        border-bottom: 0;
    }
    #ceoReportCardBekleyen .ceo-report-table td:nth-child(2),
    #ceoReportViewerBodyBekleyen .ceo-report-table td:nth-child(2) {
        padding-top: 2px;
        padding-bottom: 2px;
        border-top: 0;
        border-bottom: 0;
        font-size: 11.5px;
        color: #5a6772;
    }
    #ceoReportCardBekleyen .ceo-report-table td:nth-child(3),
    #ceoReportViewerBodyBekleyen .ceo-report-table td:nth-child(3) {
        padding-top: 2px;
        border-top: 0;
        font-size: 11.5px;
        text-align: left;     /* Firma stays left-aligned for readability */
    }

    /* ============ Planlar: two merges ============ */

    /* Merge 1: cols 1+2+3 (Aksiyon Zamanı + Sorumlu + Tipi) */
    #ceoReportCardPlanlar .ceo-report-table th:nth-child(2),
    #ceoReportCardPlanlar .ceo-report-table th:nth-child(3),
    #ceoReportViewerBodyPlanlar .ceo-report-table th:nth-child(2),
    #ceoReportViewerBodyPlanlar .ceo-report-table th:nth-child(3) {
        display: none;
    }
    #ceoReportCardPlanlar .ceo-report-table td:first-child,
    #ceoReportCardPlanlar .ceo-report-table td:nth-child(2),
    #ceoReportCardPlanlar .ceo-report-table td:nth-child(3),
    #ceoReportViewerBodyPlanlar .ceo-report-table td:first-child,
    #ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(2),
    #ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(3) {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        text-align: center;
        white-space: normal;
    }
    #ceoReportCardPlanlar .ceo-report-table td:first-child,
    #ceoReportViewerBodyPlanlar .ceo-report-table td:first-child {
        padding-bottom: 2px;
        border-bottom: 0;
    }
    #ceoReportCardPlanlar .ceo-report-table td:nth-child(2),
    #ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(2) {
        padding-top: 2px;
        padding-bottom: 2px;
        border-top: 0;
        border-bottom: 0;
        font-size: 11.5px;
        color: #5a6772;
    }
    #ceoReportCardPlanlar .ceo-report-table td:nth-child(3),
    #ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(3) {
        padding-top: 2px;
        border-top: 0;
        font-size: 11.5px;
    }

    /* Merge 2: cols 5 (Aksiyon Özeti) + 6 (Ne Zaman) — hide col 6 header */
    #ceoReportCardPlanlar .ceo-report-table th:nth-child(6),
    #ceoReportViewerBodyPlanlar .ceo-report-table th:nth-child(6) {
        display: none;
    }
    #ceoReportCardPlanlar .ceo-report-table td:nth-child(5),
    #ceoReportCardPlanlar .ceo-report-table td:nth-child(6),
    #ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(5),
    #ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(6) {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
    }
    #ceoReportCardPlanlar .ceo-report-table td:nth-child(5),
    #ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(5) {
        padding-bottom: 2px;
        border-bottom: 0;
    }
    #ceoReportCardPlanlar .ceo-report-table td:nth-child(6),
    #ceoReportViewerBodyPlanlar .ceo-report-table td:nth-child(6) {
        padding-top: 2px;
        border-top: 0;
        font-size: 11.5px;
        color: #5a6772;
        font-style: italic;   /* date-when becomes a subtle italic footer */
    }
}

/* ---- Report history modal ---- */
.ceo-report-history-modal-content {
    max-width: 720px;
}
.ceo-report-history-hint {
    margin-bottom: 12px;
    color: #95a3b3;
    font-size: 12px;
}
.ceo-report-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
}
.ceo-report-history-loading,
.ceo-report-history-empty {
    text-align: center;
    color: #95a3b3;
    padding: 30px 10px;
    font-size: 13px;
}
.ceo-report-history-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 7px;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
    font: inherit;
}
.ceo-report-history-item:hover:not(:disabled) {
    background: #f7f9fc;
    border-color: #c8ced5;
    transform: translateY(-1px);
}
.ceo-report-history-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ceo-report-history-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #34404c;
    font-size: 13px;
}
.ceo-report-history-row2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #6b7480;
    font-size: 11.5px;
}
.ceo-report-history-error {
    margin-top: 4px;
    padding: 5px 8px;
    background: #fdeded;
    border-radius: 4px;
    color: #842029;
    font-size: 11.5px;
    line-height: 1.4;
}
.ceo-report-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ceo-report-status-badge.ready {
    background: #e2f4e7;
    color: #1f7a3b;
}
.ceo-report-status-badge.failed {
    background: #fdeded;
    color: #842029;
}
.ceo-report-status-badge.generating {
    background: #fff4d9;
    color: #8a5a0c;
}

/* ============================================================================
   WIKI MODULE
   ============================================================================ */

.wiki-app { min-height: calc(100vh - 60px); background: #f6f7fb; }

.wiki-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 60vh; gap: 14px; color: #7f8c8d;
}
.wiki-loading-spinner {
    width: 36px; height: 36px; border: 3px solid #e9ecef;
    border-top-color: #667eea; border-radius: 50%;
    animation: wiki-spin 0.8s linear infinite;
}
@keyframes wiki-spin { to { transform: rotate(360deg); } }

.wiki-layout {
    display: flex; min-height: calc(100vh - 60px); gap: 0;
}

/* ---- Sidebar ------------------------------------------------------------ */
.wiki-sidebar {
    width: 320px; flex-shrink: 0; background: #fff;
    border-right: 1px solid #cbd5e1;
    display: flex; flex-direction: column;
    transition: width 0.2s ease;
    /* Fixed full height so the admin bar at the bottom is always visible.
       --wiki-navbar-offset is set at runtime by wiki.js based on the actual navbar height. */
    height: calc(100vh - var(--wiki-navbar-offset, 60px));
    position: sticky;
    top: var(--wiki-navbar-offset, 60px);
    align-self: flex-start;
    overflow: hidden;
}
.wiki-sidebar.collapsed { width: 0; border-right: 0; overflow: hidden; }

.wiki-sidebar-header {
    padding: 18px 18px 10px; display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.wiki-home-btn {
    background: transparent; border: 0; padding: 4px 6px;
    cursor: pointer; border-radius: 6px;
    display: inline-flex; align-items: center;
    transition: background 0.12s;
    margin: -4px -6px;
}
.wiki-home-btn:hover { background: #f3f4f8; }
.wiki-sidebar-header h2 {
    margin: 0; font-size: 18px; font-weight: 700; color: #2c3e50;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.wiki-sidebar-toggle {
    width: 28px; height: 28px; border: 1px solid #e9ecef; border-radius: 6px;
    background: #fff; cursor: pointer; color: #7f8c8d;
    display: inline-flex; align-items: center; justify-content: center;
}
.wiki-sidebar-toggle:hover { background: #f8f9fb; color: #2c3e50; }

.wiki-search-wrap { padding: 0 18px 12px; position: relative; }
.wiki-search-input {
    width: 100%; padding: 10px 12px; border: 1px solid #dfe4ea; border-radius: 8px;
    font-size: 13px; background: #f8f9fb;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.wiki-search-input:focus {
    outline: none; border-color: #6366f1; background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.wiki-search-results {
    position: absolute; left: 18px; right: 18px; top: 100%;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
    max-height: 70vh; overflow-y: auto; z-index: 200;
    padding: 4px;
}

/* Rich result rows (used in both sidebar dropdown, hero dropdown, and results page) */
.wiki-search-result.rich {
    display: block; width: 100%;
    background: transparent; border: 0; padding: 10px 12px;
    text-align: left; color: #2c3e50; font-family: inherit;
    border-radius: 7px; cursor: pointer;
    transition: background 0.12s;
}
.wiki-search-result.rich + .wiki-search-result.rich { margin-top: 2px; }
.wiki-search-result.rich:hover,
.wiki-search-result.rich.keyboard-active { background: #eef2ff; }

.wiki-search-result-line1 {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 4px;
}
.wiki-search-result-title {
    font-size: 13.5px; font-weight: 600; color: #2c3e50;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.wiki-search-result-title mark {
    background: #fef08a; color: #422006; padding: 0 2px; border-radius: 2px;
}
.wiki-search-result-snippet {
    font-size: 12px; color: #64748b;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
}
.wiki-search-result-snippet mark {
    background: #fef08a; color: #422006; padding: 0 2px; border-radius: 2px; font-weight: 600;
}
.wiki-search-snippet-empty { font-style: italic; color: #94a3b8; }
.wiki-search-result-line3 {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; font-size: 11px;
}
.wiki-search-result-space {
    color: #6366f1; font-weight: 500;
    background: #eef2ff; padding: 2px 8px; border-radius: 10px;
}
.wiki-search-result-date { color: #94a3b8; }
.wiki-search-source {
    font-size: 10.5px; padding: 2px 7px; border-radius: 9px;
    background: #fef3c7; color: #92400e; font-weight: 600;
    white-space: nowrap;
}

.wiki-search-more {
    display: block; width: 100%; text-align: center;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 7px;
    padding: 9px 12px; margin-top: 4px;
    color: #475569; font-size: 12.5px; font-weight: 600; font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.wiki-search-more:hover {
    background: #eef2ff; border-color: #818cf8; color: #4338ca;
}

.wiki-search-empty {
    padding: 18px; color: #95a5a6; font-size: 13px; text-align: center;
}
.wiki-search-empty em { color: #475569; font-style: normal; font-weight: 600; }

/* ---- Welcome hero search ---- */
/* ---- Wiki landing card (mirrors home dashboard's welcome-card-new) ---- */
.wiki-home-card {
    background: linear-gradient(135deg, #525e82 0%, #5771b9 100%);
    border-radius: 18px;
    padding: 26px 32px;
    color: #fff;
    margin: -28px -32px 22px;   /* break out of the .wiki-page-body padding */
    box-shadow: 0 6px 18px rgba(82, 94, 130, 0.22);
    position: relative;
}
.wiki-home-title {
    margin: 0 0 14px;
    font-size: 20px; font-weight: 700; line-height: 1.2;
    color: #fff;
    letter-spacing: 0.01em;
}

.wiki-home-search-container { position: relative; z-index: 10; }
.wiki-home-search-box {
    display: flex; align-items: center;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 5px;
    gap: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.wiki-home-search-box:hover,
.wiki-home-search-box:focus-within {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.wiki-home-search-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: transparent; border: 0; color: #fff;
    border-radius: 8px; cursor: default;
}
.wiki-home-search-input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    padding: 15px 12px;
    font-size: 16px; color: #fff; font-weight: 400;
    font-family: inherit;
    text-overflow: ellipsis;
}
.wiki-home-search-input::placeholder {
    color: rgba(255, 255, 255, 0.7); font-weight: 400;
}
.wiki-home-search-results {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
    max-height: 60vh; overflow-y: auto; z-index: 50;
    padding: 6px;
}

/* Tighten on smaller viewports */
@media (max-width: 700px) {
    .wiki-home-card { padding: 18px 18px; border-radius: 14px; margin: -28px -16px 18px; }
    .wiki-home-search-input { font-size: 14px; padding: 12px 10px; }
}

/* Legacy alias: keep .wiki-hero rules harmless if any old markup is cached */
.wiki-hero { display: none; }

.wiki-welcome-cards-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

/* ---- Full search results page (rendered in main pane) ---- */
.wiki-search-page {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 28px 32px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.wiki-search-page-title {
    margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #2c3e50;
    display: flex; align-items: center; gap: 12px;
}
.wiki-search-page-count {
    font-size: 12px; font-weight: 700;
    background: #eef2ff; color: #6366f1;
    padding: 3px 10px; border-radius: 11px;
}
.wiki-search-page-query {
    margin: 0 0 22px; color: #64748b; font-size: 13.5px;
}
.wiki-search-page-query strong { color: #2c3e50; }
.wiki-search-page-results .wiki-search-result.rich {
    border: 1px solid #e2e8f0; border-radius: 9px;
    padding: 14px 16px; margin-bottom: 8px;
}
.wiki-search-page-results .wiki-search-result.rich:hover {
    border-color: #818cf8; background: #f5f7ff;
}

.wiki-spaces { flex: 1; overflow-y: auto; padding: 0 8px 12px; }

.wiki-space {
    margin-bottom: 4px;
}
.wiki-space-header {
    width: 100%;
    display: flex; align-items: stretch; gap: 0;
    padding: 0 4px;
    border-radius: 8px;
    transition: background 0.12s;
}
.wiki-space-header:hover { background: #f3f4f8; }
.wiki-space.active > .wiki-space-header { background: #eef2ff; }
.wiki-space.active > .wiki-space-header .wiki-space-name { color: #4f46e5; }
.wiki-space-title {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 8px;
    background: transparent; border: 0; cursor: pointer;
    text-align: left;
    font-size: 13px; font-weight: 600; color: #2c3e50;
    border-radius: 6px;
    min-width: 0;
}
.wiki-space-title:hover .wiki-space-name { color: #4f46e5; }
.wiki-space-chevron-btn {
    background: transparent; border: 0; cursor: pointer;
    padding: 0 8px; color: #95a5a6;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.wiki-space-chevron-btn:hover { color: #4f46e5; background: rgba(0,0,0,0.04); }
.wiki-space-icon { font-size: 16px; }
.wiki-space-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-space-chevron { color: inherit; transition: transform 0.18s; }
.wiki-space.expanded .wiki-space-chevron { transform: rotate(180deg); }
.wiki-space-body { display: none; padding: 4px 6px 8px; }
.wiki-space.expanded .wiki-space-body { display: block; border-left: 2px solid var(--space-color, #667eea); margin-left: 12px; }

.wiki-tree, .wiki-tree-children { list-style: none; padding: 0; margin: 0; }
.wiki-tree-children { /* nested */ }
.wiki-tree-node.collapsed > .wiki-tree-children { display: none; }
.wiki-tree-node.collapsed > .wiki-tree-row .wiki-tree-toggle svg { transform: rotate(0deg); }
.wiki-tree-node > .wiki-tree-row .wiki-tree-toggle svg { transform: rotate(90deg); }

.wiki-tree-row {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 8px; border-radius: 6px; cursor: default;
    position: relative;
}
.wiki-tree-row:hover { background: #f3f4f8; }
.wiki-tree-node.active > .wiki-tree-row { background: #eef2ff; }
.wiki-tree-node.active > .wiki-tree-row .wiki-tree-link { color: #4f46e5; font-weight: 600; }

.wiki-tree-toggle {
    width: 18px; height: 18px; padding: 0; border: 0; background: transparent;
    color: #95a5a6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
    flex-shrink: 0;
}
.wiki-tree-toggle.empty { visibility: hidden; }
.wiki-tree-link {
    flex: 1; text-decoration: none; color: #34495e; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 2px 0;
}
/* Right-aligned slot holding the page-type dot and product-link icon,
   visually separated from the page title. Always visible (unlike the
   admin actions which only appear on hover). Admin actions slide in to
   the LEFT of this slot on hover so the indicators stay readable. */
.wiki-tree-indicators {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    flex-shrink: 0;
    margin-left: auto;
}
/* Small colored dot marking pages with a `page_type` set. */
.wiki-tree-type-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pt-color, #9ca3af);
    /* Subtle inset highlight keeps the dot legible on both light and active
       (light indigo) row backgrounds. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    flex-shrink: 0;
}
/* Chain link emoji marking pages tied to a product category/subcategory.
   `.inherited` variant (link comes from an ancestor or the space) renders
   lighter so it doesn't visually compete with direct links. */
.wiki-tree-product-link {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    opacity: 0.85;
    cursor: help;
    flex-shrink: 0;
}
.wiki-tree-product-link.inherited {
    opacity: 0.4;
    filter: grayscale(0.6);
}
.wiki-tree-actions {
    display: none; gap: 2px; align-items: center;
}
.wiki-tree-row:hover .wiki-tree-actions { display: inline-flex; }
.wiki-tree-action {
    width: 20px; height: 20px; padding: 0; border: 0;
    background: #fff; border: 1px solid #e9ecef; border-radius: 4px;
    color: #667eea; font-size: 12px; line-height: 1; cursor: pointer;
}
.wiki-tree-action:hover { background: #eef2ff; border-color: #c7d2fe; }

.wiki-tree-empty { font-size: 12px; color: #95a5a6; padding: 8px 12px; margin: 0; }

.wiki-add-root-page {
    margin-top: 6px; width: 100%; padding: 7px 10px;
    background: transparent; border: 1px dashed #d1d5db; border-radius: 6px;
    color: #6b7280; font-size: 12px; cursor: pointer;
}
.wiki-add-root-page:hover { background: #f9fafb; border-color: #9ca3af; color: #4b5563; }

.wiki-admin-bar { padding: 10px 12px 14px; border-top: 1px solid #f0f2f5; }
.wiki-add-space-btn {
    width: 100%;
    padding: 10px 12px;
    background: #fafbff;
    border: 1px dashed #c7d2fe;
    border-radius: 8px;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.wiki-add-space-btn:hover {
    background: #eef2ff;
    border-color: #818cf8;
    border-style: solid;
}

/* ---- Main / content ---------------------------------------------------- */
.wiki-main {
    flex: 1; min-width: 0; padding: 0;
    overflow-y: auto;
    max-height: calc(100vh - var(--wiki-navbar-offset, 60px));
    background: #f1f5f9;            /* page-background tone behind the bands */
    display: flex; flex-direction: column;
}

/* ---- Band 1: Page header (breadcrumb + title + actions) ----
   Tinted background so it reads as a distinct strip rather than blending
   into the white sidebar and white content card. */
.wiki-page-header {
    background: linear-gradient(180deg, #eef2ff 0%, #e8edf7 100%);
    border-bottom: 1px solid #c7d2fe;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.wiki-page-header-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 32px 16px;
}

/* On the welcome screen there's nothing meaningful in the header strip
   (no breadcrumb, no page title, no toolbar), so hide it to remove the
   empty gray band above the search card. Also collapse the padding
   chain (.wiki-page-body + .wiki-welcome) that otherwise leaves ~42px
   of the .wiki-main grey background showing above the gradient card. */
body.wiki-on-welcome .wiki-page-header { display: none; }
body.wiki-on-welcome .wiki-page-body { padding-top: 0; }
body.wiki-on-welcome .wiki-welcome { padding-top: 0; }
/* Card no longer needs the negative top margin to "break out" of the
   padding above it (because we just zeroed that padding). Keep the
   side break-out so it still spans the full body width. */
body.wiki-on-welcome .wiki-home-card { margin-top: 0; }

.wiki-breadcrumb {
    font-size: 12.5px; color: #7f8c8d; margin-bottom: 12px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.wiki-breadcrumb a { color: #667eea; text-decoration: none; }
.wiki-breadcrumb a:hover { text-decoration: underline; }
.wiki-crumb-sep { color: #bdc3c7; }
.wiki-crumb-current { color: #2c3e50; font-weight: 600; }

.wiki-toolbar {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; flex-wrap: wrap;
    /* border-bottom removed: the band itself provides the separator */
}
.wiki-toolbar[hidden] { display: none; }
.wiki-page-title { margin: 0; font-size: 26px; font-weight: 700; color: #2c3e50; }
.wiki-page-meta { font-size: 12px; color: #95a5a6; margin-top: 2px; display: inline-block; }
.wiki-toolbar-right { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Band 2: Page body (content card on the page background) ---- */
.wiki-page-body {
    flex: 1;
    padding: 28px 32px 60px;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.wiki-btn-primary, .wiki-btn-secondary, .wiki-btn-danger {
    padding: 8px 14px; border-radius: 7px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 4px;
}
.wiki-btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.wiki-btn-primary:hover { filter: brightness(1.05); }
.wiki-btn-secondary { background: #fff; color: #34495e; border-color: #dfe4ea; }
.wiki-btn-secondary:hover { background: #f8f9fb; }
.wiki-btn-danger { background: #fff; color: #c0392b; border-color: #f5c1bd; }
.wiki-btn-danger:hover { background: #fdecea; }

.wiki-content {
    line-height: 1.7; color: #2c3e50; font-size: 15px;
    /* No card chrome on the outer container anymore — each .wiki-section
       inside renders its OWN card so they read as distinct boxes and an
       empty top half can never happen. */
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 16px;   /* breathing room between section cards */
}

/* Each "section card" — used for content and for children-grid */
.wiki-section {
    background: #ffffff;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
/* Children-card uses tighter top padding because the heading sits right at the top */
.wiki-children-card {
    padding: 12px 18px 16px;
}
/* Use h3.wiki-section-heading to win specificity against .wiki-content h3
   (the generic markdown rule above adds margin-top:20px + font-size:18px
   which would balloon the spacing inside the children card). */
h3.wiki-section-heading,
.wiki-content h3.wiki-section-heading {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1;
}
/* Markdown content sits directly inside its section, so headings/paragraphs
   should start without extra top margin */
.wiki-content-section > :first-child { margin-top: 0; }
.wiki-content-section > :last-child  { margin-bottom: 0; }

/* Welcome screen has its own layout (hero + cards) — never wrap in card chrome */
.wiki-content:has(> .wiki-welcome) { gap: 0; }
.wiki-content h1 { font-size: 28px; margin: 28px 0 14px; }
.wiki-content h2 { font-size: 22px; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid #ecf0f1; }
.wiki-content h3 { font-size: 18px; margin: 20px 0 10px; }
.wiki-content p { margin: 12px 0; }
.wiki-content ul, .wiki-content ol { margin: 12px 0; padding-left: 26px; }
.wiki-content li { margin: 4px 0; }
.wiki-content code {
    background: #f4f6f8; padding: 2px 6px; border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; color: #c0392b;
}
.wiki-content pre {
    background: #1e293b; color: #e2e8f0; padding: 14px 18px; border-radius: 8px;
    overflow-x: auto; font-size: 13px; line-height: 1.55;
}
.wiki-content pre code { background: transparent; color: inherit; padding: 0; }
.wiki-content blockquote {
    margin: 14px 0; padding: 10px 16px; background: #f4f6f8;
    border-left: 4px solid #667eea; color: #34495e;
}
.wiki-content table {
    border-collapse: collapse; margin: 14px 0; width: 100%; font-size: 14px;
}
.wiki-content th, .wiki-content td {
    border: 1px solid #ecf0f1; padding: 8px 12px; text-align: left;
}
.wiki-content th { background: #f8f9fb; font-weight: 600; }
.wiki-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.wiki-content video { max-width: 100%; border-radius: 6px; }
.wiki-content a { color: #667eea; text-decoration: none; }
.wiki-content a:hover { text-decoration: underline; }
.wiki-content hr { border: 0; border-top: 1px solid #ecf0f1; margin: 20px 0; }

.wiki-empty-page { color: #95a5a6; font-style: italic; padding: 20px 0; }

.wiki-space-view-desc {
    color: #5d6d7e; font-size: 15px; line-height: 1.6;
    margin: 0 0 24px; padding: 14px 18px;
    background: #f8f9fb; border-radius: 10px;
    border-left: 3px solid #667eea;
}
/* Legacy classes from earlier iteration; kept as no-ops in case any cached
   markup still references them. The new layout uses .wiki-section instead. */
.wiki-space-view-children,
.wiki-children-section {
    margin: 0; padding: 0; border: 0;
}
.wiki-children-heading {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wiki-children-count { color: #bdc3c7; font-weight: 500; }
/* ============================================================
   Child-page cards (Notion-style: clean, horizontal, scannable)
   Used inside both the Space view and any page's "child pages" section.
   Layout: [icon] [title spans] [count pill on right] [▸ chevron on hover]
   ============================================================ */
.wiki-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}
.wiki-child-card {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 12px 14px;
    padding-right: 32px;        /* room for the hover chevron */
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    position: relative;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.wiki-child-card::after {
    /* Tiny chevron that fades in on hover — gives a clear "click me to navigate" cue */
    content: '›';
    position: absolute;
    right: 14px;
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s, color 0.15s;
    pointer-events: none;
}
.wiki-child-card:hover {
    background: #f8fafc;
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}
.wiki-child-card:hover::after {
    opacity: 1;
    transform: translateX(0);
    color: #6366f1;
}
.wiki-child-card-icon {
    font-size: 20px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 6px;
    flex-shrink: 0;
}
.wiki-child-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ---- Welcome screen ---------------------------------------------------- */
.wiki-welcome { max-width: 1180px; padding: 14px 0; }
.wiki-welcome h1 { font-size: 30px; margin: 0 0 8px; }
.wiki-welcome-lead { color: #7f8c8d; font-size: 15px; margin-bottom: 24px; }
.wiki-welcome-cards {
    /* container only — inner grid is .wiki-welcome-cards-grid */
}
.wiki-welcome-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 22px; background: #fff; border-radius: 14px;
    border: 1px solid #e8eaf0; cursor: pointer; text-align: left;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    border-top: 3px solid var(--space-color, #667eea);
}
.wiki-welcome-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    border-color: var(--space-color, #667eea);
}
.wiki-welcome-card-icon { font-size: 30px; }
.wiki-welcome-card-name { font-size: 15px; font-weight: 600; color: #2c3e50; }
.wiki-welcome-card-desc { font-size: 12.5px; color: #7f8c8d; }

.wiki-welcome-card-add {
    border-top: 3px dashed #c7d2fe !important;
    background: #fafbff;
    border-style: dashed;
    border-color: #d1d5db;
    color: #6b7280;
}
.wiki-welcome-card-add .wiki-welcome-card-icon { color: #667eea; font-size: 32px; line-height: 1; }
.wiki-welcome-card-add .wiki-welcome-card-name { color: #4f46e5; }
.wiki-welcome-card-add:hover {
    background: #eef2ff;
    border-color: #818cf8 !important;
    border-top-color: #818cf8 !important;
}

/* ---- Editor ------------------------------------------------------------ */
.wiki-editor-wrap { max-width: 920px; }
.wiki-editor-header {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 12px; flex-wrap: wrap;
}
.wiki-editor-title-input {
    flex: 1; min-width: 280px;
    padding: 10px 14px; font-size: 22px; font-weight: 700; color: #2c3e50;
    border: 1px solid #dfe4ea; border-radius: 8px;
}
.wiki-editor-title-input:focus { outline: none; border-color: #667eea; }
.wiki-editor-actions { display: flex; gap: 8px; }
.wiki-editor-hint { margin-top: 8px; font-size: 12px; color: #95a5a6; }

/* EasyMDE polish — light borders to match the rest of the app */
.EasyMDEContainer .CodeMirror { border-radius: 8px; }
.EasyMDEContainer .editor-toolbar { border-top-left-radius: 8px; border-top-right-radius: 8px; }

/* ---- Modal ------------------------------------------------------------- */
.wiki-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
}
.wiki-modal[hidden] { display: none; }
.wiki-modal-backdrop {
    position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5);
}
.wiki-modal-dialog {
    position: relative; background: #fff; border-radius: 12px;
    width: min(560px, 90vw); padding: 0; box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.wiki-modal-header {
    padding: 16px 20px; border-bottom: 1px solid #ecf0f1;
    display: flex; align-items: center; justify-content: space-between;
}
.wiki-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: #2c3e50; }
.wiki-modal-close {
    background: transparent; border: 0; font-size: 18px;
    color: #95a5a6; cursor: pointer;
}
.wiki-modal-body { padding: 18px 20px 22px; }

/* ---- Toast ------------------------------------------------------------- */
.wiki-toast {
    position: fixed; bottom: 20px; right: 20px;
    background: #2c3e50; color: #fff;
    padding: 10px 16px; border-radius: 8px;
    font-size: 13px; box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity 0.18s, transform 0.18s; z-index: 9500;
}
.wiki-toast.show { opacity: 1; transform: translateY(0); }
.wiki-toast.success { background: #16a34a; }
.wiki-toast.error { background: #dc2626; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
    .wiki-layout { flex-direction: column; }
    .wiki-sidebar {
        width: 100%; max-height: 50vh; border-right: 0;
        border-bottom: 1px solid #e9ecef;
    }
    .wiki-main { max-height: none; padding: 0; }
    .wiki-page-header-inner { padding: 14px 16px 12px; }
    .wiki-page-body { padding: 16px 16px 40px; }
    .wiki-content { padding: 18px 20px; }
    .wiki-backlinks { padding: 16px 18px 18px; }
    .wiki-page-title { font-size: 20px; }
}

/* Safety net: ensure [hidden] attribute always wins over any wiki display rule */
.wiki-app [hidden] { display: none !important; }

/* Admin-only elements: visible by default, hidden when body is NOT wiki-is-admin.
   This is robust against any timing issues with JS toggling. */
body:not(.wiki-is-admin) .wiki-app [data-admin-only] { display: none !important; }
body:not(.wiki-is-admin) [data-admin-only].wiki-add-space-btn,
body:not(.wiki-is-admin) #wikiAdminBar { display: none !important; }

/* ============================================================
   WIKI: Reorder arrows + context menu + move-page picker
   ============================================================ */

/* Space-header reorder arrows (▲ ▼) */
.wiki-space-actions {
    display: none;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-right: 4px;
}
.wiki-space-header:hover .wiki-space-actions,
.wiki-space-header:focus-within .wiki-space-actions {
    display: inline-flex;
}
.wiki-space-action {
    background: transparent;
    border: 0;
    color: #95a5a6;
    cursor: pointer;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 4px;
    line-height: 1;
}
.wiki-space-action:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
    color: #2c3e50;
}
.wiki-space-action:disabled { opacity: 0.25; cursor: not-allowed; }

/* Page-row reorder arrows + menu button (revealed on row hover) */
.wiki-tree-row .wiki-move-up,
.wiki-tree-row .wiki-move-down,
.wiki-tree-row [data-page-menu] {
    background: transparent;
    border: 0;
    color: #95a5a6;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 10px;
    border-radius: 3px;
    line-height: 1;
}
.wiki-tree-row [data-page-menu] { font-size: 14px; padding: 0 5px; }
.wiki-tree-row .wiki-move-up:hover:not(:disabled),
.wiki-tree-row .wiki-move-down:hover:not(:disabled),
.wiki-tree-row [data-page-menu]:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #2c3e50;
}
.wiki-tree-row .wiki-move-up:disabled,
.wiki-tree-row .wiki-move-down:disabled { opacity: 0.25; cursor: not-allowed; }

/* Context menu popup for page ⋮ */
.wiki-context-menu {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    min-width: 220px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.wiki-context-menu button {
    background: transparent;
    border: 0;
    text-align: left;
    padding: 9px 12px;
    font-size: 13px;
    color: #2c3e50;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
}
.wiki-context-menu button:hover {
    background: #f1f5f9;
}

/* Move-page picker tree */
.wiki-picker-hint {
    margin: 0 0 14px;
    font-size: 13px;
    color: #64748b;
}
.wiki-picker-tree {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px;
    background: #f8fafc;
}
.wiki-pick-space + .wiki-pick-space {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.wiki-pick-node {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 7px 10px;
    font-size: 13px;
    color: #2c3e50;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.wiki-pick-node:hover { background: #e2e8f0; }
.wiki-pick-node.selected { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.wiki-pick-node.current { color: #94a3b8; cursor: default; pointer-events: none; }
.wiki-pick-root { font-weight: 600; }
.wiki-pick-icon { font-size: 14px; }
.wiki-pick-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-pick-meta { font-size: 11px; color: #94a3b8; font-weight: 400; }

.wiki-picker-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ============================================================
   Space → Product link
   Toolbar button (admin-only, space view only) + the picker modal
   that lets admins bind a wiki space to a product category.
   The button is a peer of ＋ Yeni Sayfa / ✏️ Düzenle in the
   toolbar-right group, so it inherits the band's flex layout.
   ============================================================ */
.wiki-space-product-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    transition: all 0.15s ease;
}
.wiki-space-product-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
}
.wiki-space-product-btn.is-linked {
    background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    color: #4338ca;
    font-weight: 600;
}
.wiki-space-product-btn.is-linked:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%);
    border-color: #818cf8;
}
.wiki-space-product-icon { font-size: 13px; }
.wiki-space-product-label {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Picker form (category / subcategory dropdowns) */
.wiki-spp-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 2px;
}
.wiki-spp-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wiki-spp-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}
.wiki-spp-optional {
    font-weight: 400;
    color: #94a3b8;
}
.wiki-spp-select {
    width: 100%;
    padding: 9px 11px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    transition: border-color 0.15s ease;
}
.wiki-spp-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.wiki-spp-select:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}
.wiki-picker-hint code {
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #4f46e5;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ============================================================
   Page type pill (next to page title) + editor dropdown
   ============================================================ */
.wiki-page-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    /* Soft tinted background + colored text + matching subtle border. The
       --pt-color CSS variable is set inline per type. color-mix keeps the
       palette consistent without us having to hand-pick 3 backgrounds. */
    color: var(--pt-color);
    background: color-mix(in srgb, var(--pt-color) 14%, white);
    border: 1px solid color-mix(in srgb, var(--pt-color) 35%, white);
    vertical-align: middle;
    white-space: nowrap;
}
.wiki-page-type-icon  { font-size: 12px; line-height: 1; }
.wiki-page-type-label { font-size: 11px; }

/* Editor: "Sayfa Türü" select sitting between the title input and the action
   buttons. Keep it narrow and unobtrusive — it's metadata, not content. */
.wiki-editor-page-type {
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #1e293b;
    font-family: inherit;
    cursor: pointer;
    min-width: 200px;
    transition: border-color 0.15s ease;
}
.wiki-editor-page-type:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* ============================================================
   Widget inserter popover (triggered by the puzzle-piece toolbar
   button inside EasyMDE). Lets the user pick a {{...}} token
   instead of memorizing them.
   ============================================================ */
.wiki-widget-menu {
    z-index: 10000;
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 6px;
    font-family: inherit;
}
.wiki-widget-menu-header {
    padding: 8px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}
.wiki-widget-menu-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    color: #1e293b;
    font: inherit;
    transition: background 0.12s ease;
}
.wiki-widget-menu-item + .wiki-widget-menu-item { margin-top: 2px; }
.wiki-widget-menu-item:hover,
.wiki-widget-menu-item:focus-visible {
    background: #eef2ff;
    outline: none;
}
.wiki-widget-menu-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.wiki-widget-menu-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.wiki-widget-menu-label {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.wiki-widget-menu-token {
    font-size: 11px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: #6366f1;
    background: #eef2ff;
    padding: 1px 6px;
    border-radius: 4px;
    align-self: flex-start;
}
.wiki-widget-menu-hint {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}

/* ============================================================
   {{ilgili-projeler}} widget
   Compact list of projects matching the page's linked product.
   ============================================================ */
.wiki-related-projects {
    margin: 16px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.wrp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-bottom: 1px solid #e2e8f0;
}
.wrp-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.01em;
}
.wrp-meta {
    font-size: 11.5px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.wrp-list {
    display: flex;
    flex-direction: column;
}
.wrp-colhead,
.wrp-row {
    display: grid;
    grid-template-columns: 130px 1fr 200px 90px;
    gap: 12px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    font-size: 12.5px;
    transition: background 0.12s ease;
}
.wrp-colhead {
    padding: 7px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: default;
}
.wrp-col-date { text-align: right; }
.wrp-row:last-child { border-bottom: 0; }
.wrp-row:hover { background: #f8fafc; }
.wrp-code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #4338ca;
    background: #eef2ff;
    padding: 2px 7px;
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wrp-name {
    color: #1e293b;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wrp-customer {
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wrp-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wrp-status-completed   { background: #dcfce7; color: #166534; }
.wrp-status-in-progress { background: #dbeafe; color: #1e40af; }
.wrp-status-waiting     { background: #fef3c7; color: #92400e; }
.wrp-status-planned     { background: #ede9fe; color: #5b21b6; }
.wrp-status-cancelled   { background: #fee2e2; color: #991b1b; }
.wrp-status-default     { background: #f1f5f9; color: #475569; }
.wrp-date {
    color: #94a3b8;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.wiki-related-projects.is-empty .wrp-empty,
.wiki-related-projects.is-warning .wrp-empty,
.wiki-related-projects.is-error .wrp-empty {
    padding: 16px 14px;
    font-size: 12.5px;
    color: #64748b;
    text-align: center;
}
.wiki-related-projects.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
}
.wiki-related-projects.is-warning .wrp-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom-color: #fde68a;
}
.wiki-related-projects.is-error {
    border-color: #fecaca;
}
.wiki-related-projects.is-error .wrp-header {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-bottom-color: #fecaca;
}

/* Loading skeleton */
.wrp-skel {
    height: 32px;
    margin: 6px 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: wrp-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes wrp-skel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Tighter layout on narrow screens — drop customer, then date */
@media (max-width: 900px) {
    .wrp-colhead,
    .wrp-row { grid-template-columns: 110px 1fr 80px; }
    .wrp-customer,
    .wrp-col-customer { display: none; }
}
@media (max-width: 640px) {
    .wrp-colhead,
    .wrp-row { grid-template-columns: 100px 1fr; }
    .wrp-date,
    .wrp-col-date { display: none; }
}

/* ============================================================
   {{tum-fiyat-analizleri}} / {{tum-teklif-dokumanlari}} etc.
   Global page-type index widget. Visual cousin of the
   related-projects table — same band header, same row hover,
   different column makeup (Ürün / Sayfa / Tarih).
   ============================================================ */
.wiki-pages-by-type {
    margin: 16px 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.wpbt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #ecfdf5 100%);
    border-bottom: 1px solid #e2e8f0;
}
.wpbt-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.wpbt-meta {
    font-size: 11.5px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.wpbt-list { display: flex; flex-direction: column; }
.wpbt-colhead,
.wpbt-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.6fr) 1fr 100px;
    gap: 12px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    font-size: 12.5px;
    transition: background 0.12s ease;
}
.wpbt-colhead {
    padding: 7px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: default;
}
.wpbt-col-date { text-align: right; }
.wpbt-row:last-child { border-bottom: 0; }
.wpbt-row:hover { background: #f8fafc; }
.wpbt-space {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--wpbt-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--wpbt-color) 30%, white);
    color: color-mix(in srgb, var(--wpbt-color) 70%, #0f172a);
    font-weight: 600;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Let the pill grow with its grid column instead of being capped */
    max-width: 100%;
    min-width: 0;
}
.wpbt-space-icon { font-size: 12px; line-height: 1; }
.wpbt-space-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpbt-page-title {
    color: #1e293b;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wpbt-date {
    color: #94a3b8;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.wiki-pages-by-type.is-empty .wpbt-empty,
.wiki-pages-by-type.is-error .wpbt-empty {
    padding: 16px 14px;
    font-size: 12.5px;
    color: #64748b;
    text-align: center;
}
.wiki-pages-by-type.is-error { border-color: #fecaca; }
.wiki-pages-by-type.is-error .wpbt-header {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-bottom-color: #fecaca;
}
.wpbt-skel {
    height: 32px;
    margin: 6px 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: wrp-skel-shimmer 1.4s ease-in-out infinite;
}

@media (max-width: 900px) {
    .wpbt-colhead,
    .wpbt-row { grid-template-columns: minmax(220px, 1.4fr) 1fr 80px; }
}
@media (max-width: 640px) {
    .wpbt-colhead,
    .wpbt-row { grid-template-columns: minmax(180px, 1.3fr) 1fr; }
    .wpbt-date,
    .wpbt-col-date { display: none; }
}
.wiki-btn-primary {
    background: #2563eb; color: #fff; border: 0;
    padding: 9px 18px; border-radius: 7px; font-size: 13px;
    font-weight: 600; cursor: pointer;
}
.wiki-btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }
.wiki-btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.wiki-btn-secondary {
    background: #f1f5f9; color: #475569; border: 0;
    padding: 9px 18px; border-radius: 7px; font-size: 13px;
    font-weight: 600; cursor: pointer;
}
.wiki-btn-secondary:hover { background: #e2e8f0; }

/* ============================================================
   WIKI: Internal page-to-page links + backlinks
   ============================================================ */

/* Inline wikilink ([[PG-xxx]] rendered) */
.wiki-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    background: #eff6ff;
    color: #1d4ed8 !important;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #dbeafe;
    font-weight: 500;
    transition: background 0.12s, border-color 0.12s;
}
.wiki-link:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    text-decoration: none;
}
.wiki-link.broken {
    background: #fef2f2;
    color: #b91c1c !important;
    border-color: #fecaca;
    cursor: not-allowed;
    text-decoration: line-through;
}
/* "Parent / Child" disambiguation inside a wikilink:
   - Parent: dimmed, lighter weight (context)
   - Child:  normal-weight, full color (the actual target) */
.wiki-link-parent {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.92em;
}
.wiki-link-child {
    font-weight: 600;
}

/* Search input inside the link picker modal */
.wiki-picker-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.wiki-picker-search:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Backlinks band — distinct tinted card under the content card.
   Rendered as a vertical row list with clear horizontal alignment:
   title on the left, space label on the right. Each row separated by a
   thin divider, the whole list contained in a single card. */
.wiki-backlinks {
    margin-top: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 22px 8px;
    position: relative;
    border-left: 4px solid #818cf8;   /* accent on the left edge */
}
.wiki-backlinks-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wiki-backlinks-count {
    background: #818cf8;
    color: #fff;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0;
}
.wiki-backlinks-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}
.wiki-backlinks-list li + li {
    border-top: 1px solid #eef2f7;
}
.wiki-backlinks-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 11px 16px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 13.5px;
    transition: background 0.12s;
}
.wiki-backlinks-list a:hover {
    background: #eff6ff;
    text-decoration: none;
}
.wiki-backlink-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Backlink parent/child disambiguation — mirrors inline wikilinks */
.wiki-backlink-parent {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.92em;
}
.wiki-backlink-child {
    font-weight: 700;
    color: inherit;
}
.wiki-backlink-space {
    font-size: 11.5px;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* ============================================================
   ATTACHMENTS — file cards + image previews + lightbox
   Polished UI for files attached to wiki pages.
   ============================================================ */

/* Inline image wrapper. The wrapper is what receives clicks and shows the
   hover state — the <img> inside stays simple. */
.wiki-img-wrap {
    display: inline-block;
    position: relative;
    cursor: zoom-in;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
    margin: 10px 6px 10px 0;
    max-width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.wiki-img-wrap img {
    display: block;
    max-width: 100%;
    max-height: 460px;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    border: 0;
}
.wiki-img-wrap:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    border-color: #cbd5e1;
}
.wiki-img-wrap::after {
    content: '⤢';
    position: absolute;
    top: 8px; right: 8px;
    font-size: 14px;
    color: #fff;
    background: rgba(15, 23, 42, 0.65);
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.wiki-img-wrap:hover::after { opacity: 1; }

/* File card — replaces the ugly "📎 filename.pdf" raw link.
   Compact single-line layout: small badge + filename + meta · then action arrow.
   Designed so 20+ cards can stack without eating the screen. */
.wiki-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    width: 100%;
    text-decoration: none !important;
    color: #1e293b !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px 6px 6px;
    margin: 4px 0;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    box-shadow: none;
    min-height: 36px;
}
.wiki-file-card:hover {
    border-color: #c7d2fe;
    background: #fafbff;
    text-decoration: none !important;
}
.wiki-file-card-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #64748b;       /* default */
    position: relative;
    overflow: hidden;
}
.wiki-file-card-ext {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    padding: 0 2px;
    text-align: center;
    max-width: 100%;
    word-break: break-all;
}
/* Single-line body: filename · meta side-by-side */
.wiki-file-card-body {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.wiki-file-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}
.wiki-file-card-meta {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ============================================================
   FILE-MANAGEMENT HUB + WIKI FILE MANAGER SECTION
   Lives in file-management.html alongside the existing projects UI.
   ============================================================ */

/* HUB: section switcher tiles at the top of the file-management page.
   Lives both in the standalone file-management.html AND inside the SPA's
   #file-managementPage. Its height is exposed as --fm-hub-h by JS so the
   4-column layout below can subtract it correctly. */
/* Dark theme to match the project files' #263238 sidebar — keeps the whole
   page visually consistent regardless of which tile is active. */
.fm-hub {
    margin: 0 0 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* When the hub sits inside the SPA's full-bleed #file-managementPage,
   it needs a little gutter so it doesn't hug the screen edges. */
#file-managementPage .fm-hub {
    margin: 8px 14px;
}
/* Standalone file-management.html uses a less-fancy layout (no `position:fixed`).
   When wrapped in our .fm-section there, subtract the hub height so the
   top of the sidebar stays visible. The SPA's #file-managementPage rule
   overrides this with the --navbar-h variant. */
.fm-section .file-browser-layout {
    height: calc(100vh - 140px - var(--fm-hub-h, 0px) - 14px);
}
/* The wiki-section wrap mirrors the page's gutter so its cards align with
   the hub above. */
.wfm-wrap {
    padding: 0 14px 14px;
    background: transparent;
    min-height: 100%;
}
/* SPA section background is the page bg — no override needed now that we
   use a clean light theme throughout. */
#file-managementPage .fm-section[data-fm-section="wiki"] {
    background: transparent;
}
.fm-hub-inner {
    display: flex;
    gap: 4px;
    align-items: stretch;
    flex-wrap: nowrap;
    min-width: 0;
}
/* Compact dark tile: filename + small badge on a single row.
   ~34px tall total — matches the project-files sidebar visual style. */
.fm-hub-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-height: 32px;
}
.fm-hub-tab:hover {
    background: #f8fafc;
}
.fm-hub-tab.active {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.fm-hub-tab-icon {
    font-size: 13px;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fm-hub-tab[data-fm-section="wiki"] .fm-hub-tab-icon {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
}
/* Title + meta on a single row so the whole tile stays compact */
.fm-hub-tab-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    flex-wrap: nowrap;
}
.fm-hub-tab-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}
.fm-hub-tab-meta {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-hub-tab.active .fm-hub-tab-title { color: #1e3a8a; }
.fm-hub-tab.active .fm-hub-tab-meta  { color: #2563eb; }

/* WFM: clean light frame band that holds stats + filters.
   Industry-standard SaaS look: subtle gray with soft shadow. */
.wfm-frame {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* WFM: stats strip — clean white cards on the light frame */
.wfm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.wfm-stat {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wfm-stat:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}
.wfm-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    flex-shrink: 0;
}
.wfm-stat-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wfm-stat-orphans {
    background: #fffbeb;
    border-color: #fde68a;
    gap: 6px;
}
.wfm-stat-orphans .wfm-stat-value { color: #b45309; }
.wfm-stat-orphans .wfm-stat-label { color: #92400e; }
.wfm-stat-link {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 4px;
    background: #f59e0b;
    color: #ffffff;
    border: 0;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease;
}
.wfm-stat-link:hover { background: #d97706; }

/* WFM: filters bar — sits inside the same dark frame as stats */
.wfm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.wfm-search {
    flex: 1 1 220px;
    min-width: 160px;
    padding: 7px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #ffffff;
    color: #0f172a;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wfm-search::placeholder { color: #94a3b8; }
.wfm-search:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.wfm-select {
    padding: 7px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wfm-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.wfm-select option { background: #ffffff; color: #0f172a; }
.wfm-result-count {
    margin-left: auto;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

/* WFM: body — flex layout so the table claims the full width whenever
   the preview pane is hidden ([hidden] attribute on .wfm-preview). When the
   preview becomes visible it slides in at a fixed 340px. */
.wfm-body {
    display: flex;
    gap: 14px;
    align-items: stretch;
}
.wfm-table-wrap {
    flex: 1 1 auto;
    min-width: 0;
}
.wfm-preview {
    flex: 0 0 340px;
    width: 340px;
}
.wfm-preview[hidden] { display: none; }
@media (max-width: 980px) {
    .wfm-body { flex-direction: column; }
    .wfm-preview { flex-basis: auto; width: 100%; }
}
.wfm-table-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.wfm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.wfm-table thead th {
    background: #f8fafc;
    color: #64748b;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
}
.wfm-table tbody td {
    padding: 7px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 13px;
    color: #475569;
}
.wfm-table tbody tr { cursor: pointer; transition: background 0.1s ease; }
.wfm-table tbody tr:hover { background: #f8fafc; }
.wfm-table tbody tr.selected { background: #eff6ff; }
.wfm-name-cell {
    font-weight: 600;
    color: #0f172a;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wfm-row-icon {
    display: inline-block;
    min-width: 32px;
    padding: 3px 6px;
    border-radius: 5px;
    text-align: center;
    font-size: 9.5px;
    font-weight: 800;
    color: #fff;
    background: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.wfm-row-icon[data-ext="pdf"]     { background: linear-gradient(135deg, #ef4444, #dc2626); }
.wfm-row-icon[data-ext="doc"]     { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.wfm-row-icon[data-ext="sheet"]   { background: linear-gradient(135deg, #22c55e, #15803d); }
.wfm-row-icon[data-ext="slide"]   { background: linear-gradient(135deg, #f97316, #c2410c); }
.wfm-row-icon[data-ext="image"]   { background: linear-gradient(135deg, #ec4899, #be185d); }
.wfm-row-icon[data-ext="video"]   { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.wfm-row-icon[data-ext="audio"]   { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.wfm-row-icon[data-ext="archive"] { background: linear-gradient(135deg, #eab308, #a16207); }
.wfm-row-icon[data-ext="cad"]     { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.wfm-row-icon[data-ext="code"]    { background: linear-gradient(135deg, #475569, #1e293b); }
.wfm-row-icon[data-ext="other"]   { background: linear-gradient(135deg, #94a3b8, #475569); }

/* Parent-page cell: single-row with space + page title, clickable */
.wfm-page-cell {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 4px;
    transition: background 0.12s ease;
    overflow: hidden;
}
.wfm-page-cell:hover { background: #eff6ff; }
.wfm-page-space {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wfm-page-title {
    font-size: 12.5px;
    color: #1d4ed8;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wfm-page-title em { color: #b91c1c; font-style: italic; font-weight: 500; }
.wfm-orphan-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* WFM: right-side preview pane */
.wfm-preview {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    position: sticky;
    top: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.wfm-preview-stage {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    min-height: 200px;
    max-height: 360px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.wfm-preview-img {
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
    cursor: zoom-in;
}
.wfm-preview-pdf {
    width: 100%;
    height: 360px;
    border: 0;
    background: #fff;
}
.wfm-preview-icon {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    color: #fff;
    background: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.wfm-preview-icon[data-ext="pdf"]     { background: linear-gradient(135deg, #ef4444, #dc2626); }
.wfm-preview-icon[data-ext="doc"]     { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.wfm-preview-icon[data-ext="sheet"]   { background: linear-gradient(135deg, #22c55e, #15803d); }
.wfm-preview-icon[data-ext="slide"]   { background: linear-gradient(135deg, #f97316, #c2410c); }
.wfm-preview-icon[data-ext="image"]   { background: linear-gradient(135deg, #ec4899, #be185d); }
.wfm-preview-icon[data-ext="video"]   { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.wfm-preview-icon[data-ext="audio"]   { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.wfm-preview-icon[data-ext="archive"] { background: linear-gradient(135deg, #eab308, #a16207); }
.wfm-preview-icon[data-ext="cad"]     { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.wfm-preview-icon[data-ext="code"]    { background: linear-gradient(135deg, #475569, #1e293b); }
.wfm-preview-name {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}
.wfm-preview-info { font-size: 12.5px; }
.wfm-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}
.wfm-preview-row span { color: #64748b; }
.wfm-preview-row strong { color: #0f172a; text-align: right; font-weight: 600; }
.wfm-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.wfm-btn {
    padding: 7px 12px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: filter 0.12s ease, background 0.12s ease;
}
.wfm-btn-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.wfm-btn-primary:hover { filter: brightness(1.08); }
.wfm-btn-secondary {
    background: #f8fafc;
    color: #1d4ed8;
    border-color: #cbd5e1;
}
.wfm-btn-secondary:hover { background: #eff6ff; border-color: #93c5fd; }
.wfm-btn-danger {
    background: #fff1f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.wfm-btn-danger:hover { background: #fee2e2; }

/* Upload-date pill sitting on the right, just before the download arrow.
   Pushed to the right edge thanks to the body flex-grow eating remaining
   space, leaving the date hugging the action button. */
.wiki-file-card-date {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 10px;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}
@media (max-width: 640px) {
    /* On narrow screens we already hide .wiki-file-card-meta;
       keep the date visible since it's the more useful signal. */
    .wiki-file-card-date { font-size: 10.5px; padding-left: 6px; }
}
.wiki-file-card-action {
    flex-shrink: 0;
    font-size: 14px;
    color: #cbd5e1;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: background 0.12s ease, color 0.12s ease;
}
.wiki-file-card:hover .wiki-file-card-action {
    background: #eef2ff;
    color: #4f46e5;
}
/* On narrow screens, hide the meta label so the filename keeps full width */
@media (max-width: 640px) {
    .wiki-file-card-meta { display: none; }
}

/* Color-coded icon backgrounds per extension family */
.wiki-file-card[data-ext="pdf"]     .wiki-file-card-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }
.wiki-file-card[data-ext="doc"]     .wiki-file-card-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.wiki-file-card[data-ext="sheet"]   .wiki-file-card-icon { background: linear-gradient(135deg, #22c55e, #15803d); }
.wiki-file-card[data-ext="slide"]   .wiki-file-card-icon { background: linear-gradient(135deg, #f97316, #c2410c); }
.wiki-file-card[data-ext="image"]   .wiki-file-card-icon { background: linear-gradient(135deg, #ec4899, #be185d); }
.wiki-file-card[data-ext="video"]   .wiki-file-card-icon { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.wiki-file-card[data-ext="audio"]   .wiki-file-card-icon { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.wiki-file-card[data-ext="archive"] .wiki-file-card-icon { background: linear-gradient(135deg, #eab308, #a16207); }
.wiki-file-card[data-ext="cad"]     .wiki-file-card-icon { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.wiki-file-card[data-ext="code"]    .wiki-file-card-icon { background: linear-gradient(135deg, #475569, #1e293b); }
.wiki-file-card[data-ext="other"]   .wiki-file-card-icon { background: linear-gradient(135deg, #94a3b8, #475569); }

/* Lightbox — fullscreen image viewer */
.wiki-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15, 23, 42, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 28px;
    cursor: zoom-out;
    animation: wikiLightboxIn 0.18s ease-out;
}
.wiki-lightbox[hidden] { display: none; }
@keyframes wikiLightboxIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.wiki-lightbox-close {
    position: absolute;
    top: 16px; right: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 38px; height: 38px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.wiki-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.wiki-lightbox-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}
.wiki-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: default;
}
.wiki-lightbox-caption {
    color: #cbd5e1;
    font-size: 13px;
    margin-top: 14px;
    text-align: center;
    max-width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* =============================================================
   Document Indexing Badges (AI-readability status)
   ============================================================= */
.doc-idx-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    cursor: help;
}
.doc-idx-dot[data-status="processing"] {
    animation: docIdxPulse 1.4s ease-in-out infinite;
}
@keyframes docIdxPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.85); }
}

.doc-idx-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    line-height: 1.4;
    white-space: nowrap;
    cursor: help;
}
.doc-idx-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
}
.doc-idx-badge-icon {
    font-size: 10px;
    line-height: 1;
}
.doc-idx-badge-label {
    font-size: 10.5px;
    letter-spacing: 0.2px;
}
.doc-idx-badge[data-status="indexed"]     { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.doc-idx-badge[data-status="partial"]     { background: #fefce8; border-color: #fef08a; color: #854d0e; }
.doc-idx-badge[data-status="processing"]  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.doc-idx-badge[data-status="failed"]      { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.doc-idx-badge[data-status="unsupported"] { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.doc-idx-badge[data-status="pending"]     { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.doc-idx-badge[data-status="processing"] .doc-idx-badge-dot {
    animation: docIdxPulse 1.4s ease-in-out infinite;
}

/* Place dot inside the wiki file card without breaking layout */
.wiki-file-card .doc-idx-dot {
    margin-left: 4px;
}

/* WFM: AI stat tile (in the dark stats strip) */
.wfm-stat-ai {
    background: #ffffff;
    border-color: #c7d2fe;
    gap: 6px;
    /* Span more columns since the AI tile now contains a breakdown row */
    grid-column: span 2;
    min-width: 280px;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
}
.wfm-stat-ai::before {
    content: "🧠";
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 14px;
    opacity: 0.6;
}
.wfm-stat-ai .wfm-stat-value { color: #4338ca; }
.wfm-stat-ai .wfm-stat-label { color: #4f46e5; }
.wfm-stat-ai .wfm-stat-link {
    background: #4f46e5;
    color: #fff;
}
.wfm-stat-ai .wfm-stat-link:hover { background: #4338ca; }

/* WFM: AI status cell inside the table */
.wfm-ai-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wfm-ai-reindex {
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 0;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wfm-ai-reindex:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
    transform: rotate(45deg);
}

/* ============================================================
   PROJECT FILE MANAGEMENT — view toggle (lives inside the hub
   tile, right-aligned). Segmented pill design.
   ============================================================ */
.pfm-view-toggle {
    display: inline-flex;
    margin-left: auto;          /* push to the right of the hub tile */
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 2px;
    flex-shrink: 0;
}
.pfm-view-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.pfm-view-btn:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
}
.pfm-view-btn.active {
    background: #ffffff;
    color: #1e40af;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.pfm-flat-section {
    display: block;
}
.pfm-flat-section[hidden] { display: none; }

/* Source + tag badges shown after a file name */
.pfm-source-badge,
.pfm-tag-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    border-radius: 999px;
    border: 1px solid transparent;
    vertical-align: middle;
}
.pfm-source-general { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.pfm-source-action  { background: #fdf4ff; color: #7e22ce; border-color: #f3e8ff; }

.pfm-tag-badge {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
    letter-spacing: 0.2px;
}
.pfm-tag-badge[data-tag="teklif"]        { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.pfm-tag-badge[data-tag="cizim"]         { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pfm-tag-badge[data-tag="fiyat_analizi"] { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* Hub tile: small AI sub-line */
/* AI Chat — document source citation cards */
.ai-doc-sources {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.ai-doc-sources-header {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.ai-doc-sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
}
.ai-doc-source-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.ai-doc-source-card:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    transform: translateY(-1px);
}
.ai-doc-source-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}
.ai-doc-source-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ai-doc-source-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-doc-source-meta {
    font-size: 10.5px;
    color: #94a3b8;
}
.ai-doc-source-open {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 12px;
    transition: color 0.15s ease;
}
.ai-doc-source-card:hover .ai-doc-source-open { color: #1d4ed8; }

/* ============================================================
 * Selected project chip strip (flat project files view)
 * Shows above the table when a project is picked from the
 * searchable project dropdown, so the user has a clear visual
 * confirmation of what's being filtered.
 * ============================================================ */
.pfm-selected-project-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    font-size: 13px;
    color: #1e293b;
}
.pfm-selected-project-chip[hidden] { display: none; }

.pfm-chip-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}
.pfm-chip-code {
    font-weight: 800;
    color: #1e40af;
    background: #ffffff;
    border: 1px solid #c7d2fe;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    font-size: 12px;
}
.pfm-chip-customer {
    font-weight: 700;
    color: #312e81;
}
.pfm-chip-name {
    color: #475569;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.pfm-chip-dot {
    color: #94a3b8;
    font-weight: 700;
}

.pfm-chip-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.pfm-chip-count {
    font-weight: 700;
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11.5px;
}
.pfm-chip-link {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}
.pfm-chip-link:hover {
    background: rgba(29, 78, 216, 0.1);
    text-decoration: underline;
}
.pfm-chip-clear {
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 18px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #64748b;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}
.pfm-chip-clear:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* Ensure the searchable-select wrapper inside the pfm filter row
 * lines up nicely with the other native filter selects. */
.wfm-filters .searchable-select-wrapper {
    min-width: 280px;
    flex: 1 1 280px;
    max-width: 420px;
}

/* ============================================================
 * Selection Toolbar (batch indexing)
 * Sits between filters and the file table. Provides:
 *  - "Tümünü seç" / "Eksikleri seç" / clear actions
 *  - selection count
 *  - "Seçilenleri indeksle" action (with confirm + cancellable progress)
 * ============================================================ */
.pfm-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
}
.pfm-sel-left, .pfm-sel-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pfm-sel-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}
.pfm-sel-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1e3a8a;
}
.pfm-sel-btn-accent {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #3730a3;
}
.pfm-sel-btn-accent:hover {
    background: #c7d2fe;
    color: #1e3a8a;
}
/* "İlk N seç" picker — visually a sibling of .pfm-sel-btn but with a
   built-in caret to hint at the dropdown behaviour. */
.pfm-sel-pick {
    padding: 5px 28px 5px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23475569' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
    background-size: 9px 5px;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.12s ease;
}
.pfm-sel-pick:hover {
    background-color: #eef2ff;
    border-color: #c7d2fe;
    color: #1e3a8a;
}
.pfm-sel-pick:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.pfm-sel-count {
    font-weight: 700;
    color: #475569;
    margin-left: 4px;
}
.pfm-sel-link {
    background: none;
    border: none;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px 6px;
}
.pfm-sel-link:hover { background: #fef2f2; border-radius: 4px; }

.pfm-sel-action {
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.30);
}
.pfm-sel-action:hover:not(:disabled) {
    background: linear-gradient(180deg, #4338ca 0%, #3730a3 100%);
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.40);
    transform: translateY(-1px);
}
.pfm-sel-action:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
}

/* Batch progress strip — shown while indexing */
.pfm-batch-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
}
.pfm-batch-progress[hidden] { display: none; }
.pfm-batch-text {
    font-size: 12.5px;
    font-weight: 700;
    color: #065f46;
}
.pfm-batch-cancel {
    background: #ffffff;
    border: 1px solid #fca5a5;
    color: #b91c1c;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.pfm-batch-cancel:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

/* Per-row checkbox + checked-row highlight */
.pfm-row-check {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
}
.wfm-row.is-checked {
    background-color: #eef2ff !important;
}
.pfm-th-check {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #4f46e5;
}

/* Per-row spinner while a file is being indexed in a batch */
.pfm-row-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #c7d2fe;
    border-top-color: #4338ca;
    border-radius: 50%;
    animation: pfm-spin 0.9s linear infinite;
    margin-left: 4px;
    vertical-align: middle;
}
@keyframes pfm-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
 * AI İndeksleme — breakdown bar + status chips inside the AI tile
 * Shows the truthful distribution of indexed / failed / pending /
 * unsupported / skipped so the user understands what's actionable.
 * ============================================================ */
.pfm-ai-breakdown {
    width: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pfm-ai-bar {
    display: flex;
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.pfm-ai-seg { height: 100%; }
.pfm-ai-seg.seg-indexed     { background: #10b981; } /* green */
.pfm-ai-seg.seg-partial     { background: #84cc16; } /* lime */
.pfm-ai-seg.seg-processing  { background: #3b82f6; } /* blue */
.pfm-ai-seg.seg-failed      { background: #ef4444; } /* red */
.pfm-ai-seg.seg-pending     { background: #94a3b8; } /* slate */
.pfm-ai-seg.seg-unsupported { background: #cbd5e1; } /* light slate */
.pfm-ai-seg.seg-skipped     { background: #a78bfa; } /* violet */

.pfm-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.4;
}
.pfm-ai-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}
.pfm-ai-chip b { font-weight: 700; }
.pfm-ai-chip.chip-indexed     { background: #d1fae5; color: #065f46; }
.pfm-ai-chip.chip-processing  { background: #dbeafe; color: #1e40af; }
.pfm-ai-chip.chip-failed      { background: #fee2e2; color: #991b1b; }
.pfm-ai-chip.chip-pending     { background: #f1f5f9; color: #475569; }
.pfm-ai-chip.chip-unsupported { background: #f1f5f9; color: #64748b; }
.pfm-ai-chip.chip-skipped     { background: #ede9fe; color: #5b21b6; }

/* ============================================================
 * Project Picker (combobox) — flat project files view
 * Custom combobox replacing the native <select> for project
 * filtering. Click-to-open, type-to-filter, click-to-select.
 * ============================================================ */
.pfm-project-picker {
    position: relative;
    min-width: 320px;
    flex: 1 1 320px;
    max-width: 480px;
    display: flex;
    align-items: center;
}
.pfm-project-picker .pfm-pp-input {
    width: 100%;
    height: 36px;
    padding: 0 64px 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.2;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pfm-project-picker .pfm-pp-input::placeholder {
    color: #94a3b8;
}
.pfm-project-picker .pfm-pp-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.pfm-project-picker .pfm-pp-caret {
    position: absolute;
    right: 10px;
    color: #94a3b8;
    font-size: 12px;
    pointer-events: none;
    user-select: none;
}
.pfm-project-picker .pfm-pp-clear {
    position: absolute;
    right: 28px;
    width: 20px;
    height: 20px;
    line-height: 1;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}
.pfm-project-picker .pfm-pp-clear:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}
.pfm-project-picker .pfm-pp-clear[hidden] { display: none; }

.pfm-project-picker .pfm-pp-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 360px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    z-index: 200;
    padding: 4px;
}
.pfm-project-picker .pfm-pp-dropdown[hidden] { display: none; }

.pfm-pp-option {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    border: 1px solid transparent;
}
.pfm-pp-option:hover,
.pfm-pp-option.highlighted {
    background: #eef2ff;
    border-color: #c7d2fe;
}
.pfm-pp-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.3;
}
.pfm-pp-code {
    font-weight: 800;
    color: #1e40af;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    font-size: 11px;
    flex-shrink: 0;
}
.pfm-pp-customer {
    font-weight: 700;
    color: #312e81;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pfm-pp-line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    font-size: 11.5px;
}
.pfm-pp-name {
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}
.pfm-pp-count {
    color: #64748b;
    font-weight: 600;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 10.5px;
    flex-shrink: 0;
}
.pfm-pp-empty,
.pfm-pp-more {
    padding: 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
}
.pfm-pp-more {
    border-top: 1px dashed #e2e8f0;
    margin-top: 4px;
}

/* ============================================================================
   AI INDEX MAINTENANCE — small admin button in the file-management hub,
   plus the modal that lists/cleans orphan chunks.
   ============================================================================ */
.fm-hub-admin-btn {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fm-hub-admin-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* Modal — light, centered */
.ai-maint-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-maint-modal[hidden] { display: none; }
.ai-maint-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.ai-maint-dialog {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 60px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ai-maint-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.ai-maint-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}
.ai-maint-close {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.ai-maint-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.ai-maint-body {
    padding: 18px 20px;
    overflow-y: auto;
}
.ai-maint-intro {
    margin: 0 0 14px;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
}
.ai-maint-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    font-style: italic;
}
.ai-maint-loading {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    margin: 24px 0;
}
.ai-maint-error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}
.ai-maint-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ai-maint-table th,
.ai-maint-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}
.ai-maint-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.ai-maint-table tfoot th {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 700;
    border-top: 2px solid #e2e8f0;
    border-bottom: none;
}
.ai-maint-table .ai-maint-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ai-maint-table tr.is-dim td {
    color: #94a3b8;
}
.ai-maint-empty {
    text-align: center;
    padding: 28px 12px;
}
.ai-maint-empty-icon {
    font-size: 36px;
    color: #16a34a;
    line-height: 1;
    margin-bottom: 8px;
}
.ai-maint-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}
.ai-maint-empty-sub {
    font-size: 13px;
    color: #64748b;
}
.ai-maint-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.ai-maint-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ai-maint-btn-secondary {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #475569;
}
.ai-maint-btn-secondary:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.ai-maint-btn-primary {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}
.ai-maint-btn-primary:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
}
.ai-maint-btn-primary:disabled {
    background: #cbd5e1;
    border-color: #cbd5e1;
    cursor: not-allowed;
}

/* ============================================================================
   AI STAT TILE — headline % chip + "Tamamlandı" pill (Wiki + Proje)
   The .wfm-stat-value span now contains three inline pieces:
     [ X/Y ]  [ 75% ]  [ ✓ Tamamlandı ]
   ============================================================================ */
.wfm-stat-ai .wfm-stat-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pfm-ai-ratio {
    font-size: 16px;
    font-weight: 700;
    color: inherit;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.pfm-ai-pct {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
}
.pfm-ai-pct.pct-done {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}
.pfm-ai-pct.pct-high {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}
.pfm-ai-pct.pct-mid {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}
.pfm-ai-pct.pct-low {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}
.pfm-ai-pct.pct-neutral {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.pfm-ai-done-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}
/* Tile gets a soft green glow when fully complete */
.wfm-stat-ai.is-complete {
    border-color: #86efac !important;
    background: linear-gradient(135deg, #f0fdf4, #ffffff) !important;
}
.wfm-stat-ai.is-complete::before {
    opacity: 0.85;
}