input:focus {outline: none;}
.flexer {display: flex;align-items: center;gap: 10px;}
.flexer-end{justify-content: flex-end;}

.admin-input,.form-control {width: fit-content;height: 35px;font-size: 13px !important;padding: 0 15px;border:solid 1px #ccc; border-radius: 5px;}

.admin-search-box {display: flex;height: 35px;border: 1px solid #d1d5db;border-radius: 8px;overflow: hidden;}
.admin-search-box input {border: none;padding: 0 15px;;font-size: 13px;width: 150px;}
.admin-search-box button {background: #2563eb;color: #fff;border: none;padding: 6px 12px;}

.date-range {display: flex;align-items: center;background: #f9fafb;border: 1px solid #e5e7eb;border-radius: 5px;
    padding:0 15px 0 5px;gap: 4px;height: 35px;}
.date-range input {border: none;background: transparent;width: 100px;font-size: 13px;}
.date-range .divider {font-size: 13px;color: #6b7280;}
.calendar-icon {color: #6b7280;font-size: 14px;}

.icon-btn {border: 1px solid #d1d5db;background: #fff;width: 35px;height: 35px;border-radius: 5px;
    display: flex;align-items: center;justify-content: center;font-size: 15px;cursor: pointer;}

.admin-title{font-size: 15px;font-weight: 500;color: #6b7280;}

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

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

.sidebar {width: 220px;height: 100vh;background: #f7f9fc;border-right: 1px solid #e5e7eb;position: fixed;left: 0;top: 0;}
.sidebar-menu {list-style: none;padding: 0;margin: 0;}
.sidebar-menu-item {padding: 12px 20px;display: flex;align-items: center;gap: 12px;font-size: 14px;color: #2c3e50;cursor: pointer;transition: 0.2s;}
.sidebar-menu-item i {width: 18px;text-align: center;color: #6b7280;}
.sidebar-menu-item a{color:#444;text-decoration: none;}
.sidebar-menu-item:hover,.admin-drop .dropdown-item:hover {background: #eef2f7;}
.sidebar-menu-item.active {background: #dbeafe;color: #2563eb;border-right: 3px solid #2563eb;}
.sidebar-menu-item.active i {color: #2563eb;}
.drop-item{display:flex; align-items: center;justify-content: center;}

.admin-drop.dropdown {width: 100%;}
.admin-drop .dropdown-toggle {width: 100%;text-align: left;background: none;border: none;color: #2c3e50;padding: 12px 20px;}
.admin-drop .dropdown-menu {position: static !important;transform: none !important;float: none !important;width: 100%;margin: 0;
    padding: 0px;border: none;box-shadow: none;background: transparent;}
.admin-drop .dropdown-item {padding: 6px 10px 6px 20px;font-size: 13px;color: #444;}

.sidebar-scroll,.table-scroll {height: 100%;overflow-y: auto;padding: 10px 0;scrollbar-width: thin;scrollbar-color: #c1c1c1 transparent;}
.sidebar-scroll::-webkit-scrollbar,.table-scroll::-webkit-scrollbar {width: 3px;}
.sidebar-scroll::-webkit-scrollbar-track,.table-scroll::-webkit-scrollbar-track {background: transparent;}
.sidebar-scroll::-webkit-scrollbar-thumb,.table-scroll::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 10px;}
.sidebar-scroll::-webkit-scrollbar-thumb:hover,.table-scroll::-webkit-scrollbar-thumb:hover {background: #9ca3af;}

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

.top-header {height: 60px;background: #0b2a42;display: flex;align-items: center;justify-content: space-between;
    padding: 0 20px;position: fixed;top: 0;left: 220px;right: 0;z-index: 1000;}
.admin-logo {height: 28px;}
.header-right {display: flex;align-items: center;gap: 15px;}
.wallet-box {display: flex;align-items: center;gap: 8px;border: 1px solid rgba(255,255,255,0.3);padding: 6px 12px;
    border-radius: 20px;color: #fff;font-size: 14px;}
.wallet-box i {font-size: 14px;}
.recharge-btn {background: #2f80ed;color: #fff;border-radius: 20px;padding: 6px 12px;font-size: 14px;border: none;}
.user-box {display: flex;align-items: center;gap: 10px;color: #fff;font-size: 14px;}
.user-box i {cursor: pointer;font-size: 14px;}

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

.main-content {margin-left: 220px;padding: 80px 0px 0px;background: #f5f6f8;min-height: 100vh;}
.page-title {font-weight: 600;color: #1f2d3d;font-size: 16px;}
.filter-bar {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 10px;padding: 15px;background: #fff;
    border-radius: 10px;border: 1px solid #e5e7eb;}

.summary-item-flex {display: flex;align-items: flex-start;justify-content: space-between;}
.summary-card {background: #fff;padding: 15px;border-radius: 8px;border: 1px solid #e5e7eb;font-size: 13px;}
.summary-card.active {border-left: 3px solid #2563eb;}

/* ================= ANALYTICS TABS ================= */

.custom-tabs {border-bottom: 1px solid #ddd;margin-bottom: 15px;}
.custom-tabs .nav-link {border: none;color: #555;font-size: 14px;}
.custom-tabs .nav-link.active {color: #0b5ed7;border-bottom: 2px solid #0b5ed7;background: transparent;}

/* ================= SHIPMENT TABS ================= */

.filter-tabs {display: flex;gap: 20px;}
.filter-tabs .tab {font-weight: 500;color: #6b7280;cursor: pointer;padding-bottom: 6px;position: relative;}
.filter-tabs .tab.active {color: #2563eb;}
.filter-tabs .tab.active::after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 2px;background: #2563eb;}
.filter-right {display: flex;align-items: center;gap: 10px;flex-wrap: wrap;}

/* ======================================================================================= */
/* ====================================== TABLE ========================================== */
/* ======================================================================================= */

.table-toolbar {background: #fff;padding: 12px 15px;border-radius: 8px;border: 1px solid #e5e7eb;
    display: flex;align-items: center;justify-content: space-between;}
.table-container {background: #fff;border-radius: 8px;overflow: hidden;}
.table-scroll {overflow: auto;max-height: 70vh;}
.table-custom {width: 100%;min-width: 1400px;border-collapse: separate;border-spacing: 0;font-size: 13px;}
.table-custom thead th {position: sticky;top: 0;background: #fff;z-index: 10;font-weight: 600;white-space: nowrap;
    border-bottom: 1px solid #e5e7eb;}
.table-custom td {white-space: nowrap;vertical-align: middle;}
.table-custom th:first-child,.table-custom td:first-child {position: sticky;left: 0;background: #fff;z-index: 1;}

.table-actions {position: sticky;right: 0;background: #fff;z-index: 1;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px !important;
    width: fit-content;text-align: center;}
.table-actions i {margin-right: 10px;cursor: pointer;font-size: 14px;}
.table-actions .btn {font-size: 12px;padding: 4px 12px;}
.table-custom tbody tr {border-bottom: 1px solid #f1f1f1;}

.table-tag {font-size: 11px;padding: 3px 8px;border-radius: 6px;}
.tag-primary {background: #eef2ff;color: #4f46e5;}
.tag-success {background: #ecfdf5;color: #059669;}
.tag-warning {background: #fffbeb;color: #d97706;}
.tag-danger {background: #fef2f2;color: #dc2626;}
.tag-info {background: #ecfeff;color: #0891b2;}
.tag-muted {background: #f3f4f6;color: #6b7280;}
.tag-purple {background: #f3e8ff;color: #7c3aed;}

.table-status {font-weight: 600;font-size: 13px;}
.table-small {font-size: 12px;color: #6b7280;}

.table-custom strong{font-weight: 500;}

.pagination-box {padding: 10px;background: #fff;border-top: 1px solid #eee;}

/* ===== SHIP PARCEL TABS ===== */

.form-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px;margin-bottom:15px;}
.section-title{font-weight:600;margin-bottom:15px;}
.summary-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px;}
.input-group-text{font-size:12px !important;}
.upload-box{border:1px dashed #ccc;border-radius:8px;padding:30px;color:#777}
.form-card label {font-size: 14px;margin-bottom: 5px;}
.step-bar{display:flex;align-items:center;margin-bottom:20px;}
.step{display:flex;align-items:center;gap:10px;}
.circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;font-size:12px;}
.line{flex:1;height:2px;background:#ddd;margin:0 10px;}
.admin-radio-group{display: flex;align-items: center;gap: 10px;}
.admin-radio-group input[type=radio]{width: 10px;height: 10px;}