/* public/assets/css/metronic.css */

/* -----------------------------------------------------------------
   1. اصلاح آدرس‌دهی فونت (مهم: حذف {{ asset }} و استفاده از ..)
   ----------------------------------------------------------------- */
@font-face {
    font-family: 'Vazirmatn';
    /* معنی .. یعنی از پوشه css بیا بیرون برو تو assets بعد برو تو fonts */
    src: url('../fonts/Vazirmatn/fonts/ttf/Vazirmatn-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn/fonts/ttf/Vazirmatn-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn/fonts/ttf/Vazirmatn-Light.ttf') format('truetype');
    font-weight: 300;
}

/* -----------------------------------------------------------------
   2. متغیرهای رنگی
   ----------------------------------------------------------------- */
:root {
    --kt-app-bg-color: #f5f8fa;
    --kt-sidebar-bg: #1e1e2d;
    --kt-sidebar-text: #9899ac;
    --kt-sidebar-active-bg: #2b2b40;
    --kt-sidebar-active-text: #ffffff;
    --kt-primary: #7239ea;
    --kt-primary-hover: #5014d0;
    --kt-text-dark: #181c32;
    --kt-text-muted: #7e8299;
    --kt-border-color: #eff2f5;
}

/* اعمال فونت و رنگ پس‌زمینه با اولویت بالا (!important) */
body {
    font-family: 'Vazirmatn', sans-serif !important;
    background-color: var(--kt-app-bg-color) !important;
    color: var(--kt-text-dark);
    font-size: 0.95rem;
    overflow-x: hidden;
}

a { text-decoration: none; }

/* -----------------------------------------------------------------
   3. سایدبار (Sidebar)
   ----------------------------------------------------------------- */
.sidebar-wrapper {
    background-color: var(--kt-sidebar-bg) !important;
    width: 265px;
    min-height: 100vh;
    color: var(--kt-sidebar-text);
    box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
    z-index: 1000;
    transition: width 0.3s;
}

.sidebar-brand {
    height: 75px;
    display: flex;
    align-items: center;
    padding: 0 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-menu { padding: 15px 0; }
.sidebar-menu .nav-item { margin-bottom: 5px; }

.sidebar-menu .nav-link {
    color: var(--kt-sidebar-text) !important;
    padding: 10px 25px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
}

.sidebar-menu .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.03);
}

.sidebar-menu .nav-link.active {
    background-color: var(--kt-sidebar-active-bg) !important;
    color: var(--kt-sidebar-active-text) !important;
    border-right-color: var(--kt-primary) !important;
}

.sidebar-menu .nav-link i {
    font-size: 1.2rem;
    width: 30px;
    color: #494b74;
    transition: color 0.3s;
}

.sidebar-menu .nav-link.active i,
.sidebar-menu .nav-link:hover i {
    color: var(--kt-primary) !important;
}

/* -----------------------------------------------------------------
   4. هدر (Header)
   ----------------------------------------------------------------- */
.app-header {
    background-color: #1e1e2d !important;
    height: 75px;
    display: flex;
    align-items: center;
    box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* -----------------------------------------------------------------
   5. کارت‌ها (Cards)
   ----------------------------------------------------------------- */
.card-custom {
    background-color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
    border-radius: 0.85rem;
    margin-bottom: 20px;
}

.card-header-custom {
    border-bottom: 1px solid var(--kt-border-color);
    padding: 1.5rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
}

.card-title {
    font-weight: 700;
    color: var(--kt-text-dark);
    font-size: 1.15rem;
    margin: 0;
}

.card-body { padding: 2.25rem; }

/* -----------------------------------------------------------------
   6. دکمه‌ها و فرم‌ها
   ----------------------------------------------------------------- */
.form-label { font-weight: 600; margin-bottom: 0.5rem; color: var(--kt-text-dark); }

.form-control {
    background-color: #f5f8fa !important;
    border: 1px solid #f5f8fa !important;
    color: #5e6278;
    padding: 0.75rem 1rem;
    border-radius: 0.475rem;
}

.form-control:focus {
    background-color: #eef3f7 !important;
    border-color: #eef3f7 !important;
    box-shadow: none;
    color: var(--kt-text-dark);
}

.btn-purple {
    background-color: var(--kt-primary) !important;
    color: #ffffff !important;
    border: 0;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    border-radius: 0.475rem;
}
.btn-purple:hover {
    background-color: var(--kt-primary-hover) !important;
    color: #ffffff !important;
}

/* استایل عمومی برای همه آیکون‌های عملیات */
.action-icon {
    font-size: 18px;       /* اندازه یکسان برای همه */
    width: 20px;           /* عرض یکسان برای تراز دقیق */
    margin: 0 8px;         /* فاصله بین آیکون‌ها */
    cursor: pointer;       /* تغییر نشانگر موس به دست */
    transition: all 0.2s;  /* انیمیشن نرم برای هاور */
    display: inline-block;
    text-align: center;
}

/* افکت موقع رفتن موس روی آیکون‌ها (کمی بزرگتر شوند) */
.action-icon:hover {
    transform: scale(1.2);
}

/* رنگ‌بندی اختصاصی */
.icon-delete {
    color: #dc3545; /* قرمز برای حذف */
}

.icon-settings {
    color: #6c757d; /* خاکستری/طوسی برای تنظیمات */
}

.icon-door {
    color: #fd7e14; /* نارنجی برای واحدها/ورودی */
}

.icon-edit {
    color: #0d6efd; /* آبی برای ویرایش */
}

/* تنظیمات پایه برای هم‌اندازه کردن دکمه‌ها */
.action-btn {
    width: 35px !important;       /* عرض ثابت */
    height: 35px !important;      /* ارتفاع ثابت */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 3px;                /* فاصله کم بین دکمه‌ها */
    border-radius: 6px;           /* گردی گوشه‌ها */
    background-color: #f5f8fa;    /* رنگ پس‌زمینه پیش‌فرض (روشن) */
    border: none;
    transition: all 0.3s ease;
}

/* تنظیم سایز آیکون داخل دکمه‌ها */
.action-btn i {
    font-size: 1.1rem !important; /* سایز یکسان برای همه آیکون‌ها */
}

/* رنگ‌بندی اختصاصی (حالت عادی و هاور) */

/* 1. ویرایش (آبی) */
.btn-edit { color: #009ef7; }
.btn-edit:hover { background-color: #009ef7; color: #fff; }

/* 2. درها (نارنجی) */
.btn-door { color: #fd7e14; }
.btn-door:hover { background-color: #fd7e14; color: #fff; }

/* 3. تنظیمات (بنفش) */
.btn-setting { color: #7239ea; }
.btn-setting:hover { background-color: #7239ea; color: #fff; }

/* 4. حذف (قرمز) */
.btn-delete { color: #f1416c; }
.btn-delete:hover { background-color: #f1416c; color: #fff; }
/* 5. تیپ ساخت (سبز) */
.btn-fabrication { color: #50cd89; }
.btn-fabrication:hover { background-color: #50cd89; color: #fff; }

/* --- استایل مرتب‌سازی جدول --- */
.sortable {
    cursor: pointer;
    position: relative;
    user-select: none; /* جلوگیری از انتخاب متن هنگام کلیک */
}

.sortable:hover {
    background-color: #2b3e55 !important; /* کمی روشن‌تر هنگام هاور */
}

.sort-icon {
    font-size: 0.7rem;
    margin-right: 5px;
    opacity: 0.3;
    display: inline-block;
}

/* آیکون فعال و جهت‌دار */
.sortable.asc .sort-icon::after { content: '▲'; opacity: 1; color: #00e676; }
.sortable.desc .sort-icon::after { content: '▼'; opacity: 1; color: #ff5252; }
/* آیکون پیش‌فرض غیرفعال */
.sortable:not(.asc):not(.desc) .sort-icon::after { content: '⇅'; }