/* =========================================================
   Journalfy Admin — Mobile Styles
   Applied globally via media queries. Does not affect desktop.
   ========================================================= */

/* Google Fonts for mobile dashboard */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Hind:wght@400;500;600&display=swap');

/* --- Mobile/Desktop toggle --- */
.mobile-dashboard { display: none; }

@media (max-width: 767px) {
    /* Show desktop dashboard on mobile too (mobile section retired) */
    .mobile-dashboard { display: none; }
    .desktop-dashboard { display: block !important; }

    /* Remove AdminLTE sidebar margin on mobile */
    .content-wrapper {
        margin-left: 0 !important;
    }
    .sidebar-mini .content-wrapper {
        margin-left: 0 !important;
    }
}

/* =========================================================
   Mobile Dashboard
   ========================================================= */
@media (max-width: 767px) {

    .mobile-dashboard {
        padding: 20px;
        padding-bottom: 40px;
        background: linear-gradient(180deg, #FAF9F5 0%, #fff 100%);
        min-height: 100vh;
    }

    /* Header */
    .mobile-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 24px;
    }
    .mobile-header__logo {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    .mobile-header__date {
        font-family: 'Hind', 'Source Sans Pro', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #6b5e4f;
    }

    /* Metric cards grid */
    .mobile-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 24px;
        align-items: stretch;
    }
    .mobile-metric {
        background: linear-gradient(135deg, #fff 0%, #faf9f7 100%);
        border-radius: 14px;
        padding: 20px;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border-left: 4px solid #a48b24;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        /* Equal height tiles in grid */
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .mobile-metric:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .mobile-metric:hover {
        text-decoration: none;
        color: inherit;
    }
    .mobile-metric__number {
        font-family: 'Playfair Display', 'Georgia', serif;
        font-size: 32px;
        font-weight: 700;
        color: #483D1A;
        line-height: 1.1;
    }
    .mobile-metric__label {
        font-family: 'Hind', 'Source Sans Pro', sans-serif;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #8a7d64;
        margin-top: 4px;
    }
    .mobile-metric__change {
        font-size: 12px;
        margin-top: 6px;
    }
    .mobile-metric__change.up { color: #66bb6a; }
    .mobile-metric__change.down { color: #ef5350; }
    .mobile-metric__change.neutral { color: #aaa; }

    /* Quick actions */
    .mobile-actions {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 24px;
        padding-bottom: 4px;
    }
    .mobile-actions::-webkit-scrollbar { display: none; }
    .mobile-action-pill {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        background: linear-gradient(135deg, #483D1A 0%, #3a2f15 100%);
        color: #FAF9F5;
        border-radius: 22px;
        font-size: 13px;
        font-family: 'Hind', 'Source Sans Pro', sans-serif;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        transition: transform 0.15s ease, opacity 0.15s ease;
        box-shadow: 0 2px 8px rgba(72,61,26,0.2);
    }
    .mobile-action-pill:hover,
    .mobile-action-pill:active {
        color: #FAF9F5;
        text-decoration: none;
    }
    .mobile-action-pill:active {
        transform: scale(0.95);
    }
    .mobile-action-pill i { font-size: 14px; }

    /* Cards */
    .mobile-card {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        margin-bottom: 20px;
        overflow: hidden;
    }
    .mobile-card__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #e8dfd0;
    }
    .mobile-card__header span {
        font-family: 'Hind', 'Source Sans Pro', sans-serif;
        font-weight: 700;
        font-size: 15px;
        color: #483D1A;
    }
    .mobile-card__header a {
        font-size: 13px;
        color: #a48b24;
        text-decoration: none;
        font-weight: 500;
    }
    .mobile-card__body {
        padding: 0;
    }

    /* Signup rows */
    .mobile-signup-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        border-bottom: 1px solid #f0ece3;
        text-decoration: none;
        color: inherit;
        min-height: 58px;
        transition: background-color 0.15s ease;
    }
    .mobile-signup-row:last-child { border-bottom: none; }
    .mobile-signup-row:active { background: #f8f5ef; }
    .mobile-signup-row:hover { text-decoration: none; color: inherit; }
    .mobile-signup-row__info { flex: 1; min-width: 0; }
    .mobile-signup-row__name {
        font-size: 14px;
        font-weight: 600;
        color: #3a2f15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-signup-row__date {
        font-size: 12px;
        color: #aaa;
        margin-top: 2px;
    }
    .mobile-badge {
        font-size: 10px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 10px;
        letter-spacing: 0.5px;
        flex-shrink: 0;
        margin-left: 12px;
    }
    .mobile-badge--ios { background: #e3f2fd; color: #1565c0; }
    .mobile-badge--android { background: #e8f5e9; color: #2e7d32; }

    /* Feedback rows */
    .mobile-feedback-row {
        padding: 16px 20px;
        border-bottom: 1px solid #f0ece3;
        transition: background-color 0.15s ease;
    }
    .mobile-feedback-row:last-child { border-bottom: none; }
    .mobile-feedback-row:active { background: #f8f5ef; }
    .mobile-feedback-row__text {
        font-size: 14px;
        color: #483D1A;
        line-height: 1.55;
    }
    .mobile-feedback-row__date {
        font-size: 12px;
        color: #aaa;
        margin-top: 6px;
    }
}


/* =========================================================
   Global Mobile Improvements (all admin pages)
   ========================================================= */
@media (max-width: 767px) {

    /* Remove AdminLTE sidebar margin on mobile */
    .content-wrapper {
        margin-left: 0 !important;
    }
    .sidebar-mini .content-wrapper {
        margin-left: 0 !important;
    }

    /* Sidebar: overlay not push, better touch targets */
    .main-sidebar .nav-item > .nav-link {
        padding: 12px 16px;
        min-height: 44px;
    }

    /* Make hamburger more prominent */
    .navbar .nav-link[data-widget="pushmenu"] {
        font-size: 22px;
        padding: 8px 16px;
    }

    /* Content padding */
    .content-wrapper > .content {
        padding: 14px;
    }
    .content-header {
        padding: 14px;
    }
    .content-header h1 {
        font-size: 18px;
    }

    /* --- Tables: fit to screen, scroll when needed --- */
    .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table {
        min-width: 0;
        width: 100%;
        font-size: 13px;
    }
    .table th,
    .table td {
        padding: 8px 10px;
    }
    /* Numeric/short columns stay tight in analytics tables */
    .table th.text-right,
    .table td.text-right,
    .table th.text-center,
    .table td.text-center {
        white-space: nowrap;
    }

    /* Form inputs: prevent iOS zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Buttons: larger touch targets */
    .btn {
        min-height: 44px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Cards: full width */
    .card {
        margin-left: 0;
        margin-right: 0;
        border-radius: 10px;
    }
    .card-body {
        padding: 12px;
    }

    /* Page title in breadcrumb area */
    .breadcrumb {
        font-size: 12px;
    }

    /* DataTables pagination mobile-friendly */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 8px 12px !important;
        min-width: 44px;
        min-height: 44px;
    }

    /* --- Card headers: keep inline on mobile --- */

    /* --- Nav tabs (user profile): compact on mobile --- */
    .nav.nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav.nav-tabs::-webkit-scrollbar { display: none; }
    .nav.nav-tabs .nav-link {
        font-size: 12px;
        padding: 8px 12px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .nav.nav-tabs .nav-link svg {
        width: 14px;
        height: 14px;
    }

    /* --- Small-box stat tiles (user profile etc): equal height --- */
    .small-box h4 {
        font-size: 18px;
        white-space: nowrap;
    }
    .small-box .inner {
        min-height: 44px;
    }

    /* --- Stat cards: compact on mobile --- */
    .stat-card {
        padding: 14px;
        margin-bottom: 12px;
        flex-direction: column;
        align-items: flex-start;
    }
    .stat-card__icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        margin-right: 0;
        margin-bottom: 8px;
    }
    .stat-card__value {
        font-size: 22px !important;
    }
    .stat-card__label {
        font-size: 10px;
    }
    .stat-card__trend {
        font-size: 11px;
    }
    .stat-card__sub {
        display: block;
        margin-left: 0;
    }
    .stat-card__link {
        font-size: 11px;
    }
    /* Make stat cards 2-column grid on mobile */
    .desktop-dashboard > .row > .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 6px;
        padding-right: 6px;
    }
    .desktop-dashboard > .row > .col-lg-4 {
        padding-left: 6px;
        padding-right: 6px;
    }
    .ab-comparison {
        font-size: 16px !important;
        gap: 4px;
    }

    /* --- Funnel bars: fit screen --- */
    .funnel-container {
        max-width: 100%;
    }
    .funnel-step__bar-wrapper {
        height: 26px;
    }
    .funnel-step__name {
        font-size: 13px;
    }
    .funnel-step__count {
        font-size: 12px;
    }
    .funnel-step__pct {
        font-size: 11px;
    }
    .funnel-step__meta {
        gap: 8px;
    }

    /* --- Funnel page: hide # column (uses width:30px header) --- */

    /* --- Charts: fit to container --- */
    canvas {
        max-width: 100% !important;
    }

    /* --- Filter pills: wrap nicely --- */
    .form-inline {
        flex-wrap: wrap;
    }
    .form-inline .form-control {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Pull-to-refresh indicator */
    .ptr-indicator {
        display: none;
        text-align: center;
        padding: 12px;
        color: #a48b24;
        font-size: 13px;
        font-family: 'Hind', 'Source Sans Pro', sans-serif;
    }
    .ptr-indicator.visible {
        display: block;
    }
    .ptr-indicator i {
        animation: ptr-spin 0.8s linear infinite;
    }
    @keyframes ptr-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
}