/* =========================================================
   MISAC Dashboard — misac.dashboard.css
   ========================================================= */

/* ── CSS variables (inherit from master --m-*) ── */
.msd {
    --msd-accent:      var(--m-accent, #2c5aa0);
    --msd-accent-dark: var(--m-accent-hover, #234a85);
    --msd-bg:          var(--m-bg-muted, #f5f5f5);
    --msd-white:       var(--m-surface, #ffffff);
    --msd-border:      var(--m-border, #e5e7eb);
    --msd-text:        var(--m-text, #333333);
    --msd-text-muted:  var(--m-text-muted, #6b7280);
    --msd-radius:      var(--m-radius-lg, 8px);
    --msd-shadow:      var(--m-shadow, 0 2px 6px rgba(0,0,0,.06));
    --msd-cols:        2;
    --msd-span:        1;
    --msd-card-color:  var(--m-accent, #2c5aa0);
    font-family: var(--m-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    background: var(--msd-bg);
    color: var(--msd-text);
    box-sizing: border-box;
}
.msd *, .msd *::before, .msd *::after { box-sizing: border-box; }

/* ── App bar ── */
.msd__app-bar {
    background: linear-gradient(135deg, var(--msd-accent) 0%, rgba(44,90,160,.8) 100%);
    color: #fff;
    padding: 6px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.msd__app-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.msd__app-bar-title {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Filters ── */
.msd__filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.msd__date-range {
    display: flex;
    align-items: center;
    gap: 6px;
}
.msd__date-selector {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background .2s;
    min-width: 110px;
}
.msd__date-selector:hover { background: rgba(255,255,255,.25); }
.msd__date-selector-label {
    color: rgba(255,255,255,.75);
    font-size: 9px;
    margin-bottom: 1px;
}
.msd__date-selector-value {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.msd__date-arrow {
    color: rgba(255,255,255,.7);
    font-size: 14px;
}
.msd__icon-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 30px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    padding: 0;
}
.msd__icon-btn:hover { background: rgba(255,255,255,.35); }

/* ── Action buttons ── */
.msd__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}
.msd__action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
}
.msd__action-btn:hover {
    background: rgba(255,255,255,.35);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    color: #fff;
}
.msd__action-icon { font-size: 13px; }

/* ── Tabs ── */
.msd__tabs-wrap {
    background: var(--msd-white);
    border-radius: var(--msd-radius);
    box-shadow: var(--msd-shadow);
    overflow: hidden;
    margin: 8px;
}
.msd__tab-bar {
    display: flex;
    background: #f9fafb;
    border-bottom: 1px solid var(--msd-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.msd__tab-bar::-webkit-scrollbar { display: none; }
.msd__tab-btn {
    flex: 1 0 auto;
    min-width: 80px;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--msd-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all .25s;
    white-space: nowrap;
}
.msd__tab-btn:hover { background: #f3f4f6; }
.msd__tab-btn--active {
    color: var(--msd-accent);
    border-bottom-color: var(--msd-accent);
}
.msd__tab-icon { font-size: 14px; }
.msd__tab-panels { }
.msd__tab-panel  { display: none; }
.msd__tab-panel--active { display: block; }

/* ── Loading / Error ── */
.msd__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
}
.msd__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f4f6;
    border-top-color: var(--msd-accent);
    border-radius: 50%;
    animation: msd-spin 1s linear infinite;
}
@keyframes msd-spin { to { transform: rotate(360deg); } }
.msd__error {
    text-align: center;
    padding: 32px 16px;
}
.msd__error-icon  { font-size: 44px; margin-bottom: 10px; }
.msd__error-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.msd__error-msg   { color: var(--msd-text-muted); font-size: 13px; margin-bottom: 14px; }
.msd__empty       { color: var(--msd-text-muted); font-size: 13px; text-align: center; padding: 16px; }

/* ── Generic buttons ── */
.msd__btn {
    padding: 7px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .2s;
}
.msd__btn--primary {
    background: var(--msd-accent);
    color: #fff;
    border-color: var(--msd-accent);
}
.msd__btn--primary:hover { background: var(--msd-accent-dark); }
.msd__btn--ghost  {
    background: #f3f4f6;
    color: #4b5563;
}
.msd__btn--ghost:hover { background: #e5e7eb; }

/* ── Layouts ── */
.msd__stack   { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.msd__grid    { padding: 12px; display: grid; grid-template-columns: repeat(var(--msd-cols,2), 1fr); gap: 12px; }
.msd__columns { padding: 12px; display: grid; grid-template-columns: repeat(var(--msd-cols,2), 1fr); gap: 16px; }

/* Widget span in grid/columns */
.msd__widget { grid-column: span var(--msd-span, 1); }

/* ── Section title ── */
.msd__section-title {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
}

/* ── Stat row ── */
.msd__stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.msd__stat-card {
    background: var(--msd-white);
    border-radius: var(--msd-radius);
    padding: 12px;
    box-shadow: var(--msd-shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    border-left: 3px solid var(--msd-card-color);
}
.msd__stat-card::before {
    content: '';
    position: absolute;
    right: -10px; top: -10px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--msd-card-color);
    opacity: .06;
}
.msd__stat-link {
    position: absolute;
    inset: 0;
}
.msd__stat-icon { font-size: 22px; flex-shrink: 0; }
.msd__stat-info { flex: 1; min-width: 0; }
.msd__stat-label {
    font-size: 10px;
    color: var(--msd-text-muted);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msd__stat-value { font-size: 16px; font-weight: 700; white-space: nowrap; }
.msd__stat-sub   { font-size: 11px; color: var(--msd-text-muted); }

/* ── Trend badge ── */
.msd__trend {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 2px;
}
.msd__trend--pos { background: #dcfce7; color: #166534; }
.msd__trend--neg { background: #fee2e2; color: #991b1b; }
.msd__trend-badge {
    padding: 3px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}
.msd__trend-badge.msd__trend--pos { background: #4ade80; color: #fff; }
.msd__trend-badge.msd__trend--neg { background: #f87171; color: #fff; }

/* ── KPI card ── */
.msd__kpi-card {
    background: var(--msd-accent);
    background: linear-gradient(135deg, var(--msd-accent) 0%, rgba(0,0,0,.25) 100%),
                var(--msd-accent);
    border-radius: var(--msd-radius);
    padding: 12px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.msd__kpi-header { display: flex; align-items: center; margin-bottom: 10px; }
.msd__kpi-icon   {
    background: rgba(255,255,255,.2);
    border-radius: 6px;
    padding: 6px;
    margin-right: 10px;
    font-size: 16px;
}
.msd__kpi-info  { flex: 1; }
.msd__kpi-label { font-size: 10px; opacity: .85; margin-bottom: 2px; }
.msd__kpi-value { font-size: 20px; font-weight: 700; }
.msd__kpi-stats {
    display: flex;
    border-top: 1px solid rgba(255,255,255,.2);
    padding-top: 8px;
    margin-top: 8px;
}
.msd__kpi-stat {
    flex: 1;
    text-align: center;
    padding: 0 6px;
    border-right: 1px solid rgba(255,255,255,.2);
}
.msd__kpi-stat:last-child { border-right: none; }
.msd__kpi-stat-icon  { font-size: 11px; opacity: .7; margin-bottom: 2px; }
.msd__kpi-stat-label { font-size: 8px;  opacity: .7; margin-bottom: 1px; }
.msd__kpi-stat-value { font-size: 12px; font-weight: 700; }

/* ── Bank cards ── */
.msd__bank-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.msd__bank-card {
    background: linear-gradient(135deg, var(--msd-card-color) 0%, var(--msd-card-color) 100%);
    border-radius: var(--msd-radius);
    padding: 11px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: transform .2s;
}
.msd__bank-card:hover { transform: translateY(-2px); }
.msd__bank-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
}
.msd__bank-icon-wrap {
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 4px;
    padding: 3px;
    margin-right: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.msd__bank-icon  { width: 100%; height: 100%; object-fit: contain; }
.msd__bank-name  { flex: 1; color: #fff; font-size: 12px; font-weight: 700; }
.msd__bank-balance-label { color: rgba(255,255,255,.7); font-size: 9px; margin-bottom: 2px; }
.msd__bank-balance-value { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.msd__bank-stats { display: flex; gap: 8px; }
.msd__bank-stat  { flex: 1; }
.msd__bank-stat-label { color: rgba(255,255,255,.6); font-size: 8px; margin-bottom: 1px; }
.msd__bank-stat-value { color: #fff; font-size: 10px; font-weight: 700; }

/* ── Quick actions ── */
.msd__quick-actions {
    background: var(--msd-white);
    border-radius: var(--msd-radius);
    padding: 12px;
    box-shadow: var(--msd-shadow);
    height: 100%;
}
.msd__quick-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}
.msd__quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
}
.msd__quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    border: 1px solid var(--msd-border);
    border-radius: 6px;
    text-decoration: none;
    color: #374151;
    cursor: pointer;
    min-height: 54px;
    transition: all .2s;
    font-family: inherit;
}
.msd__quick-btn:hover {
    background: linear-gradient(135deg, var(--msd-accent), var(--msd-accent-dark));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(44,90,160,.3);
}
.msd__quick-icon  { font-size: 20px; margin-bottom: 5px; }
.msd__quick-label { font-size: 10px; font-weight: 500; text-align: center; line-height: 1.2; }

/* ── Progress list ── */
.msd__progress-list  { }
.msd__progress-item  { margin-bottom: 12px; }
.msd__progress-item:last-child { margin-bottom: 0; }
.msd__progress-header  { display: flex; justify-content: space-between; margin-bottom: 4px; }
.msd__progress-label   { font-size: 12px; font-weight: 500; }
.msd__progress-value   { font-size: 12px; font-weight: 700; }
.msd__progress-bar-wrap {
    height: 6px;
    background: rgba(0,0,0,.08);
    border-radius: 6px;
    overflow: hidden;
}
.msd__progress-bar-fill { height: 100%; border-radius: 6px; transition: width .6s ease; }

/* ── Card list ── */
.msd__card-list { }
.msd__list-card {
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1px solid var(--msd-border);
    border-radius: var(--msd-radius);
    padding: 10px;
    margin-bottom: 7px;
    gap: 10px;
}
.msd__list-card:last-child { margin-bottom: 0; }
.msd__list-card-icon {
    background: rgba(44,90,160,.1);
    border-radius: 6px;
    padding: 7px;
    font-size: 16px;
    color: var(--msd-accent);
    flex-shrink: 0;
}
.msd__list-card-name  { flex: 1; font-size: 12px; font-weight: 500; }
.msd__list-card-value { font-size: 13px; font-weight: 700; }

/* ── Transaction list ── */
.msd__txn-section        { margin-bottom: 14px; }
.msd__txn-section-header {
    display: flex;
    align-items: center;
    padding: 6px 0;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--msd-border);
}
.msd__txn-section-icon  { margin-right: 6px; font-size: 16px; }
.msd__txn-section-title { flex: 1; font-size: 13px; font-weight: 700; }
.msd__txn-section-total { font-size: 13px; font-weight: 700; }
.msd__txn-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}
.msd__txn-card {
    background: var(--msd-white);
    border: 1px solid var(--msd-border);
    border-radius: var(--msd-radius);
    padding: 10px;
    cursor: pointer;
    transition: box-shadow .2s;
}
.msd__txn-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.09); }
.msd__txn-header     { display: flex; justify-content: space-between; align-items: flex-start; }
.msd__txn-info       { flex: 1; }
.msd__txn-party      { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.msd__txn-date       { font-size: 11px; color: var(--msd-text-muted); }
.msd__txn-amount-wrap { text-align: right; flex-shrink: 0; }
.msd__txn-amount     { font-size: 13px; font-weight: 700; }
.msd__txn-amount--payment { color: #dc2626; }
.msd__txn-amount--receipt { color: #16a34a; }
.msd__txn-expand     { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.msd__txn-detail     {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--msd-border);
}
.msd__txn-detail--open   { display: block; }
.msd__txn-detail-row     { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #4b5563; margin-bottom: 4px; }
.msd__txn-detail-row:last-child { margin-bottom: 0; }
.msd__txn-detail-icon    { font-size: 12px; color: #9ca3af; flex-shrink: 0; }

/* Chip grid (receipt detail) */
.msd__chip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.msd__chip {
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--chip-bg, rgba(59,130,246,.1));
}
.msd__chip-label { font-size: 9px; opacity: .8; margin-bottom: 1px; }
.msd__chip-value { font-size: 11px; font-weight: 700; }

/* ── Table widget ── */
.msd__table-widget   { }
.msd__table-target   { height: 360px; }
.msd__simple-table   { width: 100%; border-collapse: collapse; font-size: 12px; }
.msd__simple-table th,
.msd__simple-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--msd-border);
    text-align: left;
}
.msd__simple-table thead th {
    background: #f3f4f6;
    font-weight: 700;
    font-size: 11px;
    color: var(--msd-text-muted);
}
.msd__simple-table tbody tr:hover { background: #f9fafb; }

/* ── Date picker modal ── */
.msd__date-modal {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9990;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.msd__date-modal--show { opacity: 1; pointer-events: auto; }
.msd__date-modal-box {
    background: #fff;
    border-radius: var(--msd-radius);
    padding: 18px;
    min-width: 260px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    transform: translateY(-12px);
    transition: transform .2s;
}
.msd__date-modal--show .msd__date-modal-box { transform: translateY(0); }
.msd__date-modal-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.msd__date-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--msd-border);
    border-radius: 5px;
    font-size: 13px;
    margin-bottom: 12px;
    font-family: inherit;
}
.msd__date-modal-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .msd__actions { display: none; }
    .msd__stat-row { grid-template-columns: repeat(2, 1fr); }
    .msd__bank-grid { grid-template-columns: 1fr; }
    .msd__txn-grid  { grid-template-columns: 1fr; }
    .msd__chip-grid { grid-template-columns: repeat(2, 1fr); }
    .msd__quick-grid { grid-template-columns: repeat(4, 1fr); }
    .msd__grid, .msd__columns { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .msd__bank-grid { grid-template-columns: repeat(2, 1fr); }
    .msd__txn-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 901px) {
    .msd__bank-grid { grid-template-columns: repeat(3, 1fr); }
    .msd__txn-grid  { grid-template-columns: repeat(2, 1fr); }
    .msd__stat-row  { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (min-width: 1200px) {
    .msd__bank-grid { grid-template-columns: repeat(4, 1fr); }
    .msd__txn-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1600px) {
    .msd__bank-grid { grid-template-columns: repeat(5, 1fr); }
    .msd__txn-grid  { grid-template-columns: repeat(4, 1fr); }
}