/* --- RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f5f0f9;
    color: #1a142b;
    font-size: 100%;
    /* base font size */
}

/* --- FULL SCREEN LAYOUT --- */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- TOPBAR --- */
.topbar {
    background: #ffffff;
    padding: 0.6rem 1.5rem;
    border-bottom: 0.06rem solid #ede6f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.8rem;
    height: auto;
    min-height: 3.6rem;
    position: relative;
    z-index: 100;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

.btn-topbar-menu {
    background: #f3e8ff;
    color: #7c3aed;
    border: 0.06rem solid #ede6f5;
    border-radius: 0.5rem;
    padding: 0.35rem 0.65rem;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn-topbar-menu:hover {
    background: #ede3f9;
    color: #5b21b6;
}

.topbar-left .logo {
    display: flex;
    align-items: center;
}

.topbar-left .logo img,
.logo-img {
    height: 2.2rem;
    max-height: 2.5rem;
    width: auto;
    object-fit: contain;
    display: block;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}

.topbar-right .user {
    font-size: 0.88rem;
    font-weight: 600;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.user-avatar-circle {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    object-fit: cover;
    border: 0.08rem solid #7c3aed;
    flex-shrink: 0;
}

/* --- USER DROPDOWN MENU --- */
.user-dropdown {
    position: relative;
    display: inline-block;
}

/* Same icon-button chrome as .btn-topbar-notification, so the two topbar
   buttons on this row read as one matching family instead of one pill and
   one square. */
.user-dropdown-btn {
    background: #f3e8ff;
    color: #7c3aed;
    border: 0.06rem solid #ede6f5;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    outline: none;
    line-height: 1;
    transition: all 0.2s ease;
}

.user-dropdown-btn:hover {
    background: #ede3f9;
    color: #5b21b6;
}

.user-dropdown-btn .dropdown-arrow {
    font-size: 0.65rem;
    color: inherit;
    transition: transform 0.2s ease;
}

.user-dropdown.open .user-dropdown-btn .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 14.5rem;
    background: #ffffff;
    border-radius: 0.8rem;
    border: 0.06rem solid #ede6f5;
    box-shadow: 0 0.5rem 1.5rem rgba(109, 40, 217, 0.15);
    padding: 0.5rem 0;
    display: none;
    z-index: 1000;
}

.user-dropdown.open .user-dropdown-menu {
    display: block;
}

.user-dropdown-header {
    padding: 0.6rem 1rem 0.4rem;
}

.user-dropdown-header .user-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a142b;
}

.user-dropdown-header .user-role-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7c3aed;
    background: #f3e8ff;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
    display: inline-block;
    margin-top: 0.2rem;
}

.dropdown-divider {
    height: 0.06rem;
    background: #f3edfa;
    margin: 0.4rem 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    color: #2d1f47;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s ease;
}

.user-dropdown-item:hover {
    background: #fcf8ff;
    color: #6d28d9;
}

.user-dropdown-item .item-icon {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
}

.user-dropdown-item .badge-unread {
    margin-left: auto;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
}

.user-dropdown-item.logout-item {
    color: #dc2626;
    font-weight: 600;
}

.user-dropdown-item.logout-item:hover {
    background: #fef2f2;
    color: #b91c1c;
}

/* --- NOTIFICATION DROPDOWN --- */
.notif-dropdown {
    position: relative;
    display: inline-block;
}

.btn-topbar-notification {
    background: #f3e8ff;
    color: #7c3aed;
    border: 0.06rem solid #ede6f5;
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
    line-height: 1;
}

.btn-topbar-notification:hover {
    background: #ede3f9;
    color: #5b21b6;
}

.notif-badge-count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.12rem solid #ffffff;
    box-shadow: 0 0.1rem 0.2rem rgba(239, 68, 68, 0.3);
}

.notif-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 22rem;
    max-width: 90vw;
    background: #ffffff;
    border-radius: 0.9rem;
    border: 0.06rem solid #ede6f5;
    box-shadow: 0 0.5rem 1.5rem rgba(109, 40, 217, 0.15);
    padding: 0.6rem 0;
    display: none;
    z-index: 1000;
}

.notif-dropdown.open .notif-dropdown-menu {
    display: block;
}

.notif-dropdown-header {
    padding: 0.5rem 1rem;
}

.notif-dropdown-body {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.4rem 0.8rem;
}

.notif-dropdown-body .notifications-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.notif-dropdown-body .notification-item {
    display: block;
    padding: 0.7rem 0.9rem;
    background: #fcf8ff;
    border: 0.06rem solid #f3edfa;
    border-radius: 0.6rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.notif-dropdown-body .notification-item:hover {
    background: #f3e8ff;
    border-color: #e9d5ff;
}

.notif-dropdown-body .notification-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: #5b21b6;
    margin-bottom: 0.2rem;
}

.notif-dropdown-body .notification-msg {
    font-size: 0.78rem;
    color: #374151;
    line-height: 1.35;
}

.notif-dropdown-body .notification-date {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.3rem;
}

.topbar-right .avatar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: #7c3aed;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- BODY (sidebar + content) --- */
.body {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    background: #f5f0f9;
    position: relative;
}


/* --- MAIN CONTENT --- */
.main {
    flex: 999 1 45rem;
    min-width: 20rem;
    padding: 0.9rem 1.8rem 3.5rem 1.8rem;
    background: #f5f0f9;
}

/* --- CONTENT CARDS --- */
.content-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 0.85rem 1.4rem;
    box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, 0.04);
    margin-bottom: 0.6rem;
    border: 0.06rem solid #ede6f5;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.content-card:last-child {
    margin-bottom: 0;
}

[style*="display: grid"] > .content-card {
    margin-bottom: 0;
}

.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a142b;
    letter-spacing: -0.02rem;
    margin-bottom: 0.2rem;
}

.page-subtitle {
    font-size: 0.95rem;
    color: #6b5a85;
    margin-bottom: 1.2rem;
}

.card-title {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    color: #1a142b;
    font-weight: 600;
}

/* --- FORM STYLES --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

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

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4d3a6e;
}

.form-control {
    padding: 0.6rem 0.9rem;
    border: 0.06rem solid #ede6f5;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    background: #f8f4fc;
    color: #1a142b;
    width: 100%;
    transition: all 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 0.15rem rgba(124, 58, 237, 0.1);
    background: #ffffff;
}

.btn {
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-primary {
    background: #7c3aed;
    color: #ffffff;
}

.btn-primary:hover {
    background: #6d28d9;
}

.btn-secondary {
    background: #ede3f9;
    color: #5b21b6;
}

.btn-secondary:hover {
    background: #dcc8f2;
}

.btn-danger {
    background: #dc3545;
    color: #ffffff;
}

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

.btn-success {
    background: #198754;
    color: #ffffff;
}

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

/* --- TABLO --- */
/* Superseded by the later `.table-wrapper` rule (search .agents/AGENTS.md
   §36) which is what's actually in effect — kept in sync here (overflow-x:
   visible, not auto) just so this earlier declaration doesn't read as a
   contradiction to anyone skimming the file top-to-bottom. */
.table-wrapper {
    overflow-x: visible;
    margin-top: 1rem;
}

.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.2rem;
    align-items: center;
    justify-content: space-between;
}

.table-toolbar .toolbar-left {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    flex: 1;
    min-width: 15rem;
}

.table-toolbar .toolbar-right {
    display: flex;
    gap: 0.6rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table thead {
    background: #f8f4fc;
    border-bottom: 0.12rem solid #ede6f5;
}

/* Sticky table headers: stays pinned to the top of the scrolling
   .main-container (i.e. right under the fixed .topbar) as a long list
   (persons, leaves, contracts, etc.) is scrolled. Sticky is applied per
   <th> rather than on <thead> itself for broad browser compatibility, and
   each th carries its own background/border since a sticky cell paints on
   top of the rows scrolling underneath it. */
table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8f4fc;
    box-shadow: inset 0 -0.12rem 0 #ede6f5;
}

/* Compact header row (Sep 2026): less vertical space, rows stay the focus */
table th {
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: left;
    font-weight: 600;
    color: #4d3a6e;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;
}

table th:hover {
    background: #f0e9f7;
}

table th .sort-indicator {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.7rem;
    color: #8b7aa8;
}

table th[draggable="true"] {
    cursor: grab;
}

table th[draggable="true"]:active {
    cursor: grabbing;
}

table th.col-dragging {
    opacity: 0.45;
    background: #e9d8fd !important;
    border: 0.08rem dashed #7c3aed !important;
}

table th.col-drag-over {
    border-left: 0.25rem solid #7c3aed !important;
    background: #f3e8ff !important;
}

.col-drag-handle {
    user-select: none;
    font-size: 0.8rem;
    font-weight: bold;
    color: #7c3aed;
    opacity: 0.5;
    margin-right: 0.35rem;
    transition: opacity 0.2s;
    cursor: grab;
}

table th:hover .col-drag-handle {
    opacity: 1;
}

.btn-col-visibility {
    padding: 0.6rem 0.85rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.35rem !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

table td {
    padding: 0.7rem 1rem;
    border-bottom: 0.06rem solid #f0e9f7;
    color: #2d1f47;
    vertical-align: middle;
}

table tbody tr:hover {
    background: #faf7fd;
}

/* Status Badges */
.status-badge {
    padding: 0.2rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.status-badge.active {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.inactive {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.on-leave {
    background: #dbeafe;
    color: #1e40af;
}

/* --- STATS CARDS --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.2rem;
}

.stat-card {
    background: #ffffff;
    border-radius: 0.8rem;
    padding: 1.2rem;
    border: 0.06rem solid #ede6f5;
    box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, 0.04);
    text-align: center;
    transition: all 0.2s;
}

.stat-card:hover {
    transform: translateY(-0.1rem);
    box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.03);
}

.stat-card .stat-icon {
    font-size: 2rem;
    margin-bottom: 0.3rem;
}

.stat-card .stat-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a142b;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: #8b7aa8;
    margin-top: 0.2rem;
}

.stat-card .stat-change {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.3rem;
    display: inline-block;
}

.stat-change.up {
    color: #10b981;
}

.stat-change.down {
    color: #ef4444;
}

/* Simple CSS Bar Charts */
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 1.2rem;
    justify-content: center;
    padding: 0.6rem 0;
    min-height: 10rem;
}

.chart-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
}

.chart-bar {
    width: 100%;
    max-width: 2.8rem;
    border-radius: 0.4rem 0.4rem 0 0;
    background: #7c3aed;
    min-height: 0.3rem;
    transition: height 0.6s ease;
}

.chart-bar:hover {
    opacity: 0.8;
}

.chart-bar-label {
    font-size: 0.7rem;
    color: #6b5a85;
}

.chart-bar-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1a142b;
}

.chart-colors .chart-bar-wrapper:nth-child(7n+1) .chart-bar {
    background: #7c3aed;
}

.chart-colors .chart-bar-wrapper:nth-child(7n+2) .chart-bar {
    background: #9d6df5;
}

.chart-colors .chart-bar-wrapper:nth-child(7n+3) .chart-bar {
    background: #b891f7;
}

.chart-colors .chart-bar-wrapper:nth-child(7n+4) .chart-bar {
    background: #d4b8fa;
}

.chart-colors .chart-bar-wrapper:nth-child(7n+5) .chart-bar {
    background: #7c3aed;
}

.chart-colors .chart-bar-wrapper:nth-child(7n+6) .chart-bar {
    background: #9d6df5;
}

.chart-colors .chart-bar-wrapper:nth-child(7n+7) .chart-bar {
    background: #b891f7;
}

/* --- PERSONNEL CARDS --- */
.personel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.2rem;
}

.personel-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background: #f8f4fc;
    border-radius: 0.8rem;
    border: 0.06rem solid #f0e9f7;
    transition: all 0.2s;
    position: relative;
}

.personel-card:hover {
    background: #f3edfa;
    transform: translateY(-0.1rem);
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.04);
}

.personel-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #7c3aed;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

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

.personel-info .name {
    font-weight: 600;
    color: #1a142b;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personel-info .title {
    font-size: 0.8rem;
    color: #6b5a85;
}

.personel-info .department {
    font-size: 0.7rem;
    color: #8b7aa8;
    margin-top: 0.1rem;
}

.personel-status {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
}

.personel-status.online {
    background: #10b981;
}

.personel-status.offline {
    background: #ef4444;
}

.personel-status.away {
    background: #f59e0b;
}

/* --- DETAIL ROWS / INFO BLOCKS --- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.info-item {
    background: #f8f4fc;
    padding: 1rem 1.2rem;
    border-radius: 0.8rem;
    border: 0.06rem solid #f0e9f7;
}

.info-item .label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    color: #8b7aa8;
    margin-bottom: 0.3rem;
}

.info-item .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a142b;
}

.list-item {
    display: flex;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 0.06rem solid #f5f0f9;
}

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

.list-item .dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #7c3aed;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.list-item p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #2d1f47;
}

.list-item p strong {
    color: #1a142b;
}

.highlight-box {
    background: #f6f0fe;
    border-radius: 0.8rem;
    padding: 1.2rem 1.5rem;
    border-left: 0.25rem solid #7c3aed;
    margin-top: 1.2rem;
}

.highlight-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1a142b;
}

.date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3rem;
    padding: 0.5rem 0 0.2rem;
}

.date-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.date-item .label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    color: #8b7aa8;
}

.date-item .value {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a142b;
}

.footnote {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(0.5rem);
    margin-top: 0;
    font-size: 0.8rem;
    color: #9b8ab5;
    border-top: 0.06rem solid #f0e9f7;
    padding: 0.27rem 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 1.9rem;
    box-sizing: border-box;
    transition: transform 0.3s ease, opacity 0.3s ease, min-height 0.25s ease;
    box-shadow: 0 -0.2rem 0.6rem rgba(0, 0, 0, 0.03);
}

.footer-branch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #7c3aed;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.footer-version {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8b7aa8;
    white-space: nowrap;
    letter-spacing: 0.02em;
    user-select: none;
}

.footer-version-logo {
    height: 1rem;
    width: auto;
    display: block;
    transition: height 0.25s ease;
}

.footer-company-logo {
    height: 1.1rem;
    width: auto;
    max-width: 8rem;
    object-fit: contain;
    display: block;
    transition: height 0.25s ease;
}

.footer-company-name {
    color: #1a142b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18rem;
}

.footer-branch-sep {
    color: #c4b5d9;
}

/* Hover-expand: footer grows to the top menu height (3.6rem) and the logos
   grow with it. Mouse/trackpad only — touch devices keep the small footer. */
@media (hover: hover) and (pointer: fine) {
    .footnote:hover {
        min-height: 3.6rem;
    }

    .footnote:hover .footer-company-logo {
        height: 2.6rem;
    }

    .footnote:hover .footer-version-logo {
        height: 2rem;
    }
}

.footer-branch-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.footer-branch-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 25rem;
}

.footnote.footer-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* --- FLASH MESSAGES --- */
.alert {
    padding: 0.8rem 1.2rem;
    border-radius: 0.5rem;
    margin-bottom: 1.2rem;
    font-weight: 500;
    font-size: 0.95rem;
}

.alert-primary {
    background: #cfe2ff;
    color: #084298;
    border: 0.06rem solid #b6d4fe;
}

.alert-solid-brand {
    background: #0d6efd;
    color: #ffffff;
    border: 0.06rem solid #0a58ca;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 0.06rem solid #a7f3d0;
}

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 0.06rem solid #fca5a5;
}

.alert-warning {
    background: #fef9c3;
    color: #854d0e;
    border: 0.06rem solid #fef08a;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 0.06rem solid #bee5eb;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
}

.page-link {
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    border: 0.06rem solid #ede6f5;
    background: #ffffff;
    color: #5b21b6;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.page-link:hover {
    background: #ede3f9;
}

.page-link.active {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
    font-weight: 600;
}

/* --- UNIFIED STEP PROGRESS TAB MENU SYSTEM (Source: index.php?c=leave&a=index) --- */
.profile-tabs-wrapper {
    margin-bottom: 0.6rem;
    border-bottom: 0.12rem solid #ede6f5;
    background: #ffffff;
    border-radius: 0.6rem 0.6rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 1.2rem;
}
.profile-tabs-title {
    display: none !important;
    font-size: 0.88rem;
    font-weight: 700;
    color: #5b21b6;
    background: #f3e8ff;
    border: 0.06rem solid #d8b4fe;
    padding: 0.35rem 0.85rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    letter-spacing: 0.01rem;
    box-shadow: 0 0.06rem 0.2rem rgba(124, 58, 237, 0.08);
}
.step-progress, .profile-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
    justify-content: flex-start !important;
    align-items: center;
    background: #ffffff;
    border-radius: 0.6rem 0.6rem 0 0;
}
.step-progress-item, .tab-btn {
    padding: 0.39rem 1.25rem;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 0.18rem solid transparent;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.5rem 0.5rem 0 0;
    text-decoration: none;
}
.step-progress-item:hover, .tab-btn:hover {
    color: #7c3aed;
    background: #f9f5ff;
}
.step-progress-item.active, .tab-btn.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
    background: #f3e8ff;
    font-weight: 700;
}
.step-progress-circle {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #ede6f5;
    color: #4d3a6e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}
.step-progress-item.active .step-progress-circle, .tab-btn.active .step-progress-circle {
    background: #7c3aed;
    color: #ffffff;
}
/* Hide number circles inside tab navigation buttons */
.tab-btn .step-progress-circle {
    display: none;
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
    animation: tabFadeIn 0.25s ease-out;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(0.4rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- SYSTEM-WIDE MODAL OVERLAYS --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 20, 43, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(0.2rem);
    overflow-y: auto;
    padding: 1.5rem 0.5rem;
    box-sizing: border-box;
}

.swal2-container {
    z-index: 20000 !important;
}

.modal-content {
    background: #ffffff;
    padding: 1.8rem;
    border-radius: 1rem;
    width: 90%;
    max-width: 32rem;
    box-shadow: 0 1.2rem 3.6rem rgba(26, 20, 43, 0.2);
    animation: modalSlideUp 0.3s ease-out;
    border: 0.06rem solid #ede6f5;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}







/* --- MOBILE-COMPATIBLE CARD DIV (FOR DASHBOARD & PROFILE PAGES) --- */
.mobile-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1rem 1.4rem;
    box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
    border: 0.06rem solid #ede6f5;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    align-self: flex-start;
}

.mobile-card:last-child {
    margin-bottom: 0;
}

.mobile-card.chart-card {
    padding: 1.2rem 1.4rem;
}

.mobile-card.chart-card .chart-bars {
    height: 12rem;
    max-height: 14rem;
}

/* Bars may shrink below their label width so 12 months never overflow the card */
.chart-bars { max-width: 100%; box-sizing: border-box; }
.chart-bar-wrapper { min-width: 0; }

@media (max-width: 768px) {
    .chart-bars { gap: 0.2rem; }
    .chart-bar { max-width: 1.4rem; }
    .chart-bar-label,
    .chart-bar-value { font-size: 0.6rem; max-width: 100%; text-align: center; }
}

@media (max-width: 768px) {
    .mobile-card {
        padding: 0.85rem 1rem;
        margin-bottom: 0.8rem;
        border-radius: 0.8rem;
    }
}

/* Backward compatibility fallbacks */
.dashboard-card-box, .dashboard-chart-box, .profile-card-box, .profile-card, .dashboard-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1rem 1.4rem;
    box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
    border: 0.06rem solid #ede6f5;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    align-self: flex-start;
}

/* --- TABLE TOP FILTER & SEARCH BAR --- */
.table-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
    width: 100%;
}

.table-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    flex: 1;
    align-items: center;
}

.table-filter-group .btn,
.table-filter-group .form-control,
.table-filter-group .custom-multiselect-container {
    height: 2.35rem;
    box-sizing: border-box;
}

.table-filter-item {
    flex: 1;
    min-width: 10rem;
}

.table-filter-item .form-control,
.table-filter-item select,
.table-filter-item .custom-multiselect-container {
    height: 2.35rem;
    box-sizing: border-box;
}

.table-filter-item .custom-multiselect-container {
    width: 100%;
    position: relative;
}

.table-actions-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.table-actions-group .btn,
.table-actions-group select,
.table-actions-group .col-visibility-container {
    height: 2.35rem;
    box-sizing: border-box;
}

/* Groups a prev/next (and optionally "Bugün") nav button pair as ONE
   .table-filter-group child, e.g. the ‹/› month/day steppers on the
   Attendance page's tabs. Since the mobile rule below only forces full
   width on .table-filter-group's DIRECT children, wrapping the small
   buttons like this keeps them compact and side-by-side on mobile
   instead of each becoming its own full-width row. */
.btn-nav-group {
    display: flex;
    gap: 0.5rem;
}

.table-bar-divider {
    width: 0.06rem;
    height: 2.2rem;
    background-color: #ede6f5;
    align-self: center;
    margin: 0 0.4rem;
}

@media (max-width: 768px) {
    .table-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    .table-filter-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.6rem;
    }
    .table-filter-group > * {
        width: 100% !important;
        max-width: 100% !important;
    }
    .table-filter-item {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .table-filter-group .custom-multiselect-container,
    .table-filter-item .custom-multiselect-container,
    .custom-multiselect-container .multiselect-trigger-btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .custom-multiselect-container .multiselect-dropdown-panel {
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 100% !important;
    }
    .table-bar-divider {
        display: none;
    }
    .table-actions-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.4rem;
    }
    .table-actions-group .btn,
    .table-actions-group select,
    .table-actions-group .col-visibility-container {
        width: 100% !important;
        justify-content: center;
    }
    .table-actions-group .col-visibility-container .btn {
        width: 100% !important;
    }
}







/* --- MASTER 3-CONTAINER INDEPENDENT LAYOUT --- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* CONTAINER 1: INDEPENDENT TOPBAR */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    padding: 0.6rem 1.5rem;
    border-bottom: 0.06rem solid #ede6f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    height: 3.6rem;
    box-sizing: border-box;
}

/* APP BODY WRAPPER */
.body {
    display: flex;
    flex: 1;
    background: #f5f0f9;
    position: relative;
    align-items: stretch;
    min-height: calc(100vh - 3.6rem);
}

/* CONTAINER 2: INDEPENDENT SIDEBAR (25% MAX WIDTH / COMPACT) */
.sidebar {
    position: sticky;
    top: 3.6rem;
    height: calc(100vh - 3.6rem);
    overflow-y: auto;
    width: 25%;
    max-width: 14rem;
    min-width: 11.5rem;
    flex: 0 0 auto;
    background: #ffffff;
    padding: 1rem 0.6rem;
    border-right: 0.06rem solid #ede6f5;
    box-sizing: border-box;
    z-index: 90;
    margin: 0;
    border-radius: 0;
}

/* Shrink-to-icon-rail — the sidebar's own ◀/▶ arrow button (#sidebarToggle)
   toggles this, at every screen size (no mobile override needed: this rule
   isn't scoped to a media query, and its two-class specificity already
   beats the mobile blocks' plain `.sidebar { width: ... }` overrides). On
   desktop the sidebar stays a flex sibling of .main-container, so shrinking
   it visibly frees that space; on mobile the sidebar is a fixed/absolute
   overlay, so the same 4rem width just renders as a slim icon strip over
   the left edge of the page instead of pushing anything over. Fully hiding
   the sidebar is a separate, independent state — see .sidebar.hidden-sidebar
   below, driven by the topbar hamburger (#mobileMenuToggle) instead. */
.sidebar.closed {
    width: 4rem !important;
    min-width: 4rem !important;
    max-width: 4rem !important;
    flex: 0 0 4rem !important;
    padding: 1rem 0.4rem;
}

.sidebar-toggle {
    position: absolute;
    top: 0.35rem;
    right: 0.6rem;
    background: #ede3f9;
    border: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #5b21b6;
    transition: all 0.3s ease;
    z-index: 10;
}

.sidebar-toggle:hover {
    background: #dcc8f2;
    transform: scale(1.05);
}

.sidebar.closed .sidebar-toggle {
    right: 1.1rem;
}

/* #sidebarExpandAllToggle sits immediately to the left of #sidebarToggle
   (0.6rem gap + 1.8rem width + 0.2rem spacing). It only makes sense while
   the sidebar is open (submenus themselves are hidden when .closed — see
   .sidebar.closed .submenu-items — so there is nothing left to expand). */
#sidebarExpandAllToggle {
    right: 2.6rem;
}

.sidebar.closed #sidebarExpandAllToggle {
    display: none !important;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.menu-title {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    color: #8b7aa8;
    padding: 0.5rem 0.5rem 0.3rem;
    margin-top: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
}

.menu-section-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.35rem;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.menu-section-header:hover {
    background: #ede6f5;
    color: #6b3fa0;
}

.menu-section.collapsed .section-arrow {
    transform: rotate(-90deg);
}

.menu-section-items {
    max-height: 60rem;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.sidebar.closed .menu-title,
.sidebar.closed .menu-section-header {
    display: none;
}

.sidebar.closed .menu-section-items {
    max-height: 60rem !important;
    opacity: 1 !important;
}

.menu-item {
    padding: 0.45rem 0.6rem;
    border-radius: 0.45rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: #2d1f47;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.menu-item:hover {
    background: #f3edfa;
    color: #5b21b6;
}

.menu-item.active {
    background: #ede3f9;
    color: #5b21b6;
    font-weight: 600;
}

/* Sidebar icons are SVG line icons (sprite in partials/icons.php), coloured purple
   via currentColor so they follow the purple + white palette. */
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.menu-item .icon,
.menu-item-row .menu-item-link .icon {
    width: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #7c3aed;
}

.menu-item .icon svg,
.menu-item-row .menu-item-link .icon svg,
.module-search-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.module-search-icon {
    color: #7c3aed;
}

.menu-item .arrow {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.menu-item .arrow.open {
    transform: rotate(90deg);
}

.menu-item .text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.closed .menu-item .text,
.sidebar.closed .menu-item .arrow {
    display: none;
}

.menu-divider {
    height: 0.06rem;
    background: #ede6f5;
    margin: 0.4rem 0.5rem;
}

.sidebar.closed .menu-divider {
    display: none;
}

.menu-item.indent {
    padding-left: 2rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: #4d3a6e;
}

/* SUBMENU & EXPANDABLE MENU ITEM GROUPS */
.menu-item-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.1rem;
}

.menu-item-row {
    display: flex;
    align-items: center;
    border-radius: 0.45rem;
    transition: background 0.15s;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.menu-item-row:hover {
    background: #f3edfa;
}

.menu-item-row:hover .menu-item-link {
    color: #5b21b6;
}

.menu-item-row.active {
    background: #ede3f9;
    color: #5b21b6;
}

.menu-item-row .menu-item-link {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.3rem 0.45rem 0.6rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: #2d1f47;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    min-height: 2.2rem;
    box-sizing: border-box;
}

.menu-item-row.active .menu-item-link {
    color: #5b21b6;
    font-weight: 600;
}

.menu-item-row .menu-item-link .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.submenu-toggle-btn {
    background: transparent;
    border: none;
    color: #7c3aed;
    cursor: pointer;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 2rem;
    min-height: 2.2rem;
    border-radius: 0.35rem;
    transition: background 0.15s, color 0.15s;
    outline: none;
}

.submenu-toggle-btn:hover {
    background: rgba(124, 58, 237, 0.12);
    color: #5b21b6;
}

.submenu-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    line-height: 1;
}

.menu-item-group.collapsed .submenu-arrow {
    transform: rotate(-90deg);
}

.submenu-items {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    max-height: 35rem;
    opacity: 1;
    display: flex;
    flex-direction: column;
}

.menu-item-group.collapsed .submenu-items {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.submenu-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.6rem 0.35rem 1.9rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: #6b5a8a;
    text-decoration: none;
    border-radius: 0.35rem;
    margin: 0.05rem 0.3rem;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.8rem;
    box-sizing: border-box;
}

.submenu-item:hover {
    background: #f3edfa;
    color: #5b21b6;
}

.submenu-item.active {
    background: #ede3f9;
    color: #5b21b6;
    font-weight: 600;
}

/* Submenu icons — same purple line icons as the main buttons, a bit smaller */
.submenu-icon {
    width: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #8b5cf6;
}

.submenu-icon svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.submenu-item:hover .submenu-icon,
.submenu-item.active .submenu-icon {
    color: #7c3aed;
}

.sidebar.closed .submenu-toggle-btn,
.sidebar.closed .submenu-items {
    display: none !important;
}

.sidebar.closed .menu-item-row .menu-item-link .text {
    display: none;
}

/* CONTAINER 3: INDEPENDENT MAIN CONTAINER */
.main-container {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f5f0f9;
    box-sizing: border-box;
}

.sub-topbar-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.8rem 0.2rem 1.8rem;
    background: #f5f0f9;
}

.topbar-module-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: #7c3aed;
    background: #ffffff;
    padding: 0.3rem 0.8rem;
    border-radius: 0.5rem;
    border: 0.06rem solid #e9d5ff;
    white-space: nowrap;
    box-shadow: 0 0.06rem 0.3rem rgba(124, 58, 237, 0.08);
}
.topbar-datetime {
    font-size: 0.78rem;
    font-weight: 600;
    color: #7c3aed;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.main {
    flex: 1;
    min-width: 0;
    padding: 0.9rem 1.8rem 3.5rem 1.8rem;
    background: #f5f0f9;
    box-sizing: border-box;
}

.profile-tabs-title {
    display: none !important;
}

/* Equal width & 20% shrunken width for table action buttons */
.table-actions-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.table-actions-group .btn,
.table-actions-group select,
.table-actions-group .col-visibility-container {
    height: 2.35rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* RESPONSIVE LOGO */
.logo-desktop {
    display: block !important;
}

.logo-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .body {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        top: 3.6rem;
        left: 0;
        bottom: 0;
        height: calc(100vh - 3.6rem);
        z-index: 999;
        width: 75% !important;
        max-width: 14rem !important;
        min-width: 12rem !important;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease;
    }

    /* No mobile override of .sidebar.closed here — it means the same 4rem
       icon rail on every screen size (see the comment on the base rule).
       Fully hiding the sidebar (the topbar hamburger's job) is the separate
       .sidebar.hidden-sidebar class instead. */

    .main-container {
        width: 100%;
        min-width: 100%;
    }

    .sub-topbar-bar {
        padding: 0.4rem 1rem 0.1rem 1rem;
    }

    .main {
        padding: 0.8rem 1rem 3.5rem 1rem;
    }

    .logo-desktop {
        display: none !important;
    }

    .logo-mobile {
        display: block !important;
        height: 2.2rem;
        width: auto;
        object-fit: contain;
    }

    /* .notif-dropdown-menu normally anchors to the bell button's own right
       edge (right: 0, relative to .notif-dropdown) and opens leftward up to
       22rem/90vw wide — fine on desktop where the bell has room to its
       left, but on mobile the bell sits inside the topbar with the
       username pill still to its right, so the panel ran off the left edge
       of the screen and clipped every row. Anchoring to the viewport
       instead of the button fixes it regardless of where the bell ends up
       in the topbar. */
    .notif-dropdown-menu {
        position: fixed;
        top: 3.9rem;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
        max-width: none;
    }

    .table-actions-group {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0.35rem !important;
        margin-top: 0.4rem !important;
    }

    .table-actions-group > * {
        flex: 1 1 0px !important;
        min-width: 0 !important;
        max-width: 80% !important;
        box-sizing: border-box !important;
    }

    .table-actions-group .btn,
    .table-actions-group select,
    .table-actions-group .col-visibility-container,
    .table-actions-group .col-visibility-container .btn {
        width: 100% !important;
        height: 2.35rem !important;
        padding: 0 0.35rem !important;
        font-size: 0.82rem !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

/* HIDE SIDEBAR SCROLLBAR ACROSS ALL BROWSERS */
.sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.sidebar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Fully hide the sidebar — the topbar hamburger (#mobileMenuToggle) toggles
   this, at every screen size, independent of .sidebar.closed's rail-shrink
   above. display:none removes it from the desktop flex row entirely, so
   .main-container (flex: 1) automatically expands to fill all the freed
   width with no extra rule needed; on mobile it just removes the overlay. */
.sidebar.hidden-sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
}


/* --- STRICT MOBILE VIEWPORT FIT & RESPONSIVENESS --- */
*, *:before, *:after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.app {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.body {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

.main-container {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.main {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.9rem 1.8rem 3.5rem 1.8rem;
    background: #f5f0f9;
    box-sizing: border-box;
}

/* NOT overflow-x:auto — a table-wrapper with any non-visible overflow (on
   EITHER axis; overflow-x:auto used to force overflow-y to compute as
   'auto' too, per the CSS overflow spec's axis-pairing rule) sits between
   the sticky <thead th> (see the `table thead th` rule) and the real
   scrolling ancestor, .main-container — and, confirmed empirically against
   this app's actual layout, that alone is enough to make position:sticky
   fail (bind to table-wrapper, which never itself scrolls, instead of
   passing through to .main-container), even though table-wrapper never
   visibly overflows at normal widths. `overflow-x: auto` is deliberately
   NOT set here any more; .main-container now handles horizontal
   scrolling too (see its own rule) so a wide table still scrolls, just
   scoped one level higher than before. See .agents/AGENTS.md §36. */
.table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    /* overflow-x is deliberately NOT set to hidden here on either element —
       a wide table (more columns than fit the screen) needs somewhere to
       scroll horizontally, and per the .table-wrapper comment above, that
       scroll ancestor is .main-container (sticky <thead th> requires it,
       not .table-wrapper). Clipping .main-container/.main with
       overflow-x:hidden on mobile used to cut a wide table's rightmost
       columns off entirely instead of letting them scroll into view. */
    .main-container {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .main {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 100% !important;
        padding: 0.75rem 0.75rem 3.5rem 0.75rem !important;
        box-sizing: border-box !important;
    }

    .sub-topbar-bar {
        padding: 0.35rem 0.75rem 0.1rem 0.75rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-card,
    .content-card,
    .profile-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.85rem 0.85rem !important;
    }

    /* A wide table (nowrap header/cell text, many columns) now scrolls
       inside its own bounded box instead of dragging the whole card off
       screen — the card above stays clamped to the viewport, as it should.
       Giving .table-wrapper real overflow (both axes — see the comment on
       its base rule about the overflow-pairing spec forcing overflow-y to
       'auto' the moment overflow-x isn't 'visible') does mean sticky no
       longer pins to .main-container's page-length scroll here on mobile;
       instead it pins to the TOP OF THIS BOX, because .table-wrapper is now
       itself the nearest scrolling ancestor. That's still a working sticky
       header — the header stays put while you scroll the table's own rows
       — just scoped to the table's own scrollable area rather than the
       whole page, which is the standard pattern for a card-boxed table on
       a small screen anyway. Desktop is untouched (its .table-wrapper rule,
       above, keeps overflow-x: visible, so sticky there still pins to
       .main-container's page scroll as before). */
    .table-wrapper {
        overflow: auto !important;
        max-height: 65vh !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .profile-tabs-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .profile-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 0.3rem !important;
    }
}

.topbar-module-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: #7c3aed;
    background: #ffffff;
    padding: 0.3rem 0.85rem;
    border-radius: 0.5rem;
    border: 0.06rem solid #e9d5ff;
    white-space: nowrap;
    box-shadow: 0 0.06rem 0.3rem rgba(124, 58, 237, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}


/* === MASTER FIXED LAYOUT: TOPBAR + SIDEBAR FIXED, MAIN SCROLLS === */

/* TOPBAR: always fixed at top, never scrolls */
.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    height: 3.6rem !important;
    box-sizing: border-box !important;
}

/* BODY: offset by topbar height, fills remaining viewport */
.body {
    position: fixed !important;
    top: 3.6rem !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
    background: #f5f0f9 !important;
}

/* SIDEBAR: fixed-position within .body, scrolls only on hover/interaction */
.sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: 100% !important;
    width: 25% !important;
    max-width: 14rem !important;
    min-width: 11.5rem !important;
    flex: 0 0 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    padding: 1rem 0.6rem !important;
    border-right: 0.06rem solid #ede6f5 !important;
    box-sizing: border-box !important;
    z-index: 90 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    /* Hide scrollbar visually but keep functional */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.sidebar::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}

.sidebar.closed {
    width: 4rem !important;
    min-width: 4rem !important;
    max-width: 4rem !important;
    flex: 0 0 4rem !important;
    padding: 1rem 0.4rem !important;
}

/* MAIN CONTAINER: fills remaining horizontal space, scrolls vertically (and,
   as of the sticky-table-header fix below, horizontally too — see the
   .table-wrapper comment for why that responsibility moved here). */
.main-container {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    background: #f5f0f9 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* MODULE BADGE SUB-BAR */
.sub-topbar-bar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.5rem 1.5rem 0.2rem 1.5rem !important;
    background: #f5f0f9 !important;
    flex-shrink: 0 !important;
}

.topbar-module-badge {
    margin-right: auto !important;
    height: 2.1rem;
    box-sizing: border-box;
    font-size: 0.78rem;
    font-weight: 600;
    color: #7c3aed;
    background: #ffffff;
    padding: 0 0.8rem;
    border-radius: 0.5rem;
    border: 0.08rem solid #d8b4fe;
    white-space: nowrap;
    box-shadow: 0 0.08rem 0.35rem rgba(124, 58, 237, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.topbar-module-badge > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-module-badge:hover {
    background: #f3e8ff;
    border-color: #7c3aed;
    color: #6d28d9;
    box-shadow: 0 0.15rem 0.45rem rgba(124, 58, 237, 0.18);
    transform: translateY(-0.04rem);
}

.topbar-module-badge:active {
    transform: translateY(0) scale(0.98);
}

/* Drawn refresh arrows (the badge reloads the page); they turn half a
   circle on hover as a hint of what a click does. */
.module-refresh-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #7c3aed;
    transition: transform 0.4s ease, color 0.18s ease;
}

.topbar-module-badge:hover .module-refresh-icon {
    color: #6d28d9;
    transform: rotate(180deg);
}

/* MAIN: grows to fill main-container, padding at bottom */
.main {
    flex: 1 !important;
    padding: 0.9rem 1.8rem 3.5rem 1.8rem !important;
    background: #f5f0f9 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .body {
        position: fixed !important;
        top: 3.6rem !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow: hidden !important;
    }

    .sidebar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 75% !important;
        max-width: 14rem !important;
        min-width: 12rem !important;
        z-index: 999 !important;
        box-shadow: 0.3rem 0 1.5rem rgba(0, 0, 0, 0.12) !important;
        transition: transform 0.3s ease !important;
    }

    /* No mobile override of .sidebar.closed here either — same 4rem icon
       rail everywhere, see the comment on the base rule and on the other
       mobile block above. */

    .main-container {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .sub-topbar-bar {
        padding: 0.35rem 0.75rem 0.1rem 0.75rem !important;
        gap: 0.35rem !important;
    }

    .topbar-module-badge {
        height: 1.85rem !important;
        font-size: 0.72rem !important;
        padding: 0 0.55rem !important;
        max-width: 9rem !important;
        white-space: nowrap !important;
    }

    .footnote {
        padding: 0.25rem 0.75rem !important;
    }

    .footer-branch {
        font-size: 0.72rem !important;
    }

    .footer-branch-name {
        max-width: 12rem !important;
    }

    .topbar-datetime {
        font-size: 0.72rem !important;
    }

    .topbar-icon-btn {
        width: 1.85rem !important;
        height: 1.85rem !important;
        min-width: 1.85rem !important;
        font-size: 0.85rem !important;
    }

    .topbar-ai-btn {
        width: 1.85rem !important;
        height: 1.85rem !important;
        min-width: 1.85rem !important;
        font-size: 0.85rem !important;
    }

    .module-quick-search-dropdown.is-open {
        position: fixed !important;
        top: 3.5rem !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none !important;
        max-height: 70vh !important;
        box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.25) !important;
    }

    .main {
        padding: 0.75rem 0.75rem 3.5rem 0.75rem !important;
    }

    .logo-desktop {
        display: none !important;
    }

    .logo-mobile {
        display: block !important;
        height: 2.2rem;
        width: auto;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .topbar-module-badge {
        max-width: 7.5rem !important;
    }
    .footer-branch-name {
        max-width: 8rem !important;
    }
}


/* ==========================================================================
   MERGED FROM LIVE STYLE.CSS -- feature areas added to the app after this
   file was reformatted for standardization/mobile. Kept as their original
   blocks below rather than reflowed into the sections above, so future
   merges stay easy to diff. See .agents/AGENTS.md for each feature.
   ========================================================================== */

/* --- OUTLINE BUTTONS (Bootstrap5-style: transparent bg, colored border/text,
   fills solid on hover) — the standard for MODAL action buttons. See
   .agents/AGENTS.md §12 "Outline Button Standard" for the full rule and
   which buttons this applies to. --- */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
    height: 2.35rem !important;
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
}

.btn-outline-primary[style*="display: none"],
.btn-outline-secondary[style*="display: none"],
.btn-outline-success[style*="display: none"],
.btn-outline-danger[style*="display: none"],
.btn-outline-primary.d-none,
.btn-outline-secondary.d-none,
.btn-outline-success.d-none,
.btn-outline-danger.d-none {
    display: none !important;
}

.btn-outline-primary {
    background: transparent;
    color: #7c3aed;
    border: 0.1rem solid #7c3aed;
}

.btn-outline-primary:hover {
    background: #7c3aed;
    color: #ffffff;
}

.btn-outline-secondary {
    background: transparent;
    color: #6c757d;
    border: 0.1rem solid #6c757d;
}

.btn-outline-secondary:hover {
    background: #6c757d;
    color: #ffffff;
}

.btn-outline-success {
    background: transparent;
    color: #10b981;
    border: 0.1rem solid #10b981;
}

.btn-outline-success:hover {
    background: #10b981;
    color: #ffffff;
}

.btn-outline-danger {
    background: transparent;
    color: #ef4444;
    border: 0.1rem solid #ef4444;
}

.btn-outline-danger:hover {
    background: #ef4444;
    color: #ffffff;
}

/* --- BOOTSTRAP 5 COMPATIBLE SMALL BUTTONS (.btn-sm) --- */
.btn-sm,
.btn.btn-sm,
.btn-outline-primary.btn-sm,
.btn-outline-secondary.btn-sm,
.btn-outline-success.btn-sm,
.btn-outline-danger.btn-sm {
    height: 1.85rem !important;
    padding: 0.2rem 0.65rem !important;
    font-size: 0.8rem !important;
    border-radius: 0.35rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
}

/* ==========================================================================
   BOOTSTRAP 5 COMPATIBLE GRID SYSTEM (rem-based, mobile-first responsive)
   ========================================================================== */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.375rem;
    margin-left: -0.375rem;
    box-sizing: border-box;
}

.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.375rem;
    padding-left: 0.375rem;
}

/* Gutters */
.g-0 { margin-right: 0; margin-left: 0; }
.g-0 > * { padding-right: 0; padding-left: 0; }
.g-1 { margin-right: -0.2rem; margin-left: -0.2rem; }
.g-1 > * { padding-right: 0.2rem; padding-left: 0.2rem; }
.g-2 { margin-right: -0.375rem; margin-left: -0.375rem; }
.g-2 > * { padding-right: 0.375rem; padding-left: 0.375rem; }
.g-3 { margin-right: -0.6rem; margin-left: -0.6rem; }
.g-3 > * { padding-right: 0.6rem; padding-left: 0.6rem; }
.g-4 { margin-right: -0.9rem; margin-left: -0.9rem; }
.g-4 > * { padding-right: 0.9rem; padding-left: 0.9rem; }

/* Vertical gutters (gy-*) */
.gy-0 { margin-top: 0; }
.gy-0 > * { padding-top: 0; padding-bottom: 0; }
.gy-1 { margin-top: -0.2rem; }
.gy-1 > * { padding-top: 0.2rem; padding-bottom: 0.2rem; }
.gy-2 { margin-top: -0.375rem; }
.gy-2 > * { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.gy-3 { margin-top: -0.6rem; }
.gy-3 > * { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.gy-4 { margin-top: -0.9rem; }
.gy-4 > * { padding-top: 0.9rem; padding-bottom: 0.9rem; }

/* Base Columns (Mobile: 100% width by default unless specified) */
.col {
    flex: 1 0 0%;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
}
.col-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
.col-6  { flex: 0 0 50%; max-width: 50%; width: 50%; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.333333%; }
.col-3  { flex: 0 0 25%; max-width: 25%; width: 25%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; width: 66.666667%; }
.col-9  { flex: 0 0 75%; max-width: 75%; width: 75%; }

/* Small Devices (sm: >= 576px) - Desktop & Tablet side-by-side, Mobile stacked */
@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
    .col-sm-6  { flex: 0 0 50%; max-width: 50%; width: 50%; }
    .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.333333%; }
    .col-sm-3  { flex: 0 0 25%; max-width: 25%; width: 25%; }
    .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; width: 66.666667%; }
    .col-sm-9  { flex: 0 0 75%; max-width: 75%; width: 75%; }
}

/* Medium Devices (md: >= 768px) */
@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
    .col-md-6  { flex: 0 0 50%; max-width: 50%; width: 50%; }
    .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.333333%; }
    .col-md-3  { flex: 0 0 25%; max-width: 25%; width: 25%; }
    .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; width: 66.666667%; }
}

/* Bootstrap spacing utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.8rem !important; }
.mb-4 { margin-bottom: 1.2rem !important; }

/* AI Asistan topbar button (icon-only) — sits right after .topbar-datetime in
   .sub-topbar-bar, on every main module page. See .agents/ai_copilot_design.md. */
.topbar-ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #ffffff;
    color: #7c3aed;
    border: 0.08rem solid #d8b4fe;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0.08rem 0.35rem rgba(124, 58, 237, 0.18);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    padding: 0;
}

.topbar-ai-btn:hover {
    background: #f5f3ff;
    border-color: #a855f7;
    transform: translateY(-0.06rem);
    box-shadow: 0 0.25rem 0.7rem rgba(124, 58, 237, 0.35);
}

.topbar-ai-btn:active {
    transform: translateY(0) scale(0.96);
}

/* Topbar Action Icon Buttons (Refresh, New Tab, Search) */
.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #ffffff;
    color: #7c3aed;
    border: 0.08rem solid #d8b4fe;
    cursor: pointer;
    box-shadow: 0 0.08rem 0.35rem rgba(124, 58, 237, 0.1);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    padding: 0;
}

.topbar-icon-btn:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
    transform: translateY(-0.06rem);
    box-shadow: 0 0.25rem 0.7rem rgba(124, 58, 237, 0.28);
}

.topbar-icon-btn:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 0.05rem 0.2rem rgba(124, 58, 237, 0.2);
}

.topbar-btn-svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
    pointer-events: none;
    transition: transform 0.18s ease;
}

/* AI sparkle fills the button — the icon is bigger, the button is not. */
.topbar-ai-btn .topbar-btn-svg {
    width: 1.55rem;
    height: 1.55rem;
}

.topbar-icon-btn:hover .topbar-btn-svg,
.topbar-ai-btn:hover .topbar-btn-svg {
    transform: scale(1.08);
}

/* Module Quick Search Dropdown & Palette */
.topbar-search-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.module-search-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 20, 43, 0.25);
    z-index: 1040;
    backdrop-filter: blur(0.06rem);
}

.module-search-backdrop.is-open {
    display: block;
}

.module-quick-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    width: 22rem;
    max-width: 90vw;
    background: #ffffff;
    border: 0.06rem solid #d8b4fe;
    border-radius: 0.75rem;
    box-shadow: 0 0.7rem 2.2rem rgba(124, 58, 237, 0.2), 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
    z-index: 1050;
    flex-direction: column;
    overflow: hidden;
}

.module-quick-search-dropdown.is-open {
    display: flex;
}

.search-hidden {
    display: none !important;
}

.module-search-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.75rem;
    background: #faf7fd;
    border-bottom: 0.06rem solid #ede6f5;
}

.module-search-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.module-search-input-icon {
    position: absolute;
    left: 0.65rem;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.module-search-input {
    width: 100%;
    padding: 0.48rem 0.75rem 0.48rem 2.1rem;
    border: 0.06rem solid #d8b4fe;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #1f2937;
    background: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.module-search-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 0.15rem rgba(124, 58, 237, 0.15);
}

.module-search-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.module-search-close-btn:hover {
    background: #ede6f5;
    color: #7c3aed;
}

.module-search-list {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.35rem;
}

.module-search-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.65rem 0.2rem 0.65rem;
}

.module-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    color: #374151;
    transition: background 0.12s ease;
}

.module-search-item:hover,
.module-search-item.selected {
    background: #f3e8ff;
    color: #6d28d9;
}

.module-search-item-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1;
}

.module-search-icon {
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f0f9;
    border-radius: 0.4rem;
    flex-shrink: 0;
    transition: background 0.12s ease;
}

.module-search-item:hover .module-search-icon,
.module-search-item.selected .module-search-icon {
    background: #ffffff;
}

.module-search-info {
    min-width: 0;
    flex: 1;
}

.module-search-title {
    font-weight: 600;
    font-size: 0.82rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-search-item:hover .module-search-title,
.module-search-item.selected .module-search-title {
    color: #6d28d9;
}

.module-search-sub {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-search-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    background: #f5f0f9;
    color: #7c3aed;
    border-radius: 0.3rem;
    border: 0.05rem solid #e9d5ff;
    white-space: nowrap;
    flex-shrink: 0;
}

.module-search-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #8b7aa8;
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.module-search-empty-icon {
    color: #a78bfa;
    display: block;
}

/* ==========================================================================
   BOOTSTRAP COMPATIBLE ACCORDION STYLES (.accordion, .accordion-flush)
   ========================================================================== */
.accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.accordion-item {
    background-color: #ffffff;
    border: 0.06rem solid #e9d8fd;
    border-radius: 0.6rem;
    margin-bottom: 0.6rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.accordion-flush .accordion-item {
    border-radius: 0.6rem;
    margin-bottom: 0.6rem;
}

.accordion-header {
    margin: 0;
    padding: 0;
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4c1d95;
    text-align: left;
    background-color: #faf7fd;
    border: 0;
    border-radius: 0;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.accordion-button:hover {
    background-color: #f3e8ff;
}

.accordion-button:not(.collapsed) {
    color: #4c1d95;
    background-color: #f5edff;
    border-bottom: 0.06rem solid #e9d8fd;
}

.accordion-button .accordion-arrow {
    font-size: 0.75rem;
    color: #7c3aed;
    transition: transform 0.2s ease-in-out;
    display: inline-block;
}

.accordion-button.collapsed .accordion-arrow {
    transform: rotate(-90deg);
    color: #8b7aa8;
}

.accordion-button:not(.collapsed) .accordion-arrow {
    transform: rotate(0deg);
}

.accordion-collapse {
    transition: all 0.2s ease;
}

.accordion-collapse.collapse:not(.show) {
    display: none;
}

.accordion-collapse.collapse.show {
    display: block;
}

.accordion-body {
    padding: 1rem 1.25rem;
    background-color: #ffffff;
}

/* ==========================================================================
   TEAM ATTENDANCE ACCORDION (Aylık PDKS Özeti - c=attendance#tab-team)
   ========================================================================== */
.team-acc-legend {
    display: flex;
    align-items: center;
    padding: 0.5rem 2.2rem 0.5rem 1rem;
    margin-bottom: 0.4rem;
    border: 0.06rem solid transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: #8b7aa8;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    width: 100%;
    box-sizing: border-box;
}

.team-acc-legend-row,
.team-acc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5rem 6.5rem 5.8rem 5.8rem 5.8rem 5.8rem 19.5rem;
    gap: 0.6rem;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.team-acc-legend-name,
.team-acc-col-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.team-acc-col-name {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.team-acc-col-name strong {
    white-space: nowrap;
    flex-shrink: 0;
}

.team-acc-col-name .team-acc-dept {
    font-size: 0.75rem;
    font-weight: 500;
    color: #8b7aa8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.team-acc-dept {
    font-size: 0.75rem;
    font-weight: 500;
    color: #8b7aa8;
}

.team-acc-legend-count,
.team-acc-col-count {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.team-acc-legend-actions,
.team-acc-col-actions {
    justify-self: end;
    text-align: right;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}

.team-acc-arrow-spacer {
    display: none;
}

.team-accordion-button {
    align-items: center;
    padding: 0.75rem 2.2rem 0.75rem 1rem;
    position: relative;
    box-sizing: border-box;
}

.team-accordion-button .accordion-arrow,
.team-accordion-button.collapsed .accordion-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.team-accordion-button:not(.collapsed) .accordion-arrow {
    transform: translateY(-50%) rotate(0deg);
}

@media (max-width: 768px) {
    .team-acc-legend {
        display: none;
    }
    .team-acc-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .team-acc-col-name {
        width: 100%;
    }
    .team-acc-col-count {
        display: inline-flex;
    }
    .team-acc-col-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   CHANGE PASSWORD PAGE (c=auth&a=password)
   ========================================================================== */
.pw-page-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.pw-field {
    position: relative;
}

.pw-field .form-control {
    padding-right: 2.6rem;
}

.pw-eye-btn {
    position: absolute;
    right: 0.4rem;
    top: 2.15rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.3rem 0.4rem;
    line-height: 1;
    color: #8b7aa8;
    border-radius: 0.4rem;
}

.pw-eye-btn:hover {
    background: #f3e8ff;
    color: #7c3aed;
}

.pw-strength-wrap {
    margin-top: 0.5rem;
}

.pw-strength-track {
    width: 100%;
    height: 0.4rem;
    background: #ede6f5;
    border-radius: 1rem;
    overflow: hidden;
}

.pw-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 1rem;
    background: #ef4444;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.pw-strength-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #8b7aa8;
}

.pw-requirements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem 1rem;
    margin-top: 0.9rem;
    margin-bottom: 0.2rem;
}

.pw-requirement-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #6b7280;
    transition: color 0.2s ease;
}

.pw-req-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #ede6f5;
    color: #8b7aa8;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pw-requirement-item.met {
    color: #065f46;
    font-weight: 600;
}

.pw-requirement-item.met .pw-req-icon {
    background: #d1fae5;
    color: #059669;
}

.pw-match-indicator {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 1.1rem;
}

.pw-match-indicator.match {
    color: #059669;
}

.pw-match-indicator.no-match {
    color: #dc2626;
}

.pw-info-card .card-title {
    margin-bottom: 0.8rem;
}

.pw-info-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 0.06rem solid #f0e9f7;
    font-size: 0.85rem;
}

.pw-info-row:last-child {
    border-bottom: none;
}

.pw-info-row .pw-info-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.pw-info-row .pw-info-label {
    color: #8b7aa8;
    flex: 1;
}

.pw-info-row .pw-info-value {
    color: #2d1f47;
    font-weight: 600;
    text-align: right;
}

.pw-tip-box {
    margin-top: 1.2rem;
    background: #faf7fd;
    border: 0.06rem solid #e9d8fd;
    border-radius: 0.8rem;
    padding: 1rem 1.1rem;
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.pw-tip-box .pw-tip-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.pw-tip-box .pw-tip-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    margin-bottom: 0.25rem;
}

.pw-tip-box .pw-tip-text {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.4;
}

.pw-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
}

.pw-submit-btn {
    width: auto;
    padding: 0.6rem 1.6rem;
    font-size: 0.85rem;
}

.pw-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pw-caps-warning {
    display: none;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309;
    background: #fffbeb;
    border: 0.06rem solid #fde68a;
    border-radius: 0.5rem;
    padding: 0.35rem 0.6rem;
}

.pw-caps-warning.show {
    display: flex;
}

.pw-success-banner {
    display: none;
    align-items: center;
    gap: 0.6rem;
    background: #ecfdf5;
    border: 0.06rem solid #a7f3d0;
    color: #065f46;
    border-radius: 0.7rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.pw-success-banner.show {
    display: flex;
}

/* Confetti celebration burst on success */
.pw-confetti-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20000;
    overflow: hidden;
}

.pw-confetti-piece {
    position: absolute;
    top: -1.2rem;
    width: 0.55rem;
    height: 0.55rem;
    opacity: 0.9;
    animation-name: pw-confetti-fall;
    animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
    animation-fill-mode: forwards;
}

@keyframes pw-confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(38rem) rotate(540deg);
        opacity: 0;
    }
}

@media (max-width: 900px) {
    .pw-page-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   AI ASİSTAN CHAT (c=ai&a=chat, embedded in the aiChatModal — see
   layouts/footer.php / layouts/sidebar.php). Phase 0 UI scaffold — see
   .agents/ai_copilot_design.md.
   ========================================================================== */
.ai-chat-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai-chat-header {
    padding: 0.8rem 1.2rem;
    border-bottom: 0.06rem solid #f0e9f7;
    background: #faf8fc;
    flex-shrink: 0;
}

.ai-chat-header-module {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8b7aa8;
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    margin-bottom: 0.5rem;
}

/* One select box (with an optgroup per operation group) instead of a chip per
   operation — the full operation list is too long to show as buttons. */
.ai-chat-op-select {
    cursor: pointer;
    font-weight: 600;
    color: #6b46c1;
}

.ai-chat-ops-empty {
    font-size: 0.8rem;
    color: #8b7aa8;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #ffffff;
}

.ai-chat-bubble {
    max-width: 80%;
    padding: 0.6rem 0.9rem;
    border-radius: 0.8rem;
    font-size: 0.88rem;
    line-height: 1.4;
}

.ai-chat-bubble-assistant {
    background: #f3e8ff;
    color: #4c1d95;
    align-self: flex-start;
    border-bottom-left-radius: 0.2rem;
}

.ai-chat-bubble-user {
    background: #7c3aed;
    color: #ffffff;
    align-self: flex-end;
    border-bottom-right-radius: 0.2rem;
}

/* A failed AiClient call (provider unreachable, not configured yet, etc.)
   — same shape as the assistant bubble, red instead of purple so it reads
   as a connection problem rather than an actual reply. */
.ai-chat-bubble-error {
    background: #fef2f2;
    color: #b91c1c;
    align-self: flex-start;
    border-bottom-left-radius: 0.2rem;
    border: 0.06rem solid #fecaca;
}

/* Phase 3b write-confirmation card ("AI wants to do this") — rendered by
   ai/chat.php's aiChatShowConfirmation() in place of a plain reply bubble
   when AiController::sendMessage() returns a 'confirmation' shape. Reuses
   .ai-chat-bubble-assistant's background/shape (max-width, radius) and adds
   its own layout on top, so it visually still reads as "the assistant said
   something" rather than a disconnected UI element. */
.ai-chat-confirm {
    max-width: 90%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-chat-confirm-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: #4c1d95;
}

.ai-chat-confirm-fields {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: #ffffff;
    border: 0.06rem solid #e9d5ff;
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
}

.ai-chat-confirm-field {
    display: flex;
    gap: 0.4rem;
    font-size: 0.82rem;
}

.ai-chat-confirm-field-label {
    font-weight: 600;
    color: #6b46c1;
    flex-shrink: 0;
}

.ai-chat-confirm-field-value {
    color: #3f3f46;
    word-break: break-word;
}

.ai-chat-confirm-actions {
    display: flex;
    gap: 0.5rem;
}

.ai-chat-confirm-btn {
    flex: 1;
    border: none;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.ai-chat-confirm-btn-yes {
    background: #6b46c1;
    color: #ffffff;
}

.ai-chat-confirm-btn-yes:hover {
    background: #59379e;
}

.ai-chat-confirm-btn-no {
    background: #fef2f2;
    color: #ef4444;
    border: 0.06rem solid #fecaca;
}

.ai-chat-confirm-btn-no:hover {
    background: #fee2e2;
}

.ai-chat-confirm-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.ai-chat-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border-top: 0.06rem solid #f0e9f7;
    background: #faf8fc;
    flex-shrink: 0;
}

.ai-chat-input-row .form-control {
    flex: 1;
}

/* --- AI CHAT VOICE (browser Web Speech API: mic = speech-to-text,
   speaker = read replies aloud). Buttons hidden when the browser lacks support. --- */
.ai-chat-input-row .btn-icon {
    flex-shrink: 0;
}

.ai-chat-voice-btn.is-listening {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.ai-chat-voice-btn.is-listening > svg {
    animation: anim-busy-pulse 0.9s ease-in-out infinite;
}

.ai-chat-voice-btn.is-on {
    background: #ede3f9;
}

/* --- MODAL WIZARD STEPS (Personnel #personModal & CV #cvDetailModal).
   Displays header buttons as a single-line horizontal tab menu with touch scrolling
   so steps never stack vertically on mobile or narrow viewports. --- */
.modal-content .step-progress {
    display: flex;
    background: #faf8fd;
    border: 0.06rem solid #ede6f5;
    border-radius: 0.4rem;
    padding: 0.4rem 0.5rem;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d8b4fe transparent;
    gap: 0.35rem;
    align-items: center;
}

.modal-content .step-progress::-webkit-scrollbar {
    height: 0.25rem;
}

.modal-content .step-progress::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content .step-progress::-webkit-scrollbar-thumb {
    background: #d8b4fe;
    border-radius: 0.25rem;
}

.modal-content .step-progress::-webkit-scrollbar-thumb:hover {
    background: #7c3aed;
}

.modal-content .step-progress-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #8b7aa8;
    opacity: 0.85;
    cursor: pointer;
    padding: 0.35rem 0.65rem;
    border-radius: 0.35rem;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
}

.modal-content .step-progress-item:hover {
    opacity: 1;
    background: #ede6f5;
    color: #4d3a6e;
}

.modal-content .step-progress-item.active {
    color: #7c3aed;
    background: #f3e8ff;
    opacity: 1;
    font-weight: 700;
}

.modal-content .step-progress-item.completed {
    color: #059669;
    opacity: 1;
}

.modal-content .step-progress-circle {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #ede6f5;
    color: #4d3a6e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.modal-content .step-progress-item.active .step-progress-circle {
    background: #7c3aed;
    color: #ffffff;
}

.modal-content .step-progress-item.completed .step-progress-circle {
    background: #10b981;
    color: #ffffff;
}

.form-section-title {
    color: #5b21b6;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1.2rem 0 0.8rem 0;
    border-bottom: 0.08rem solid #f0e6fc;
    padding-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.edit-wizard-step {
    display: none;
}

.edit-wizard-step.active {
    display: block;
}

.repeatable-container {
    margin-bottom: 1rem;
}

.repeatable-item {
    background: #faf8fd;
    border: 0.06rem solid #ede6f5;
    border-radius: 0.6rem;
    padding: 1rem;
    margin-bottom: 0.8rem;
    position: relative;
}

.photo-upload-frame {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #faf8fd;
    border: 0.06rem dashed #7c3aed;
    border-radius: 0.6rem;
    padding: 0.8rem;
}

.photo-preview {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #ede6f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0.06rem solid #ede6f5;
    flex-shrink: 0;
    color: #8b7aa8;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: #2d1f47;
}

.checkbox-label input {
    margin-top: 0.15rem;
    width: 1rem;
    height: 1rem;
    accent-color: #7c3aed;
}

/* --- CONTRACT MODAL TABS (c=contract&a=index, #contractModal). A small,
   compact two-tab switcher (Bilgiler / Açıklama & Notlar) scoped to this one
   modal — distinct from the page-level .step-progress/.tab-btn system above,
   which is sized for full-width page navigation, not a tight modal header.
   See .agents/AGENTS.md §21. --- */
.contract-modal-tabs {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1.2rem;
    border-bottom: 0.06rem solid #f0e9f7;
}

.contract-tab-btn {
    background: none;
    border: none;
    border-bottom: 0.15rem solid transparent;
    margin-bottom: -0.06rem;
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #8b7aa8;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.contract-tab-btn:hover {
    color: #7c3aed;
}

.contract-tab-btn.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}

.contract-tab-pane {
    display: none;
}

.contract-tab-pane.active {
    display: block;
}

/* --- GENERIC MODAL-INTERNAL TAB SWITCHER (.modal-tabs / .modal-tab-btn /
   .modal-tab-pane). Same look as #contractModal's own .contract-tab-btn
   system above, but not prefixed to one page — reused by every "Belgeler"
   (Documents, dbo.Documents) tab added to the Commitment/JobDescription/CV/
   Leave/Person/Education/Expense/Message/Task modals. Each host modal only
   ever shows one of these at a time, so the shared class names never
   collide between modals on the same page. See .agents/AGENTS.md §27. --- */
.modal-tabs {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1.2rem;
    border-bottom: 0.06rem solid #f0e9f7;
}

.modal-tab-btn {
    background: none;
    border: none;
    border-bottom: 0.15rem solid transparent;
    margin-bottom: -0.06rem;
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #8b7aa8;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.modal-tab-btn:hover {
    color: #7c3aed;
}

.modal-tab-btn.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}

.modal-tab-pane {
    display: none;
}

.modal-tab-pane.active {
    display: block;
}

/* Scrollable container for multi-tab modals */
.modal-tab-content-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #d8b4fe #f5f3ff;
}

.modal-tab-content-body::-webkit-scrollbar {
    width: 0.45rem;
}

.modal-tab-content-body::-webkit-scrollbar-track {
    background: #f5f3ff;
    border-radius: 0.25rem;
}

.modal-tab-content-body::-webkit-scrollbar-thumb {
    background: #d8b4fe;
    border-radius: 0.25rem;
}

.modal-tab-content-body::-webkit-scrollbar-thumb:hover {
    background: #a855f7;
}

/* "MS Office work like view" for the Contract's own Açıklama/Notlar field —
   a soft lavender tray around RayEditor's own chrome (toolbar + content
   area), instead of a plain flat textarea box, at the user's request to
   make it look more professional. Scoped to .contract-explanation-wrap
   only, so it doesn't affect any other rich-text editor that might later
   live inside #contractModal. This field has gone through CKEditor 5
   (§62) -> CKEditor 4 (§64) -> RayEditor (§65, current — MIT-licensed,
   github.com/yeole-rohan/ray-editor); these rules target RayEditor's real,
   verified class names (.ray-editor-wrapper/.ray-editor-toolbar/
   .ray-editor-content). Unlike CKEditor 4, RayEditor's content area is a
   plain <div>, not an iframe, so ordinary page-level CSS reaches its
   typography directly — no JS-side style injection needed. See
   .agents/AGENTS.md §62/§63/§64/§65. */
#contractModal .contract-explanation-wrap {
    background: #eae6f4;
    border-radius: 0.6rem;
    padding: 1rem;
}

#contractModal .contract-explanation-wrap .ray-editor-wrapper {
    border: none;
    border-radius: 0.3rem;
    box-shadow: 0 0.15rem 0.6rem rgba(26, 20, 43, 0.12);
    overflow: hidden;
}

#contractModal .contract-explanation-wrap .ray-editor-toolbar {
    background: #f5f3ff;
    border-bottom-color: #ede6f5;
}

#contractModal .contract-explanation-wrap .ray-editor-content {
    min-height: 40rem;
    max-height: 68vh;
    background: #ffffff;
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #1a142b;
}

/* Templates feature (dbo.Templates, Kind_ID-scoped) — the Şablonlar tab's
   own template-content editor uses real CKEditor 5 on contracts/index.php
   (deliberately kept there, see .agents/AGENTS.md §22) — #templateModal is
   reused (same ID, separate documents) on contracts/index.php,
   commitments/index.php and jobdescriptions/index.php, so this rule stays
   for the pages that still load CKEditor 5 into it. */
#templateModal .ck-editor__editable_inline {
    min-height: 20rem;
    max-height: 50vh;
}

/* Same "MS Office work like view" tray as #contractModal's own
   .contract-explanation-wrap (see above), now reused on commitments/index.php
   and jobdescriptions/index.php for their own rich-text fields — the
   Commitment's own Content field (.commitment-content-wrap), the Job
   Description's own Content field (.jd-content-wrap), and both pages'
   Şablonlar-tab Template content field (.template-exp-wrap, shared
   #templateModal ID) — after the user asked to stop using CKEditor on
   these pages entirely and move everything to RayEditor. Scoped by wrapper
   class so these rules only ever match the RayEditor instances actually
   present in each page's own DOM; #templateModal .ck-editor__editable_inline
   above still handles contracts/index.php's own CKEditor 5 instance in its
   own #templateModal. See .agents/AGENTS.md §65/§67/§68. */
#commitmentModal .commitment-content-wrap,
#jdModal .jd-content-wrap,
#templateModal .template-exp-wrap {
    background: #eae6f4;
    border-radius: 0.6rem;
    padding: 1rem;
}

#commitmentModal .commitment-content-wrap .ray-editor-wrapper,
#jdModal .jd-content-wrap .ray-editor-wrapper,
#templateModal .template-exp-wrap .ray-editor-wrapper {
    border: none;
    border-radius: 0.3rem;
    box-shadow: 0 0.15rem 0.6rem rgba(26, 20, 43, 0.12);
    overflow: hidden;
}

#commitmentModal .commitment-content-wrap .ray-editor-toolbar,
#jdModal .jd-content-wrap .ray-editor-toolbar,
#templateModal .template-exp-wrap .ray-editor-toolbar {
    background: #f5f3ff;
    border-bottom-color: #ede6f5;
}

#commitmentModal .commitment-content-wrap .ray-editor-content,
#jdModal .jd-content-wrap .ray-editor-content,
#templateModal .template-exp-wrap .ray-editor-content {
    min-height: 26rem;
    max-height: 60vh;
    background: #ffffff;
    font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #1a142b;
}

/* RayEditor's own bottom-right "Made with ❤️ by Rohan Yeole" attribution
   link, removed at the user's request. RayEditor renders it as
   #ray-editor-watermark and its own stylesheet forces it visible with
   !important (display/opacity/visibility) — verified directly from the
   library's own CDN CSS (https://cdn.jsdelivr.net/npm/@rohanyeole/
   ray-editor@2/dist/ray-editor.css) before writing this override, same
   live-verification approach as §65. An ID selector needs matching
   !important to win against that, so this uses both. It's a global rule
   (not scoped to one modal/page) since #ray-editor-watermark is the same
   ID on every RayEditor instance across all three migrated pages
   (Contract §65, Commitment §67, Job Description §68) — no per-page
   duplication needed. See .agents/AGENTS.md §69. */
#ray-editor-watermark {
    display: none !important;
}

/* --- BOOTSTRAP COMPATIBLE TEXT COLOR UTILITIES --- */
.text-danger {
    color: #dc3545 !important;
}

.text-success {
    color: #198754 !important;
}

.text-warning {
    color: #ffc107 !important;
}

.text-info {
    color: #0dcaf0 !important;
}

.text-primary {
    color: #7c3aed !important;
}

.text-secondary,
.text-muted {
    color: #6c757d !important;
}

/* ==========================================================================
   PERSON PROFILE PAGE (c=person&a=profile, also the "👁️ Profil" preview
   iframe with ?embed=1) — persons/profile.php. Everything is scoped under
   .pf-page so it can't leak into other pages' tabs/cards; the .pf-* names
   are this page's own.
   ========================================================================== */

/* --- Grid: the lg/xl breakpoints the app's Bootstrap-compatible grid
   (above) doesn't have yet. Scoped to .pf-page on purpose — other pages
   already carry col-lg-*/col-xl-* classes that are inert today, and turning
   them on globally would silently re-layout those pages. --- */
.pf-page .h-100 { height: 100%; }
/* The app's .g-* helpers only set horizontal gutters (Bootstrap's also set a
   vertical one), so rows that wrap need an explicit row gap here. */
.pf-page .row { row-gap: 0.9rem; }
@media (min-width: 992px) {
    .pf-page .col-lg-3 { flex: 0 0 25%; max-width: 25%; width: 25%; }
    .pf-page .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.333333%; }
    .pf-page .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; width: 66.666667%; }
}
@media (min-width: 1200px) {
    .pf-page .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.333333%; }
}

/* admin/parameters.php: same fix as .pf-page above — its field rows wrap to
   multiple lines and .g-3 only sets horizontal gutters, so the bottom row's
   labels were sitting right against the row above. Adds the missing
   vertical gutter, scoped so no other page's .row is affected. */
.params-page .row { row-gap: 1.2rem; }

/* --- Hero: gradient cover, overlapping avatar, identity, KPI strip --- */
.pf-hero {
    background: #ffffff;
    border: 0.06rem solid #ede6f5;
    border-radius: 1.2rem;
    box-shadow: 0 0.3rem 1.4rem rgba(124, 58, 237, 0.08);
    overflow: hidden;
    margin-bottom: 1rem;
}

.pf-hero-cover {
    height: 7.5rem;
    background:
        radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.28), transparent 42%),
        radial-gradient(circle at 8% 120%, rgba(255, 255, 255, 0.18), transparent 45%),
        linear-gradient(120deg, #4c1d95 0%, #7c3aed 55%, #a855f7 100%);
}

.pf-hero-body {
    padding: 0 1.5rem 1.4rem;
}

.pf-hero-row {
    align-items: flex-end;
}

.pf-avatar {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    margin-top: -3.75rem;
    border-radius: 1.6rem;
    border: 0.28rem solid #ffffff;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    box-shadow: 0 0.6rem 1.6rem rgba(76, 29, 149, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.3rem;
}

.pf-avatar-initials {
    font-size: 2.4rem;
    font-weight: 800;
    color: #6d28d9;
    letter-spacing: 0.02rem;
}

.pf-presence {
    position: absolute;
    right: -0.25rem;
    bottom: -0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #9ca3af;
    border: 0.25rem solid #ffffff;
}

.pf-presence.is-active {
    background: #10b981;
}

.pf-identity {
    min-width: 0;
    padding-top: 0.9rem;
}

.pf-name {
    margin: 0 0 0.2rem;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02rem;
    color: #1a142b;
    line-height: 1.2;
    word-break: break-word;
}

.pf-subtitle {
    margin: 0 0 0.7rem;
    font-size: 0.98rem;
    font-weight: 500;
    color: #6b5a8a;
}

.pf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 2rem;
    background: #f5f0fb;
    border: 0.06rem solid #ebe1f7;
    color: #5b4a7e;
    font-size: 0.78rem;
    font-weight: 600;
}

.pf-chip-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

.pf-chip-muted {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

.pf-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.pf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-bottom: 0.2rem;
}

.pf-actions .btn {
    text-decoration: none;
}

.pf-stats {
    margin-top: 1.2rem;
}

.pf-stat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    padding: 0.85rem 1rem;
    background: #faf7fd;
    border: 0.06rem solid #ede5f5;
    border-radius: 0.9rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pf-stat:hover {
    transform: translateY(-0.1rem);
    box-shadow: 0 0.4rem 1rem rgba(124, 58, 237, 0.1);
}

.pf-stat-icon {
    flex-shrink: 0;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: #f3e8ff;
}

.pf-stat-green .pf-stat-icon { background: #d1fae5; }
.pf-stat-blue .pf-stat-icon { background: #dbeafe; }
.pf-stat-amber .pf-stat-icon { background: #fef3c7; }
.pf-stat-purple .pf-stat-icon { background: #ede9fe; }

.pf-stat-text {
    min-width: 0;
}

.pf-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    color: #8b7aa8;
}

.pf-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a142b;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.pf-stat-hint {
    font-size: 0.72rem;
    color: #9a8db3;
}

/* --- Tab bar: the profile page uses the app-wide SOFT TAB MENU
   (.profile-tabs.tabs-soft, see below), like every other page. Only the
   small count badge is profile-specific. --- */
.pf-tab-count {
    min-width: 1.3rem;
    padding: 0.05rem 0.4rem;
    border-radius: 2rem;
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

/* --- Overview cards and info tiles --- */
.pf-card {
    background: #ffffff;
    border: 0.06rem solid #ede6f5;
    border-radius: 1rem;
    padding: 1.3rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, 0.04);
}

.pf-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    padding-bottom: 0.8rem;
    border-bottom: 0.06rem solid #f0e9f7;
    font-size: 1rem;
    font-weight: 700;
    color: #1a142b;
}

.pf-card-note {
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    border-radius: 2rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02rem;
}

.pf-info,
.pf-contact {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    height: 100%;
    padding: 0.8rem 0.9rem;
    background: #faf7fd;
    border: 0.06rem solid #ede5f5;
    border-radius: 0.8rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

a.pf-contact:hover {
    background: #f5eefc;
    border-color: #d8b4fe;
}

.pf-info-icon {
    flex-shrink: 0;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: #f3e8ff;
}

.pf-info-text {
    display: block;
    min-width: 0;
}

.pf-info-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    color: #8b7aa8;
    margin-bottom: 0.15rem;
}

.pf-info-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a142b;
    line-height: 1.35;
    word-break: break-word;
}

.pf-mono {
    font-size: 0.85rem;
    letter-spacing: 0.02rem;
    word-break: break-all;
}

.pf-link {
    color: #7c3aed;
    text-decoration: none;
    font-weight: 600;
}

.pf-link:hover {
    text-decoration: underline;
}

.pf-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.pf-address {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #1a142b;
}

.pf-emergency {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pf-emergency-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a142b;
}

/* --- Other tabs (tables): same card look as the overview so the page reads
   as one piece; markup and behaviour of those tabs are unchanged --- */
.pf-page .tab-pane > .mobile-card {
    border-radius: 1rem;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, 0.04);
}

/* İzin tab: annual leave balance strip above the leave table */
.pf-leave-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.2rem;
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    background: #f5f0ff;
    border: 0.06rem solid #e9d8fd;
    border-radius: 0.8rem;
    color: #4c1d95;
}

.pf-leave-balance-main {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.pf-leave-balance-icon { font-size: 1.1rem; }

.pf-leave-balance-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.pf-leave-balance-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #7c3aed;
}

.pf-leave-balance-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.78rem;
    color: #6b5b8a;
}

.pf-leave-balance-meta b {
    font-weight: 700;
    color: #4c1d95;
}

/* --- Responsive --- */
@media (max-width: 767px) {
    .pf-hero-body {
        padding: 0 1rem 1.1rem;
    }

    .pf-hero-row > * {
        text-align: center;
    }

    .pf-avatar {
        margin-left: auto;
        margin-right: auto;
    }

    .pf-identity {
        padding-top: 0.2rem;
    }

    .pf-chips,
    .pf-actions {
        justify-content: center;
    }

    .pf-name {
        font-size: 1.45rem;
    }
}

/* Phones: two narrow KPI tiles per row, so stack the icon above its text
   instead of squeezing them side by side. */
@media (max-width: 575px) {
    .pf-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.8rem;
        text-align: left;
    }

    .pf-stat-icon {
        width: 2.3rem;
        height: 2.3rem;
        font-size: 1.1rem;
    }

    .pf-stat-value {
        font-size: 1.05rem;
    }
}

/* --- Embedded (preview modal / iframe): tighter hero, no page chrome --- */
.pf-embedded .pf-hero-cover {
    height: 5rem;
}

.pf-embedded .pf-avatar {
    width: 6rem;
    height: 6rem;
    margin-top: -3rem;
    border-radius: 1.3rem;
}

.pf-embedded .pf-avatar img {
    border-radius: 1rem;
}

.pf-embedded .pf-avatar-initials {
    font-size: 2rem;
}

.pf-embedded .pf-name {
    font-size: 1.45rem;
}

/* ==========================================================================
   24-HOUR OCCUPIED-RANGE BAR — attendance > Personel Mesaileri > the person
   day grid modal (#personDailyShiftGridModal). One thin bar under each day
   row shows which part of the 00:00-24:00 day the shift covers; the hour
   scale sits in the sticky table header. Filled in by updateGridTimeline()
   in attendance/index.php.
   ========================================================================== */
.grid-tl-cell {
    padding: 0 0.8rem 0.6rem;
}

.shift-tl,
.shift-tl-axis {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.shift-tl-axis-cell {
    padding: 0 0.8rem 0.4rem;
    font-weight: 400;
}

/* Track + tick lines every 3 hours (background-size = 3/24 of the width). */
.shift-tl-track {
    position: relative;
    flex: 1;
    height: 0.55rem;
    border-radius: 0.3rem;
    overflow: hidden;
    background-color: #f1e9fb;
    background-image: linear-gradient(to right, rgba(124, 58, 237, 0.22) 0.06rem, transparent 0.06rem);
    background-size: 12.5% 100%;
}

.shift-tl-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 0.25rem;
    border-radius: 0.3rem;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
}

.shift-tl-track.is-overtime .shift-tl-seg {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.shift-tl-label,
.shift-tl-axis-note {
    flex: 0 0 11rem;
    text-align: right;
    white-space: nowrap;
}

.shift-tl-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b5a8a;
    font-variant-numeric: tabular-nums;
}

.shift-tl-label.is-empty {
    font-weight: 400;
    color: #a599c2;
}

.shift-tl-axis-note {
    font-size: 0.68rem;
    font-weight: 500;
    color: #8b7aa8;
}

.shift-tl-scale {
    position: relative;
    flex: 1;
    height: 0.9rem;
}

.shift-tl-scale span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 600;
    color: #7c6a99;
    font-variant-numeric: tabular-nums;
}

.shift-tl-scale span:first-child { transform: none; }
.shift-tl-scale span:last-child { transform: translateX(-100%); }

/* --- Same bar on the PDKS tab (attendance > PDKS): two lanes, planned shift on
   top and the actual Giriş -> Çıkış below. Markup in attendance/_pdks_table_rows.php,
   drawn by drawPdksTimeline() in attendance/index.php. --- */
#pdksTableBody tr.pdks-row > td {
    border-bottom: 0;
}

.pdks-tl-cell {
    padding: 0 1rem 0.7rem;
}

/* Hover the pair (person row + its bar row) as one. */
#pdksTableBody tr.pdks-row:hover + tr.pdks-tl-row,
#pdksTableBody tr.pdks-row:has(+ tr.pdks-tl-row:hover) {
    background: #faf7fd;
}

.shift-tl-track-2 {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: auto;
    padding: 0.15rem 0;
}

.shift-tl-lane {
    position: relative;
    height: 0.42rem;
}

.shift-tl-lane-act .shift-tl-seg {
    background: linear-gradient(90deg, #059669, #34d399);
}

.shift-tl-lane-plan.is-default .shift-tl-seg {
    opacity: 0.45;
}

/* A lone Giriş or Çıkış time (the other one is missing) is drawn as a tick. */
.shift-tl-tick {
    position: absolute;
    top: -0.05rem;
    bottom: -0.05rem;
    width: 0.22rem;
    margin-left: -0.11rem;
    border-radius: 0.1rem;
    background: #059669;
}

.shift-tl-label-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 12.5rem;
    font-size: 0.7rem;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.shift-tl-plan { color: #6d28d9; font-weight: 600; }
.shift-tl-act { color: #047857; font-weight: 600; }
.shift-tl-plan.is-empty,
.shift-tl-act.is-empty { color: #a599c2; font-weight: 400; }

/* Legend swatches in the hour-scale header row. */
.shift-tl-key {
    display: inline-block;
    width: 0.9rem;
    height: 0.35rem;
    margin: 0 0.3rem 0 0.7rem;
    border-radius: 0.2rem;
    vertical-align: middle;
}

.shift-tl-key.plan { background: linear-gradient(90deg, #7c3aed, #a855f7); }
.shift-tl-key.act { background: linear-gradient(90deg, #059669, #34d399); }

/* --- Same two-lane bar on the Puantaj tab (attendance > Puantaj): under each day row of an
   employee's accordion table (#attendanceTable_<pid>). Not in the server markup — built
   the first time an employee is expanded, see buildTeamTimelines() in attendance/index.php. --- */
#teamAccordion tr.attendance-row > td {
    border-bottom: 0;
}

.team-tl-cell {
    padding: 0 1rem 0.7rem;
}

/* Hover the pair (day row + its bar row) as one. */
#teamAccordion tr.attendance-row:hover + tr.team-tl-row,
#teamAccordion tr.attendance-row:has(+ tr.team-tl-row:hover) {
    background: #faf7fd;
}

.pdks-axis-th .shift-tl-axis-note,
.team-axis-th .shift-tl-axis-note {
    flex-basis: 12.5rem;
}

/* Hour-scale row: same side padding as the bar cells below it so 00-24 lines up. */
.pdks-axis-th,
.team-axis-th {
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: default;
}

/* --- LAPTOP-CLASS SCREEN SCALING ---
   Almost every size in this stylesheet (and in the views' inline styles)
   is in rem, i.e. a multiple of the root font size. Lowering the root size
   on mid-width screens therefore shrinks text, buttons, topbar, paddings
   and modal widths together, in proportion. Width only, on purpose: a short
   screen just scrolls inside .main-container.
     <= 768px     mobile rules above — untouched
     769–1199px   13px root (e.g. 1024 wide)
     1200–1399px  14px root (e.g. 1280 / 1360 / 1366 wide)
     >= 1400px    16px root — untouched
   Embedded ?embed=1 iframes copy the parent page's root size instead (see
   layouts/embed_header.php), because inside an iframe these queries would
   measure the iframe's width, not the screen's. */
@media (min-width: 769px) and (max-width: 1199px) {
    html { font-size: 81.25%; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    html { font-size: 87.5%; }
}

/* Compact tabs + table cells on the same screen range. Smaller fonts alone
   can't fit a 7-tab bar (e.g. persons/index.php) next to the open sidebar
   at 1280/1360 — tighter tab padding/gaps and table cell side padding do.
   If a tab bar is still too wide (very long labels/counts) it falls back
   to the normal horizontal scroll. */
@media (min-width: 769px) and (max-width: 1399px) {
    .profile-tabs-wrapper {
        padding-right: 0;
    }
    .profile-tabs {
        gap: 0.2rem;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
    .profile-tabs .tab-btn {
        padding: 0.39rem 0.5rem;
        font-size: 0.85rem;
        gap: 0.3rem;
    }
    table th,
    table td {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }
}

/* --- MOBILE: collapsible table filters ---
   Pairs with initMobileFilterToggle() in public/js/app.js. Phones only:
   row 1 = quick search + "⚙ Filtre" button, the other filters are
   hidden until that button is tapped (.table-top-bar.filters-open). */
.mobile-filter-toggle {
    display: none;
}
@media (max-width: 768px) {
    .table-filter-group.has-mobile-toggle {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem;
    }
    .table-filter-group.has-mobile-toggle > * {
        grid-column: 1 / -1;
    }
    .table-filter-group.has-mobile-toggle > .mobile-filter-keep {
        grid-column: 1;
        order: -2;
        min-width: 0 !important;
    }
    .table-filter-group.has-mobile-toggle > .mobile-filter-keep-full {
        grid-column: 1 / -1;
        order: -3;
    }
    .table-filter-group > .mobile-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        grid-column: 2;
        order: -1;
        width: auto !important;
        white-space: nowrap;
        font-weight: 600;
    }
    .table-filter-group > .mobile-filter-toggle.mobile-filter-toggle-full {
        grid-column: 1 / -1;
        width: 100% !important;
        justify-content: center;
    }
    .mobile-filter-count:empty {
        display: none;
    }
    .mobile-filter-count {
        min-width: 1.2rem;
        padding: 0.05rem 0.35rem;
        border-radius: 1rem;
        background: #7c3aed;
        color: #ffffff;
        font-size: 0.72rem;
        line-height: 1.1rem;
        text-align: center;
    }
    .table-top-bar.filters-open .mobile-filter-toggle {
        background: #ede4fb;
        color: #6d28d9;
    }
    .table-top-bar:not(.filters-open) .table-filter-group.has-mobile-toggle > :not(.mobile-filter-keep):not(.mobile-filter-toggle) {
        display: none !important;
    }
    .table-top-bar:has(.has-mobile-toggle) {
        gap: 0.5rem;
    }
}

/* --- SOFT TAB MENU (same look as the sidebar buttons) ---
   Opt-in per page: add .tabs-soft next to .profile-tabs and put a
   <span class="tab-icon"><svg><use href="#mi-..."/></svg></span> before each label.
   Rolled out page by page; persons/index.php is the first. */
.profile-tabs.tabs-soft {
    gap: 0.15rem;
}

.profile-tabs.tabs-soft .tab-btn {
    padding: 0.5rem 0.6rem;
    border-bottom: none;
    border-radius: 0.45rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #2d1f47;
    gap: 0.45rem;
}

.profile-tabs.tabs-soft .tab-btn:hover {
    background: #f3edfa;
    color: #5b21b6;
}

.profile-tabs.tabs-soft .tab-btn.active {
    background: #ede3f9;
    color: #5b21b6;
    font-weight: 600;
}

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #7c3aed;
}

.tab-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 769px) and (max-width: 1399px) {
    .profile-tabs.tabs-soft .tab-btn {
        padding: 0.45rem 0.45rem;
        font-size: 0.88rem;
        gap: 0.35rem;
    }
}

/* --- ICON-ONLY BUTTON: square .btn with a drawn icon, no text ---
   <button class="btn btn-primary btn-icon" title="Yeni"><svg><use href="#mi-plus"/></svg></button>
   The icon takes the button's text colour (white on primary, purple on
   secondary). Always give it a title/aria-label since there is no text. */
.btn-icon {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    flex-shrink: 0;
}

/* Smaller variant for buttons inside table rows */
.btn-icon.btn-icon-sm {
    width: 1.9rem;
    height: 1.9rem;
}

.btn-icon.btn-icon-sm svg {
    width: 1rem;
    height: 1rem;
}

.btn-icon svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- SEGMENTED TOOL GROUP: secondary table tools (export, columns, reset) ---
   Smaller (2rem) and quieter than the main action buttons; the three icons
   share one thin-bordered box.
   <div class="btn-segment"> <button class="btn-segment-item"><svg>…</svg></button> … </div>
   A child may be a wrapper (.tool-menu / .col-visibility-container) holding
   the button plus its dropdown. */
.btn-segment {
    display: inline-flex;
    align-items: stretch;
    height: 2rem;
    border: 0.06rem solid #e4dcef;
    border-radius: 0.5rem;
    background: #ffffff;
    flex-shrink: 0;
}

.btn-segment > * {
    position: relative;
    display: flex;
}

/* :not(:first-child) (not "* + *") so it outranks .btn-segment-item's
   border: none when the child is the button itself (e.g. the reset icon). */
.btn-segment > :not(:first-child) {
    border-left: 0.06rem solid #ede6f5;
}

.btn-segment-item {
    width: 2.1rem;
    border: none;
    background: transparent;
    color: #7c3aed;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.btn-segment > :first-child,
.btn-segment > :first-child .btn-segment-item {
    border-radius: 0.44rem 0 0 0.44rem;
}

.btn-segment > :last-child,
.btn-segment > :last-child .btn-segment-item {
    border-radius: 0 0.44rem 0.44rem 0;
}

.btn-segment-item:hover,
.tool-menu.open > .btn-segment-item {
    background: #f3edfa;
    color: #5b21b6;
}

.btn-segment-item svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Small dropdown menu (see toggleToolMenu() in app.js) */
.tool-menu-list {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    min-width: 10rem;
    padding: 0.35rem;
    background: #ffffff;
    border: 0.06rem solid #e9d8fd;
    border-radius: 0.6rem;
    box-shadow: 0 0.5rem 1.5rem rgba(124, 58, 237, 0.15);
    z-index: 1000;
}

.tool-menu.open .tool-menu-list {
    display: block;
}

.tool-menu-head {
    padding: 0.35rem 0.5rem 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    color: #8b7aa8;
}

.tool-menu-list button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    font-size: 0.82rem;
    color: #2d1f47;
    text-align: left;
    cursor: pointer;
}

.tool-menu-list button:hover {
    background: #f3edfa;
    color: #5b21b6;
}

.tool-menu-list button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: #7c3aed;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The generic .table-actions-group rules size .col-visibility-container as a
   2.35rem button; inside a segment it is just a wrapper. */
.btn-segment > .col-visibility-container {
    height: auto;
    align-items: stretch;
}

/* Phones: the generic mobile rules stretch .col-visibility-container to
   full width; inside a segment it is just a wrapper. */
@media (max-width: 768px) {
    .table-actions-group .btn-segment > .col-visibility-container {
        width: auto !important;
        height: auto;
    }
}

/* --- INLINE ICON inside a text button (e.g. "Ara") --- */
.icon-inline {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- SEARCH FIELD: soft grey magnifier drawn inside the quick-search input ---
   <div class="table-filter-item search-field"><svg class="search-field-icon">…</svg><input class="form-control"></div> */
.search-field {
    position: relative;
}

.search-field-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: #a99bc2;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.search-field .form-control {
    padding-left: 2.1rem;
}

/* --- COMPACT TOOLBAR FILTERS (desktop) ---
   Filters/search are secondary to the page's main action, so on desktop they
   shrink to the 2rem height of the .btn-segment tools, with slightly smaller
   text. Phones keep the full-size, touch-friendly controls.
   Opt-in: <div class="table-top-bar toolbar-compact"> */
@media (min-width: 769px) {
    .toolbar-compact .table-filter-group {
        gap: 0.5rem;
    }
    .toolbar-compact .table-filter-group .btn,
    .toolbar-compact .table-filter-group .form-control,
    .toolbar-compact .table-filter-group .custom-multiselect-container {
        height: 2rem;
        font-size: 0.8rem;
    }
    .toolbar-compact .table-filter-group .btn {
        padding: 0 0.8rem;
        gap: 0.35rem;
    }
    .toolbar-compact .table-filter-group .form-control {
        padding: 0 0.7rem;
    }
    .toolbar-compact .search-field .form-control {
        padding-left: 1.9rem;
    }
    .toolbar-compact .search-field-icon {
        left: 0.65rem;
        width: 0.9rem;
        height: 0.9rem;
    }
    .toolbar-compact .table-filter-group .icon-inline {
        width: 0.9rem;
        height: 0.9rem;
    }
}

/* --- GROUPED FILTER FIELDS (desktop) ---
   Quick search + the filter selects read as one framed control, like the
   .btn-segment tools: shared thin border, rounded outer corners, fine
   dividers between fields. Done in CSS only so the DOM (and the phone
   "⚙ Filtre" fold in app.js, which needs each .table-filter-item as a
   direct child of .table-filter-group) stays unchanged. */
@media (min-width: 769px) {
    .toolbar-compact .table-filter-group {
        gap: 0;
        flex-wrap: nowrap;
    }
    .toolbar-compact .table-filter-group > .btn {
        margin-right: 0.5rem;
    }
    .toolbar-compact .table-filter-item {
        min-width: 7rem;
    }
    .toolbar-compact .table-filter-item .form-control {
        border: 0.06rem solid #e4dcef;
        border-left-width: 0;
        border-radius: 0;
        background: #ffffff;
    }
    .toolbar-compact .table-filter-item + .table-filter-item .form-control {
        border-left: 0.06rem solid #ede6f5;
    }
    .toolbar-compact .table-filter-item:first-of-type .form-control {
        border-left: 0.06rem solid #e4dcef;
        border-radius: 0.5rem 0 0 0.5rem;
    }
    .toolbar-compact .table-filter-item:last-of-type .form-control {
        border-radius: 0 0.5rem 0.5rem 0;
    }
    .toolbar-compact .table-filter-item:only-of-type .form-control {
        border-radius: 0.5rem;
    }
    .toolbar-compact .table-filter-item .form-control:hover {
        background: #faf7fd;
    }
    .toolbar-compact .table-filter-item .form-control:focus {
        box-shadow: inset 0 0 0 0.06rem #7c3aed;
        background: #ffffff;
    }
}

/* --- HOVER ICON ANIMATIONS ---
   Small, hover-only motions on a button's drawn icon (never the button, so
   layout never shifts). Only transform is animated, which the browser does
   on the GPU — no measurable performance cost. Add the class to the button:
     anim-lift    icon rises a little        (tabs-soft tabs get it automatically)
     anim-zoom    icon grows                 (Ara)
     anim-rotate  quarter turn               (+ / Yeni)
     anim-rewind  winds back half a turn     (reset column order)
     anim-drop    arrow drops and settles    (export / download)
     anim-blink   blinks                     (column visibility eye)
     anim-sweep   swings like a brush        (Temizle)
     anim-peek    looks around               (Veritabanında Ara)
     anim-tilt    tilts                      (row profile card)
     anim-spin    half turn clockwise        (sync / update actions)
   The topbar module badge has its own half-turn (.module-refresh-icon). */
.tab-icon svg,
[class*="anim-"] > svg {
    transition: transform 0.3s ease;
}

.profile-tabs.tabs-soft .tab-btn:hover .tab-icon svg,
.anim-lift:hover > svg {
    transform: translateY(-0.12rem);
}

.anim-zoom:hover > svg {
    transform: scale(1.18);
}

.anim-rotate:hover > svg {
    transform: rotate(90deg);
}

.anim-rewind > svg {
    transition-duration: 0.4s;
}

.anim-rewind:hover > svg {
    transform: rotate(-180deg);
}

.anim-spin:hover > svg {
    transform: rotate(180deg);
}

/* Busy state for icon-only buttons (e.g. "Mesaileri Güncelle" while the
   request runs): the icon keeps spinning instead of swapping in text. */
.btn-icon.is-busy > svg {
    animation: anim-busy-pulse 0.9s ease-in-out infinite;
}

.btn-icon.anim-spin.is-busy > svg {
    animation: anim-busy 0.9s linear infinite;
}

@keyframes anim-busy-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.88); }
}

@keyframes anim-busy {
    to { transform: rotate(360deg); }
}

.anim-tilt:hover > svg {
    transform: rotate(-12deg) scale(1.08);
}

.anim-drop:hover > svg {
    animation: anim-drop 0.6s ease;
}

.anim-blink:hover > svg {
    animation: anim-blink 0.5s ease;
}

.anim-sweep:hover > svg {
    animation: anim-sweep 0.5s ease;
}

.anim-peek:hover > svg {
    animation: anim-peek 0.5s ease;
}

@keyframes anim-drop {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(0.2rem); }
    70% { transform: translateY(-0.06rem); }
}

@keyframes anim-blink {
    0%, 100% { transform: scaleY(1); }
    40% { transform: scaleY(0.1); }
}

@keyframes anim-sweep {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-18deg); }
    65% { transform: rotate(12deg); }
}

@keyframes anim-peek {
    0%, 100% { transform: translate(0, 0); }
    35% { transform: translate(-0.12rem, -0.06rem) rotate(-8deg); }
    70% { transform: translate(0.06rem, 0) rotate(4deg); }
}

/* Sidebar: same "lift" as the tab icons, plus a small zoom, on every main
   and submenu item. Pure CSS — no markup changes needed. */
.menu-item .icon svg,
.menu-item-row .menu-item-link .icon svg,
.submenu-icon svg {
    transition: transform 0.3s ease;
}

.menu-item:hover .icon svg,
.menu-item-row:hover .menu-item-link .icon svg {
    transform: translateY(-0.12rem) scale(1.1);
}

.submenu-item:hover .submenu-icon svg {
    transform: translateY(-0.1rem) scale(1.1);
}

/* Respect the device's "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
    .menu-item .icon svg,
    .menu-item-row .menu-item-link .icon svg,
    .submenu-icon svg,
    .tab-icon svg,
    [class*="anim-"] > svg,
    .module-refresh-icon {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* --- COMPACT TOOLBAR ON PHONES (.toolbar-compact, <=768px) ---
   One line: [quick search][funnel filter toggle][tools segment][+].
   The filter group is flattened (display: contents) into the toolbar grid so
   the folded filters, when opened, still span the full width below.
   Everything is 2rem high except the main "+" button (2.35rem). */
@media (max-width: 768px) {
    .table-top-bar.toolbar-compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0.3rem;
    }
    .toolbar-compact > .table-filter-group {
        display: contents;
    }
    .toolbar-compact > .table-bar-divider {
        display: none;
    }
    /* row 1 */
    .toolbar-compact .table-filter-group > .mobile-filter-keep {
        grid-column: 1;
        grid-row: 1;
    }
    .toolbar-compact .table-filter-group > .mobile-filter-toggle {
        grid-column: 2;
        grid-row: 1;
    }
    .toolbar-compact .table-filter-group > .mobile-filter-toggle.mobile-filter-toggle-full {
        grid-column: 1 / 3;
        width: 100% !important;
    }
    /* !important: beats the older generic phone rules for .table-actions-group */
    .toolbar-compact > .table-actions-group {
        grid-column: 3;
        grid-row: 1;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.3rem !important;
        width: auto !important;
        margin-top: 0 !important;
    }
    .toolbar-compact > .table-actions-group > * {
        flex: none !important;
        max-width: none !important;
    }
    /* folded filters: full-width rows underneath when opened */
    .toolbar-compact .table-filter-group > :not(.mobile-filter-keep):not(.mobile-filter-toggle) {
        grid-column: 1 / -1;
    }
    /* always-visible extras share one row below line 1: a label placed on
       the bar itself (e.g. the Puantaj period) on the left, the ‹/› month
       steppers on the right */
    .table-top-bar.toolbar-compact > :not(.table-filter-group):not(.table-bar-divider):not(.table-actions-group) {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }
    .toolbar-compact .table-filter-group > .mobile-filter-keep.mobile-filter-keep-full {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-self: end;
        width: auto !important;
    }
    .toolbar-compact .btn-nav-group .btn {
        height: 2rem;
        padding: 0 0.75rem !important;
    }

    /* Two-line fallback, set by fitCompactToolbar() in app.js when line 1
       would squeeze the quick search too much (e.g. several action buttons):
       line 1 = search + filter, line 2 = the action buttons, right-aligned. */
    .table-top-bar.toolbar-compact.toolbar-two-line {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .table-top-bar.toolbar-compact.toolbar-two-line > .table-actions-group {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .table-top-bar.toolbar-compact.toolbar-two-line > :not(.table-filter-group):not(.table-bar-divider):not(.table-actions-group),
    .toolbar-compact.toolbar-two-line .table-filter-group > .mobile-filter-keep.mobile-filter-keep-full {
        grid-row: 3;
    }

    /* 2rem controls */
    .toolbar-compact .mobile-filter-keep .form-control {
        height: 2rem;
        font-size: 0.8rem;
        padding: 0 0.6rem 0 1.9rem;
    }
    .toolbar-compact .search-field-icon {
        left: 0.6rem;
        width: 0.9rem;
        height: 0.9rem;
    }
    .toolbar-compact .table-filter-group > .mobile-filter-toggle {
        position: relative;
        width: 2rem !important;
        min-width: 2rem !important;
        height: 2rem;
        padding: 0;
        justify-content: center;
    }
    .mobile-filter-toggle svg {
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .toolbar-compact .mobile-filter-toggle .mobile-filter-count {
        position: absolute;
        top: -0.35rem;
        right: -0.35rem;
        min-width: 1rem;
        padding: 0 0.2rem;
        font-size: 0.62rem;
        line-height: 1rem;
    }
    .toolbar-compact .table-actions-group .btn-segment {
        width: auto !important;
        height: 2rem;
    }
    .toolbar-compact .table-actions-group .btn-segment > .col-visibility-container {
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }
    .toolbar-compact .btn-segment-item {
        width: 1.75rem;
    }
    .toolbar-compact .table-actions-group .btn-icon {
        width: 2.35rem !important;
        height: 2.35rem !important;
        padding: 0 !important;
    }
    /* secondary icon buttons (e.g. print) are 2rem like the other tools;
       only the primary action keeps the larger size */
    .toolbar-compact .table-actions-group .btn-icon.btn-secondary {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* --- NEAR FULL-SCREEN MODAL + WIZARD NAV (Sep 2026, first used by #personModal) ---
   .modal-near-full: fills ~98% x 95% of the viewport for data-heavy forms.
   .wizard-tabs-row: [‹ prev][step tabs][next ›] on one line; each icon button
   sits in a fixed .wizard-nav-slot so hiding it never shifts the tabs. */
.modal-content.modal-near-full {
    /* the overlay keeps 1.5rem top/bottom and 0.5rem side padding */
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    height: calc(100vh - 3rem);
    max-height: calc(100vh - 3rem);
    box-sizing: border-box;
}

.wizard-tabs-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    flex-shrink: 0;
}

.wizard-tabs-row > .step-progress {
    flex: 1 1 auto !important;
    min-width: 0;
    margin: 0 !important;
}

.wizard-nav-slot {
    width: 2.35rem;
    flex-shrink: 0;
}

.anim-nudge-left > svg,
.anim-nudge-right > svg {
    transition: transform 0.25s ease;
}

.anim-nudge-left:hover > svg {
    transform: translateX(-0.15rem);
}

.anim-nudge-right:hover > svg {
    transform: translateX(0.15rem);
}

@media (max-width: 768px) {
    .modal-content.modal-near-full {
        padding: 0.8rem !important;
    }
}

/* --- MODAL FOOTER: one compact line (Sep 2026, reference: persons #personModal) ---
   [approve / reject] [İşlem Bilgisi] .............. [delete] [save]
   <div class="modal-footer-bar">
       <div id="…ActionArea" class="modal-footer-group">…Reddet, Onayla…</div>
       <div id="…AuditArea">…İşlem Bilgisi…</div>
       <div class="modal-footer-actions">…Sil, Kaydet…</div>
   </div>
   All action buttons are icon-only (.btn-icon + title/aria-label); there is no
   İptal/Kapat button — the header ✕ closes the modal. */
.modal-footer-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 0.06rem solid #f0e9f7;
    padding-top: 0.7rem;
    margin-top: 1rem;
}

.modal-footer-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-footer-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   MODAL HEADER (Oct 2026) — title on the left, ✕ close button at the far
   right. Pages that use <div class="modal-header"> had no styling for it, so
   the ✕ dropped under the title (support/index.php, platform/index.php).
   ========================================================================== */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0 0.8rem;
    margin-bottom: 0.4rem;
    border-bottom: 0.06rem solid #ede6f5;
}

.modal-header .btn-close-modal {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #8b7aa8;
}

.modal-header .btn-close-modal:hover {
    color: #6d28d9;
}

/* =========================================================================
   AppLoader — full-page loading layer (public/js/app.js, Oct 2026).
   Above every modal (.modal-overlay is 9999).
   ========================================================================= */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(26, 20, 43, 0.35);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    cursor: progress;
}

.app-loader.is-visible {
    opacity: 1;
    visibility: visible;
}

.app-loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    min-width: 12rem;
    max-width: 22rem;
    padding: 1.6rem 2rem;
    background: #ffffff;
    border-radius: 0.9rem;
    box-shadow: 0 0.8rem 2.4rem rgba(76, 29, 149, 0.22);
    text-align: center;
}

.app-loader-spinner {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 0.28rem solid #ede3f9;
    border-top-color: #7c3aed;
    animation: anim-busy 0.8s linear infinite;
}

.app-loader-text {
    color: #4c1d95;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .app-loader-spinner {
        animation-duration: 2.4s;
    }
}

/* =====================================================================
   RAPOR MERKEZİ (c=report) — hub cards + shared report page
   Hub: views/reports/hub.php (cards grouped by category) · Report page: views/reports/view.php
   ===================================================================== */
.report-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.8rem;
    margin-top: 0.7rem;
}

.report-card {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: #ffffff;
    border: 0.06rem solid #ede6f5;
    border-radius: 0.8rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.report-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 0.4rem 1.2rem rgba(124, 58, 237, 0.12);
    transform: translateY(-0.1rem);
}

.report-card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.6rem;
    background: #f3edfa;
}

.report-card-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: #7c3aed;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.report-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.report-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #4c1d95;
}

.report-card-desc {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6b7280;
}

.report-hub-group {
    margin-top: 1rem;
}

.report-hub-group + .report-hub-group {
    padding-top: 1rem;
    border-top: 0.06rem solid #f0e9f7;
}

.report-hub-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #4c1d95;
}

.report-hub-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.45rem;
    background: #7c3aed;
}

.report-hub-group-icon svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.report-hub-group-count {
    padding: 0.05rem 0.45rem;
    border-radius: 0.4rem;
    background: #ede6f5;
    color: #7c3aed;
    font-size: 0.72rem;
    font-weight: 600;
}

.report-hub-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #8b7aa8;
    font-size: 0.88rem;
}

.report-search-panel {
    background: #faf7fd;
    border: 0.06rem solid #e9d8fd;
    border-radius: 0.8rem;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
}

.report-filter-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
}

.report-th-sortable {
    cursor: pointer;
}

.report-cell-sub {
    font-size: 0.75rem;
    color: #6b7280;
}

.report-no-rows {
    text-align: center;
    color: #8b7aa8;
    padding: 2rem !important;
}

.report-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.report-pager-info {
    font-size: 0.82rem;
    color: #6b7280;
}

.report-pager-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.report-pager-nav .page-link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
}

.report-pager-nav .page-link svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.report-pager-size select {
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.82rem;
}

@media (max-width: 768px) {
    .report-hub-grid {
        grid-template-columns: 1fr;
    }

    .report-pager {
        justify-content: center;
    }
}

/* PDKS QR Scanner Viewfinder & Animation */
@keyframes qrScanLaser {
    0% { top: 0%; opacity: 0.8; }
    50% { top: 96%; opacity: 1; }
    100% { top: 0%; opacity: 0.8; }
}

.qr-scan-viewfinder {
    position: relative;
    width: 100%;
    border-radius: 0.8rem;
    overflow: hidden;
    background: #0f0a1c;
    min-height: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-scan-laser-box {
    width: 12rem;
    height: 12rem;
    border: 2px solid rgba(168, 85, 247, 0.9);
    border-radius: 1rem;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    position: relative;
}

.qr-scan-laser-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #c084fc;
    box-shadow: 0 0 8px #c084fc;
    animation: qrScanLaser 2s infinite ease-in-out;
}

/* =========================================================
   ROLE-BASED DASHBOARD WIDGETS (views/dashboard/*)
   ========================================================= */
.dash-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: start;
}
.dash-widget-grid .mobile-card { margin-bottom: 0; }
.dash-widget--wide { grid-column: 1 / -1; }

.dash-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}
.dash-widget-head .card-title { margin: 0; }
.dash-widget-sub {
    font-size: 0.8rem;
    font-weight: 500;
    color: #8b7aa8;
    margin-left: 0.4rem;
}
.dash-widget-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #7c3aed;
    text-decoration: none;
    white-space: nowrap;
}
.dash-widget-link:hover { text-decoration: underline; }

.dash-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.dash-chip {
    font-size: 0.8rem;
    color: #4d3a6e;
    background: #f3edfa;
    border: 0.06rem solid #e9d8fd;
    border-radius: 0.4rem;
    padding: 0.25rem 0.6rem;
}
.dash-chip strong { color: #5b21b6; margin-left: 0.2rem; }
.dash-chip.is-absent,
.dash-chip.is-today { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.dash-chip.is-absent strong,
.dash-chip.is-today strong { color: #fff; }
.dash-chip.is-late { background: #ede4fb; border-color: #c4a8f5; }

.dash-list-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8b7aa8;
    margin: 0.8rem 0 0.3rem;
}
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem 0.8rem;
    padding: 0.45rem 0;
    border-bottom: 0.06rem solid #f0e9f7;
}
.dash-list li:last-child { border-bottom: none; }
.dash-list-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #1a142b;
    text-decoration: none;
}
.dash-list-name:hover { color: #7c3aed; }
.dash-list-meta { font-size: 0.78rem; color: #8b7aa8; }

.dash-empty { color: #8b7aa8; font-size: 0.88rem; margin: 0.4rem 0 0; }

.dash-team-search { width: 12rem; }
.dash-team-search .form-control { height: 2rem; font-size: 0.85rem; }

.dash-widget .personel-card { text-decoration: none; }
.personel-avatar { overflow: hidden; }
.personel-avatar img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .dash-widget-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .dash-widget-head { flex-wrap: wrap; }
    .dash-team-search { width: 100%; }
}

/* Widget body with a chart on the right; wraps under the list when narrow */
.dash-split { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; }
.dash-split-main { flex: 1 1 16rem; min-width: 0; }
.dash-split-side { flex: 0 1 16rem; min-width: 14rem; margin: 0 auto; }
.dash-chart { min-height: 260px; }
.dash-chart-empty { text-align: center; padding-top: 2rem; }

/* Divider between field groups in forms and modals (Nov 2026) */
.form-divider {
    border: 0;
    border-top: 0.06rem solid #f0e9f7;
    margin: 0.5rem 0;
    width: 100%;
}

/* Help text under a form field */
.field-help {
    display: block;
    color: #8b7aa8;
    font-size: 0.72rem;
    margin-top: 0.25rem;
    line-height: 1.35;
}