:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --secondary: #6366f1;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #f59e0b;

    --bg: #f4f6f9;
    --card-bg: #ffffff;

    --text-dark: #111827;
    --text-light: #6b7280;

    --border: #e5e7eb;

    --radius: 14px;
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
}


body {
    background: linear-gradient(180deg, #f1f5f9, #f8fafc);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: var(--text-dark);
}


.sidebar .logo {
    font-size:20px;
    font-weight:bold;
    color:#fff;
    margin-bottom:30px;
    letter-spacing:1px;
}

.sidebar h2 {
    text-align: center;
    margin-bottom: 30px;
}

.sidebar a {
    color:#e5e9ee;
    text-decoration:none;
    padding:10px 14px;
    border-radius:8px;
    margin-bottom:8px;
    font-size:14px;
    transition: all 0.3s ease;
    display:block;
}

.sidebar a:hover {
    background:#374151;
    color:#fff;
    transform: translateX(5px);
}

/*.sidebar a.active {
    background:#2563eb;
    color:#fff;
    font-weight:600;
    box-shadow:0 4px 12px rgba(37,99,235,0.4);
}*/

.sidebar .logout {
    margin-top: 100px;   /* adjust spacing */
    background:#ff3232;
}

.sidebar .logout:hover {
    background:#b32a2a;
}


.card-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* ================= LOGIN PAGE ================= */

.login-body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    font-family: 'Segoe UI', sans-serif;
}

.login-container {
    background: #ffffff;
    padding: 40px;
    width: 350px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #1e293b;
}

.login-container input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.login-container input:focus {
    border-color: #2563eb;
    outline: none;
}

.login-container button {
    width: 100%;
    padding: 12px;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    cursor: pointer;
    transition: 0.3s;
}

.login-container button:hover {
    background: #1d4ed8;
}

.login-footer {
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    color: #555;
}

.error-msg {
    background: #fee2e2;
    color: #b91c1c;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 13px;
}
.sidebar a i {
    width:20px;
    margin-right:10px;
    text-align:center;
}

.menu-item .submenu a {
    font-size:13px;
    padding:8px 10px;
    color:#9ca3af;
    border-radius:6px;
}

.menu-item .submenu a:hover {
    background:#628ff0;
    color:#fafafa;
}

.active-sub {
    background:#ffffff;
    color:#000000 !important;
}
.sidebar .arrow {
    margin-left:auto;
    font-size:12px;
}
.sidebar-arrow {
    margin-left: auto;
    font-size: 12px;
}

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

.section-card {
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.section-header {
    background: #f8fafc;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 15px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #2563eb;
}

.section-header i {
    color: #2563eb;
    font-size: 14px;
}

.section-card input,
.section-card select {
    width: 100%;
    padding: 9px;
    margin: 6px 0;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 13px;
}

.section-card input:focus,
.section-card select:focus {
    border-color: #2563eb;
    outline: none;
}
/* ================= PREMIUM SECTION BOX ================= */

.premium-section {
    position: relative;
    border-radius: 18px;
    padding: 40px 50px 35px 40px;
    margin-bottom: 45px;
    background: #ffffff;
    border: 1px solid #e6eaf0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: 0.3s ease;
    overflow: visible; /* 👈 change to this */
}

.premium-section:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

/* Section Title Floating Style */
.section-title {
    position: absolute;
    top: -14px;
    left: 35px;
    background: #fff9e4;
    padding: 6px 18px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #b27d0b;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

/* ===== PREMIUM GRID ===== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
/* Form Group */
.form-group {
    display: flex;
    flex-direction: column;
}

/* Label */
.form-group label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #334155;
    letter-spacing: 0.3px;
}

/* Input & Select */
.form-group input,
.form-group select{
    padding:14px 14px;
    border-radius:14px;
    border:1.5px solid #e5e7eb;
    background:#f9fafb;
    font-size:15px;
    transition:all 0.2s ease;
}

/* Hover Effect */
.form-group input:hover,
.form-group select:hover {
    background: #ffffff;
    border-color: #cbd5e1;
}

/* Focus Effect */
.form-group input:focus,
.form-group select:focus{
border-color:#2563eb;
background:#ffffff;
box-shadow:0 0 0 4px rgba(37,99,235,0.1);
outline:none;
}

/* Full Width Field */
.full-width {
    grid-column: span 2;
}

/* Save Button Premium */
button[name="save"] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border: none;
    padding: 14px 35px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: 0 8px 20px rgba(37,99,235,0.25);
}

button[name="save"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(37,99,235,0.35);
}
/* ===== MODAL POPUP ===== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-box {
    background: #fff;
    padding: 30px 35px;
    border-radius: 14px;
    width: 320px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    animation: popUp 0.25s ease;
}

.modal-box h3 {
    margin: 0 0 10px;
    color: #dc2626;
}

.modal-box p {
    color: #6b7280;
    font-size: 14px;
}

.modal-box button {
    margin-top: 18px;
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: white;
    cursor: pointer;
}

.modal-box button:hover {
    background: #1d4ed8;
}

@keyframes popUp {
    from { transform: scale(0.85); opacity:0; }
    to { transform: scale(1); opacity:1; }
}
/* ===== PREMIUM SEARCH ===== */

.search-wrapper {
    margin-bottom: 25px;
    display: flex;
    justify-content: flex-end;
}

.search-container {
    position: relative;
    width: 250px;
}

.search-container input {
    width: 60%;
    padding: 11px 40px 11px 38px;
    border-radius: 30px;
    border: 1.5px solid #d1d5db;
    background: #ffffff;
    font-size: 14px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-container input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    outline: none;
}

.search-container i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 14px;
}

.clear-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    cursor: pointer;
    color: #9ca3af;
}

.clear-btn:hover {
    color: #dc2626;
}
.success-msg {
    background: #ecfdf5;
    color: #065f46;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid #10b981;
    box-shadow: 0 4px 12px rgba(16,185,129,0.15);
}

.success-msg i {
    color: #10b981;
    font-size: 16px;
}
.edit-btn {
    color: #2563eb;
    margin-right: 10px;
    font-size: 14px;
}

.edit-btn:hover {
    color: #1d4ed8;
}

.delete-btn {
    color: #f83636;
    font-size: 14px;
}

.delete-btn:hover {
    color: #c41919;
}
/* Action Column */
.action-buttons {
    display: flex;
    gap: 8px;
}

.view-btn {
    background: #2563eb;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
}

.edit-btn {
    background: #144e9f;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
}

.delete-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* Edit Button */
.edit-btn {
    background: #2563eb;
    color: #fff;
}

.edit-btn:hover {
    background: #1d4ed8;
    transform: scale(1.05);
}

/* Delete Button */
.delete-btn {
    background: #ef4444;
    color: #fff;
}

.delete-btn:hover {
    background: #dc2626;
    transform: scale(1.05);
}
/* Smooth submenu animation */
.menu-item .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.menu-item.open .submenu {
    max-height: 200px;
}

/* Rotate arrow */
.menu-item .arrow {
    transition: transform 0.3s ease;
}

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

/* Better active effect */
.sidebar a.active {
    background: linear-gradient(135deg, #2563eb, #de005e);
    box-shadow: 0 6px 20px rgba(37,99,235,0.4);
}
/* PREMIUM PAGINATION */

.pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:25px;
    flex-wrap:wrap;
}

.page-btn {
    padding:6px 10px;
    border-radius:8px;
    text-decoration:none;
    background:#e5e7eb;
    color:#111827;
    font-weight:500;
    transition: all 0.25s ease;
    border:1px solid transparent;
}

.page-btn:hover {
    background:#2563eb;
    color:#fff;
    transform: translateY(-2px);
}

.active-page {
    background:#768bb7;
    color:#fff;
    font-weight:600;
    box-shadow:0 4px 10px rgba(37,99,235,0.4);
}
.fake-mobile {
    background: #fee2e2;
    color: #b91c1c;
    padding: 4px 6px;
    border-radius: 2px;
    font-weight: 600;
}

.section-content {
    margin-top: 15px;
}

.toggle-icon {
    transition: 0.3s ease;
}
.error {
    font-size: 11px;
}
.view-btn {
    background:#2563eb;
    color:#fff;
    padding:5px 10px;
    border-radius:4px;
    text-decoration:none;
}

.view-btn:hover {
    background:#1d4ed8;
}
/* Page */
.page-title{
    font-size:12px;
    font-weight:600;
    margin-bottom:20px;
    color:#e84168;
}

/* Card */
.table-card{
    background:#ffffff;
    padding:25px;
    border-radius:14px;
    box-shadow:0 8px 30px rgba(0,0,0,0.06);
}

/* Wrapper */
.table-wrapper{
    overflow-x:auto;
}

/* Table */
.premium-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
}

.premium-table thead th{
    text-align:left;
    font-weight:600;
    font-size:14px;
    color:#6b7280;
    padding:12px 16px;
}

/* Rows */
.premium-table tbody tr{
    background:#f9fafb;
    transition:all 0.25s ease;
    border-radius:10px;
}

.premium-table tbody tr:hover{
    background:#eef2ff;
    transform:translateY(-2px);
}

/* Cells */
.premium-table td{
    padding:14px 16px;
    font-size:15px;
    color:#111827;
}

/* Name Bold */
.name{
    font-weight:600;
}

/* Status Badge */
.status-badge{
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    text-transform:capitalize;
}

/* Status Colors */
.status-badge.active{
    background:#dcfce7;
    color:#15803d;
}

.status-badge.cancelled{
    background:#fee2e2;
    color:#b91c1c;
}

.status-badge.surrendered{
    background:#fef3c7;
    color:#b45309;
}

.status-badge.moved\ on{
    background:#e0e7ff;
    color:#3730a3;
}

/* View Button */
.view-btn{
    background:linear-gradient(135deg,#2563eb,#1e40af);
    color:#fff;
    padding:8px 16px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:all 0.3s ease;
}

.view-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 15px rgba(37,99,235,0.3);
}

/* No Data */
.no-data{
    text-align:center;
    padding:20px;
    color:#9ca3af;
}
/* Container*/
.table-container{
    background:#ffffff;
    padding:20px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
} 

/* Title */
.table-title{
    font-size:22px;
    font-weight:600;
    margin-bottom:15px;
    color:#111827;
}

/* Table */
.clean-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

/* Header */
.clean-table thead{
    background:#1e293b;
    color:#ffffff;
}

.clean-table th{
    padding:12px;
    text-align:left;
    background: #47608a;
    color: #fff;
    border:1px solid #d1d5db;
    font-weight:600;
}

/* Body */
.clean-table td{
    padding:6px;
    border:1px solid #e5e7eb;
    background:#ffffff;
}

/* Zebra Striping */
.clean-table tbody tr:nth-child(even){
    background:#f9fafb;
}

/* Hover */
.clean-table tbody tr:hover{
    background:#eef2ff;
}

/* Name bold */
.bold-name{
    font-weight:600;
}

/* Status */
.status{
    padding:5px 10px;
    border-radius:4px;
    font-size:12px;
    font-weight:600;
}

.status.active{
    background:#dcfce7;
    color:#15803d;
}

.status.cancelled{
    background:#fee2e2;
    color:#b91c1c;
}

.status.surrendered{
    background:#fef3c7;
    color:#b45309;
}

.status.moved{
    background:#e0e7ff;
    color:#3730a3;
}

/* Button */
.action-btn{
    background:#2563eb;
    color:#fff;
    padding:6px 12px;
    border-radius:4px;
    text-decoration:none;
    font-size:13px;
}

.action-btn:hover{
    background:#1d4ed8;
}

/* No record */
.no-record{
    text-align:center;
    padding:15px;
    color:#6b7280;
}
.details-card {

padding:0;
border-radius:0;
box-shadow:none;
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}
.details-header h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.back-btn {
    background: #ffd0d0;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: #fe0000;
    font-size: 14px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-item label {
    font-size: 12px;
    color: #9ca3af;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.detail-item span {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
}
.badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    margin-right:6px;
}
.badge-blue{background:#dbeafe;color:#1d4ed8;}
.badge-green{background:#dcfce7;color:#166534;}
.badge-orange{background:#fde68a;color:#92400e;}
.badge-red{background:#fee2e2;color:#b91c1c;}



.badge.active {
    background: #e6f9ef;
    color: #0f5132;
}

.badge.cancelled {
    background: #fde8e8;
    color: #842029;
}
.password-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-wrapper button {
    padding: 6px 14px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #111827;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.password-wrapper button:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}


.toggle-btn {
    margin-top: 5px;
    padding: 4px 10px;
    border: none;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.toggle-btn:hover {
    background: #1d4ed8;
}
.details-table {
    width: 100%;
    border-collapse: collapse;
}

.details-table th {
    background: #f1f5f9;
    padding: 10px;
    text-align: left;
    font-size: 13px;
    width: 15%;
    color: #475569;
}

.details-table td {
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #111827;
}

.details-table tr:hover {
    background: #f9fafb;
}
.pro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pro-table th {
    width: 18%;
    background: #f8fafc;
    color: #475569;
    padding: 10px;
    text-align: left;
    border: 1px solid #e5e7eb;
    font-weight: 600;
}

.pro-table td {
    width: 32%;
    padding: 10px;
    border: 1px solid #e5e7eb;
    color: #111827;
}

.pro-table tr:hover {
    background: #f9fafb;
}

.password-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.password-box button {
    padding: 4px 10px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}

.password-box button:hover {
    background: #1d4ed8;
}

/* Action Icons */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.icon-btn {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 10px;
    transition: all 0.25s ease;
    color: #fff;
}

/* View */
.view-icon {
    background: #2563eb;
}

.view-icon:hover {
    background: #1d4ed8;
    transform: scale(1.1);
}

/* Edit */
.edit-icon {
    background: #10b981;
}

.edit-icon:hover {
    background: #059669;
    transform: scale(1.1);
}

/* Delete */
.delete-icon {
    background: #ef4444;
}

.delete-icon:hover {
    background: #dc2626;
    transform: scale(1.1);
}
.view-btn:hover { background: #1d4ed8; }
.edit-btn:hover { background: #059669; }
.delete-btn:hover { background: #dc2626; }
.filed {
    color: green;
    font-weight: 600;
}

.pending {
    color: red;
    font-weight: 600;
}
.modal-success{
    background:#ecfdf5;
    color:#065f46;
    padding:12px;
    border-left:4px solid #10b981;
    border-radius:8px;
    font-size:13px;
    margin-bottom:15px;
}
/* ===== PREMIUM RETURN MODAL ===== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-box {
    width: 480px;
    background: #ffffff;
    border-radius: 20px;
    padding: 35px 40px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    animation: modalPop 0.25s ease;
}

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

.modal-box h3 {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 25px;
}

/* Form Layout */
.modal-box form {
    display: grid;
    gap: 15px;
}

/* Row Layout */
.modal-row {
    display: flex;
    gap: 12px;
}

.modal-row select,
.modal-row input {
    flex: 1;
}

/* Inputs */
.modal-box select,
.modal-box input {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    font-size: 14px;
    background: #f9fafb;
    transition: 0.25s ease;
}

.modal-box select:focus,
.modal-box input:focus {
    border-color: #8db0fc;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
    outline: none;
}

/* Buttons */
.modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.modal-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.modal-actions button:first-child {
    background: linear-gradient(135deg,#2563eb,#1e40af);
    color: #fff;
    margin-right: 10px;
}

.modal-actions button:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37,99,235,0.3);
}

.modal-actions button:last-child {
    background: #f3f4f6;
    color: #111827;
}

.modal-actions button:last-child:hover {
    background: #e5e7eb;
}
/* Year Section */
.year-section {
    margin-top: 25px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.year-header {
    background: #1e293b;
    color: #fff;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 16px;
} 

/* Type Section */
.type-section {
    border-top: 1px solid #e5e7eb;
    text-align: left; /* force left alignment */
}

.type-header {
    background: #f8fafc;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 13px; 
    font-weight: 600;

    display: flex;              /* important */
    align-items: center;        /* vertical center */
    justify-content: flex-star; /* force left alignment */
    gap: 10px;                  /* spacing between arrow & text */
}

.type-header:hover {
    background: #e2e8f0;
}

.type-body {
    display: none;
    padding: 15px;
    background: #ffffff;
}
.type-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-header .arrow {
    transition: transform 0.2s ease;
}

.type-header.open .arrow {
    transform: rotate(90deg);
}


/* FORCE LEFT ALIGNMENT FOR RETURN SECTION */



.type-section {
    text-align: left;
}

.type-header {
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.type-header .arrow {
    margin-left: 0 !important;
}
.return-arrow {
    margin: 0;
}
/* Return Action Buttons */
.return-actions {
    display: flex;
    gap: 8px;
}

.edit-icon-btn,
.delete-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s ease;
    color: #fff;
}

/* Edit */
.edit-icon-btn {
    background: #7ca5fe;
}

.edit-icon-btn:hover {
    background: #1d4ed8;
    transform: scale(1.08);
}

/* Delete */
.delete-icon-btn {
    background: #ffffff;
}

.delete-icon-btn:hover {
    background: #ff9696;
    transform: scale(1.08);
}
.toast-delete{
    position: fixed;
    top: 25px;
    right: 25px;
    background: linear-gradient(135deg,#ef4444,#dc2626);
    color: #ffffff;
    padding: 16px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    animation: slideToast 0.3s ease;
    z-index: 99999;
    max-width: 380px;
}

@keyframes slideToast{
    from { transform: translateX(40px); opacity:0; }
    to { transform: translateX(0); opacity:1; }
}
/* ===== RETURN HISTORY TITLE ===== */

.return-history-title {
    margin-top: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #dc2626;   /* Premium red */
    letter-spacing: 1px;
    position: relative;
}

/* Optional underline effect */
.return-history-title::after {
    content: "";
    width: 80px;
    height: 3px;
    background: #dc2626;
    display: block;
    margin: 10px auto 0;
    border-radius: 5px;
}
.whatsapp-btn {
    background: #25D366;
    padding: 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
    text-decoration: none;
}

.whatsapp-btn:hover {
    background: #1ebe5d;
    transform: scale(1.1);
}
.toast-success{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #16a34a;
    color: white;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 9999;
    animation: fadeIn 0.3s ease-in-out;
}
.edit-container{
    max-width:700px;
    margin:40px auto;
    padding:30px;
    background:white;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.edit-title{
    text-align:center;
    font-size:26px;
    margin-bottom:25px;
    font-weight:600;
}

.edit-form select,
.edit-form input{
    padding:10px 12px;
    border:1px solid #90bcff;
    border-radius:6px;
    font-size:14px;
    width:80%;
}

.form-row{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap:12px;
    margin-bottom:15px;
}

.file-section{
    margin-top:15px;
}

.current-file{
    margin-bottom:10px;
    font-size:14px;
}

.update-btn{
    margin-top:20px;
    background:#2563eb;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    transition:0.2s;
}

.update-btn:hover{
    background:#1e40af;
}
.it-header-actions{
    display:flex;
    gap:12px;
    margin-bottom:20px;
}

.action-btn{
    background:#2563eb;
    color:white;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:0.2s;
}

.action-btn:hover{
    background:#1e40af;
}

.view-btn{
    background:#10b981;
    color:white;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:0.2s;
}

.view-btn:hover{
    background:#047857;
}
.form-error{
    background:#fee2e2;
    color:#b91c1c;
    padding:12px 15px;
    border-radius:8px;
    margin-bottom:20px;
    font-size:14px;
    font-weight:500;
}

/* ===== CLEAN EXCEL STYLE TABLE ===== */

.table-container {
    overflow-x: auto;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
}

/* Table */
.data-table {
    width: 100%;
    border-collapse: collapse;   /* 🔥 VERY IMPORTANT */
}

/* Header */
.data-table th {
    background: #47608a;
    color: #f5f7ff;
    padding: 8px 10px;
    border: 1px solid #dcdcdc;
    font-weight: 600;
    text-align: left;
}

/* Body */
.data-table td {
    padding: 8px 10px;
    border: 1px solid #e2e2e2;
}

/* Row hover */
.data-table tbody tr:hover {
    background: #f5f7ff;
}

/* Status Badge */
.status-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.status-badge.success {
    background: #e6f4ea;
    color: #137333;
}

.status-badge.pending {
    background: #fff4e5;
    color: #b26a00;
}

/* Edit Button */
.edit-btn {
    padding: 5px 10px;
    background: #3b6ef5;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 12px;
}
/* ===== TOP BAR ===== */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Record Count Pill */
.record-count {
    background: #dcdcdc;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
}

/* Modern Search */
.modern-search {
    position: relative;
}

.modern-search input {
    padding: 12px 20px 12px 45px;
    border-radius: 30px;
    border: 1px solid #dcdcdc;
    width: 300px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

.modern-search input:focus {
    border-color: #4f6ef7;
    box-shadow: 0 0 0 3px rgba(79,110,247,0.1);
}

/* Search Icon */
.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.6;
}
/* Action Buttons */
.action-buttons a {
    padding: 5px px;
    border-radius: 5px;
    font-size: 12px;
    text-decoration: none;
    margin-right: 5px;
    font-weight: 600;
}

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

.edit-btn {
    background: #3b6ef5;
    color: #fff;
}

.delete-btn {
    background: #dc3545;
    color: #fff;
}
.data-table td,
.data-table th {
    vertical-align: middle;
}
.action-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.icon-btn:hover {
    transform: scale(1.08);
    opacity: 0.9;
}
.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.view-card {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.view-card h3 {
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
}
.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    gap: 10px;
}
.edit-btn-top {
    background: #22b573;
    color: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    text-decoration: none;
    margin-right: 10px;
}
.back-btn-top {
    background: #3b6ef5;
    color: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    text-decoration: none;
}
/* ===== Professional Profile Layout ===== */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 20px;
    margin-top: 20px;
}
.profile-item {
    background: #f8f9fb;
    padding: 15px;
    border-radius: 8px;
    transition: 0.2s ease;
}
.profile-item:hover {
    background: #eef2f7;
}
.profile-label {
    font-size: 13px;
    color: #777;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
.profile-value {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}
/* ===== Premium Profile Header ===== */

.profile-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 25px 30px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    margin-bottom: 25px;
}

.profile-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg,#3b6ef5,#6a8cff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.profile-name {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.profile-sub {
    margin-top: 6px;
}

.pan-pill {
    background: #bcccff;
    color: #0033bb;
    padding: 6px 12px;
    font-weight: 600;
    border-radius: 8px;
    font-size: 12px;
    margin-right: 8px;
}

.type-pill {
    background: #ffbfc1;
    color: #c61919;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.profile-status-group {
    display: flex;
    gap: 10px;
}

/* Info Grid */

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 25px;
}

.info-grid label {
    font-size: 12px;
    color: #888;
    display: block;
    margin-bottom: 6px;
}

.info-grid p {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}
/* ===== Premium Detail Table ===== */

.detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.detail-table th {
    width: 20%;
    text-align: left;
    background: #f5f7fa;
    padding: 12px 15px;
    font-size: 13px;
    color: #555;
    font-weight: 600;
    border: 1px solid #e5e7eb;
}

.detail-table td {
    width: 30%;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.detail-table tr:nth-child(even) td {
    background: #fafbfc;
}
.success-popup {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.badge {
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 4px;
}

.blue { background:#4c6ef5; color:#fff; }
.green { background:#2f9e44; color:#fff; }
.orange { background:#f59f00; color:#fff; }

.text-danger { color:#e03131; font-weight:600; }

.risk {
    padding:6px 10px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}

.risk.green { background:#d3f9d8; color:#2b8a3e; }
.risk.yellow { background:#fff3bf; color:#e67700; }
.risk.orange { background:#fee2e2; color:#dc2626; }
.risk.red { background:#ffe3e3; color:#c92a2a; }

.tooltip {
    position: relative;
    display: inline-block;
    margin-right: 6px;
    cursor: pointer;
}

.tooltiptext {
    visibility: hidden;
    opacity: 0;
    width: max-content;
    background-color: #1c1c1c;
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    border-radius: 6px;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    white-space: nowrap;
    transition: opacity 0.15s ease-in-out;
    z-index: 999;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.primary-btn{
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    padding: 13px 25px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
}

.primary-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(37, 99, 235, 0.4);
}

.primary-btn:active{
    transform: scale(0.98);
}
.add-itr-btn{
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(22,163,74,0.3);
    transition: all 0.3s ease;
}

.add-itr-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(22,163,74,0.4);
}

.add-itr-btn:active{
    transform: scale(0.98);
}
.profile-premium{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:25px 30px;
}
/* LEFT */
.profile-left{
    display:flex;
    align-items:center;
    gap:20px;
}
/* CENTER */
.profile-center{
    display:flex;
    gap:20px;
    align-items:center;
}

.header-action{
    display:flex;
    align-items:center;
    gap: 15px;
}

.add-return-btn{
    background: linear-gradient(135deg, #16a34a, #15803d);
    color:#fff;
    padding:12px 20px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:all 0.3s ease;
    box-shadow:0 8px 20px rgba(22,163,74,0.3);
}

.add-return-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(22,163,74,0.4);
}
.save-itr-btn{
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    padding: 14px 28px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(37,99,235,0.3);
}

.save-itr-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37,99,235,0.4);
}

.save-itr-btn:active{
    transform: scale(0.97);
}
.back-btn-top{
    background:#4a6cf7;
    color:white;
    padding:12px 16px;
    border-radius:8px;
    text-decoration:none;
    font-weight:500;
    margin-right:10px;
    display:inline-block;
}

.back-btn-top:hover{
    background:#3b5be0;
}
.edit-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.profile-financial{
    display:flex;
    gap:15px;
    margin-top:10px;
}

.financial-box{
    padding:8px 14px;
    border-radius:10px;
    font-weight:600;
    display:flex;
    flex-direction:column;
    font-size:14px;
}

.financial-box span{
    font-size:12px;
    opacity:0.7;
}

.total-box{
    background:#e8f5ff;
    color:#0077cc;
}

.pending-box{
    background:#ffeaea;
    color:#d60000;
}
/* Overpaid */
.overpaid-box{
    background:#f3e8ff;
    color:#6b21a8;
}

/* Paid */
.paid-full{
    background:#e8fff0;
    color:#008a2e;
}

.overpaid-box,
.paid-full,
.balance-due{
    padding:4px 10px;
    border-radius:16px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;   /* prevents line break */
    display:inline-block;
}
/* Pending */
.balance-due{
    background:#ffeaea;
    color:#d60000;
}
.itr-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

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

.itr-search-form{
    display:flex;
    gap:8px;
}

.itr-search-form input{
    padding:6px 10px;
    border-radius:8px;
    border:1px solid #ccc;
    font-size:14px;
}

.itr-search-form button{
    padding:6px 12px;
    border-radius:8px;
    border:none;
    background:#4c63d2;
    color:white;
    cursor:pointer;
}
/* ===== ITR SEARCH DESIGN ===== */

.itr-search-wrapper{
    position: relative;
    width: 230px;
}

.itr-search-wrapper i{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 14px;
}

.itr-search-wrapper input{
    width: 75%;
    padding: 10px 14px 10px 38px;
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    font-size: 14px;
    transition: all 0.25s ease;
    background: #fff;
}

.itr-search-wrapper input:focus{
    outline: none;
    border-color: #4f6df5;
    box-shadow: 0 0 0 3px rgba(79,109,245,0.15);
}
/* ===== ITR TABLE FONT REDUCTION ===== */

.data-table th{
    font-size: 14px;
    font-weight: 600;
    padding: 12px 10px;
}

.data-table td{
    font-size: 14px;
    padding: 7px 10px;
}

/* Make badges slightly smaller */
.status-badge{
    font-size: 12px;
    padding: 4px 10px;
}

/* Balance / Paid / Overpaid */
.balance-due,
.paid-full,
.overpaid-box{
    font-size: 13px;
    padding: 6px 12px;
}

/* Currency columns slightly tighter */
.data-table td:nth-child(5),
.data-table td:nth-child(6),
.data-table td:nth-child(7){
    font-size: 14px;
    font-weight: 500;
}
/* ===== Reduce ITR Row Content Font ===== */

.data-table tbody td{
    font-size: 13px;
    font-weight: 400;
}

/* Make ITR Type & Year slightly lighter */
.data-table tbody td:nth-child(1),
.data-table tbody td:nth-child(2){
    font-size: 13px;
    font-weight: 500;
}

/* Fee / Paid / Balance columns */
.data-table tbody td:nth-child(5),
.data-table tbody td:nth-child(6),
.data-table tbody td:nth-child(7){
    font-size: 13px;
    font-weight: 500;
}

/* Status badges slightly smaller */
.status-badge{
    font-size: 11px;
    padding: 3px 8px;
}
/* ===== Edit Header Redesign ===== */

.edit-top-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
    gap:20px;
    flex-wrap:wrap;
}

.edit-title-area h2{
    margin:0;
    font-size:22px;
    display:flex;
    align-items:center;
    gap:10px;
}

.itr-type-badge{
    background:#e9f0ff;
    color:#2d4bd4;
    font-size:12px;
    padding:4px 10px;
    border-radius:20px;
}

.status-pill{
    display:inline-block;
    padding:4px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}

.status-pill.success{
    background:#b7e4c7;
    color:#1b4332;
}

.status-pill.pending{
    background:#fff4e6;
    color:#9c6b1c;
}

.edit-summary-mini{
    display:flex;
    gap:30px;
}

.edit-summary-mini small{
    display:block;
    font-size:11px;
    color:#777;
}

.edit-summary-mini strong{
    font-size:14px;
}
.payment-stat{
    background:#f8f9fb;
    padding:12px 15px;
    border-radius:10px;
    margin-bottom:10px;
}
.premium-section{
    background:#ffffff;
    padding:35px 40px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    border:1px solid #f1f5f9;
}

.edit-layout{
    display:flex;
    gap:40px;
    align-items:flex-start;
    margin-top:25px;
    flex-wrap:wrap;
}
.form-group{
margin-bottom:22px;
display:flex;
flex-direction:column;
}
.form-group label{
font-size:13px;
font-weight:600;
margin-bottom:8px;
color:#374151;
letter-spacing:0.4px;
}


/* ================================== */
/*  NEW DASHBOARD CODE FROM HERE */
/* ================================== */


/* MAIN DASHBOARD GRID */

.dashboard-grid{
display:block;
width:100%;
}

/* LEFT SIDE */

.dashboard-left{
display:flex;
flex-direction:column;
gap:25px;
}

/* RIGHT SIDE */

.dashboard-right{
display:flex;
flex-direction:column;
gap:25px;
}

/* CARD STYLE */

.dashboard-card{
padding:18px;
border-radius:14px;
background:#fff;
box-shadow:0 6px 16px rgba(0,0,0,0.06);
}
.chart-container{
height:160px;
position:relative;
margin-top:10px;
}
.chart-container canvas{
max-height:160px !important;
}

/* KPI CARDS */

.kpi-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:10px;
}

.kpi-box{
background:#f6f8fb;
border-radius:12px;
padding:16px;
display:flex;
align-items:center;
gap:12px;
font-weight:500;
}

.kpi-icon{
width:40px;
height:40px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
color:white;
}

/* RECORD GRID */

.records-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-top:10px;
}

/* FEE SUMMARY */

.fee-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
#clearSearch{
position:absolute;
right:45px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
font-size:14px;
color:#999;
display:none;
}

#clearSearch:hover{
color:#e74c3c;
}
#searchBox{
text-transform: uppercase;
}

/* KPI CARD DESIGN */


.finance-kpi-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin-bottom:20px;
}

/* KPI CARD */

.finance-kpi{
    position: relative;
    background:#ffffff;
    border-radius:12px;
    padding:14px 14px;
    display:flex;
    align-items:center !important;
    gap:14px;
    border:1px solid #e5e7eb;
    box-shadow:0 4px 10px rgba(0,0,0,0.04);
    min-width:180px;
    z-index: 1;
}

/* KPI ICON */

.finance-kpi i{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:#fff;
    flex-shrink:0;
    font-size:16px;
}

/* KPI TEXT */

.finance-kpi h4{
font-size:12px;
font-weight:500;
margin:0;
color:#6b7280;
}

.finance-kpi span{
font-size:16px;
font-weight:700;
color:#111827;
}

/* COLOR THEMES */

/* REVENUE */
.finance-kpi.revenue{
background:#eef2ff;
border-left:4px solid #6366f1;
}

.finance-kpi.revenue i{
background:#6366f1;
}


/* RECEIVED */
.finance-kpi.received{
background:#ecfdf5;
border-left:4px solid #10b981;
}

.finance-kpi.received i{
background:#10b981;
}


/* DUE */
.finance-kpi.due{
background:#fef2f2;
border-left:4px solid #ef4444;
}

.finance-kpi.due i{
background:#ef4444;
}


/* MONTH */
.finance-kpi.month{
background:#fff7ed;
border-left:4px solid #f59e0b;
}

.finance-kpi.month i{
background:#f59e0b;
}
/* DUE PAYMENTS LIST */

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

.due-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 12px;
border-radius:8px;
background:#f8fafc;
border:1px solid #e5e7eb;
}

.due-name{
font-size:13px;
font-weight:600;
color:#111827;
}

.due-amount{
font-size:14px;
font-weight:700;
color:#ef4444;
}
/* DUE PAYMENTS */

.due-list{
display:flex;
flex-direction:column;
gap:12px;
margin-top:15px;
}

.due-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 14px;
border-radius:10px;
background:#f9fafb;
border:1px solid #e5e7eb;
}

.due-left{
display:flex;
align-items:center;
gap:10px;
}

.due-client{
font-weight:500;
font-size:12px;
color:#111827;
}

.due-type{
font-size:10px;
padding:3px 7px;
border-radius:6px;
font-weight:600;
}

/* BD badge */

.due-type.bd{
background:#dbeafe;
color:#1d4ed8;
}

/* ITR badge */

.due-type.itr{
background:#dcfce7;
color:#166534;
}

.due-amount{
font-weight:700;
color:#ef4444;
font-size:12px;
}
.kpi-value{
font-size:22px;
font-weight:700;
color:#111827;
white-space:nowrap;
}
/* TOP SUMMARY BAR */

.top-summary-bar{
display:flex;
align-items:center;
gap:12px;
margin-bottom:1px;
flex-wrap:wrap;

/* STICKY HEADER */

position:sticky;
top:0;
z-index:999;

background:#f3f4f6;
padding:10px 0;

}

.top-summary-bar{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:15px;
padding:15px;
background:#f9fafb;
border-radius:10px;
}

/* SUMMARY PILLS */

.summary-pill{
background:#e5e7eb;
padding:8px 16px;
border-radius:20px;
font-size:14px;
font-weight:600;
}

.summary-pill.fee{
background:#dbeafe;
color:#1e40af;
}

.summary-pill.received{
background:#dcfce7;
color:#166534;
}

.summary-pill.due{
background:#fee2e2;
color:#b91c1c;
}
.status-filter select{

padding:8px 12px;
border-radius:16px;
border:1px solid #ddd;
background:white;
font-size:13px;
cursor:pointer;

}
/* =============================
BD Drag Column Start
============================= */

/* TABLE CONTAINER */

.table-container{
width:100%;
overflow:auto;
background:#fff;
border-radius:10px;
}

/* TABLE */

.data-table{
width:100%;
border-collapse:collapse;
font-size:14px;
}
.view-card .data-table{
width:90%;
min-width:900px;
}

/* HEADER */

.data-table th{
background:#556b8d;
color:white;
padding:10px;
border:1px solid #ddd;
text-align:left;
white-space:nowrap;
position:relative;
min-width:120px;
}

/* CELLS */

.data-table td{
padding:10px;
border:1px solid #e5e7eb;
white-space:nowrap;
}

/* ROW HOVER */

.data-table tbody tr:hover{
background:#f8fafc;
}

/* COLUMN RESIZER */

.resizer{
position:absolute;
top:0;
right:0;
width:8px;
height:100%;
cursor:col-resize;
user-select:none;
}

.resizer:hover{
background:#2563eb55;
}
.page-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:15px;
}

.finance-summary{
display:flex;
gap:12px;
}

.finance-summary .summary-pill{
padding:8px 14px;
border-radius:20px;
font-weight:600;
}
.collection-progress{
background:#ffffff;
padding:15px;
border-radius:10px;
margin-bottom:15px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.progress-header{
display:flex;
justify-content:space-between;
font-weight:600;
margin-bottom:8px;
}

.progress-bar{
width:100%;
height:12px;
background:#e5e7eb;
border-radius:10px;
overflow:hidden;
}

.progress-fill{
height:100%;
background:linear-gradient(90deg,#22c55e,#16a34a);
border-radius:10px;
transition:width 0.4s ease;
}

.progress-percent{
margin-top:6px;
font-size:13px;
color:#374151;
}
.finance-summary{
display:flex;
align-items:center;
gap:14px;
}

.header-progress{
display:flex;
align-items:center;
gap:8px;
min-width:140px;
}

.progress-bar-header{
width:120px;
height:10px;
background:#e5e7eb;
border-radius:20px;
overflow:hidden;
}

.progress-fill-header{
height:100%;
background:linear-gradient(90deg,#22c55e,#16a34a);
border-radius:20px;
transition:width 0.4s ease;
}

.progress-text{
font-size:12px;
font-weight:600;
color:#374151;
}

.status-filter select{
padding:10px 38px 10px 16px;
font-size:14px;
border-radius:25px;
border:1px solid #d1d5db;
background:#ffffff;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
cursor:pointer;
min-width:120px;
position:relative;
}

/* custom arrow */

.status-filter{
position:relative;
display:inline-block;
}

.status-filter::after{
content:"▾";
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
font-size:12px;
color:#374151;
pointer-events:none;
}
.status-filter select{
height:40px;
}
.status-filter select:hover{
border-color:#2563eb;
}
/* SL column compact */

.data-table th:first-child,
.data-table td:first-child{
min-width:80px;
width:80px;
max-width:80px;
text-align:center;
padding-left:6px;
padding-right:6px;
}
.table-wrapper{
background:#fff;
border-radius:10px;
overflow:hidden;
}

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

.table-header th{
background:#556b8d;
color:white;
padding:12px;
border:1px solid #ddd;
white-space:nowrap;
}

.table-body{
max-height:600px;
overflow-y:auto;
overflow-x:auto;
}

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

.data-table td{
padding:10px;
border:1px solid #d8e5ff;
white-space:nowrap;
}

/* PAGE SCROLLER SPECIAL */

.table-body{
flex:1;
overflow-y:auto;
overflow-x:auto;
max-height:calc(100vh - 280px);
}
.table-wrapper{
display:flex;
flex-direction:column;
background:#fff;
border-radius:10px;
overflow:hidden;
}
.table-scroll{
overflow-x:auto;
}

.table-body{
max-height:550px;
overflow-y:auto;
}

.table-header,
.data-table{
width:max-content;
border-collapse:collapse;
}

.data-table thead th{
position:sticky;
top:0;
background:#47608a;
color:#fff;
z-index:15;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

.clear-filter-btn{
background:#ef4444;
color:#fff;
padding:10px 16px;
border-radius:25px;
font-size:13px;
text-decoration:none;
display:flex;
align-items:center;
gap:6px;
transition:0.2s;
}

.clear-filter-btn:hover{
background:#ba1010;
}
.data-table tbody tr{
cursor:pointer;
transition:background 0.15s ease;
}

.data-table tbody tr:hover{
background:#f3f6fb;
}

.data-table tbody tr.active-row{
background:#dbeafe !important;
}
.data-table th{
padding:6px 10px;
font-size:13px;
}

.data-table td{
padding:4px 10px;
font-size:13px;
line-height:1.2;
}
.page-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:5px;
}
.section-content{
display:none;
}
/* .section-content,
.premium-section .form-grid{
display:none;
} */
 .copy-btn{
margin-left:8px;
padding:3px 8px;
font-size:12px;
cursor:pointer;
}
/* CLIENT DETAILS GRID */

.client-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin-top:25px;
max-width:1000px;
margin-left:auto;
margin-right:auto;
}


/* CARD STYLE */

.info-card{
background:#ffffff;
padding:22px;
border-radius:12px;
border:1px solid #e5e7eb;
box-shadow:0 3px 8px rgba(0,0,0,0.04);
transition:all 0.2s ease;
}

.info-card:hover{
box-shadow:0 6px 14px rgba(0,0,0,0.08);
}

/* CARD TITLE */

.info-card h3{
margin-bottom:18px;
font-size:17px;
font-weight:600;
color:#374151;
border-bottom:1px solid #f1f1f1;
padding-bottom:8px;
}

/* ROW */

.info-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:7px 0;
border-bottom:1px dashed #bcbcbc;
font-size:14px;
}
.info-row span{
color:#6b7280;
font-weight:500;
}

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

.info-row span{
color:#6b7280;
font-weight:500;
}

.info-row b{
color:#111827;
font-weight:600;
}

/* STATUS BADGE */

.badge{
display:inline-block;
width:auto;
background:#d1fae5;
color:#065f46;
padding:3px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

.badge.active{
background:#dcfce7;
color:#166534;
}

.badge.cancelled{
background:#fee2e2;
color:#b91c1c;
}

/* COPY BUTTON */

.copy-btn{
margin-left:8px;
padding:2px 8px;
font-size:12px;
border-radius:6px;
border:none;
background:#3b82f6;
color:#fff;
cursor:pointer;
}

.copy-btn:hover{
background:#2563eb;
}

/* MOBILE RESPONSIVE */

@media (max-width:900px){

.client-grid{
grid-template-columns:1fr;
}

}
.password-box button{
margin-left:8px;
font-size:12px;
padding:2px 6px;
border:none;
background:#2563eb;
color:#fff;
border-radius:4px;
cursor:pointer;
}

.password-box button:hover{
background:#1d4ed8;
}
/* CLIENT HEADER */

.client-header{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}

.client-left{
display:flex;
align-items:center;
gap:20px;
}


.client-avatar{
width:70px;
height:70px;
border-radius:50%;
background:linear-gradient(135deg,#4f46e5,#6366f1);
color:white;
font-size:28px;
font-weight:bold;
display:flex;
align-items:center;
justify-content:center;
}

.client-info h2{
margin:0;
font-size:28px;
}

.client-tags{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:10px;
}

.tag{
padding:8px 16px;
border-radius:10px;
font-weight:600;
font-size:12px;
}

.tag.file{
background:#e8ecff;
color:#3c3dbb;
}

.tag.gst{
background:#e6f4f8;
color:#1a6a8a;
}

.tag.pan{
background:#fef3c7;
color:#92400e;
}

.tag.reg{
background:#dfeaf4;
color:#355b7a;
}
.client-header hr{
border:none;
border-top:1px dashed #d6dbe6;
margin:20px 0;
}

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

/* RETURN HEADER */

.return-history-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:30px;
}
.tag.status{
background:#dcfce7;
color:#166534;
}


/* MONTH BOX */

.month-box{
width:90px;
height:90px;
border-radius:12px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-weight:600;
cursor:pointer;
border:2px solid #e5e7eb;
background:white;
transition:all .2s ease;
}

.month-box:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* STATUS COLORS */

.month-box.filed{
border-color:#22c55e;
background:#dcfce7;
color:#166534;
}


.month-box.notfiled{
border-color:#ef4444;
background:#fee2e2;
color:#991b1b;
}

/* TEXT */

.month-title{
font-size:13px;
font-weight:700;
}

.month-icon{
font-size:20px;
margin:5px 0;
}

.month-status{
font-size:11px;
}

/* ACTION ICONS */

.month-actions{
display:flex;
gap:6px;
justify-content:center;
margin-top:4px;
font-size:13px;
}
/* QUARTER SECTION */

.quarter-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:25px;
}

.quarter-card{
background:#ffffff;
border-radius:12px;
padding:14px 12px;
text-align:center;
border:1px solid #e5e7eb;
transition:0.2s ease;
position:relative;
}

.quarter-card:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.08);
}

.quarter-title{
font-size:13px;
font-weight:700;
margin-bottom:4px;
}

.quarter-status{
font-size:12px;
font-weight:600;
margin-bottom:6px;
}

/* Quarter actions */

.quarter-actions{
display:flex;
justify-content:center;
gap:6px;
margin-top:6px;
}

.quarter-actions a{
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
background:#e5e7eb;
color:#374151;
font-size:12px;
text-decoration:none;
transition:0.2s;
}

.quarter-actions a:hover{
background:#d1d5db;
transform:scale(1.05);
}

/* WhatsApp */

.quarter-actions .whatsapp{
background:#25D366;
color:#fff;
font-size:14px;
}

.quarter-actions .whatsapp:hover{
background:#1ebe5d;
}

.month-actions a{
text-decoration:none;
color:inherit;
}

.month-actions a:hover{
text-decoration:none;
}
.month-actions{
display:flex;
gap:8px;
justify-content:center;
margin-top:6px;
font-size:16px;
}
.page-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}


.back-btn:hover{
background:#1e4ed8;
color: #ffffff;
}
.back-btn{
background:#6d8fe5;
color:#fff;
padding:10px 18px;
border-radius:10px;
text-decoration:none;
font-weight:600;
display:flex;
align-items:center;
gap:6px;
}
.form-back-wrapper{
margin-bottom:15px;
}

.form-back-btn{
display:inline-flex;
align-items:center;
gap:6px;
background:#f3f4f6;
color:#374151;
padding:8px 14px;
border-radius:20px;
font-size:14px;
font-weight:500;
text-decoration:none;
border:1px solid #e5e7eb;
}

.form-back-btn:hover{
background:#fee2e2;
color:#b91c1c;
}
.form-back-wrapper{
display:flex;
justify-content:flex-end;
margin-bottom:15px;
}

#clientTooltip{
position:absolute;
background:#111827;
color:#fff;
padding:12px 14px;
border-radius:8px;
font-size:12px;
display:none;
z-index:9999;
max-width:240px;
line-height:1.5;
box-shadow:0 8px 20px rgba(0,0,0,0.35);

}

.client-hover{
cursor:pointer;
color:#2563eb;
font-weight:600;
transition:0.2s;
}

.client-hover:hover{
text-decoration:underline;
}

.client-tooltip{
cursor:pointer;
font-weight:600;
color:#1f2937;
}

.client-tooltip:hover{
color:#2563eb;
}
.reminder-btn{
margin-left:6px;
background:#ef4444;
color:white;
padding:2px 6px;
border-radius:4px;
font-size:11px;
text-decoration:none;
}

.reminder-btn:hover{
background:#dc2626;
}
.it-table{
width:100%;
border-collapse:collapse;
font-size:12px;
background:#fff;
}

.it-table th{
background:#556b8d;
color:white;
padding:12px;
border:1px solid #dcdcdc;
}

.it-table td{
padding:12px;
border:1px solid #e5e7eb;
}

/* ITR HEALTH BADGES */

.health-pill{
background:#d1fae5;
color:#065f46;
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
margin-right:6px;
display:inline-block;
}
.data-table thead th{
position:sticky;
top:0;
background:#556b8d;
z-index:5;
}
.whatsapp-btn{
background:#25D366;
color:white;
padding:6px 10px;
border-radius:6px;
margin-left:6px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
}

.whatsapp-btn:hover{
background:#1ebe5d;
}
.payment-progress{
margin-top:15px;
}

.progress-bar{
width:100%;
height:10px;
background:#e5e7eb;
border-radius:10px;
overflow:hidden;
}

.progress-fill{
height:100%;
background:linear-gradient(90deg,#22c55e,#16a34a);
transition:width 0.4s ease;
}
.edit-header-panel{
display:flex;
justify-content:space-between;
align-items:center;
background:#ffffff;
padding:18px 22px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
margin-bottom:25px;
}

.edit-header-info{
display:flex;
align-items:center;
gap:10px;
font-size:12px;
font-weight:600;
}

.header-divider{
border:none;
border-top:1px dashed #d6dbe6;
margin:18px 0;
}

.header-client{
font-weight:700;
}

.header-ay{
font-weight:700;
}
.header-money{
font-weight:600;
color:#111827;
}

.header-money.due{
color:#dc2626;
}
.money-pill{
padding:6px 14px;
border-radius:20px;
font-weight:600;
font-size:12px;
display:inline-block;
}

/* Fee */
.fee-pill{
background:#e0ecff;
color:#1e40af;
}

/* Paid */
.paid-pill{
background:#dcfce7;
color:#166534;
}

/* Balance */
.balance-pill{
background:#fee2e2;
color:#b91c1c;
}
.tooltip-kpi{
position:relative;
cursor:pointer;
}

.kpi-tooltip{
    position:absolute;
    top:120%;
    left:50%;
    transform:translateX(-50%);
    background:#111827;
    color:white;
    padding:10px 14px;
    border-radius:8px;
    font-size:13px;
    opacity:0;
    pointer-events:none;
    transition:0.25s;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    white-space:nowrap;
    z-index:99999;
}

.tooltip-up .kpi-tooltip{
    top:auto;
    bottom:120%;
    transform:translateX(-50%);
}

.tooltip-kpi:hover .kpi-tooltip{
    opacity:1;
    transform:translate(-50%, 5px);
}

.finance-kpi,
.finance-kpi-grid{
    overflow: visible !important;
}

.clock-date{
font-size:13px;
color:#6b7280;
margin-top:4px;
}
.header-clock{
font-size:18px;
font-weight:600;
margin-left:10px;
color:#374151;
}
.dashboard-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.header-clock{
font-size:18px;
font-weight:600;
display:flex;
align-items:center;
gap:10px;
}

#liveClock{
color:#dc2626;   /* red clock */
font-weight:700;
}

#liveDate{
color:#374151;
}

.clock-divider{
color:#9ca3af;
}
.dashboard-top{
display:flex;
gap:25px;
align-items:flex-start;
flex-wrap:wrap;
width:100%;
}

.dashboard-left{
flex:1;
min-width:0;
}

.dashboard-right{
width:320px;
max-width:100%;
flex-shrink:0;
}

.content{
margin-left:240px;
padding:28px 30px;
min-height:100vh;
background:#f4f6f9;
overflow-y:auto;

width:calc(100% - 260px);

margin-right:auto;

box-sizing:border-box;
}

.client-top-section{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
margin-bottom:25px;

max-width:1000px;   /* FIX */
margin-left:auto;   /* FIX */
margin-right:auto;  /* FIX */
}




.sidebar{
width:240px;
box-sizing:border-box;
height:100vh;
position:fixed;
top:0;
left:0;
z-index:1000;
background: linear-gradient(180deg, #111827, #1f2937);
padding:20px;
display:flex;
flex-direction:column;
}

.info-card.full-width{
grid-column: span 2;
}


.info-row{
display:flex;
align-items:center;
padding:8px 0;
border-bottom:1px dashed #d1d5db;
}

/* LEFT LABEL */
.info-row span{
width:45%;
color:#000000;
font-size: 13px;
font-weight:600;
}

/* RIGHT VALUE */
.info-row b{
width:50%;
padding-left:15px;
text-align:right;
font-weight:500;
font-size:13px;
color:#111827;
border-left:none;
}


.info-card h3{
text-align:center;
display:inline-block;
background:#c9d6ff;
color:#1e3a8a;
padding:6px 18px;
border-radius:20px;
font-size:18px;
margin:0 auto 20px auto;
display:block;
width:fit-content;
}
.full-width{
grid-column: 1 / -1;
}



.info-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
}

.info-table td{
padding:16px 12px;
border-bottom:1px dashed #cbd5e1;
vertical-align:right;
}

/* LEFT LABEL */
.info-table .label{
width:40%;
color:#6b7280;
font-weight:500;
}

/* RIGHT VALUE */
.info-table .value{
width:60%;
border-left:2px solid #e5e7eb;
padding-left:25px;
font-weight:600;
color:#111827;
text-align:right;   /* IMPORTANT FIX */
}

/* PASSWORD ALIGN */
.password-box{
display:flex;
align-items:right;
gap:12px;
}
.credential-bar{
margin-top:18px;
padding-top:15px;
border-top:1px dashed #d1d5db;
display:flex;
flex-wrap:wrap;
gap:35px;
align-items:center;
}

.credential-item{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
color:#374151;
}

.credential-item i{
color:#64748b;
font-size:15px;
}

.credential-item span{
color:#6b7280;
font-size: 12px;
font-weight:500;
}

.credential-item b{
font-weight:600;
color:#111827;
}

.password-box{
display:flex;
align-items:center;
gap:10px;
}
.credential-bar{
display:flex;
flex-wrap:wrap;
gap:30px;
margin-top:15px;
align-items:center;
}

.credential-item{
display:flex;
align-items:center;
gap:8px;
font-size:15px;
color:#555;
background:#f5f7fb;
padding:8px 14px;
border-radius:8px;
border:1px solid #e3e6ef;
}

.credential-item i{
color:#6b7280;
}

.credential-item b{
color:#1f2937;
font-size: 12px;
font-weight:500;
}

.copy-btn{
background:#4f7cff;
color:white;
border:none;
padding:4px 10px;
border-radius:6px;
font-size:12px;
cursor:pointer;
}

.copy-btn:hover{
background:#345eea;
}

.client-title-bar{
display:flex;
justify-content:space-between;
align-items:center;
}

.back-btn{
background:#6d8fe5;
color:#fff;
padding:10px 18px;
border-radius:12px;
text-decoration:none;
font-weight:600;
display:flex;
align-items:center;
gap:6px;
}

.back-btn:hover{
background:#4c6fd1;
}
.client-banner{
background:#dadada;
padding:25px 30px;
border-radius:16px;
margin-bottom:25px;
box-shadow:0 3px 8px rgba(0,0,0,0.05);
}

.client-title-bar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.client-title-bar h2{
font-size:32px;
font-weight:700;
margin:0;
}
.form-card{
background:#fff;
padding:30px;
border-radius:12px;
max-width:500px;
margin:30px auto;
box-shadow:0 3px 8px rgba(0,0,0,0.05);
}

.page-header{
margin-bottom:20px;
}

.form-row{
margin-bottom:15px;
display:flex;
flex-direction:column;
}

.form-row label{
margin-bottom:6px;
font-weight:600;
}

.form-row input,
.form-row select{
padding:10px;
border:1px solid #ddd;
border-radius:6px;
}

.form-actions{
margin-top:20px;
display:flex;
gap:10px;
}

.btn-primary{
background:#4f7cff;
color:white;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
}

.btn-secondary{
background:#e5e7eb;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
color:#333;
}

.alert-success{
background:#d1fae5;
color:#065f46;
padding:12px;
border-radius:8px;
margin-bottom:15px;
}
td:last-child{
white-space:nowrap;
}
.tracker-month-card{
background:white;
border-radius:14px;
padding:14px;
box-shadow:0 3px 10px rgba(0,0,0,0.06);
transition:0.2s ease;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:135px;
border:1px solid #e5e7eb;
}

.tracker-month-card:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

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

.month-name{
font-weight:700;
font-size:15px;
}

.month-badge{
font-size:10px;
padding:3px 8px;
border-radius:20px;
font-weight:700;
letter-spacing:.5px;
}

.badge-filed{
background:#dcfce7;
color:#166534;
}

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

.month-actions{
display:flex;
justify-content:center;
gap:10px;
margin-top:10px;
}

.month-actions button,
.month-actions a{
border:none;
background:#f1f5f9;
padding:6px;
border-radius:8px;
cursor:pointer;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
}


.month-actions button:hover,
.month-actions a:hover{
background:#e2e8f0;
}

.month-actions i{
font-size:14px;
}
.page-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
gap:20px;
}

/* SEARCH BOX */

.gst-search{
position:relative;
max-width:350px;
width:100%;
}

.gst-search input{
width:60%;
padding:10px 12px 10px 30px;
border-radius:10px;
border:1px solid #d1d5db;
font-size:12px;
transition:0.2s;
}

.gst-search input:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.gst-search i{
position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
color:#6b7280;
font-size:14px;
}
.credential-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:25px;
}

.credential-item{
display:flex;
align-items:center;
gap:12px;
background:#f1f5f9;
padding:14px 18px;
border-radius:12px;
border:1px solid #e5e7eb;
}

.password-box{
display:flex;
align-items:center;
gap:10px;
}

.copy-btn{
margin-left:10px;
background:#2563eb;
color:white;
border:none;
padding:4px 10px;
border-radius:6px;
cursor:pointer;
}

.copy-btn:hover{
background:#1d4ed8;
}
/* GST SIMPLE TRACKER */

.month-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:25px;
width:100%;
max-width:none;
margin-left:0;
margin-right:0;
}

.gst-table{
width:370px;
border-collapse:collapse;
background:#ffffff;
border-radius:10px;
overflow:hidden;
box-shadow:0 3px 8px rgba(0,0,0,0.05);
}

.gst-table td{
border:1px solid #e5e7eb;
padding:10px 12px;
font-size:13px;
}

.gst-table td:first-child{
font-weight:600;
width:40px;
}

.filed{
background:#dcfce7;
color:#166534;
font-weight:600;
}

.pending{
background:#fee2e2;
color:#991b1b;
font-weight:600;
}

.gst-table a{
cursor:pointer;
font-size:13px;
color:#2563eb;
text-decoration:none;
}

.gst-table a:hover{
text-decoration:underline;
}




/* =========================================
GST RETURN TRACKER FINAL FIX
========================================= */

.tracker-card{
background:#ffffff;
padding:26px;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);

margin:30px 0;

width:100%;
max-width:none;

display:block;

position:relative;
z-index:1;

box-sizing:border-box;
}



/* HEADER */

.tracker-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:22px;

width:100%;
}

/* SUMMARY BADGES */

.tracker-summary{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin:15px auto 20px auto;
width:100%;
}

.tracker-summary .summary{
padding:8px 16px;
border-radius:20px;
font-size:13px;
font-weight:600;
}

.tracker-summary .filed{
background:#dcfce7 !important;
color:#166534 !important;
}

.tracker-summary .notfiled{
background:#fee2e2 !important;
color:#991b1b !important;
}

/* TABS */

.tracker-tabs{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:25px;
flex-wrap:wrap;
width:100%;
}

.tracker-tab{
padding:8px 16px;
border:none;
background:#e5e7eb;
border-radius:8px;
cursor:pointer;
font-weight:600;
font-size:13px;
}

.tracker-tab.active{
background:#2563eb !important;
color:#ffffff !important;
}

/* MONTH TABLE */

.month-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:25px;
width:100%;
max-width:none;
margin-left:0;
margin-right:0;
}

.gst-table{
width:100%;
min-width:420px;
border-collapse:collapse;
background:#ffffff;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
transition:0.2s ease;
}

.gst-table:hover{
transform:translateY(-2px);
box-shadow:0 8px 22px rgba(0,0,0,0.12);
}

.gst-table td{
padding:10px 12px;
border-bottom:1px solid #e5e7eb;
font-size:12px;
}

/* STATUS COLORS */

.gst-table .filed{
background:#dcfce7 !important;
color:#166534 !important;
font-weight:600;
text-align:center;
}

.gst-table .pending{
background:#fee2e2 !important;
color:#991b1b !important;
font-weight:600;
text-align:center;
}

/* ACTION LINKS */

.gst-table a{
color:#2563eb;
font-weight:500;
cursor:pointer;
text-decoration:none;
}

.gst-table a:hover{
text-decoration:underline;
}

/* QUARTER CARDS */

.quarter-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-top:35px;
width:100%;
}

.quarter-card{
background:#f9fafb;
border-radius:12px;
padding:12px 10px;
text-align:center;
border:1px solid #e5e7eb;
transition:0.2s ease;
max-width:220px;
margin:auto;
}

.quarter-card:hover{
transform:translateY(-3px);
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.quarter-card.filed{
background:#dcfce7 !important;
color:#166534 !important;
}

.quarter-card.notfiled{
background:#fee2e2 !important;
color:#991b1b !important;
}

.quarter-title{
font-size:13px;
font-weight:700;
margin-bottom:3px;
}

.quarter-status{
font-size:10px;
font-weight:600;
}

@media (max-width:900px){

.month-grid{
grid-template-columns:1fr;
gap:25px;
}

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

}

.edit-container{
    padding:30px;
    font-family:Segoe UI;
}

.edit-container h2{
    margin-bottom:20px;
    font-size:22px;
}

.edit-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
}

.edit-container select,
.edit-container input{
    padding:10px;
    border-radius:8px;
    border:1px solid #ddd;
    width:100%;
}

.edit-save{
    background:#2563eb;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    cursor:pointer;
}


/* ======================================
CLIENT HEADER UI UPGRADE
====================================== */

.client-banner{
background:linear-gradient(135deg,#f8fafc,#eef2f7);
padding:20px 26px;
border-radius:18px;
margin:20px auto 25px auto;
box-shadow:0 8px 25px rgba(0,0,0,0.06);
border:1px solid #e5e7eb;

max-width:1100px;
width:100%;
}

/* TITLE BAR */

.client-title-bar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}

.client-title-bar h2{
font-size:24px;
color: #008a2e;
font-weight:700;
letter-spacing:0.3px;

margin:0;
}

/* BACK BUTTON */

.back-btn{
background:linear-gradient(135deg,#6d8fe5,#4c6fd1);
color:#fff;
padding:12px 20px;
border-radius:12px;
font-weight:600;
display:flex;
align-items:center;
gap:8px;
transition:0.2s ease;
}

.back-btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

/* INFO TAGS */

.client-tags{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:10px;
}

.tag{
padding:10px 18px;
border-radius:30px;
font-weight:700;
font-size:13px;
letter-spacing:0.3px;
display:inline-flex;
align-items:center;
gap:6px;
}

/* FILE TAG */

.tag.file{
background:#e8ecff;
color:#2c3db7;
}

/* GST TAG */

.tag.gst{
background:#e6f7fb;
color:#0c5f7c;
}

/* PAN TAG */

.tag.pan{
background:#fff2c7;
color:#8a4b00;
}

/* REG DATE */

.tag.reg{
background:#e7eef6;
color:#355b7a;
}

/* ======================================
CREDENTIAL GRID
====================================== */

.credential-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:22px;
margin-top:28px;
}

.credential-item{
display:flex;
align-items:center;
gap:14px;
background:#ffffff;
padding:16px 18px;
border-radius:14px;
border:1px solid #e5e7eb;
box-shadow:0 4px 10px rgba(0,0,0,0.04);
transition:0.2s ease;
}

.credential-item:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

/* ICON */

.credential-item i{
font-size:20px;
color:#6b7280;
}

/* TEXT */

.credential-item span{
font-size:14px;
color:#6b7280;
font-weight:600;
}

.credential-item b{
font-size:15px;
color:#111827;
font-weight:700;
}

/* PASSWORD BOX */

.password-box{
display:flex;
align-items:center;
gap:12px;
}

/* COPY BUTTON */

.copy-btn{
background:#2563eb;
color:white;
border:none;
padding:5px 12px;
border-radius:8px;
font-size:12px;
cursor:pointer;
transition:0.2s;
}

.copy-btn:hover{
background:#1e40af;
}

/* SHOW BUTTON */

.password-box button{
background:#2563eb;
color:white;
border:none;
padding:5px 6px;
border-radius:8px;
font-size:8px;
cursor:pointer;
transition:0.2s;
}

.password-box button:hover{
background:#1e40af;
}




.top-client-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-bottom:30px;
}

.top-client-card,
.top-login-card{
background:#ffffff;
padding:25px 30px;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.top-client-name{
font-size:28px;
font-weight:700;
margin-bottom:15px;
color:#15803d;
}

.top-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0;
border-bottom:1px dashed #d1d5db;
font-size:13px;
}

.top-row span{
color:#6b7280;
font-weight:600;
}

.top-row b{
font-weight:600;
color:#111827;
}

/*------checking-------- */

.profile-header{
background:linear-gradient(135deg,#eef2ff,#f8fafc);
padding:25px 30px;
border-radius:14px;
margin-bottom:25px;
box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.profile-title{
font-size:28px;
font-weight:700;
color:#15803d;
margin-bottom:8px;
}

.profile-meta{
display:flex;
gap:25px;
font-size:14px;
color:#374151;
flex-wrap:wrap;
}

.profile-meta span{
font-weight:600;
}
.top-client-wrapper{
background:#bebebeba;
border-radius:14px;
padding:35px;
box-shadow:0 6px 18px rgba(0,0,0,0.05);
margin-bottom:25px;
}

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

.trade-name{
font-size:22px;
font-weight:700;
color:#ff0707;
}

.top-info-grid{
display:grid;
grid-template-columns:1fr 2px 1fr;
gap:30px;
}

.top-divider{
background:#2c5d78;
width:2px;
}

.top-row{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px dashed #ffffff;
font-size:12px;
}

.top-row span{
color:#000000;
font-weight:600;
}

.top-row b{
color:#111827;
}

.top-right .top-row b{
display:flex;
align-items:center;
gap:10px;
}
.free-badge{
background:#e8fff0;
color:#008a2e;
padding:4px 10px;
border-radius:16px;
font-size:12px;
font-weight:600;
display:inline-block;
}
.delete-badge{
background:#ef4444;
color:#fff;
padding:2px 7px;
border-radius:12px;
font-size:12px;
font-weight:600;
margin-left:6px;
}

/* FORM CARD */

.form-card{
background:#fff;
padding:30px;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
max-width:700px;
}

/* HEADER */

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

.form-header h2{
font-size:22px;
display:flex;
align-items:center;
gap:8px;
}

/* GRID */

.form-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:18px;
}

/* INPUT */

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

.form-group input,
.form-group select{
width:90%;
padding:10px 12px;
border-radius:8px;
border:1px solid #d1d5db;
font-size:14px;
}

.form-group input:focus,
.form-group select:focus{
border-color:#2563eb;
outline:none;
}

/* BUTTONS */

.form-actions{
margin-top:25px;
display:flex;
gap:10px;
}

.btn-save{
background:#2563eb;
color:#fff;
padding:10px 18px;
border:none;
border-radius:8px;
font-weight:600;
cursor:pointer;
}

.btn-save:hover{
background:#1e40af;
}

.btn-cancel{
background:#f3f4f6;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
color:#374151;
}
.form-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.role-badge{
font-size:13px;
color:#6366f1;
font-weight:600;
margin-left:4px;
}

.detail-table td{
padding:10px 14px;
border:1px solid #e5e7eb;
}

.detail-table .label{
font-weight:700;
color:#374151;
width:180px;
background:#f3f4f6;
}

.detail-table .value{
font-weight:400;
color:#111827;
}
.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
font-size:18px;
color:#fff;
}

.logo img{
width:40px;
height:40px;
border-radius:8px;
}

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

.fy-dropdown{
padding:6px 10px;
border-radius:6px;
border:1px solid #d1d5db;
font-size:13px;
background:#fff;
}

.sort-box{
    margin-left:10px;
}

.sort-box button{
    background: linear-gradient(90deg,#3b82f6,#6366f1);
    color:#fff;
    border:none;
    padding:8px 12px;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
}

.sort-box button:hover{
    transform: scale(1.05);
}

.password-box{
    display:flex;
    align-items:center;
    gap:6px;
}

.password-text{
    min-width:90px;
    display:inline-block;
    padding:4px 8px;
    background:#f1f5f9;
    border-radius:6px;
    font-size:13px;
    font-weight:500;
    text-align:center;
    letter-spacing:1px;
}

.eye-btn{
    background:#e2e8f0;
    border:none;
    padding:6px 8px;
    border-radius:6px;
    cursor:pointer;
    transition:0.2s;
}

.eye-btn:hover{
    background:#cbd5f5;
}


.it-table th:nth-child(1){ width:25px; }
.it-table th:nth-child(2){ width:200px; }
.it-table th:nth-child(3){ width:150px; }
.it-table th:nth-child(4){ width:110px; }
.it-table th:nth-child(5){ width:160px; }
.it-table th:nth-child(6){ width:130px; }
.it-table th:nth-child(7){ width:160px; }
.it-table th:nth-child(8){ width:140px; }

.it-table td{
    vertical-align:middle;
}


.password-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.password-text{
    width:110px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
}

.it-table td:nth-child(4){
    text-align:center;
    font-weight:500;
}

.it-table{
    table-layout: fixed;
    width:100%;
}
.user-table-card{
    overflow-x:auto;
}



.online-col{
    text-align:left;
}

.online-box{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:500;
}

.online-box .dot{
    width:8px;
    height:8px;
    border-radius:50%;
}

/* ONLINE */
.online{
    color:#16a34a;
}
.online .dot{
    background:#22c55e;
}

/* OFFLINE */
.offline{
    color:#9ca3af;
}
.offline .dot{
    background:#ff0000;
}

.export-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;

    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#fff;
    padding:10px 16px;

    border-radius:10px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;

    box-shadow:0 4px 12px rgba(34,197,94,0.3);
    transition:all 0.25s ease;
}

/* ICON */
.export-btn i{
    font-size:15px;
}

/* HOVER EFFECT */
.export-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(34,197,94,0.4);
}

/* CLICK EFFECT */
.export-btn:active{
    transform:scale(0.96);
}

/* GST EXPORT BUTTON BELOW */

/* BUTTON GROUP */
.action-group{
    display:flex;
    gap:10px;
    align-items:center;
}

/* SORT BUTTON MATCH STYLE */
.sort-btn{
    background:linear-gradient(135deg,#4f46e5,#6366f1);
    color:#fff;
    padding:9px 14px;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;

    box-shadow:0 4px 12px rgba(79,70,229,0.3);
    transition:0.25s;
}

.sort-btn:hover{
    transform:translateY(-2px);
}

/* EXPORT BUTTON */
.export-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;

    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#fff;
    padding:9px 14px;

    border-radius:10px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;

    box-shadow:0 4px 12px rgba(34,197,94,0.3);
    transition:0.25s;
}

.export-btn:hover{
    transform:translateY(-2px);
}

/* BACK BUTTON (IMPROVED) */
.back-btn{
    background:linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    padding:9px 14px;
    border-radius:10px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;

    box-shadow:0 4px 12px rgba(37,99,235,0.3);
    transition:0.25s;
}

.back-btn:hover{
    transform:translateY(-2px);
}

/* NEW IT EXPORT BUTTON */

.export-popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.popup-box{
    background:#fff;
    padding:25px;
    border-radius:12px;
    width:320px;
    text-align:center;
}

.popup-box label{
    display:block;
    margin:10px 0;
}

.popup-actions{
    margin-top:15px;
    display:flex;
    justify-content:space-between;
}

.popup-actions button{
    padding:8px 12px;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

.popup-actions button:first-child{
    background:#16a34a;
    color:#fff;
}

.popup-actions button:last-child{
    background:#e5e7eb;
}

/* NEW EXCEL EXPORT FOR GST */

.export-popup{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.export-box{
    background:#fff;
    padding:30px;
    border-radius:16px;
    width:360px;
    text-align:center; /* 👈 keeps heading centered */
}

.export-box h3{
    margin-bottom:10px;
}

.radio-group{
    display:flex;
    flex-direction:column;
    align-items:flex-start; /* keeps radio left but centered block */
    margin:20px auto;
    width:fit-content; /* 👈 THIS IS IMPORTANT */
}

.radio-group label{
    display:block;
    margin-bottom:10px;
    font-size:12px;
}

.export-actions{
    display:flex;
    justify-content:space-between;
    margin-top:20px;
}

.download-btn{
    background:#16a34a;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}

.cancel-btn{
    background:#e5e7eb;
    border:none;
    padding:10px 20px;
    border-radius:8px;
    cursor:pointer;
}


/* GROUP TYPE STATUS BELOW TRADE NAME */

.type-badge{
    font-size:15px;
    margin-left:10px;
    font-weight:600;
}

/* COLORS */
.type-badge.individual{
    color:#2563eb; /* blue */
}

.type-badge.firm{
    color:#16a34a; /* green */
}

.type-badge.company{
    color:#9333ea; /* purple */
}

/*-------User Id Table -------- */
.live-time{
    white-space: nowrap;
    font-weight: 600;
    color: #111827;
    display: inline-block;
}

td:nth-child(9){   /* Login HRs column */
    text-align: center;
}


/* ================= MOBILE RESPONSIVE ================= */
.mobile-menu-btn{
    display: none;
}
@media (max-width: 768px){

    /* HIDE SIDEBAR */
    .sidebar{
        position: fixed;
        left: -260px;
        top: 0;
        width: 260px;
        height: 100%;
        background: #0D1B2A;
        transition: 0.3s;
        z-index: 9999;
    }

    .sidebar.active{
        left: 0;
    }

    /* CONTENT FULL WIDTH */
    .content{
        margin-left: 0 !important;
        padding: 10px;
    }

    /* HEADER FIX */
    .dashboard-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* MOBILE MENU BUTTON */
    .mobile-menu-btn{
        display: block;
        font-size: 20px;
        cursor: pointer;
        margin-right: 10px;
    }

    /* KPI GRID STACK */
    .finance-kpi-grid{
        grid-template-columns: 1fr !important;
    }

    /* CHART HEIGHT */
    .chart-container{
        height: 250px !important;
    }

    /* RIGHT PANEL FULL WIDTH */
    .dashboard-right{
        width: 100%;
        margin-top: 20px;
    }

}

/* FIX MOBILE FULL WIDTH */
@media (max-width: 768px){

    .content{
        margin-left: 0 !important;
        width: 100% !important;
        padding: 12px;
    }

    .dashboard-grid,
    .dashboard-top,
    .dashboard-left{
        width: 100% !important;
        display: block !important;
    }

    .dashboard-card{
        width: 100% !important;
    }

    .chart-container{
        width: 100% !important;
        height: 300px !important;
    }

}

/* ===== GST TOOLTIP FINAL FIX ===== */

.tooltip-cell{
    position: relative;
    cursor: pointer;
}

.tooltip-box {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    min-width: 260px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
}




.sidebar {
    background: linear-gradient(180deg, #0f172a, #1e293b);
    box-shadow: var(--shadow-lg);
}

.sidebar a {
    border-radius: 10px;
    padding: 12px 16px;
}

.sidebar a.active {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.dashboard-card,
.section-card,
.table-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255,255,255,0.3);
}

.finance-kpi {
    border-radius: 16px;
    transition: all 0.25s ease;
}

.finance-kpi:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.data-table th {
    background: linear-gradient(135deg,#1e293b,#334155);
    color: #fff;
    font-size: 13px;
}

.data-table tbody tr {
    transition: all 0.2s ease;
}

.data-table tbody tr:hover {
    background: #eef2ff;
    transform: scale(1.002);
}
.gst-search input {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 12px 14px 12px 38px;
    transition: 0.25s;
}

.gst-search input:focus {
    box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
}

.primary-btn,
.save-itr-btn,
.btn-save {
    background: linear-gradient(135deg,#2563eb,#6366f1);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(37,99,235,0.25);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37,99,235,0.35);
}

.status-badge {
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
}

body * {
    transition: 0.2s ease;
}

.page-header {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}



.filed-date {
    font-size: 10px;
    color: #166534;
    margin-top: 4px;
    font-weight: 500;
}
#gstTooltip {
    position: fixed;   /* 🔥 IMPORTANT */
    display: none;
    z-index: 9999;
    pointer-events: none;
}

/* PREMIUM TOOLTIP */
.tooltip-box {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    min-width: 260px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
}

.tooltip-title {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
    color: #38bdf8;
}

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

.tooltip-table th {
    text-align: left;
    font-size: 12px;
    color: #94a3b8;
    padding-bottom: 4px;
}

.tooltip-table td {
    padding: 4px 0;
    font-size: 13px;
}

.tooltip-table{
    width:100%;
    border-collapse:collapse;
    margin-top:8px;
}

.tooltip-table th{
    text-align:left;
    font-size:12px;
    color:#94a3b8;
    padding-bottom:6px;
}

.tooltip-table td{
    padding:6px 0;
    font-size:13px;
}


.tooltip-table{
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}

.tooltip-table th{
    text-align:left;
    font-size:12px;
    color:#94a3b8;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.tooltip-table td{
    padding:10px 0;
    font-size:14px;
}


.tooltip-table th{
    background:#cfe8f3;
    color:#000;
    padding:8px;
    font-weight:600;
}

.tooltip-table td{
    padding:8px;
    border-top:1px solid #ddd;
}









/* CLEAN TOOLTIP TEXT (NO BACKGROUND) */

.text-filed{
    color: #22c55e;   /* green */
    font-size: 8px;
    font-weight: 500;
}

.text-notfiled{
    color: #ef4444;   /* red */
    font-size: 8px;
    font-weight: 500;
}

/* OPTIONAL: make table compact */
.tooltip-table td,
.tooltip-table th{
    font-size: 8px;
    font-weight: 500;
    padding: 4px 6px;
}


/*--------Uodate Notice-------*/

.dashboard-title-wrapper{
    display:flex;
    align-items:center;
    gap:12px;
}

.update-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;

    background: linear-gradient(135deg, #ef4444, #dc2626);
    color:#ffffff;

    padding:6px 12px;
    border-radius:20px;

    font-size:12px;
    font-weight:600;

    box-shadow:0 4px 10px rgba(239,68,68,0.4);

    cursor:pointer;
}

/* 🔥 PULSE ANIMATION */
.update-badge{
    animation: pulseBadge 1.5s infinite;
}

/* 🔥 STAR ROTATION */
.update-badge i{
    animation: spinStar 2s linear infinite;
}

/* PULSE KEYFRAME */
@keyframes pulseBadge{
    0%{
        transform: scale(1);
        box-shadow:0 4px 10px rgba(239,68,68,0.4);
    }
    50%{
        transform: scale(1.08);
        box-shadow:0 8px 20px rgba(239,68,68,0.6);
    }
    100%{
        transform: scale(1);
        box-shadow:0 4px 10px rgba(239,68,68,0.4);
    }
}

/* STAR SPIN */
@keyframes spinStar{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

.modal-close{
    position:absolute;
    top:10px;
    right:12px;

    font-size:16px;
    font-weight:600;

    color:#9ca3af;
    cursor:pointer;
    transition:0.2s;
}

.modal-close:hover{
    color:#ef4444;
    transform:scale(1.1);
}

.gst-toggle{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.toggle-btn{
    padding:8px 16px;
    border:none;
    border-radius:20px;
    background:#e5e7eb;
    color:#374151;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    transition:0.3s;
}

.toggle-btn.active{
    background:#4f46e5;
    color:#fff;
}

.toggle-btn:hover{
    opacity:0.9;
}


/*----------GST Toggle Button ---------*/
.gst-toggle-switch {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* ACTIVE TEXT */
#labelFull,
#labelMy {
    font-weight: 600;
    transition: 0.3s;
}

/* DEFAULT */
#labelFull {
    color: #4f46e5;
}

#labelMy {
    color: #9ca3af;
}
/* WHEN ACTIVE */
.active-label {
    color: #4f46e5 !important;
    border-bottom: 2px solid #4f46e5;
    padding-bottom: 2px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 34px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

input:checked + .slider {
    background-color: #4f46e5;
}

input:checked + .slider:before {
    transform: translateX(26px);
}


/*---------- New A-Z and Export Excel Button---------*/

.action-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* COMMON BUTTON STYLE */
.btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
}

/* ICON SIZE FIX */
.btn i {
    font-size: 16px;
}

/* A-Z BUTTON */
.btn-sort {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
}

.btn-sort:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}

/* EXPORT BUTTON */
.btn-export {
    background: #16a34a;
    color: #fff;
}

.btn-export:hover {
    background: #15803d;
}

/* BACK BUTTON */
.btn-back {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    text-decoration: none;
}

.btn-back:hover {
    transform: translateY(-2px);
}
.active-label {
    color: #4f46e5;
    font-weight: 600;
    border-bottom: 2px solid #4f46e5;
    padding-bottom: 2px;
}

.gst-toggle-switch span {
    cursor: pointer;
    transition: 0.3s;
}

/*--------Pagination ---------*/

/* ✅ STICKY TABLE HEADER */
.clean-table thead th {
    position: sticky;
    top: 0;
    background: #3e3e3e;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 6px;
}

.page-btn {
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 6px;
    text-decoration: none;
    color: #111827;
    font-size: 14px;
}

.page-btn:hover {
    background: #e2e8f0;
}

.page-btn.active {
    background: #4f46e5;
    color: #fff;
    font-weight: 600;
}

/*-----this is for my clients------*/

.client-box{
    line-height:1.4;
}

.trade-name{
    font-weight:700;
    font-size:14px;
    color:#111827;
}

.prop-name{
    font-size:12px;
    color:#6b7280;
}

.gst-line{
    font-size:12px;
    color:#2563eb;
    margin-top:2px;
}

.filed{
    background:#dcfce7;
    color:#166534;
    padding:4px 8px;
    border-radius:6px;
    font-size:11px;
    margin:2px;
    display:inline-block;
    font-weight:600;
}

.not-filed{
    background:#fee2e2;
    color:#b91c1c;
    padding:4px 8px;
    border-radius:6px;
    font-size:11px;
    margin:2px;
    display:inline-block;
    font-weight:600;
}
}
/*-----this is End of my clients------*/
.munim-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
}

.munim-row{
    background:#f9fafb;
    border-radius:10px;
}

.munim-client{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px;
}

.munim-left{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.trade{
    font-weight:700;
    font-size:14px;
}

.prop{
    font-size:12px;
    color:#6b7280;
}

.gst{
    font-size:12px;
    color:#2563eb;
}

.munim-right{
    flex:1;
    padding:0 20px;
}

.return-row{
    display:flex;
    align-items:center;
    margin-bottom:6px;
}

.label{
    width:70px;
    font-size:12px;
    color:#6b7280;
}

.months{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.month{
    padding:4px 8px;
    border-radius:6px;
    font-size:11px;
    font-weight:600;
}

.month.filed{
    background:#dcfce7;
    color:#166534;
}

.month.not-filed{
    background:#fee2e2;
    color:#b91c1c;
}

.munim-actions{
    display:flex;
    gap:10px;
}

.btn-return, .btn-report{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:6px 10px;
    border-radius:6px;
    font-size:12px;
    cursor:pointer;
}

.month {
    padding: 4px 8px;
    border-radius: 16px;
    margin: 2px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
}

.filed {
    background: #d1fae5;
    color: #065f46;
}

.not-filed {
    background: #fee2e2;
    color: #b91c1c;
}

.late {
    background: #fee2e2;
    color: #b91c1c;
}

.gst {
    font-size: 13px;
    color: #2563eb;
    margin-top: 2px;
}

.gst-type {
    font-size: 12px;
    margin-top: 2px;
    font-weight: 600;
}

.gst-type.monthly {
    color: #ff0e0e;
}

.gst-type.quarterly {
    color: #059669;
}

/*-----Date for Last Filing Year------*/

.month-block{
    display: inline-block;
    text-align: center;
    margin-right: 6px;
}

.due-date{
    font-size: 10px;
    color: #000000;
    margin-top: 2px;
}

/* 🔥 PREMIUM MONTH CARD */
.month-card{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 5px 6px;
    border-radius: 10px;
    margin-right: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* 🟢 FILED */
.month-card.filed{
    background: #e6f7ee;
    color: #059669;
}

/* 🔴 NOT FILED */
.month-card.not-filed{
    background: #ffe18800;
    color: #ff0000;
}

/* 🚨 OVERDUE */
.month-card.late{
    background: #ff7272;
    color: #fff;
    animation: pulse 1.5s infinite;
}

/* TEXT */
.month-name{
    font-size: 12px;
}

.due-date{
    font-size: 9px;
    opacity: 0.85;
    margin-top: 2px;
}

/* HOVER */
.month-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

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

.month-card.filed {
    background: transparent;
    color: #259200;
    
}

.trade-link {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}

.trade-link:hover {
    color: #2563eb;
    text-decoration: underline;
}
.munim-right {
    flex: 1;
}



/* ===== TABLE STYLE FOR MY CLIENT VIEW ===== */

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

.munim-row {
    border-bottom: 1px solid #e5e7eb; /* horizontal line */
}

/* main container becomes grid */
.munim-client {
    display: grid;
    grid-template-columns: 2.5fr 4fr;
    align-items: stretch;
    position: relative;
}



/* LEFT SIDE */
.munim-left {
    padding: 15px;
    align-items: center;
    border-right: 1px solid #e5e7eb; /* vertical line */
}

/* RIGHT SIDE */
.munim-right {
    padding: 15px;
}

/* EACH RETURN ROW (GSTR-1, 3B, IFF) */
.return-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7eb; /* inner separator */
}

/* remove last border */
.return-row:last-child {
    border-bottom: none;
}

/* label column (GSTR-1 etc) */
.return-row .label {
    border-right: 1px solid #e5e7eb;
    padding-right: 10px;
    font-weight: 600;
}

/*-------------End of the My Clients Table Design---------*/

/*----------Days left colour---------------*/
.days-left {
    color: #dc2626; /* red */
    font-weight: 600;
    margin-left: 4px;
}

.days-today {
    color: #ffffff; /* white */
    font-weight: 600;
}

.days-late {
    color: #ffffff; /* dark red */
    font-weight: 700;
}

.badge-orange {
    background:#fde68a;
    color:#92400e;
}

.kpi-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}