*, *::before, *::after { box-sizing: border-box; }


        /* =====================================
           🎨 Branding Variables
           ===================================== */
        :root {
                --primary-color: #017ea7;
                --primary-hover: #00658e;

                --secondary-color: #00C878;
                --secondary-hover: #00af5f;

                --neutral-color: #ccc;
                --neutral-hover: #0000b3;

                --text-color: #000000;
                --muted-text-color: #64748b;
                --text-on-primary: #ffffff;
                --field-color: #f0f0f0;

                --card-background: rgba(255, 255, 255, 0.05);
                --background-color: #f4f4f4;
                --page-background: #f4f4f4;
                --modal-background: rgba(255, 255, 255, 0.05);
                --overlay: rgba(0, 0, 0, 0.45);

                --boolean-field-row-hover-bg: #f0f0f0;
                --boolean-field-row-guide-color: #ccc;

                --background-image: url("/images/background-image.jpg");
                --portal-background-image: url("/images/background-image.jpg");
                }

        /* =====================================
           🌍 Global Styles
           ===================================== */
        body {
            background-color: var(--background-color);
            color: var(--text-color);
            font-family: "Arial", sans-serif;
            background-image: var(--background-image);
            margin: 0;
            padding: 0;
            background-size: cover;
            display: flex;
            flex-direction: column; /* Ensure body content fits correctly */
        }

        body,html{ overflow-x:hidden !important; }

        .app-container {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* =====================================
        🔘 TinyMCE for communication editor
        ===================================== */
        /* The scrollable container itself should only pan vertically */
        .tinymce-shell {
        touch-action: pan-y;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        }

        /* TinyMCE UI: treat taps as clicks, not scroll gestures */
        .tinymce-shell .tox .tox-toolbar__primary,
        .tinymce-shell .tox .tox-toolbar__overflow,
        .tinymce-shell .tox .tox-toolbar__group,
        .tinymce-shell .tox .tox-dialog,
        .tinymce-shell .tox .tox-menu,
        .tinymce-shell .tox .tox-statusbar {
        touch-action: manipulation;
        }

        /* The editable iframe can scroll vertically */
        .tinymce-shell .tox .tox-edit-area,
        .tinymce-shell .tox .tox-edit-area__iframe {
        touch-action: pan-y;
        }

        /* kill any stray TinyMCE side rail */
        .tox-sidebar-wrap { border-left: 0 !important; }


        /* =====================================
        🔘 Shared buttons (no @apply needed)
        ===================================== */
        .z-btn{
        display:inline-block; border:none; border-radius:8px;
        cursor:pointer; font-weight:600; text-align:center;
        padding:10px 16px; transition:background-color .2s ease, opacity .2s ease;
        box-sizing:border-box; background-color:var(--primary-color); color:#fff;
        }
        .z-btn:hover{ background-color:var(--primary-hover); }
        .z-btn:disabled{ opacity:.5; cursor:not-allowed; }
        .z-btn-danger{ background-color:#d32f2f; color:#fff; }
        .z-btn-danger:hover{ background-color:#c12727; }

        /* Secondary / Neutral variants if needed */
        .z-btn-secondary{ background-color:var(--secondary-color); color:#fff; }
        .z-btn-secondary:hover{ background-color:var(--secondary-hover); }
        .z-btn-neutral{ background-color:var(--neutral-color); color:#111; }
        .z-btn-neutral:hover{ background-color:var(--neutral-hover); }

        /* =====================================
        ▰ Progress bar (global)
        ===================================== */
        .z-progress{ height:8px; background:#e5e7eb; border-radius:9999px; overflow:hidden; }
        .z-progress__bar{ height:100%; width:0%; background:var(--primary-color); transition:width .2s ease; }


        /* =====================================
           🖥 App Header
           ===================================== */
        .app-header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 1rem;
            background-color: var(--field-color);
            border-bottom: 1px solid var(--field-color);
            z-index: 10;
        }

        .lang-dropdown {
            max-width: 150px;
            margin-right: 1rem;
        }
        [dir="rtl"] .lang-dropdown {
            margin-left: 1rem;
            margin-right: auto;
        }

        /* =====================================
           📄 App Body & Layout
           ===================================== */
        .rtl .sidebar {
            order: 2;
        }
        .main-content {
            flex: 1;
            padding: 1rem;
            overflow-y: auto;
        }

        /* =====================================
           📑 Forms
           ===================================== */
        form {
            border: 3px solid var(--field-color);
            position: relative;
            padding: 5px;
            background-color: white;
            border-radius: 8px;
            box-sizing: border-box;
            overflow: auto;
        }
        .form label,
        .form-label {
            color: var(--text-color);
            font-size: 14px;
            margin-bottom: 5px;
        }

        /* =====================================
        🔐 Login Page
        ===================================== */
        .login-form {
            background-color: transparent;
            border: none;
        }

        .login-form label {
            color: var(--text-color);
            font-size: 14px;
            margin-bottom: 5px;
        }

        .login-content form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* Login + Remember Me row */
        .login-action-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
            gap: 8px;
        }

        /* Login button full width like inputs */
        .login-action-row .login-btn {
            flex: 1;
            background-color: var(--primary-color);
            color: var(--text-color);
            border: none;
            border-radius: 5px;
            padding: 12px;
            font-size: 16px;
            cursor: pointer;
            white-space: nowrap;
        }

        /* Dynamic hover color */
        .login-action-row .login-btn:hover {
            background-color: var(--primary-hover);
        }

        /* Remember me styling */
        .remember-me-label {
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            font-size: 14px;
        }

        /* Login Container - scoped only to login */
        .login-page {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px; /* prevent edge touching on mobile */
            box-sizing: border-box;
        }

        .login-container {
            width: 100%;
            max-width: 600px; /* desktop max */
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 25px rgba(0,0,0,0.15);
            padding: 40px;
            box-sizing: border-box;
            min-width: 400px;
        }

        /* On smaller screens */
        @media (max-width: 768px) {
            .login-container {
                max-width: 90%; /* shrink nicely on tablets/mobiles */
                padding: 20px;
            }
        }


        /* Fields spacing */
        .login-container label,
        .login-container input {
            margin-bottom: 12px;
        }

        /* Inputs & button same full width */
        .login-container input[type="email"],
        .login-container input[type="password"],
        .login-container .login-btn {
            width: 100%;
            box-sizing: border-box;
        }

        /* Bigger login button */
        .login-container .login-btn {
            padding: 16px;
            font-size: 18px;
        }

        /* Cancel button match height */
        .login-container .cancelbtn {
            background-color: var(--secondary-color);
            color: var(--text-color);
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .login-container .cancelbtn:hover {
            background-color: var(--secondary-hover);
        }


        .login-action-row {
            flex-direction: column;
            align-items: stretch;
        }

        .login-action-row .login-btn {
            width: 100%;
        }

        /* =====================================
        🔁 Reset Password Page (mirrors login)
        ===================================== */

        /* Container & layout */
        .reset-page {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        padding: 20px;
        box-sizing: border-box;
        }

        .reset-container {
        width: 100%;
        max-width: 600px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 25px rgba(0,0,0,0.15);
        padding: 40px;
        box-sizing: border-box;
        min-width: 400px;
        }

        /* Smaller screens */
        @media (max-width: 768px) {
        .reset-container {
            max-width: 90%;
            padding: 20px;
            min-width: auto;
        }
        }

        /* Form layout and labels */
        .reset-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        }

        .reset-form label {
        color: var(--text-color);
        font-size: 14px;
        margin-bottom: 5px;
        }

        /* Inputs full width */
        .reset-container input[type="email"],
        .reset-container input[type="password"] {
        width: 100%;
        box-sizing: border-box;
        }

        /* Actions row (stacked on mobile like login) */
        .reset-action-row {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
        }

        /* Primary button (clone of .login-btn) */
        .reset-btn {
        flex: 1;
        background-color: var(--primary-color);
        color: var(--text-color);
        border: none;
        border-radius: 5px;
        padding: 16px;           /* same size as login */
        font-size: 18px;
        cursor: pointer;
        white-space: nowrap;
        width: 100%;
        }
        .reset-btn:hover {
        background-color: var(--primary-hover);
        }

        /* Secondary button (clone of .cancelbtn) */
        .reset-cancelbtn {
        background-color: var(--secondary-color);
        color: var(--text-color);
        border: none;
        border-radius: 5px;
        padding: 16px;
        font-size: 18px;
        cursor: pointer;
        width: 100%;
        }
        .reset-cancelbtn:hover {
        background-color: var(--secondary-hover);
        }

        /* Inline error text */
        .reset-container .error {
        color: #ff4d4f;
        margin-top: 8px;
        }


         /* =====================================
           📦 button
           ===================================== */

        .btn {
            display: inline-block;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            text-align: center;
            padding: 10px 16px;
            transition: background-color 0.2s ease, opacity 0.2s ease;
            width: 100%; /* full width by default for forms */
            box-sizing: border-box;
        }
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: var(--text-color);
        }
        .btn-primary:hover {
            background-color: var(--primary-hover);
        }

        .btn-secondary {
            background-color: var(--secondary-color);
            color: var(--text-color);
        }
        .btn-secondary:hover {
            background-color: var(--secondary-hover);
        }

        .btn-neutral {
            background-color: var(--neutral-color);
            color: var(--text-color);
        }
        .btn-neutral:hover {
            background-color: var(--neutral-hover);
        }


        /* =====================================
           📦 Wrapper
           ===================================== */
        .wrapper {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* =====================================
           🦶 Footer
           ===================================== */
        footer {
            height: 8%;
            background-color: white;
            color: var(--text-color);
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 10;
            width: 100%;
        }

        /* =====================================
           👤 User Picture
           ===================================== */
        .userPicture {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            cursor: pointer;
            position: absolute;
            top: 5px;
            right: 10px;
            z-index: 1000;
            border: 2px solid var(--primary-color);
        }



        /* =====================================
           🖊 Form Containers
           ===================================== */
        .container {
            max-width: 600px;
            margin: auto;
            padding: 16px;
            margin-top: 10%;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
            color: var(--text-color);
        }

        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 6px;
            position: relative;
            width: 97%;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid var(--field-color);
            border-radius: 3px;
            font-size: 12px;
            box-sizing: border-box;
            background-color: var(--field-color);
            color: var(--text-color);
        }

        .form-control {
            width: 100%;
            max-width: 100%;
            height: 40px;
            padding: 8px 12px;
            border: 1px solid var(--field-color);
            border-radius: 6px;
            font-size: 0.875rem;
            box-sizing: border-box;
            background-color: var(--field-color);
            color: var(--text-color);
        }

        /* =====================================
        📌 Sidebar (Readable + big icons)
        ===================================== */
        .sidebar-container {
            position: fixed;
            top: 60px;
            left: 0;
            height: calc(100vh - 50px);
            width: var(--sidebar-width, 270px);
            box-sizing: border-box;
            max-width: min(400px, 100vw);
            background-color: var(--primary-color);
            color: var(--text-color);
            transition: width 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
            z-index: 100;

            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px 10px;
        }
        [dir="rtl"] .sidebar-container {
            left: auto;
            right: 0;
        }

        /* remove bullets */
        .sidebar-menu,
        .sidebar-menu ul,
        .sidebar-menu li {
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* overall density */
        .sidebar-menu {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* shared row styling for <a> and <button> */
        .sidebar-menu li a,
        .sidebar-menu li button {
            color: var(--text-color);
            text-decoration: none;

            display: flex;
            align-items: center;
            gap: 10px;

            width: 100%;
            padding: 10px 12px;
            border-radius: 12px;

            background: transparent;
            border: 0;
            cursor: pointer;

            /* IMPORTANT: let text be readable */
            font-size: 13px;
            line-height: 1.15;
        }

        /* bigger icons */
        .sidebar-menu li a i,
        .sidebar-menu li button i {
            width: 22px;
            text-align: center;
            font-size: 18px;
            opacity: 0.95;
        }

        /* hover/active */
        .sidebar-menu li a:hover,
        .sidebar-menu li button:hover {
            background: rgba(255, 255, 255, 0.12);
        }
        .sidebar-menu li a.active,
        .sidebar-menu li button.active {
            background: rgba(0, 0, 0, 0.18);
        }

        /* nested children indent */
        .group-children {
            margin-top: 4px;
            margin-bottom: 6px;
            padding-inline-start: 14px;
        }

        /* allow wrap in expanded mode so long labels show */
        .sidebar-container[data-collapsed="0"] .sb-text {
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
        }

        /* collapsed: icons only + center + tooltip from title */
        .sidebar-container[data-collapsed="1"] .sb-row,
        .sidebar-container[data-collapsed="1"] .child-link {
            justify-content: center;
            padding: 12px 10px;
        }
        .sidebar-container[data-collapsed="1"] .sb-text {
            display: none;
        }

        /* caret */
        .caret,
        .sb-caret {
            margin-inline-start: auto;
            font-size: 12px;
            opacity: 0.8;
        }

        .resize-handle {
        position: absolute;
        top: 0;
        width: 10px;
        height: 100%;
        cursor: ew-resize;
        z-index: 2000;
        background: transparent;
        touch-action: none;
        }

        .resize-handle:hover {
        background: rgba(255, 255, 255, 0.25);
        }

        .ltr-handle {
        right: 0;
        }

        .rtl-handle {
        left: 0;
        }


        /* =====================================
           📊 Tables
        ===================================== */
        .table-wrapper {
            overflow-x: auto;
            margin-top: 1rem;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            min-height: 180PX;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            min-width: 600px;
            font-size: 14px;
        }
        th, td {
            padding: 10px 12px;
            border: 1px solid var(--field-color);
            text-align: left;
            vertical-align: middle;
            white-space: nowrap;
        }
        thead {
            background-color: var(--primary-color);
            color: var(--text-color);
        }
        tbody tr:nth-child(even) {
            background-color: var(--field-color);
        }
        thead th {
            top: 0;
            background: var(--primary-color);
            color: var(--text-color);
            z-index: 1;
        }

        /* =====================================
           📌 hint / help
           ===================================== */
        .help {
            display: block;
            margin: 4px 0 6px;
            font-size: 0.85rem;
            color: #6b7280;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            }

        /* =====================================
           📌 Modals
           ===================================== */
        .modal-backdrop {
            position: fixed;
            top: 0; left: 0;
            width: 100vw;
            height: calc(100vh - 60px);
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        .modal {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            min-width: 300px;
            max-width: 90vw;
            text-align: center;
            color: var(--text-color);
        }

        /* =====================================
           🔔 Notifications
           ===================================== */
        .notification {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: var(--primary-color);
            color: var(--text-color);
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 1000;
            display: none;
            max-width: 300px;
        }
        .notification.success {
            background-color: var(--secondary-color);
            color: var(--text-color);
        }
        .notification.error {
            background-color: #f44336;
            color: white;
        }

        /* =====================================
           📅 Toast UI Calendar
           ===================================== */
        #calendar {
            width: 100%;
            border: 1px solid var(--field-color);
            background-color: white;
        }
        .toastui-calendar-day-names.toastui-calendar-week {
            color: var(--text-color);
        }
        .toastui-calendar-popup-button.toastui-calendar-popup-confirm {
            background-color: var(--primary-color);
            color: var(--text-color);
        }
        .calendar-navigation button {
            padding: 0.5rem 1rem;
            border: none;
            background-color: var(--secondary-color);
            color: var(--text-color);
            border-radius: 5px;
            cursor: pointer;
        }
        .calendar-navigation button:hover {
            background-color: var(--primary-color);
        }

        /* =====================================
           📌 Burger Menu & Logout
           ===================================== */
        .burger-menu {
            position: fixed;
            top: 15px;
            left: 15px;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 1100;
        }
        .burger-icon {
            width: 25px;
            height: 3px;
            background-color: var(--text-color);
            display: block;
            position: relative;
        }
        .burger-icon::before,
        .burger-icon::after {
            content: "";
            position: absolute;
            width: 25px;
            height: 3px;
            background-color: var(--text-color);
            left: 0;
        }
        .burger-icon::before {
            top: -8px;
        }
        .burger-icon::after {
            top: 8px;
        }
        .logout-button {
            background-color: #d32f2f;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
            width: 100%;
        }
        .logout-button:hover {
            background-color: #c12727;
        }


       /* =====================================
          🧭 Communication Modal (Stepper + Chips)
          ===================================== */
       .send-comm {
           --chip-bg: color-mix(in srgb, var(--field-color) 80%, transparent);
       }
       .send-comm .stepper {
           display:flex; align-items:center; gap:14px; margin:8px 0 16px;
       }
       .send-comm .step {
           display:flex; align-items:center; gap:8px; white-space:nowrap;
       }
       .send-comm .step .dot {
           width:28px; height:28px; border-radius:999px;
           display:inline-flex; align-items:center; justify-content:center;
           font-weight:700; border:2px solid var(--neutral-color);
           background: var(--field-color); color: var(--text-color);
       }
       .send-comm .step.active .dot {
           background: var(--primary-color); border-color: var(--primary-color); color:#fff;
       }
       .send-comm .step.completed .dot {
           background: var(--secondary-color); border-color: var(--secondary-color); color:#fff;
       }
       .send-comm .stepper .line {
           flex:1; height:2px; background: var(--neutral-color); opacity:.6;
       }
       .send-comm .stepper .line.filled { background: var(--primary-color); opacity:1; }

       /* Template chips */
       .send-comm .template-grid {
           display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
       }
       .send-comm .template-chip {
           border:1px solid var(--neutral-color);
           background: var(--chip-bg);
           padding:8px 10px; border-radius:10px; cursor:pointer;
           line-height:1; display:flex; align-items:center; gap:6px;
           transition: transform .06s ease, box-shadow .06s ease, border-color .06s ease, background .06s ease;
       }
       .send-comm .template-chip:hover { transform: translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.08); }
       .send-comm .template-chip.selected {
           border-color: var(--primary-color);
           background: color-mix(in srgb, var(--primary-color) 12%, var(--chip-bg));
           box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
       }
       .send-comm .template-chip .check {
           width:16px; height:16px; border-radius:50%;
           border:2px solid var(--primary-color);
           background:#fff;
       }
       .send-comm .template-chip.selected .check {
           background: var(--primary-color);
           box-shadow: inset 0 0 0 3px #fff;
       }

            
    .logo {
    width: 20%;
    }

    .error-message {
    color: red;
    margin-bottom: 16px;
    text-align: center;
    }

    .required {color: red;}

    .imgcontainer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0 0 0; /* Remove the bottom margin */
    }

    /* Reduce image size inside .imgcontainer */
    .imgcontainer img {
        width: 80px; /* Adjust width as needed */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Ensure it doesn’t exceed the container */
        border-radius: 50%; /* Optional: Keep the image circular if applicable */
    }

    .logocontainer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0 0 0; /* Remove the bottom margin */
    }

    /* Reduce image size inside .logocontainer */
    .logocontainer img {
        width: 80px; /* Adjust width as needed */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Ensure it doesn’t exceed the container */
    }


    .container {
    max-width: 600px;
    margin: auto;
    padding: 16px;
    margin-top: 10%; /* Pushes form down by 10% from the top */
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    color: #ffffff;
    }

    .psw {
    float: right;
    padding-top: 16px;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
    .wrapper {
        flex-direction: column;
    }

    .main-content {
        width: 100%;
    }
    }

    .main-content {
    margin-left: 0; /* Reset the margin on small screens */
    flex: 1;
    padding: 20px;
    background-color: #fff;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    min-height:280px;
    }

      /* Form container to accommodate the side menu */
    .form-container {
    width: 90%;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    }



    .content {
        flex-grow: 1; /* ✅ Takes all remaining space */
        margin-left: var(--sidebar-width, 230px); /* Ensure it aligns beside sidebar */
        height: calc(100vh - 60px); /* Full height */
        overflow-y: auto; /* Enable scrolling */
        transition: margin-left 0.3s ease; /* Smooth transition */
    }
    /* When RTL, push content away from right instead */
    [dir="rtl"] .content {
        margin-left: 0;
        margin-right: var(--sidebar-width, 230px);
    }
    

    /* .form-control use it for all fields */
    .form-control {
	width: 100%;
    max-width: 100%; /* Prevents any unwanted stretching */
	height: 40px;               /* Equivalent to h-10 */
	padding: 8px 12px;          /* Equivalent to px-3 py-2 */
	border: 1px solid #d1d5db;  /* Tailwind's border-gray-300 */
	border-radius: 6px;         /* Similar to rounded-md */
	font-size: 0.875rem;        /* Tailwind's text-sm */
	box-sizing: border-box;
}


    /* Full width form container */
    .form-container {
        max-width: 100vw; /* Ensure no horizontal overflow */
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden; /* Prevents inner elements from causing overflow */
    }

    /* Content area beside sidebar */
    .content {
        flex: 1;
        width: calc(100% - var(--sidebar-width, 230px));
        max-width: 100%;
        padding: 20px;
        overflow-x: hidden;
    }



/* Form Group */
    .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 6px; /* Reduced spacing */
        position: relative;
        width: 97%; /* Ensure inputs never exceed container */
    }

    /* Inputs */
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        max-width: 100%; /* Prevents any unwanted stretching */
        padding: 6px 8px;
        border: 1px solid #bbb;
        border-radius: 3px;
        font-size: 12px;
        box-sizing: border-box; /* Ensures width includes padding */
    }

    /* Remove scrollbars */
    body, html {
        overflow-x: hidden !important; /* Force-disable horizontal scrolling */
    }

    /* Responsive Fix */
    @media (max-width: 768px) {
        .content {
            width: 100%; /* Take full width on small screens */
        }
    }


    .blurred {
        filter: blur(2px); /* Optional: Add blur effect when the sidebar is expanded on mobile */
    }

    h1 {
    font-size: 2.5em;
    color: #4a90e2;
    text-align: center;
    margin-bottom: 20px;
    }

    /* General Input Styles */
    label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
        color: #4a90e2;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1em;
        box-sizing: border-box;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    textarea:focus {
        border-color: #4a90e2;
        outline: none;
    }

    /* Ensure proper spacing and alignment */
    .phone-input-container {
        display: flex;
        align-items: center;
        gap: 10px; /* Space between flag and input */
        width: 100%;
    }

    /* Ensure the wrapper holds both flag and input on the same line */
    .phone-input-wrapper {
        display: flex;
        align-items: center;
        gap: 8px; /* Space between flag and input */
        width: 100%;
        position: relative;
    }

    /* Ensure dropdown container stays inside layout */
   .iti {
    display: flex !important;
    align-items: center;
    justify-content: start;
}

.iti__flag-container {
    flex-shrink: 0;
}

    /* Selected flag button */
    .iti__selected-flag {
        display: flex;
        align-items: center;
        background-color: #f8f9fa;
        padding: 8px 12px;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px; /* Round left side */
        cursor: pointer;
        height: 40px; /* Match input height */
    }

    /* Dial code spacing */
    .iti__selected-dial-code {
        margin-left: 5px;
        font-size: 16px;
    }

    /* Hide dropdown arrow */
    .iti__arrow {
        display: none;
    }

    /* Ensure phone input aligns correctly */
    .phone-input {
    flex-grow: 1;
}

    /* Country dropdown styles */
    .iti__country-list, .iti-mobile .iti__country-list {
        position: absolute;
        top: 100%; /* Drop below input */
        background: white;
        border: 1px solid #ccc;
        z-index: 1000;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 5px;
        border-radius: 4px;
        width: auto;
        max-width: 300px;
        max-height: 200px;
        overflow-y: auto;
    }

    .iti__country-list--dropup {
	top: 100% !important;
	bottom: auto !important;
}


    /* Ensure dropdown appears when active */
    .iti__flag-container.open .iti__country-list {
        display: block;
    }


    /* Dropdown list */
    .custom-dropdown-options {
        display: none;
        position: absolute;
        top: 100%; /* Drop below input */
        left: 0;
        background: white;
        border: 1px solid #ccc;
        z-index: 1000;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 5px;
        border-radius: 4px;
        width: auto;
        max-width: 300px;
        max-height: 200px;
        overflow-y: auto;
    }

    /* Ensure dropdown shows properly */
    .custom-dropdown.open .custom-dropdown-options {
        display: block;
    }


    /* Phone Number Section */
    .phone-number {
        display: flex;
        align-items: center;
    }

    .phone-number img {
        margin-right: 8px;
    }



    /* Custom Dropdown */
    .custom-dropdown {
        display: inline-block;
        position: relative;
        margin-right: 10px; /* Space between dropdown and phone input */
        cursor: pointer;
        flex-grow: 1;
    }

    .custom-dropdown-selected {
        display: flex;
        align-items: center;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        flex-grow: 1;
    }

    /* Search Box Inside Dropdown */
    .search-box {
        width: 100%;
        padding: 5px;
        margin-bottom: 5px;
        flex-grow: 1;
    }

    /* Phone Select */
    .phone-select {
        width: 80px;
        font-size: 14px;
        padding: 4px;
    }

    .phone-select .iti__flag {
        width: 20px;
        height: 14px;
        background-image: url('/_backend/public/images/svg/ad.svg');
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* Phone Number Input Field */
    .phone-number-input {
        flex-grow: 1;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 100%;
    }

    /* Dropdown Options */
    .custom-dropdown-option img {
        margin-right: 8px;
    }

    .custom-dropdown-option:hover {
        background-color: #f0f0f0;
    }

    /* Button Hover Effect */
    button[type="submit"]:hover {
        background-color: #357ab8;
    }

    .description-container {
    display: flex;
    align-items: center; /* Centers vertically relative to the label and select */
    padding-top: 8px; /* Adjust to position slightly lower */
    }

    .description {
    color: #666;
    padding-left: 15px;
    font-size: 14px;
    }

    /* Flexbox container for form rows */
    .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
    .col-md-4,
    .col-md-8 {
        width: 100%;
    }
    }

    /* Generic column styling */
    .col-md-4,
    .col-md-8 {
    flex: 1;
    padding: 5px;
    }

    .notification {
        position: fixed;
        bottom: 20px;
        left: 20px;
        background-color: #f44336;
        color: white;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        display: none;
        max-width: 300px;
        }

    .notification.success {
    background-color: #4caf50;
    }

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

    .notification a {
    color: #fff;
    text-decoration: underline;
    }

    /* Set popup container width to ensure consistency with form container */
    .toastui-calendar-popup-container {
    width: var(--popup-width, 60%);
    max-width: 600px; /* Adjust max width as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    }

    #calendar {
        width: 100%;
        border: 1px solid #dcdcdc;
        background-color: white;
    }

    .calendar-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .toastui-calendar-panel.toastui-calendar-time,
    .toastui-calendar-layout.toastui-calendar-month {
    width: 100% !important;
    min-height: 280px;
    }

    .toastui-calendar-weekday {
    min-height: 45px !important;
    }

    .toastui-calendar-timegrid {
    min-height: 32px !important;
    height: 95% !important;
    }

    .toastui-calendar-day-names.toastui-calendar-week {
    color: black;
    }

    .toastui-calendar-resize-handler-x {
    display: none !important;
    }

    .toastui-calendar-detail-container,
    .toastui-calendar-dropdown-menu {
    color: black;
    }

    .toastui-calendar-popup-button.toastui-calendar-popup-confirm {
    width: 130px !important;
    }

    .toastui-calendar-popup-section {
     min-height:45px !important;
    }

    .toastui-calendar-popup-section-item {
     height:45px !important;
    }

    .toastui-calendar-popup-section-title {
     height:65px !important;
    }

    .toastui-calendar-popup-section-item.toastui-calendar-popup-section-location, 
                    .toastui-calendar-popup-section-item.toastui-calendar-popup-section-private.toastui-calendar-popup-button,
                    /*.toastui-calendar-popup-section-item.toastui-calendar-popup-date-picker,*/
                    .toastui-calendar-popup-section-item.toastui-calendar-popup-section-allday, 
                    .toastui-calendar-state-section,
                    .toastui-calendar-ic-title
                     {
    display: none;
    }

    /* Ensure the form container has a consistent width */
    .toastui-calendar-form-container {
    width: 100%;
    max-width: var(--popup-width, 600px);
    padding: 1rem; /* Optional: adjust as needed */
    box-sizing: border-box;
    }

    /* Adjust the close button to match t    he form width */
    .toastui-calendar-popup-close {
    width: 100%;
    max-width: var(--popup-width, 600px); /* Match the popup width */
    padding: 0.5rem; /* Optional: adjust padding as needed */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem; /* Adjust font size as desired */
    }

    /* Adjust icon within the close button */
    .toastui-calendar-popup-close .toastui-calendar-icon {
    font-size: 1.2rem; /* Optional: resize icon */
    }

    /* Responsive styling for mobile */
    @media screen and (max-width: 768px) {
    .group-container,
    .type-container {
        flex-direction: column;
    }
    #groupDescription,
    #typeDescription {
        margin-left: 0;
        margin-top: 10px;
    }
    }

    .calendar-navigation {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    gap: 1rem;
    }

    .toastui-calendar-column {
    border-left: 1px solid rgb(229, 229, 229);
    }

    .calendar-navigation button {
    padding: 0.5rem 1rem;
    border: none;
    background-color: #03bd9e;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    }

    .calendar-navigation button:hover {
    background-color: #029e82;
    }

    .mt-5 {
    margin-top: 3rem;
    } /* Equivalent to Bootstrap's mt-5 */
    .mb-3 {
    margin-bottom: 1rem;
    } /* Equivalent to Bootstrap's mb-3 */
    .mt-4 {
    margin-top: 2rem;
    }
    .mb-4 {
    margin-bottom: 1.5rem;
    }
    .mt-3 {
    margin-top: 1rem;
    }
    .mb-2 {
    margin-bottom: 0.5rem;
    }

    /* Full-width column by default */
    .col {
    flex: 1 1 100%; /* Full width on small screens */
    padding: 15px; /* Add padding to columns for spacing */
    }

    /* Medium screen (md) and up: 50% width */
    @media (min-width: 768px) {
    .col-md-6 {
        flex: 1 1 50%; /* 50% width for medium screens and up */
    }
    }

    /* Small screens (sm): 50% width */
    @media (min-width: 576px) {
    .col-sm-6 {
        flex: 1 1 50%;
    }
    }

    /* Large screens (lg): 33% width */
    @media (min-width: 992px) {
    .col-lg-4 {
        flex: 1 1 33.3333%;
    }
    }

     .dashboard-container {
        padding: 20px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .loading {
        font-style: italic;
        color: gray;
    }
    .error {
        color: red;
        font-weight: bold;
    }

    .burger-menu {
        display: flex; /* Display as flex */
        position: fixed;
        top: 15px;
        left: 15px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1100;
    }

    .burger-icon {
        width: 25px;
        height: 3px;
        background-color: #333;
        display: block;
        position: relative;
    }

    .burger-icon::before,
    .burger-icon::after {
        content: "";
        position: absolute;
        width: 25px;
        height: 3px;
        background-color: #333;
        left: 0;
    }

    .burger-icon::before {
        top: -8px;
    }

    .burger-icon::after {
        top: 8px;
    }

    .logout-button {
        background-color: #d32f2f;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px;
        width: 100%;
    }

    .logout-button:hover {
        background-color: #c12727;
    }

            /* =====================================
           ☑ Checkboxes
           ===================================== */
        .checkbox-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0.5rem 0;
        }
        .checkbox-input {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--primary-color);
            border: 1px solid var(--field-color);
            border-radius: 3px;
        }
        .checkbox-label {
            font-size: 0.95rem;
            color: var(--text-color);
            cursor: pointer;
            user-select: none;
        }

        /* =====================================
           📞 Phone Input (intl-tel-input)
           ===================================== */
        .phone-input-container {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }
        .phone-input-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            position: relative;
        }
        .iti {
            display: flex !important;
            align-items: center;
            justify-content: start;
        }
        .iti__selected-flag {
            background-color: var(--field-color);
            border: 1px solid var(--field-color);
            height: 40px;
            cursor: pointer;
        }
        .iti__selected-dial-code {
            margin-left: 5px;
            font-size: 16px;
        }
        .iti__arrow {
            display: none;
        }
        .phone-input {
            flex-grow: 1;
        }
        .iti__country-list {
            background: white;
            border: 1px solid var(--field-color);
            z-index: 1000;
            box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
        }

        /* =====================================
           📐 Responsive Adjustments
           ===================================== */
        @media (max-width: 768px) {
            .wrapper {
                flex-direction: column;
            }
            .main-content {
                width: 100%;
            }
            .form-row {
                flex-direction: column;
            }
            .col-md-4,
            .col-md-8 {
                width: 100%;
            }
            .content {
                width: 100%;
                margin: 0;
            }
        }
        @media (min-width: 768px) {
            .col-md-6 {
                flex: 1 1 50%;
            }
        }
        @media (min-width: 576px) {
            .col-sm-6 {
                flex: 1 1 50%;
            }
        }
        @media (min-width: 992px) {
            .col-lg-4 {
                flex: 1 1 33.3333%;
            }
        }

        .sr-only {
        position:absolute!important; width:1px!important; height:1px!important;
        padding:0!important; margin:-1px!important; overflow:hidden!important;
        clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
        }


        /* =====================================
           🛠 Utility Classes
           ===================================== */
        .mt-5 { margin-top: 3rem; }
        .mb-3 { margin-bottom: 1rem; }
        .mt-4 { margin-top: 2rem; }
        .mb-4 { margin-bottom: 1.5rem; }
        .mt-3 { margin-top: 1rem; }
        .mb-2 { margin-bottom: 0.5rem; }

        .is-invalid { border-color: #e11d48 !important; box-shadow: 0 0 0 1px rgba(225,29,72,.25); }

        /* Alerts */
        .alert {
            margin-top: 1em;
            padding: 1em;
            border-radius: 4px;
        }
        .alert.success {
            background-color: #d1fae5;
            color: #065f46;
            border: 1px solid #10b981;
        }
        .alert.error {
            background-color: #fee2e2;
            color: #991b1b;
            border: 1px solid #ef4444;
        }


        /* =====================================
        Mobile sidebar/dashboard fix
        ===================================== */
        @media (max-width: 768px) {
        :root {
            --mobile-sidebar-width: 0px;
        }

        .sidebar-container {
            top: 60px;
            width: var(--mobile-sidebar-width) !important;
            max-width: 86vw;
            padding: 0 !important;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transform: translateX(-100%);
            box-shadow: none;
        }

        [dir="rtl"] .sidebar-container {
            transform: translateX(100%);
        }

        .sidebar-container.mobile-active {
            width: var(--mobile-sidebar-width, 280px) !important;
            min-width: 90px;
            padding: 10px !important;
            opacity: 1;
            pointer-events: auto;
            transform: translateX(0);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
        }

        .sidebar-container.mobile-collapsed {
            width: 0 !important;
            min-width: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        .sidebar-container:not(.mobile-active) .sb-text,
        .sidebar-container:not(.mobile-active) .caret,
        .sidebar-container:not(.mobile-active) .sb-caret {
            display: none !important;
        }

        .sidebar-menu li a,
        .sidebar-menu li button {
            justify-content: flex-start !important;
            padding: 10px 12px !important;
            gap: 10px !important;
        }

        .sidebar-menu li a i,
        .sidebar-menu li button i {
            width: 24px !important;
            font-size: 18px !important;
        }

        .resize-handle {
            width: 18px;
        }

        .burger-menu {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            top: 10px;
            left: 12px;
            padding: 0;
            border-radius: 10px;
            background: var(--field-color);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
            z-index: 2100;
        }

        [dir="rtl"] .burger-menu {
            left: 12px;
            right: auto;
        }

        .burger-icon,
        .burger-icon::before,
        .burger-icon::after {
            background-color: var(--text-color);
            transition: transform 0.18s ease, top 0.18s ease, background-color 0.18s ease;
        }

        .burger-menu.active .burger-icon {
            background-color: transparent;
        }

        .burger-menu.active .burger-icon::before {
            top: 0;
            transform: rotate(45deg);
        }

        .burger-menu.active .burger-icon::after {
            top: 0;
            transform: rotate(-45deg);
        }

        .content {
            margin-left: 0 !important;
            margin-right: 0 !important;
            width: 100vw !important;
            padding: 12px !important;
            overflow-x: hidden !important;
        }

        [dir="rtl"] .content {
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .main-content,
        .dashboard-container,
        .form-container {
            width: 100% !important;
            max-width: 100% !important;
            padding: 12px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .app-header {
            min-height: 60px;
            justify-content: flex-end;
            padding: 8px 12px 8px 64px;
            overflow: visible;
            gap: 8px;
        }

        .app-header-right {
            width: 100%;
            max-width: calc(100vw - 76px);
            margin-left: auto;
            justify-content: flex-end;
            flex-wrap: nowrap;
            gap: 8px;
        }

        .app-header-right #language {
            width: 68px;
            min-width: 68px;
            height: 36px;
        }

        .app-header-right .user-name {
            display: none !important;
        }

        .breadcrumb,
        .app-header .breadcrumb {
            display: none !important;
        }

        .userPicture {
            width: 36px !important;
            height: 36px !important;
        }
        }