/* ===========================================================================
   Paposend dashboard — design layer
   ===========================================================================

   Loaded last, after bootstrap.min.css and the theme's app.min.css, so this
   wins without any vendored file being edited. Delete this file and the
   dashboard returns to the stock theme exactly.

   Modelled on greattimes-frontend's design system: tokens as the single
   source of truth, contrast checked and recorded rather than assumed, a
   deliberate radius and button scale, and restraint about shadows.

   What is NOT carried over is GreatTimes' palette. Their maroon/orange/olive
   is their own brand identity from their brand manual; Paposend's is the
   green #88c540 and slate #32325d already in this theme. The system travels,
   the colours do not.

   Never hardcode a colour below — add a token.
   ======================================================================== */


/* ---------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------ */

:root {
    /* Brand. The green is the theme's own (.btn-primary, .info, .primary). */
    --pp-primary:            #88c540;
    --pp-primary-hover:      #76ad36;
    --pp-primary-light:      #eef7e3;

    /* White on #88c540 is 2.08:1 — it fails WCAG AA (4.5:1) outright, and
       every primary button in the product ships that way today. Slate on the
       same green is 5.78:1 and is already part of this palette, so the fix
       needs no new colour. Measured, not guessed. */
    --pp-primary-foreground: #32325d;

    /* Surfaces */
    --pp-surface:            #ffffff;
    --pp-surface-alt:        #f7f9fa;
    --pp-surface-hover:      rgba(50, 50, 93, .04);

    /* Text. Slate on white is 12.0:1. */
    --pp-foreground:         #32325d;
    --pp-text-secondary:     #5a6478;   /* 6.6:1 — body-weight safe */
    /* 4.56:1. The theme's own #9c9c9c is 2.75:1 and fails for the helper
       copy it is actually used on, so muted text stops here. */
    --pp-text-muted:         #6b7785;

    /* Borders */
    --pp-border:             #e6e9ed;
    --pp-border-strong:      #cfd4db;

    /* Semantic — kept close to the theme's existing icon colours */
    --pp-danger:             #d9534f;
    --pp-warning:            #ff9800;
    --pp-info:               #2196f3;

    /* Radius scale, following greattimes: small controls 8, buttons and
       fields 12, panels 16. */
    --pp-radius-sm:          8px;
    --pp-radius:            12px;
    --pp-radius-lg:         16px;
}


/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

/* The content column is col-xs-7, which in this Bootstrap is 58% at every
   width. Below 767px the theme already collapses both asides into off-canvas
   drawers and widens the sibling column to 100%, so phones are fine. The gap
   is the tablet range: the right-hand account panel hides from 991px down
   while the content column stays at 58%, leaving a third of the screen bare. */
@media (max-width: 991px) {
    .row-col > #detail {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    /* The row actions are 24px icons sitting next to each other — edit,
       message, delete. That is well under the ~44px a thumb needs, and the
       one you miss is destructive. */
    #tabledata a,
    .table a[data-toggle="modal"] {
        display: inline-block;
        min-width: 44px;
        min-height: 44px;
        line-height: 44px;
        text-align: center;
        vertical-align: middle;
    }

    /* 44px to tap; 16px because iOS zooms the viewport on focusing anything
       smaller. greattimes carries the same rule for the same reason. */
    .form-control,
    .btn {
        min-height: 44px;
        font-size: 16px;
    }

    .list-body .btn {
        display: block;
        width: 100%;
        margin: 0 0 .5rem;
    }
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table td,
.table-responsive > .table th {
    white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   Controls
   ------------------------------------------------------------------------ */

/* greattimes' md button: medium weight, generous horizontal padding, a
   rounded-xl corner, and a visible focus ring. The theme's buttons disagree
   with each other on height and padding, which is most of why a row of them
   looks unconsidered. */
.btn {
    padding: .5rem 1rem;
    font-weight: 500;
    font-size: .875rem;
    letter-spacing: .01em;
    border-radius: var(--pp-radius);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn + .btn {
    margin-left: .4rem;
}

.btn-lg {
    padding: .7rem 1.5rem;
    font-size: 1rem;
}

.btn-sm {
    padding: .3rem .75rem;
    font-size: .8125rem;
    border-radius: var(--pp-radius-sm);
}

/* Keyboard users currently get whatever the browser draws, which the theme
   suppresses in places. */
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(136, 197, 64, .45);
}

/* The contrast fix. These three all paint the brand green as a background and
   put white on top of it. */
.btn-primary,
.btn.info,
.btn.primary {
    background-color: var(--pp-primary);
    border-color: var(--pp-primary);
    color: var(--pp-primary-foreground);
}

.btn-primary:hover,
.btn.info:hover,
.btn.primary:hover {
    background-color: var(--pp-primary-hover);
    border-color: var(--pp-primary-hover);
    color: var(--pp-primary-foreground);
}

/* A disabled button is usually mid-request. It should read as inert rather
   than merely faded. */
.btn[disabled],
.btn:disabled {
    opacity: .5;
    pointer-events: none;
}

/* Fields. Rounded to match the buttons beside them, with a focus state that
   says which one has the cursor. */
.form-control {
    border-radius: var(--pp-radius-sm);
    border-color: var(--pp-border);
    color: var(--pp-foreground);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px rgba(136, 197, 64, .18);
}

.form-control::placeholder {
    color: var(--pp-text-muted);
}

.form-group {
    margin-bottom: 1.25rem;
}

/* greattimes' field label: small, uppercase, tracked, muted — it names the
   field without competing with its value. Their size is 11px on a muted grey
   that clears AA; this keeps the treatment at a size that still reads. */
.form-group > label,
label[for] {
    display: block;
    margin-bottom: .4rem;
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pp-text-muted);
}

/* Helper copy under a field is guidance, not content. */
.form-group small.text-muted,
small.text-muted {
    display: block;
    margin-top: .4rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--pp-text-muted);
    text-transform: none;
    letter-spacing: 0;
}


/* ---------------------------------------------------------------------------
   Surfaces
   ------------------------------------------------------------------------ */

/* greattimes' card: a real border, a 16px radius, and a shadow so faint it
   reads as depth rather than decoration. */
.modal-content,
.list-item.row-col.padding {
    border-radius: var(--pp-radius-lg);
    border: 1px solid var(--pp-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.modal-content {
    overflow: hidden;
}

.modal-body {
    padding: 1.25rem;
}

.modal-header,
.modal-footer {
    padding: .9rem 1.25rem;
    border-color: var(--pp-border);
}

.modal-title {
    font-weight: 600;
    font-size: 1rem;
}


/* ---------------------------------------------------------------------------
   Content
   ------------------------------------------------------------------------ */

.navbar .text-md {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pp-foreground);
}

/* Tables carry the real work of this product — a thousand-row contact list is
   the main screen. Headers should read as headers, rows should have room, and
   the row under the cursor should be obvious. */
.table > thead > tr > th {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* the secondary tone, not the muted one: 6.6:1, because a column header
       is small text that people actually read */
    color: var(--pp-text-secondary);
    border-bottom: 1px solid var(--pp-border);
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.table > tbody > tr > td {
    padding-top: .75rem;
    padding-bottom: .75rem;
    vertical-align: middle;
    border-top-color: var(--pp-border);
}

.table > tbody > tr:hover {
    background-color: var(--pp-surface-hover);
}

/* Empty states are informational, not errors. */
.list-body > p.m-t {
    color: var(--pp-text-muted);
}

/* Tabs, as on the send page. */
.nav-tabs {
    border-bottom: 1px solid var(--pp-border);
    margin-bottom: .75rem;
}

.nav-tabs .nav-link {
    font-weight: 500;
    font-size: .875rem;
    padding: .6rem 1rem;
    color: var(--pp-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--pp-foreground);
    border-bottom-color: var(--pp-border-strong);
}

.nav-tabs .nav-link.active {
    color: var(--pp-foreground);
    background: transparent;
    border-bottom-color: var(--pp-primary);
}