/* =========================================================================
   VWave Support - App shell styling
   Bootstrap 5 is used for grid/utilities; this file gives the whole app
   its "mobile app" look: a phone-width shell, a fixed top bar, a fixed
   bottom tab bar, card lists, badges and a floating action button.

   Written laptop/desktop-first: the unqualified (base) rules below are
   what renders on a laptop screen - a centered, framed phone-width shell
   floating on a grey desktop background. The `@media (max-width: 575.98px)`
   blocks (one near the top for the shell itself, one further down next
   to the floating action button) are what strip that framing away on an
   actual phone, so the shell goes edge-to-edge instead.
   Add any future breakpoint the same way: base = laptop, max-width
   queries scale *down* from there - never min-width queries scaling up.
   ========================================================================= */

:root {
    --brand-primary: #3E63DD;
    --brand-primary-dark: #2F4EC0;
    --brand-primary-light: #EEF1FE;
    --brand-accent: #10B981;
    --brand-danger: #EF4444;
    --brand-warning: #F59E0B;
    --brand-muted: #8A93A6;
    --app-bg: #F4F6FB;
    --app-surface: #FFFFFF;
    --app-text: #1F2430;
    --app-text-muted: #6B7280;
    --app-border: #E7EAF3;
    --app-radius: 18px;
    --app-radius-sm: 12px;
    --app-shell-width: 100%;
    --app-topbar-h: 60px;
    --app-bottomnav-h: 68px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background: #E3E7F1;
    color: var(--app-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Laptop default: center the app shell as a "floating" frame on a
       grey desktop background. Reset for real phones below. */
    justify-content: center;
    padding-block: 24px;
}

/* ---------------------------------------------------------------------
   Phone-shell wrapper: on a laptop it's a centered, fixed-width "app"
   card; the max-width query below flattens it to a full-bleed page on
   an actual phone screen.
   --------------------------------------------------------------------- */
.app-shell {
    max-width: var(--app-shell-width);
    margin: 0 auto;
    min-height: calc(100vh - 48px);
    background: var(--app-bg);
    position: relative;
    box-shadow: 0 0 60px rgba(20, 25, 50, 0.15);
    border-radius: 28px;
	width:96%;
	margin-right:2%;
	margin-left:2%;
}

/* True phone screens: drop the desktop framing and go edge-to-edge. */


/* ---------------------------------------------------------------------
   Top app bar
   --------------------------------------------------------------------- */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--app-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
}

.app-topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-topbar .brand img {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.app-topbar .brand-text {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-topbar .brand-text small {
    display: block;
    font-weight: 500;
    font-size: 11px;
    color: var(--app-text-muted);
}

.app-topbar .page-title {
    font-weight: 700;
    font-size: 17px;
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    border: none;
    font-size: 16px;
    text-decoration: none;
    flex-shrink: 0;
}
.icon-btn:hover { background: #E1E6FC; color: var(--brand-primary-dark); }

.avatar-bubble {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Content area
   --------------------------------------------------------------------- */
.app-content {
    padding: 16px 16px calc(var(--app-bottomnav-h) + 28px);
    min-height: calc(100vh - var(--app-topbar-h));
}

.section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-text-muted);
    margin: 4px 0 10px;
}

/* ---------------------------------------------------------------------
   Bottom tab bar
   --------------------------------------------------------------------- */
.app-bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: var(--app-shell-width);
    margin: 0 auto;
    height: var(--app-bottomnav-h);
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    display: flex;
    align-items: stretch;
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.app-bottomnav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--app-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.app-bottomnav a i {
    font-size: 19px;
    line-height: 1;
}

.app-bottomnav a.active {
    color: var(--brand-primary);
}

.app-bottomnav a.active i {
    transform: translateY(-1px);
}

/* Floating action button */
.fab {
    position: fixed;
    right: calc(50% - (var(--app-shell-width) / 2) + 18px);
    bottom: calc(var(--app-bottomnav-h) + 16px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(62, 99, 221, 0.45);
    z-index: 25;
    text-decoration: none;
    border: none;
}
.fab:hover { background: var(--brand-primary-dark); color: #fff; }

/* True phone screens: the shell is already edge-to-edge (see top of
   file), so anchor the button to the real screen edge instead of the
   laptop shell's calculated edge. */
@media (max-width: 575.98px) {
    .fab { right: 18px; }
}

/* ---------------------------------------------------------------------
   Cards / list items
   --------------------------------------------------------------------- */
.app-card {
    background: var(--app-surface);
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    padding: 16px;
    margin-bottom: 12px;
}

.list-card {
    display: block;
    background: var(--app-surface);
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border);
    padding: 14px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
}
.list-card:hover, a.list-card:hover {
    color: inherit;
    box-shadow: 0 6px 18px rgba(20, 25, 50, 0.08);
}
.list-card .lc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.list-card .lc-title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--app-text);
}
.list-card .lc-ticketno {
    font-size: 11.5px;
    color: var(--app-text-muted);
    font-weight: 600;
}
.list-card .lc-meta {
    font-size: 12px;
    color: var(--app-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.list-card .lc-meta i { font-size: 12px; }

/* Stat tiles on dashboards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.stat-tile {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: 14px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.stat-tile .stat-num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}
.stat-tile .stat-label {
    font-size: 12px;
    color: var(--app-text-muted);
    margin-top: 6px;
    font-weight: 600;
}
.stat-tile .stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 16px;
}

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */
.app-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
.badge-status-open      { background: #E6ECFF; color: #3E63DD; }
.badge-status-progress  { background: #FFF3E0; color: #B0630A; }
.badge-status-resolved  { background: #E3F8EC; color: #0F9D58; }
.badge-status-closed    { background: #ECEDF1; color: #6B7280; }

.badge-priority-low     { background: #ECEDF1; color: #6B7280; }
.badge-priority-medium  { background: #E6ECFF; color: #3E63DD; }
.badge-priority-high    { background: #FFF0E0; color: #C2650B; }
.badge-priority-urgent  { background: #FDE7E7; color: #D3302F; }

/* ---------------------------------------------------------------------
   Alerts / flash messages
   --------------------------------------------------------------------- */
.app-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--app-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 14px;
}
.app-alert-success { background: #E3F8EC; color: #0F8A4E; }
.app-alert-error   { background: #FDE7E7; color: #C22B2A; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.app-form label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--app-text-muted);
    margin-bottom: 5px;
    display: block;
}
.app-form .form-control,
.app-form .form-select {
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border);
    padding: 10px 14px;
    font-size: 14px;
    background: var(--app-surface);
}
.app-form .form-control:focus,
.app-form .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(62, 99, 221, 0.15);
}
.app-form .form-text-error {
    color: var(--brand-danger);
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 4px;
    display: block;
}

.btn-app-primary {
    background: var(--brand-primary);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: var(--app-radius-sm);
    padding: 11px 18px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.btn-app-primary:hover { background: var(--brand-primary-dark); color: #fff; text-decoration: none; }
.btn-app-primary:disabled { opacity: .6; }

.btn-app-outline {
    background: transparent;
    border: 1.5px solid var(--app-border);
    color: var(--app-text);
    font-weight: 700;
    border-radius: var(--app-radius-sm);
    padding: 10px 18px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.btn-app-outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); text-decoration: none; }

/* Repeatable "alert email" rows - client profile / admin client form */
.alert-email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.alert-email-row .form-control { flex: 1 1 auto; }

.btn-add-row {
    background: transparent;
    border: 1.5px dashed var(--app-border);
    color: var(--brand-primary);
    font-weight: 700;
    border-radius: var(--app-radius-sm);
    padding: 8px 14px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-add-row:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); }

/* ---------------------------------------------------------------------
   Login screen
   --------------------------------------------------------------------- */
.login-screen {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--brand-primary) 0%, #6E3FD6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--app-surface);
    border-radius: 24px;
    padding: 34px 26px 28px;
    box-shadow: 0 24px 60px rgba(20, 20, 60, 0.35);
}
.login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
}
.login-logo img {
    height: 52px;
    width: auto;
    object-fit: contain;
    margin-bottom: 10px;
}
.login-logo h1 {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    text-align: center;
}
.login-logo p {
    font-size: 12.5px;
    color: var(--app-text-muted);
    margin: 2px 0 0;
    text-align: center;
}
.demo-hint {
    background: var(--brand-primary-light);
    border-radius: var(--app-radius-sm);
    padding: 12px 14px;
    font-size: 11.5px;
    color: var(--brand-primary-dark);
    margin-top: 18px;
    line-height: 1.5;
}
.demo-hint b { display: block; margin-bottom: 3px; font-size: 12px; }

/* ---------------------------------------------------------------------
   Misc
   --------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--app-text-muted);
}
.empty-state i {
    font-size: 40px;
    color: var(--app-border);
    margin-bottom: 10px;
    display: block;
}
.chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--app-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.chip.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.reply-bubble {
    background: var(--app-bg);
    border-radius: var(--app-radius-sm);
    padding: 11px 13px;
    margin-bottom: 10px;
}
.reply-bubble.me {
    background: var(--brand-primary-light);
}
.reply-bubble .rb-head {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--app-text-muted);
    margin-bottom: 4px;
}
.reply-bubble .rb-body {
    font-size: 13.5px;
    white-space: pre-line;
}

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.page-header-row h2 {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}

.detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--app-text-muted);
    font-weight: 700;
    margin-bottom: 3px;
}
.detail-value {
    font-size: 14px;
    margin-bottom: 14px;
}

/* Small inline edit/delete icon links, e.g. on the engineer's own
   daily report cards. */
.report-action-link {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text-muted);
    background: var(--app-bg);
    font-size: 13px;
    flex-shrink: 0;
}
.report-action-link:hover { background: var(--app-border); color: var(--app-text); }
.report-action-link.text-danger:hover { background: #FDE7E7; color: var(--brand-danger); }

/* ---------------------------------------------------------------------
   Rich text (ticket description editor output + the read-only view of it)
   --------------------------------------------------------------------- */
.rich-text-content {
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line; /* keeps line breaks in legacy plain-text descriptions */
    word-break: break-word;
}
.rich-text-content p { margin: 0 0 10px; }
.rich-text-content p:last-child { margin-bottom: 0; }
.rich-text-content ul,
.rich-text-content ol { margin: 0 0 10px; padding-left: 22px; }
.rich-text-content li { margin-bottom: 3px; }
.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3 { font-weight: 800; margin: 14px 0 8px; line-height: 1.3; }
.rich-text-content h1:first-child,
.rich-text-content h2:first-child,
.rich-text-content h3:first-child { margin-top: 0; }
.rich-text-content h1 { font-size: 19px; }
.rich-text-content h2 { font-size: 17px; }
.rich-text-content h3 { font-size: 15px; }
.rich-text-content blockquote {
    margin: 0 0 10px;
    padding: 6px 14px;
    border-left: 3px solid var(--brand-primary-light);
    color: var(--app-text-muted);
}
.rich-text-content code {
    background: var(--app-bg);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12.5px;
}
.rich-text-content pre {
    background: var(--app-text);
    color: #fff;
    border-radius: var(--app-radius-sm);
    padding: 10px 12px;
    font-size: 12.5px;
    overflow-x: auto;
    margin: 0 0 10px;
}
.rich-text-content pre code { background: transparent; color: inherit; padding: 0; }
.rich-text-content a { color: var(--brand-primary); word-break: break-all; }

/* The Quill editor itself, styled to match the app's rounded inputs. */
.rich-editor-wrap .ql-toolbar.ql-snow {
    border: 1px solid var(--app-border);
    border-bottom: none;
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
    background: var(--app-bg);
}
.rich-editor-wrap .ql-container.ql-snow {
    border: 1px solid var(--app-border);
    border-radius: 0 0 var(--app-radius-sm) var(--app-radius-sm);
    background: var(--app-surface);
    font-family: inherit;
    font-size: 14px;
}
.rich-editor-wrap .ql-editor {
    min-height: 260px;
    line-height: 1.55;
    resize: vertical;   /* lets the user drag the bottom edge taller too */
    overflow-y: auto;
}
.rich-editor-wrap .ql-editor.ql-blank::before { color: #9aa1af; font-style: normal; }
.rich-editor-wrap .ql-snow.ql-toolbar button,
.rich-editor-wrap .ql-snow .ql-picker-label { border-radius: 4px; }
.rich-editor-wrap.is-invalid .ql-toolbar.ql-snow,
.rich-editor-wrap.is-invalid .ql-container.ql-snow { border-color: var(--brand-danger); }