/* =========================================================
   چرخونک | custom.css
   استایل‌های سفارشیِ تجمیع‌شده (خارج‌شده از قالب‌های Blade)
   ترتیب بارگذاری: بعد از todo.css و sidebar.css
   ========================================================= */

/* ----- عمومی ----- */
body { background: #f4f6f9; }
.todo-page-wrap { padding: 15px; }
.admin-content { padding: 15px; }

/* ----- عرض مودال‌ها (+۳۰٪) ----- */
@media (min-width: 576px) {
    .modal-dialog          { max-width: 650px; }
    .modal-dialog.modal-lg { max-width: 1040px; }
    .modal-dialog.modal-xl { max-width: 1480px; }
    #todo-reminder-modal .modal-dialog { width: 650px !important; max-width: 650px !important; }
}

/* ----- مودال هشدار یادآوری ----- */
#todo-reminder-subtask { display: none !important; }
#todo-reminder-message { white-space: pre-line; }

/* ----- چت‌گونه: یادداشت‌های تسک (مودال یادداشت‌ها) ----- */
.todo-note-item {
    max-width: 80%;
    background: #fff !important;
    border: 1px solid #e3e8ee !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    padding: 8px 12px !important;
    margin: 10px 0;
}
.todo-note-item.note-mine  { margin-left: auto; margin-right: 0; }
.todo-note-item.note-other { margin-right: auto; margin-left: 0; }
.todo-note-item.note-other .todo-note-header {
    direction: ltr; text-align: left;
    justify-content: flex-start; gap: 8px;
}
.todo-note-item .todo-note-date { color: #95a5a6; font-size: 11px; }

/* ----- چت‌گونه: یادداشت‌های وظایف (آکاردئون) ----- */
.todo-note-bubble-wrap { display: flex; margin: 10px 0; }
.todo-note-bubble-wrap.mine  { justify-content: flex-start; }
.todo-note-bubble-wrap.other { justify-content: flex-end; }
.todo-note-bubble-wrap .todo-note-group {
    width: auto !important;
    max-width: 80%;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.todo-note-bubble-wrap .todo-note-group-header {
    font-weight: 700; font-size: 12px; color: #2c3e50;
    border-bottom: 1px dashed #eee; padding-bottom: 5px; margin-bottom: 6px;
}
.todo-note-bubble-wrap.other .todo-note-group-header { direction: ltr; text-align: left; }
.todo-note-bubble-wrap .todo-note-time { font-weight: 400; color: #95a5a6; font-size: 11px; }
.todo-note-txt { font-size: 14px; }

/* ----- آکاردئون: جداسازی کارت وظایف ----- */
.todo-subtask-read-row {
    background: #ffffff;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.todo-subtask-read-row:nth-child(even) { background: #f6f9fc; }
.todo-subtask-read-title { font-size: 14px; font-weight: 700; }
.todo-subtask-read-left .label { font-size: 12px; padding: 4px 9px; border-radius: 6px; }
.todo-subtask-read-notes .todo-note-group-header { font-size: 12px; }

/* ----- جعبه یادداشت زیر حباب وظیفه ----- */
.todo-subtask-read-notebox {
    flex: 0 0 100%; width: 100%;
    margin-top: 8px; border-top: 1px dashed #e3e8ee; padding-top: 8px;
    text-align: right;
}
.todo-subtask-read-notebox .input-group { width: 100%; }
.todo-read-note-save {
    background: #29b6f6 !important;
    border-color: #29b6f6 !important;
    color: #fff !important;
    font-weight: 700;
}
.todo-subtask-read-notebox .todo-ms { margin-top: 6px; }
.todo-subtask-read-notebox label { font-weight: normal; }

/* =========================================================
   ریسپانسیو / موبایل
   ========================================================= */

/* دکمه همبرگری (فقط موبایل) */
.topbar-menu-btn {
    display: none;
    background: none; border: 0; color: #fff;
    font-size: 20px; padding: 4px 10px;
}

@media (max-width: 768px) {
    /* پوسته: سایدبار کشویی به‌جای ستون ثابت */
    .app-shell { display: block; }
    .main-side {
        position: fixed; top: 0; bottom: 0; right: -260px;
        width: 250px; z-index: 1100;
        transition: right .25s ease;
        box-shadow: -2px 0 10px rgba(0,0,0,.3);
    }
    body.side-open .main-side { right: 0; }
    .side-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,.45); z-index: 1090;
    }
    body.side-open .side-overlay { display: block; }
    .topbar-menu-btn { display: inline-block; }

    /* مودال‌ها تمام‌صفحه */
    .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl {
        max-width: 100% !important; margin: 0 !important;
    }
    .modal-content { border-radius: 0; min-height: 100vh; }
}

@media (max-width: 480px) {
    .topbar-page, .topbar-sep { display: none; }
    .topbar-clock { font-size: 15px; }
    .todo-note-bubble-wrap .todo-note-group { width: 100%; max-width: 100%; }
}

/* ===== صفحه ورود ===== */
.login-box { width: 100%; max-width: 380px; margin: 60px auto; padding: 0 12px; }
@media (max-width: 480px) {
    .login-box { margin: 25px auto; }
    .login-logo a { font-size: 26px; }
}

/* =========================================================
   موبایل: تنظیمات دقیق (فاز ۲)
   ========================================================= */
@media (max-width: 768px) {
    body.side-open { overflow: hidden; }
    .todo-page-wrap { padding: 10px; }

    /* نوار بالا جمع‌وجورتر */
    .topbar { padding: 0 10px; gap: 6px; }
    .topbar-brand { font-size: 14px; }
    .topbar-avatar { width: 34px; height: 34px; }

    /* نوار ابزار: دکمه‌ها تمام‌عرض */
    .todo-toolbar .btn { width: 100%; }

    /* آکاردئون: ردیف‌ها زیر هم */
    .todo-subtask-read-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .todo-subtask-read-left { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }

    /* مودال چک‌لیست: ردیف‌ها زیر هم */
    .todo-subtask-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .todo-subtask-row-left { width: 100%; flex-wrap: wrap; gap: 6px; }

    /* دکمه‌ها مناسب لمس */
    .todo-actions .btn, .todo-subtask-toggle { padding: 6px 10px; }

    /* مودال یادآوری: دکمه‌ها بپیچند */
    #todo-reminder-modal .modal-footer { display: flex; flex-wrap: wrap; gap: 6px; }
    #todo-reminder-modal .modal-footer .btn { margin: 0; }

    /* جدول‌های ادمین: اسکرول افقی */
    .admin-content table { display: block; overflow-x: auto; max-width: 100%; }

    /* حباب‌های چت تمام‌عرض */
    .todo-note-item,
    .todo-note-bubble-wrap .todo-note-group { width: 100% !important; max-width: 100% !important; }

    /* جعبه یادداشت */
    .todo-read-note-save { white-space: nowrap; }
}

@media (max-width: 480px) {
    .topbar-clock { font-size: 14px; padding: 2px 8px; }
    .todo-tabs > li > a { padding: 8px 10px; font-size: 12px; }
    .login-box { margin: 20px auto; }
}
/* =========================================================
   موبایل: فیلترها دوتایی + دکمه‌ها یک‌ردیفی + آکاردئون تمام‌عرض
   ========================================================= */
@media (max-width: 768px) {
    /* فیلترها: جستجو تمام‌عرض، سلکت‌ها دوتایی کنار هم */
    .todo-toolbar { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    #todo-search { flex: 0 0 100%; width: 100%; min-width: 0; }
    .todo-toolbar select.form-control {
        flex: 0 0 calc(50% - 4px);
        width: calc(50% - 4px);
        min-width: 0;
    }
    /* سه دکمه (بروزرسانی/برچسب/زنگ) در یک ردیف */
    #todo-refresh-btn, #todo-manage-tags-btn, #todo-notif-settings-btn {
        flex: 1 1 0; width: auto; margin: 0;
    }

    /* آکاردئون: پرکردن فضای پرتِ سمت راست */
    .todo-subtasks-panel {
        margin-right: -78px;   /* می‌کشد زیر ستون چک‌باکس/دسته تا لبه کارت */
        padding: 8px;
    }
    .todo-note-group { margin: 8px 0 4px 0; }  /* حذف تورفتگی ۲۴px حباب‌ها */
}
/* =========================================================
   حکم نهایی: چت‌ها + پنل آکاردئون (دسکتاپ و موبایل)
   ========================================================= */

/* ---------- دسکتاپ (بالای 768) ---------- */
@media (min-width: 769px) {
    /* چت‌ها: خودت راست، دیگران چپ، عرض ۸۰٪ */
    .todo-note-bubble-wrap { display: flex !important; margin: 6px 0 !important; }
    .todo-note-bubble-wrap.mine  { justify-content: flex-start !important; }
    .todo-note-bubble-wrap.other { justify-content: flex-end !important; }
    .todo-note-bubble-wrap .todo-note-group {
        width: 80% !important; max-width: 80% !important;
        margin: 0 !important; box-sizing: border-box;
    }
    /* پنل آکاردئون: سر جای اصلی، تمام‌عرض بدنه */
    .todo-subtasks-panel {
        width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 10px 14px !important;
    }
}

/* ---------- موبایل (تا 768) ---------- */
@media (max-width: 768px) {
    /* چت‌ها تمام‌عرض */
    .todo-note-bubble-wrap { display: flex !important; margin: 6px 0 !important; }
    .todo-note-bubble-wrap .todo-note-group {
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important; box-sizing: border-box;
    }
    /* پنل: width:auto تا margin منفی واقعاً پهنش کند (نه هل بدهد) */
    .todo-subtasks-panel {
        width: auto !important;
        margin: 10px -78px 0 0 !important;
        padding: 8px !important;
    }
}
/* ===== لیست یادآوری‌ها: چیدمان خطی مرتب ===== */
.todo-reminder-item { display: block; padding: 10px 12px; }
.todo-rem-top { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.todo-rem-line {
    margin-top: 5px; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.todo-rem-line small { font-size: 12px; }
.todo-rem-from { color: #2c3e50; font-weight: 600; }
.todo-rem-msg { color: #3498db; }
.todo-rem-people { white-space: normal; }
/* خط آخر: برچسب‌ها + حذف، همه در یک خط و چپ‌چین */
.todo-rem-actions {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; justify-content: flex-end;  /* در RTL یعنی چپ */
}
.todo-rem-actions .btn { margin: 0; }/* ===== گروه دکمه‌های چک‌لیست ===== */
.todo-subtask-row-actions { display: inline-flex; gap: 6px; }
@media (max-width: 768px) {
    .todo-subtask-row-actions { order: 99; margin-right: auto; }  /* هل می‌دهد به چپ */
}