/* طراحی نئو مورفیک ورژن 0.1 */
/* سبک: Soft UI / Neumorphism */
/* پالت: مونوکروم خاکستری با اکسنت سبز ملایم */
/* کنتراست کم ولی مدرن و مینیمال */

:root {
  --bg-color: #f2f3f5;          /* پس‌زمینه اصلی خیلی روشن */
  --surface-color: #e6e7ea;     /* کارت‌ها / پنل‌ها */
  --sidebar-color: #2b2e34;     /* سایدبار تیره */
  --primary-color: #3a3f47;     /* رنگ اصلی تیره‌تر برای عناصر فعال */
  --accent-color: #7ed6a5;      /* سبز ملایم (مانند درصد رشد) */
  --text-color: #1f2328;        /* متن اصلی */
  --text-muted: #6b7280;        /* متن ثانویه */
  --text-sidebar: #dce3f1;
  --border-color: #d1d5db;      /* خطوط جداکننده */
  --hover-color: #dcdfe3;       /* هاور آیتم‌ها */
  --shadow-light: #ffffff;      /* هایلایت نئومورفیک */
  --shadow-dark: #c8ccd1;       /* سایه نئومورفیک */
}
 
/* برای آپدیت بعدی
:root[data-theme="dark"] {
  --bg-color: #1e2126;
  --surface-color: #2a2f36;
  --sidebar-color: #181a1f;

  --primary-color: #3a4048;
  --accent-color: #7ed6a5;

  --text-color: #f1f3f5;
  --text-muted: #9aa0a6;

  --border-color: #3a3f45;
  --hover-color: #343941;

  --shadow-light: #2c3138;
  --shadow-dark: #14161a;
}

:root[data-theme="light"] {
  --bg-color: #f2f3f5;
  --surface-color: #e6e7ea;
  --sidebar-color: #2b2e34;

  --primary-color: #3a3f47;
  --accent-color: #7ed6a5;

  --text-color: #1f2328;
  --text-muted: #6b7280;

  --border-color: #d1d5db;
  --hover-color: #dcdfe3;

  --shadow-light: #ffffff;
  --shadow-dark: #c8ccd1;
}
*/

/* MAIN CONFG */
* { padding: 0; margin: 0; box-sizing: border-box; }

body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s ease, color 0.3s ease;
}


/* ELEMENTS */
.sidebar {
    background-color: var(--surface-color);
    width: auto;
    min-width: 60px;
    height: 80vh;
    position: fixed;
    left: 0;
    top: 10vh;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    padding: 6px;
    box-shadow: var(--text-muted) 0 2px 4px;
}

.sidebar > div {
    background: var(--sidebar-color);
    color: var(--text-color);
    min-width: 40px;
    min-height: 128px;
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: var(--text-color) 0 2px 5px;
    padding: 3px;
}

.sidebar > div > .item:nth-child(1){
    margin-top: 0 !important;
}

.sidebar > div > .item {
    color: var(--text-sidebar);
    padding: 16px 16px;
    border-radius: 12px;
    transition: 0.2s ease;
    cursor: pointer;
    margin-top: 10px;
}

.sidebar > div > .item:hover {
    background: var(--hover-color);
    color: var(--text-color);
}

.sidebar > div > .item.active {
    background: var(--primary-color);
    color: #fff;
}


.mobile-menu {
    background: var(--sidebar-color);
    width: 98vw;
    min-height: 40px;
    height: auto;
    position: fixed;
    left: 1vw;
    bottom: 5px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    padding: 6px;
    box-shadow: var(--text-muted) 0 2px 4px;
}
.mobile-menu > .item {
    float: left;
    color: var(--text-sidebar);
    padding: 12px 16px;
    border-radius: 12px;
    transition: 0.2s ease;
    cursor: pointer;
}

.mobile-menu > .item:hover {
    background: var(--hover-color);
    color: var(--text-color);
}

.mobile-menu > .item.active {
    background: var(--primary-color);
    color: #fff;
}


/* MOBILE RULES (SMALL SCREEN) */
    /* ls large screen */
    
@media screen and (max-width: 700px) {
    .ls { display: none; }
}

@media screen and (min-width: 700px) {
    .ss {display: none;}
}