/* Small tweaks on top of Bootstrap, aimed at tablets used in the field. */

body {
    background-color: #f5f6f8;
}

/* Bigger tap targets for gloved/field use. Bootstrap's .btn is
   display:inline-block by default, so the extra height min-height adds
   over a button's natural ~36px content box was landing entirely below
   the text (inline-block content flows from the top, it doesn't centre
   into extra height on its own) - the label always sat visibly above
   centre. inline-flex + centering fixes that without changing anything
   else about how buttons lay out next to each other (still an inline-level
   box, so .btn-group's adjacency margins and wrapping both still work). */
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A button's icon+label markup is always "<i class='bi ...'></i> Label"
       - a literal space between them. That space used to just be ordinary
       mid-line text, but flex blockifies the icon and the label text into
       two separate anonymous boxes, each starting its own line for
       whitespace purposes - so the leading space on the label box gets
       collapsed away as "start of line" whitespace, gluing the icon and
       label together with no gap at all. `gap` restores a consistent
       space between them (harmless on a plain single-content button, since
       gap only ever applies between items). */
    gap: .375rem;
}
.form-control, .form-select {
    min-height: 44px;
}
/* File inputs render as an OS button + filename rather than text, so the
   blanket min-height above just adds dead space above/below them instead of
   a bigger tap target - centre the content instead of stretching it. */
.form-control[type="file"] {
    display: flex;
    align-items: center;
}

.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* A stat card wrapped in a link (e.g. the office dashboard's "Attention
   Needed" cards) gets a subtle hover lift so it reads as clickable without
   needing an underline or link-blue text. */
a:hover > .card {
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d3b66 0%, #144a7c 100%);
}
.login-card {
    max-width: 400px;
    width: 100%;
}

/* Signature capture */
.signature-pad-wrap {
    background: #fff;
    border: 2px dashed #adb5bd;
    border-radius: .5rem;
    touch-action: none;
}
.signature-pad-wrap canvas {
    width: 100%;
    height: 200px;
    display: block;
    touch-action: none;
}

.section-title {
    font-weight: 600;
    border-bottom: 2px solid #0d3b66;
    padding-bottom: .25rem;
    margin-bottom: 1rem;
}

/* Parts Required notes (read-only view): keep a long expanded note from
   stretching the table too wide, while a short one just sits inline. */
.note-cell {
    max-width: 260px;
    word-break: break-word;
}
.note-toggle {
    white-space: nowrap;
}

.readonly-field-value {
    background: #fff;
    border: 1px solid #e2e5e9;
    border-radius: .375rem;
    padding: .5rem .75rem;
    min-height: 44px;
}

/* This Bootstrap build ships with no built-in [readonly] styling, so a
   locked field (currently only the catalogue-picked Parts Used/Required
   fields - see the .part-add-btn handler in assets/js/app.js) looked
   identical to a normal editable one. Grey it out so it visibly reads as
   locked rather than just quietly rejecting typed input. (Only
   .form-control - <select> has no native readonly attribute, and this app
   never applies readonly to anything else.) */
.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
    cursor: default;
}

@media print {
    nav, .no-print { display: none !important; }
}