/* =========================================================
   MONOHOUSE UI
   CLEAN REBUILD
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {

    --bg-primary: #020617;
    --bg-secondary: #0f172a;

    --card-bg: rgba(255,255,255,0.04);
    --card-hover: rgba(255,255,255,0.06);

    --border-color: rgba(255,255,255,0.06);

    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.55);

    --blue-primary: #2563eb;
    --blue-hover: #1d4ed8;

    --green-primary: #16a34a;
    --green-hover: #15803d;

    --red-primary: #dc2626;
    --red-hover: #b91c1c;

    --yellow-primary: #f59e0b;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 26px;

    --transition: 0.2s ease;
}

/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html,
body {

    width: 100%;
    min-height: 100%;
}

body {

    font-family: Arial, sans-serif;

    background: var(--bg-primary);

    color: var(--text-primary);

    overflow-x: hidden;
}

/* =========================================================
   GLOBAL
========================================================= */

a {

    color: inherit;

    text-decoration: none;
}

button {

    font-family: inherit;
}

/* =========================================================
   LAYOUT
========================================================= */

.app-layout {

    min-height: 100vh;
}

.main-content {

    padding: 30px;
}

.page-content {

    display: flex;

    flex-direction: column;

    gap: 24px;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {

    position: fixed;

    top: 0;
    left: -260px;

    width: 260px;
    height: 100vh;

    background: rgba(2,6,23,0.98);

    border-right: 1px solid var(--border-color);

    padding: 22px;

    transition: var(--transition);

    z-index: 1000;
}

.sidebar.open {

    left: 0;
}

.sidebar-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.45);

    opacity: 0;

    pointer-events: none;

    transition: var(--transition);

    z-index: 999;
}

.sidebar-overlay.show {

    opacity: 1;

    pointer-events: auto;
}

/* =========================================================
   LOGO
========================================================= */

.sidebar-header {

    margin-bottom: 35px;
}

.logo-box {

    display: flex;

    align-items: center;

    gap: 12px;
}

.logo-img {

    width: 38px;
    height: 38px;

    object-fit: contain;

    border-radius: 10px;
}

.logo-text h1 {

    font-size: 19px;

    font-weight: 700;
}

.logo-text p {

    margin-top: 4px;

    font-size: 13px;

    color: var(--text-secondary);
}

/* =========================================================
   SIDEBAR LINKS
========================================================= */

.sidebar-links {

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.sidebar-link {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 16px;

    border-radius: var(--radius-md);

    color: rgba(255,255,255,0.75);

    transition: var(--transition);
}

.sidebar-link:hover {

    background: rgba(255,255,255,0.06);

    color: white;
}

.sidebar-link.active {

    background: rgba(37,99,235,0.18);

    color: white;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;
}

.topbar-left {

    display: flex;

    align-items: center;

    gap: 18px;
}

.topbar-title h2 {

    font-size: 28px;

    font-weight: 700;
}

.topbar-title p {

    margin-top: 4px;

    color: var(--text-secondary);
}

/* =========================================================
   MENU BUTTON
========================================================= */

.menu-button {

    width: 48px;
    height: 48px;

    border: none;

    border-radius: var(--radius-md);

    background: rgba(255,255,255,0.06);

    color: white;

    cursor: pointer;

    transition: var(--transition);
}

.menu-button:hover {

    background: rgba(255,255,255,0.1);
}

/* =========================================================
   PROFILE
========================================================= */

.profile-dropdown {

    position: relative;
}

.profile-button {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 14px;

    background: rgba(255,255,255,0.05);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    color: white;

    cursor: pointer;
}

.profile-avatar {

    width: 36px;
    height: 36px;

    border-radius: 12px;

    background: var(--blue-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;
}

.dropdown-menu {

    position: absolute;

    top: 60px;
    right: 0;

    width: 200px;

    background: #111827;

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 8px;

    display: none;

    z-index: 1000;
}

.dropdown-menu.show {

    display: block;
}

.dropdown-menu a {

    display: block;

    padding: 12px;

    border-radius: 12px;

    color: rgba(255,255,255,0.75);

    transition: var(--transition);
}

.dropdown-menu a:hover {

    background: rgba(255,255,255,0.06);

    color: white;
}

/* =========================================================
   BUTTONS
========================================================= */

.primary-button,
.success-button,
.warning-button,
.secondary-button,
.login-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 48px;

    padding: 0 22px;

    border: none;

    border-radius: var(--radius-md);

    color: white;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);
}

.primary-button,
.login-button,
.secondary-button {

    background: linear-gradient(
        135deg,
        var(--blue-primary),
        var(--blue-hover)
    );
}

.success-button {

    background: linear-gradient(
        135deg,
        var(--green-primary),
        var(--green-hover)
    );
}

.warning-button {

    background: linear-gradient(
        135deg,
        var(--red-primary),
        var(--red-hover)
    );
}

.primary-button:hover,
.login-button:hover,
.success-button:hover,
.warning-button:hover,
.secondary-button:hover {

    transform: translateY(-2px);
}

.login-button {

    width: 100%;
}

/* =========================================================
   CARDS
========================================================= */

.card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 24px;
}

/* =========================================================
   CAPTCHA
========================================================= */

.captcha-box{
    width:99%;

    display:flex;
    justify-content:center;

    overflow:visible;
}

.cf-turnstile{
    width:100%;

    display:flex;
    justify-content:center;

    overflow:visible;
}

.cf-turnstile iframe{
    max-width:100% !important;
}

/* MOBILE */

@media(max-width:600px){

    .login-container{
        padding:28px;
    }

    .captcha-box{
        transform:scale(0.96);

        transform-origin:center;
    }
}

/* =========================================================
   AUTH
========================================================= */

.guest-layout {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        radial-gradient(circle at top left, #1d4ed8, transparent 20%),
        radial-gradient(circle at bottom right, #0f172a, transparent 30%),
        #020617;
}

.login-container {

    width: 100%;
    max-width: 520px;

    background: rgba(255,255,255,0.04);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-xl);

    padding: 40px;

    backdrop-filter: blur(20px);

    animation: fadeUp 0.4s ease;
}

.login-logo {

    text-align: center;

    margin-bottom: 30px;
}

.login-logo img {

    width: 72px;
    height: 72px;

    object-fit: contain;

    margin-bottom: 18px;
}

.login-logo h1 {

    font-size: 30px;
}

.login-logo p {

    margin-top: 8px;

    color: var(--text-secondary);
}

.login-form {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.login-form input {

    width: 100%;

    height: 54px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: var(--radius-md);

    padding: 0 16px;

    color: white;

    font-size: 14px;

    outline: none;

    transition: var(--transition);
}

.login-form input:focus {

    border-color: rgba(59,130,246,0.5);

    background: rgba(255,255,255,0.08);
}

.login-form input::placeholder {

    color: rgba(255,255,255,0.4);
}

/* AUTH LINKS */

.login-links {

    margin-top: 20px;

    display: flex;

    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;
}

.login-links a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 16px;

    border-radius: 12px;

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    color: rgba(255,255,255,0.75);

    font-size: 13px;

    font-weight: 500;

    text-decoration: none;

    transition: var(--transition);
}

.login-links a:hover {

    background: rgba(255,255,255,0.08);

    color: white;

    transform: translateY(-1px);
}

.auth-input {

    width: 100%;

    height: 54px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: var(--radius-md);

    padding: 0 16px;

    color: white;

    font-size: 14px;

    outline: none;

    transition: var(--transition);
}

.auth-input:focus {

    border-color: rgba(59,130,246,0.5);

    background: rgba(255,255,255,0.08);
}


/* =========================================================
   FORMS
========================================================= */

.form-card {

    max-width: 1000px;

    margin: auto;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 26px;
}

.modern-form {

    display: flex;

    flex-direction: column;

    gap: 24px;
}

.form-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}

.full-width {

    grid-column: span 2;
}

.form-group {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.form-group label {

    font-size: 13px;

    color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: var(--radius-md);

    padding: 14px;

    color: white;

    outline: none;

    transition: var(--transition);
}

.form-group textarea {

    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: rgba(59,130,246,0.5);

    background: rgba(255,255,255,0.08);
}

input::placeholder,
textarea::placeholder {

    color: rgba(255,255,255,0.4);
}

/* =========================================================
   EMPLOYEE VIEW REWORK
========================================================= */

.employees-modern-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));

    gap: 24px;

}

.employee-view-page {

    display: flex;

    flex-direction: column;

    gap: 24px;
}

/* HERO */

.employee-hero-card {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 32px;

    padding: 32px;
}

.employee-hero-left {

    display: flex;

    align-items: center;

    gap: 24px;
}

.employee-hero-avatar {

    width: 92px;
    height: 92px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    font-weight: 700;

    box-shadow:
        0 10px 40px rgba(37,99,235,0.35);
}

.employee-hero-info h1 {

    font-size: 42px;

    font-weight: 700;
}

.employee-hero-info p {

    margin-top: 8px;

    color: rgba(255,255,255,0.55);

    font-size: 16px;
}

.employee-hero-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 18px;

    color: rgba(255,255,255,0.6);

    font-size: 14px;
}

.dot {

    width: 5px;
    height: 5px;

    border-radius: 999px;

    background: rgba(255,255,255,0.25);
}

.employee-hero-actions {

    display: flex;

    gap: 14px;
}

/* ANALYTICS */

.employee-analytics-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}

.employee-analytics-card {

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 24px;

    padding: 24px;
}

.employee-analytics-card span {

    color: rgba(255,255,255,0.55);

    font-size: 14px;
}

.employee-analytics-card h2 {

    margin-top: 16px;

    font-size: 42px;
}

.volume-card {

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,0.18),
            rgba(255,255,255,0.04)
        );
}

/* CONTENT GRID */

.employee-content-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

/* PANELS */

.employee-info-panel {

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 26px;

    padding: 24px;
}

/* INFO */

.employee-info-list {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.employee-info-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.employee-info-row span {

    color: rgba(255,255,255,0.55);
}

/* =========================================================
   EMPLOYEE NOTES SYSTEM
========================================================= */

.employee-note-form {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-bottom: 24px;
}

/* SELECT */

.employee-note-select {

    height: 52px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 16px;

    background: rgba(255,255,255,0.04);

    color: white;

    padding: 0 16px;

    outline: none;
}

/* TEXTAREA */

.employee-note-textarea {

    min-height: 130px;

    resize: vertical;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 18px;

    background: rgba(255,255,255,0.04);

    color: white;

    padding: 18px;

    font-family: inherit;

    outline: none;

    transition: 0.2s ease;
}

.employee-note-textarea:focus {

    border-color: rgba(37,99,235,0.35);
}

/* NOTES LIST */

.employee-notes-list {

    display: flex;

    flex-direction: column;

    gap: 14px;
}

/* CARD */

.employee-note-card {

    border-radius: 20px;

    padding: 18px;

    border: 1px solid transparent;
}

/* HEADER */

.employee-note-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;
}

.employee-note-header span {

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;
}

.employee-note-header small {

    color: rgba(255,255,255,0.5);
}

/* CONTENT */

.employee-note-card p {

    line-height: 1.7;

    color: rgba(255,255,255,0.82);
}

/* TYPES */

.employee-note-positive {

    background: rgba(34,197,94,0.08);

    border-color: rgba(34,197,94,0.18);
}

.employee-note-positive span {

    color: #86efac;
}

.employee-note-neutral {

    background: rgba(255,255,255,0.04);

    border-color: rgba(255,255,255,0.08);
}

.employee-note-neutral span {

    color: rgba(255,255,255,0.82);
}

.employee-note-negative {

    background: rgba(239,68,68,0.08);

    border-color: rgba(239,68,68,0.18);
}

.employee-note-negative span {

    color: #fca5a5;
}

/* TRANSACTIONS */

.employee-transactions-table {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.employee-transaction-row {

    display: grid;

    grid-template-columns: 1.3fr 1fr 0.8fr 0.8fr 0.6fr;

    align-items: center;

    gap: 18px;

    padding: 18px 20px;

    border-radius: 18px;

    background: rgba(255,255,255,0.03);

    transition: 0.2s ease;
}

.employee-transaction-row:hover {

    background: rgba(255,255,255,0.05);
}

/* DANGER */

/* BETTER DANGER BUTTON */

.danger-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 14px 20px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 600;

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #b91c1c
        );

    color: white;

    transition: 0.2s ease;
}

.danger-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(220,38,38,0.25);
}

.employee-danger-zone {

    background: rgba(239,68,68,0.08);

    border: 1px solid rgba(239,68,68,0.12);

    border-radius: 26px;

    padding: 26px;
}

.employee-danger-zone h3 {

    font-size: 22px;
}

.employee-danger-zone p {

    margin-top: 8px;

    color: rgba(255,255,255,0.6);
}

.employee-danger-actions {

    display: flex;

    gap: 14px;

    margin-top: 22px;
}

/* =========================================================
   TRANSACTIONS LIST
========================================================= */

.transactions-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.transaction-modern-card {

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 16px;

    transition: var(--transition);
}

.transaction-modern-card:hover {

    transform: translateY(-2px);

    background: var(--card-hover);
}

.transaction-card-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;
}

.transaction-card-header h3 {

    font-size: 16px;
}

.transaction-card-header p {

    margin-top: 6px;

    color: var(--text-secondary);

    font-size: 13px;
}

.transaction-card-body {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.transaction-row {

    display: flex;

    justify-content: space-between;

    font-size: 13px;
}

.transaction-row span {

    color: var(--text-secondary);
}

.transaction-card-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.transaction-amount {

    font-size: 22px;

    font-weight: 700;
}

.transaction-date {

    font-size: 12px;

    color: var(--text-secondary);
}

/* =========================================================
   TRANSACTION PAGE
========================================================= */

.transaction-page {

    max-width: 1100px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 24px;
}

/* HERO */

.transaction-hero {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 30px;

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 24px;
}

.transaction-hero-left {

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.transaction-id {

    font-size: 14px;

    color: rgba(255,255,255,0.45);

    font-weight: 600;
}

.transaction-hero-left h1 {

    font-size: 34px;

    font-weight: 700;
}

.transaction-meta {

    display: flex;

    gap: 18px;

    margin-top: 4px;

    font-size: 14px;

    color: rgba(255,255,255,0.5);
}

.transaction-hero-right {

    display: flex;

    align-items: center;

    gap: 18px;
}

.transaction-price {

    font-size: 42px;

    font-weight: 700;
}

/* DETAILS */

.transaction-details {

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 22px;

    overflow: hidden;
}

.detail-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 22px;

    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.detail-row:last-child {

    border-bottom: none;
}

.detail-row span {

    color: rgba(255,255,255,0.55);

    font-size: 14px;
}

.detail-row strong {

    font-size: 15px;

    font-weight: 600;
}

/* NOTES */

.transaction-notes {

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 22px;

    padding: 24px;
}

.transaction-notes h3 {

    margin-bottom: 16px;

    font-size: 16px;
}

.transaction-notes p {

    color: rgba(255,255,255,0.82);

    line-height: 1.6;
}

/* ACTIONS */

.transaction-actions {

    display: flex;

    justify-content: center;

    gap: 16px;
}

/* RECEIPTS */

.receipt-buttons {

    display: flex;

    justify-content: center;

    gap: 16px;
}

.customer-receipt-button,
.merchant-receipt-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 48px;

    padding: 0 20px;

    border-radius: 16px;

    font-size: 14px;

    font-weight: 600;

    transition: 0.2s ease;
}

/* CUSTOMER */

.customer-receipt-button {

    background: rgba(37,99,235,0.14);

    border: 1px solid rgba(37,99,235,0.25);

    color: #93c5fd;
}

.customer-receipt-button:hover {

    background: rgba(37,99,235,0.22);

    transform: translateY(-2px);
}

/* MERCHANT */

.merchant-receipt-button {

    background: rgba(168,85,247,0.14);

    border: 1px solid rgba(168,85,247,0.25);

    color: #d8b4fe;
}

.merchant-receipt-button:hover {

    background: rgba(168,85,247,0.22);

    transform: translateY(-2px);
}

/* =========================================================
   STATUS
========================================================= */

.status-badge {

    padding: 10px 16px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 700;
}

.status-pending {

    background: rgba(245,158,11,0.18);

    color: #fcd34d;
}

.status-paid {

    background: rgba(34,197,94,0.18);

    color: #86efac;
}

.status-denied {

    background: rgba(239,68,68,0.18);

    color: #fca5a5;
}

/* =========================================================
   RECEIPT BODY
========================================================= */

.receipt-body {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background:
        radial-gradient(circle at top left,
        rgba(37,99,235,0.18),
        transparent 30%),
        #020617;
}

/* =========================================================
   THERMAL RECEIPT
========================================================= */

.thermal-ticket {

    width: 100%;

    max-width: 420px;

    background: #ffffff;

    color: #000000;

    border-radius: 24px;

    padding: 34px 28px;

    box-shadow:
        0 25px 80px rgba(0,0,0,0.45);

    font-family:
        "Courier New",
        monospace;
}

/* HEADER */

.thermal-center {

    text-align: center;

    margin-bottom: 22px;
}

.thermal-center h1 {

    font-size: 34px;

    font-weight: 700;

    letter-spacing: 2px;
}

.thermal-center p {

    margin-top: 6px;

    font-size: 14px;

    letter-spacing: 1px;
}

/* SEPARATOR */

.thermal-separator {

    border-top: 2px dashed rgba(0,0,0,0.25);

    margin: 22px 0;
}

/* BLOCK */

.thermal-block {

    display: flex;

    flex-direction: column;

    gap: 16px;
}

.thermal-row {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 14px;
}

.thermal-row strong {

    text-align: right;
}

/* AMOUNT */

.thermal-amount {

    text-align: center;
}

.thermal-amount span {

    display: block;

    margin-bottom: 12px;

    font-size: 14px;

    letter-spacing: 2px;
}

.thermal-amount h2 {

    font-size: 54px;

    font-weight: 700;
}

/* STATUS */

.thermal-status {

    text-align: center;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 3px;
}

/* NOTES */

.thermal-notes {

    font-size: 14px;

    line-height: 1.7;
}

.thermal-notes h3 {

    margin-bottom: 10px;
}

/* FOOTER */

.thermal-footer {

    text-align: center;

    font-size: 14px;

    line-height: 1.9;

    letter-spacing: 1px;
}

/* =========================================================
   ANALYTICS DASHBOARD
========================================================= */

.analytics-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 20px;

    margin-bottom: 22px;
}

/* HERO */

.analytics-hero-card {

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,0.22),
            rgba(15,23,42,0.95)
        );

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 30px;

    padding: 34px;

    position: relative;

    overflow: hidden;
}

.analytics-hero-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;
}

.analytics-hero-top span {

    color: rgba(255,255,255,0.6);

    font-size: 15px;
}

.analytics-hero-top h1 {

    margin-top: 14px;

    font-size: 72px;

    font-weight: 700;

    line-height: 1;
}

.hero-badge {

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.08);

    padding: 12px 16px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;
}

/* MINI STATS */

.analytics-mini-stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-top: 34px;
}

.analytics-mini-stats div {

    background: rgba(255,255,255,0.05);

    border-radius: 18px;

    padding: 18px;
}

.analytics-mini-stats span {

    display: block;

    color: rgba(255,255,255,0.5);

    font-size: 13px;
}

.analytics-mini-stats strong {

    display: block;

    margin-top: 12px;

    font-size: 22px;
}

/* SIDE CARDS */

.analytics-side-cards {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.analytics-stat-card {

    flex: 1;

    border-radius: 24px;

    padding: 24px;

    border: 1px solid rgba(255,255,255,0.06);

    background: rgba(255,255,255,0.04);
}

.analytics-stat-card span {

    color: rgba(255,255,255,0.55);

    font-size: 14px;
}

.analytics-stat-card h2 {

    margin-top: 18px;

    font-size: 42px;
}

.pending-card {

    border-color: rgba(245,158,11,0.15);
}

.approved-card {

    border-color: rgba(34,197,94,0.15);
}

.denied-card {

    border-color: rgba(239,68,68,0.15);
}

/* BOTTOM */

.analytics-bottom-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 20px;
}

/* PANELS */

.analytics-panel {

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 26px;

    padding: 24px;
}

.analytics-panel-header {

    margin-bottom: 22px;
}

.analytics-panel-header h3 {

    font-size: 20px;
}

/* TRANSACTIONS */

.analytics-transaction-list {

    display: flex;

    flex-direction: column;

    gap: 12px;
}

.analytics-transaction-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 18px;

    border-radius: 18px;

    background: rgba(255,255,255,0.03);

    transition: 0.2s ease;
}

.analytics-transaction-row:hover {

    background: rgba(255,255,255,0.05);
}

.analytics-transaction-row p {

    margin-top: 5px;

    color: rgba(255,255,255,0.5);

    font-size: 13px;
}

.analytics-transaction-right {

    display: flex;

    align-items: center;

    gap: 14px;
}

/* STATUS */

.analytics-status {

    padding: 8px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 600;
}

.analytics-status-pending {

    background: rgba(245,158,11,0.15);

    color: #fcd34d;
}

.analytics-status-paid {

    background: rgba(34,197,94,0.15);

    color: #86efac;
}

.analytics-status-denied {

    background: rgba(239,68,68,0.15);

    color: #fca5a5;
}

/* SYSTEM */

.system-health-list {

    display: flex;

    flex-direction: column;

    gap: 18px;
}

.system-health-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.health-online {

    color: #86efac;
}

/* =========================================================
   PAGE LAYOUT FIXES
========================================================= */

/* GLOBAL PAGE WRAPPER */

.dashboard-page,
.transactions-page,
.employees-page,
.employee-view-page,
.profile-page,
.settings-page {

    display: flex;

    flex-direction: column;

    gap: 24px;
}

/* =========================================================
   PROFILE PAGE
========================================================= */

.profile-page{
    display:flex;
    flex-direction:column;
    gap:24px;
}

/* =========================================================
   HERO
========================================================= */

.profile-hero-card{
    position:relative;

    overflow:hidden;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:32px;

    border-radius:32px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.03)
        );

    border:1px solid rgba(255,255,255,0.06);
}

.profile-hero-card::before{
    content:'';

    position:absolute;

    top:-140px;
    right:-140px;

    width:280px;
    height:280px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,0.18),
            transparent 70%
        );

    pointer-events:none;
}

.profile-hero-left{
    display:flex;
    align-items:center;
    gap:24px;

    position:relative;

    z-index:2;
}

/* =========================================================
   AVATAR
========================================================= */

.profile-hero-avatar{
    width:92px;
    height:92px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;
    font-weight:700;

    color:white;

    box-shadow:
        0 14px 35px rgba(37,99,235,0.32);
}

/* =========================================================
   HERO INFO
========================================================= */

.profile-hero-left h1{
    font-size:42px;
    font-weight:700;

    line-height:1;
}

.profile-hero-left p{
    margin-top:10px;

    color:rgba(255,255,255,0.58);

    font-size:15px;
}

.profile-hero-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:12px;

    margin-top:18px;

    color:rgba(255,255,255,0.5);

    font-size:13px;
}

.dot{
    width:5px;
    height:5px;

    border-radius:999px;

    background:rgba(255,255,255,0.25);
}

/* =========================================================
   STATS GRID
========================================================= */

.profile-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:18px;
}

/* =========================================================
   STAT CARD
========================================================= */

.profile-stat-card{
    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:26px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.03)
        );

    border:1px solid rgba(255,255,255,0.06);

    transition:0.2s ease;
}

.profile-stat-card::before{
    content:'';

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,0.08),
            transparent
        );

    opacity:0;

    transition:0.2s ease;
}

.profile-stat-card:hover{
    transform:translateY(-2px);

    border-color:rgba(37,99,235,0.2);
}

.profile-stat-card:hover::before{
    opacity:1;
}

.profile-stat-card span{
    position:relative;

    z-index:2;

    display:block;

    color:rgba(255,255,255,0.55);

    font-size:13px;
}

.profile-stat-card h2{
    position:relative;

    z-index:2;

    margin-top:16px;

    font-size:42px;
    font-weight:700;

    line-height:1.1;
}

.volume-card{
    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,0.16),
            rgba(255,255,255,0.03)
        );
}

/* =========================================================
   CONTENT GRID
========================================================= */

.profile-content-grid{
    display:grid;
    grid-template-columns:1.1fr 0.8fr;

    gap:22px;
}

/* =========================================================
   PANELS
========================================================= */

.profile-panel{
    display:flex;
    flex-direction:column;

    gap:24px;

    padding:28px;

    border-radius:30px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.03)
        );

    border:1px solid rgba(255,255,255,0.06);
}

.profile-panel-header h3,
.analytics-panel-header h3{
    font-size:28px;
    font-weight:700;
}

.profile-panel-header p,
.analytics-panel-header p{
    margin-top:8px;

    color:rgba(255,255,255,0.55);

    font-size:14px;
}

/* =========================================================
   SECURITY FORM
========================================================= */

.profile-panel .modern-form{
    display:flex;
    flex-direction:column;

    gap:20px;
}

.profile-panel .form-group{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.profile-panel .form-group label{
    font-size:13px;

    color:rgba(255,255,255,0.58);
}

.profile-panel input{
    width:100%;
    height:56px;

    border:none;
    outline:none;

    border-radius:18px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    padding:0 18px;

    color:white;

    font-size:14px;

    transition:0.2s ease;
}

.profile-panel input:focus{
    border-color:rgba(37,99,235,0.45);

    background:rgba(255,255,255,0.08);
}

.profile-panel .primary-button{
    width:100%;

    height:56px;

    border-radius:18px;

    margin-top:6px;
}

/* =========================================================
   ALERTS
========================================================= */

.login-error,
.success-box{
    padding:14px 16px;

    border-radius:16px;

    font-size:14px;
}

.login-error{
    background:rgba(239,68,68,0.14);

    border:1px solid rgba(239,68,68,0.22);

    color:#fca5a5;
}

.success-box{
    background:rgba(34,197,94,0.14);

    border:1px solid rgba(34,197,94,0.22);

    color:#86efac;
}

/* =========================================================
   ACTIVITY LIST
========================================================= */

.profile-activity-list{
    display:flex;
    flex-direction:column;

    gap:16px;
}

.profile-activity-row,
.employee-info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 20px;

    border-radius:20px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.05);

    transition:0.2s ease;
}

.profile-activity-row:hover,
.employee-info-row:hover{
    background:rgba(255,255,255,0.05);
}

.profile-activity-row span,
.employee-info-row span{
    color:rgba(255,255,255,0.55);

    font-size:14px;
}

.profile-activity-row strong,
.employee-info-row strong{
    font-size:14px;
    font-weight:600;

    text-align:right;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1150px){

    .profile-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .profile-content-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){

    .profile-stats-grid{
        grid-template-columns:1fr;
    }

    .profile-hero-card{
        padding:26px;
    }

    .profile-hero-left{
        flex-direction:column;
        align-items:flex-start;
    }

    .profile-hero-left h1{
        font-size:34px;
    }

    .profile-panel{
        padding:22px;
    }

    .profile-activity-row,
    .employee-info-row{
        flex-direction:column;
        align-items:flex-start;

        gap:10px;
    }

    .profile-activity-row strong,
    .employee-info-row strong{
        text-align:left;
    }
}

/* =========================================================
   SETTINGS PAGE
========================================================= */

.settings-page{
    width:100%;
}

/* =========================================================
   LAYOUT
========================================================= */

.settings-layout{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:22px;
}

/* =========================================================
   CARD
========================================================= */

.settings-card{
    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    gap:22px;

    padding:24px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.03)
        );

    border:1px solid rgba(255,255,255,0.06);
}

.settings-card::before{
    content:'';

    position:absolute;

    top:-100px;
    right:-100px;

    width:220px;
    height:220px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,0.08),
            transparent 70%
        );

    pointer-events:none;
}

/* =========================================================
   HEADER
========================================================= */

.settings-card-header{
    position:relative;

    z-index:2;
}

.settings-card-header h3{
    font-size:24px;
    font-weight:700;
}

.settings-card-header p{
    margin-top:8px;

    color:rgba(255,255,255,0.55);

    font-size:14px;
}

/* =========================================================
   FORM GRID
========================================================= */

.settings-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:18px;

    position:relative;

    z-index:2;
}

/* =========================================================
   FORM GROUP
========================================================= */

.settings-card .form-group{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.settings-card .form-group label{
    font-size:13px;

    color:rgba(255,255,255,0.58);
}

/* =========================================================
   INPUTS
========================================================= */

.settings-card input,
.settings-card select{
    width:100%;
    height:50px;

    border:none;
    outline:none;

    border-radius:16px;

    background:rgba(255,255,255,0.045);

    border:1px solid rgba(255,255,255,0.08);

    padding:0 16px;

    color:white;

    font-size:14px;

    transition:0.2s ease;
}

.settings-card input:focus,
.settings-card select:focus{
    border-color:rgba(37,99,235,0.45);

    background:rgba(255,255,255,0.08);
}

/* =========================================================
   FULL WIDTH
========================================================= */

.settings-card .full-width{
    grid-column:1 / -1;
}

/* =========================================================
   SUCCESS ALERT
========================================================= */

.settings-card .success-box{
    padding:14px 16px;

    border-radius:16px;

    background:rgba(34,197,94,0.14);

    border:1px solid rgba(34,197,94,0.22);

    color:#86efac;

    font-size:14px;

    position:relative;

    z-index:2;
}

/* =========================================================
   SUBMIT
========================================================= */

.settings-submit{
    grid-column:1 / -1;

    display:flex;
    justify-content:flex-end;
}

.settings-submit .primary-button{
    min-width:220px;

    height:54px;

    border-radius:18px;
}

/* =========================================================
   CREATE EMPLOYEE PAGE
========================================================= */

.create-employee-wrapper{
    width:100%;
    max-width:720px;

    margin:auto;
}

.create-employee-card{
    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    gap:28px;

    padding:32px;

    border-radius:32px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.03)
        );

    border:1px solid rgba(255,255,255,0.06);
}

.create-employee-card::before{
    content:'';

    position:absolute;

    top:-120px;
    right:-120px;

    width:260px;
    height:260px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,0.14),
            transparent 70%
        );

    pointer-events:none;
}

/* =========================================================
   HEADER
========================================================= */

.create-employee-header{
    position:relative;

    z-index:2;
}

.create-employee-header h2{
    font-size:34px;
    font-weight:700;
}

.create-employee-header p{
    margin-top:10px;

    color:rgba(255,255,255,0.55);

    font-size:15px;
}

/* =========================================================
   FORM
========================================================= */

.create-employee-card .modern-form{
    position:relative;

    z-index:2;

    display:flex;
    flex-direction:column;

    gap:20px;
}

.create-employee-card .form-group{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.create-employee-card .form-group label{
    font-size:13px;

    color:rgba(255,255,255,0.58);
}

/* =========================================================
   INPUTS
========================================================= */

.create-employee-card input,
.create-employee-card select{
    width:100%;
    height:56px;

    border:none;
    outline:none;

    border-radius:18px;

    background:rgba(255,255,255,0.045);

    border:1px solid rgba(255,255,255,0.08);

    padding:0 18px;

    color:white;

    font-size:14px;

    transition:0.2s ease;
}

.create-employee-card input:focus,
.create-employee-card select:focus{
    border-color:rgba(37,99,235,0.45);

    background:rgba(255,255,255,0.08);
}

/* =========================================================
   BUTTON
========================================================= */

.create-employee-card .login-button{
    width:100%;

    height:58px;

    border-radius:18px;

    margin-top:6px;
}

/* =========================================================
   ALERTS
========================================================= */

.create-employee-card .login-error,
.create-employee-card .success-box{
    padding:14px 16px;

    border-radius:16px;

    font-size:14px;
}

.create-employee-card .login-error{
    background:rgba(239,68,68,0.14);

    border:1px solid rgba(239,68,68,0.22);

    color:#fca5a5;
}

.create-employee-card .success-box{
    background:rgba(34,197,94,0.14);

    border:1px solid rgba(34,197,94,0.22);

    color:#86efac;
}

/* =========================================================
   EMPLOYEES PAGE
========================================================= */

.employees-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    margin-bottom:28px;
}

.employees-topbar h2{
    font-size:34px;
    font-weight:700;
}

.employees-topbar p{
    margin-top:8px;
    color:rgba(255,255,255,0.55);
    font-size:15px;
}

/* =========================================================
   EMPLOYEES GRID
========================================================= */

.employees-modern-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
    gap:24px;
}

/* =========================================================
   EMPLOYEE CARD
========================================================= */

.employee-card{
    position:relative;

    display:flex;
    flex-direction:column;

    gap:24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.03)
        );

    border:1px solid rgba(255,255,255,0.06);

    border-radius:30px;

    padding:26px;

    overflow:hidden;

    transition:0.2s ease;
}

.employee-card::before{
    content:'';

    position:absolute;

    top:-120px;
    right:-120px;

    width:240px;
    height:240px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,0.16),
            transparent 70%
        );

    opacity:0;

    transition:0.25s ease;
}

.employee-card:hover{
    transform:translateY(-4px);

    border-color:rgba(37,99,235,0.22);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.04)
        );
}

.employee-card:hover::before{
    opacity:1;
}

/* =========================================================
   CARD TOP
========================================================= */

.employee-card-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    position:relative;

    z-index:2;
}

/* =========================================================
   AVATAR
========================================================= */

.employee-avatar-modern{
    width:74px;
    height:74px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;
    font-weight:700;

    color:white;

    box-shadow:
        0 12px 30px rgba(37,99,235,0.3);
}

/* =========================================================
   ROLE BADGES
========================================================= */

.employee-role-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:38px;

    padding:0 16px;

    border-radius:999px;

    font-size:13px;
    font-weight:700;

    border:1px solid transparent;
}

.employee-role-ceo{
    background:rgba(168,85,247,0.14);
    border-color:rgba(168,85,247,0.24);
    color:#d8b4fe;
}

.employee-role-admin{
    background:rgba(37,99,235,0.14);
    border-color:rgba(37,99,235,0.24);
    color:#93c5fd;
}

.employee-role-default{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.78);
}

/* =========================================================
   INFO
========================================================= */

.employee-card-info{
    position:relative;

    z-index:2;
}

.employee-card-info h3{
    font-size:30px;
    font-weight:700;

    line-height:1.1;
}

.employee-card-info p{
    margin-top:10px;

    color:rgba(255,255,255,0.55);

    font-size:15px;

    word-break:break-word;
}

/* =========================================================
   STATS
========================================================= */

.employee-card-stats{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:16px;

    position:relative;

    z-index:2;
}

.employee-card-stats div{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.05);

    border-radius:20px;

    padding:18px;
}

.employee-card-stats span{
    display:block;

    color:rgba(255,255,255,0.5);

    font-size:13px;
}

.employee-card-stats strong{
    display:block;

    margin-top:12px;

    font-size:22px;
    font-weight:700;

    line-height:1.2;
}

/* =========================================================
   FOOTER
========================================================= */

.employee-card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding-top:6px;

    border-top:1px solid rgba(255,255,255,0.05);

    position:relative;

    z-index:2;
}

.employee-card-footer span{
    color:rgba(255,255,255,0.5);

    font-size:13px;
}

.employee-card-footer strong{
    font-size:14px;
    font-weight:600;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .employees-modern-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){

    .employees-topbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .employee-card-stats{
        grid-template-columns:1fr;
    }

    .employee-card{
        padding:22px;
    }

    .employee-card-info h3{
        font-size:26px;
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .profile-content-grid {

        grid-template-columns: 1fr;
    }

    .profile-stats-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .employee-analytics-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .analytics-grid,
    .analytics-bottom-grid {

        grid-template-columns: 1fr;
    }

    .transactions-grid,
    .employees-modern-grid {

        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .profile-stats-grid,
    .employee-analytics-grid {

        grid-template-columns: 1fr;
    }

    .form-grid {

        grid-template-columns: 1fr;
    }

    .full-width {

        grid-column: span 1;
    }
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(16px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}