/* AMY app theme — navy nautical, mobile-first. UI text is in Italian. */
:root {
    --amy-navy: #0E2A47;
    --amy-navy-2: #16395e;
    --amy-accent: #1D6FB8;
    --amy-bg: #f4f6f8;
    --amy-surface: #ffffff;
    --amy-border: #e3e7ec;
    --amy-text: #1a2330;
    --amy-muted: #6b7785;
    --amy-danger: #b3261e;
    --amy-radius: 10px;
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    background: var(--amy-bg);
    color: var(--amy-text);
}

h1:focus {
    outline: none;
}

/* Phone-like centered column so it looks like an app even in a desktop browser. */
.amy-app {
    max-width: 460px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--amy-surface);
    display: flex;
    flex-direction: column;
}

.amy-header {
    background: var(--amy-navy);
    color: #fff;
    padding: 14px 18px;
}

.amy-header .amy-brand {
    font-size: 11px;
    letter-spacing: 2px;
    opacity: .7;
}

.amy-header .amy-title {
    font-size: 18px;
    font-weight: 500;
}

.amy-screen {
    padding: 20px 18px;
    flex: 1;
}

.amy-label {
    display: block;
    font-size: 12px;
    color: var(--amy-muted);
    margin-bottom: 5px;
}

.amy-field {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    padding: 12px 14px;
    font-size: 16px;
    color: var(--amy-text);
    background: var(--amy-surface);
}

.amy-field:focus {
    outline: none;
    border-color: var(--amy-accent);
    box-shadow: 0 0 0 3px rgba(29, 111, 184, .15);
}

.amy-form-row {
    margin-bottom: 16px;
}

.amy-btn-primary {
    width: 100%;
    background: var(--amy-navy);
    color: #fff;
    border: none;
    border-radius: var(--amy-radius);
    padding: 13px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.amy-btn-primary:hover { background: var(--amy-navy-2); }
.amy-btn-primary:active { transform: scale(.99); }
.amy-btn-primary:disabled { opacity: .55; cursor: default; }

.amy-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--amy-muted);
    font-size: 12px;
    margin: 18px 0;
}
.amy-divider::before, .amy-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--amy-border);
}

.amy-biometric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--amy-accent);
    font-size: 13px;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
}

.amy-error {
    background: #fde8e6;
    color: var(--amy-danger);
    border-radius: var(--amy-radius);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* A screen's error, pinned to the top of the screen (D119): it is seen wherever the page
   is scrolled to. Below the sheets and the PIN panel, which carry their own message. */
.amy-error-banner {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 436px;
    box-sizing: border-box;
    z-index: 30;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 6px 10px 14px;
    background: #fde8e6;
    color: var(--amy-danger);
    border: 1px solid #f5c2bd;
    border-radius: var(--amy-radius);
    box-shadow: 0 4px 14px rgba(14, 42, 71, .18);
    font-size: 13px;
    animation: amy-error-banner-in .18s ease-out;
}

.amy-error-banner-text {
    flex: 1;
    padding-top: 2px;
}

.amy-error-banner-close {
    flex: none;
    width: 28px;
    height: 28px;
    margin-top: -4px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--amy-danger);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.amy-error-banner-close:hover { background: rgba(179, 38, 30, .1); }

@keyframes amy-error-banner-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.amy-brandmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 28px;
}

.amy-hint {
    font-size: 12px;
    color: var(--amy-muted);
    text-align: center;
    margin-top: 18px;
}

/* --- Home dashboard --- */
.amy-welcome {
    margin-bottom: 18px;
}

.amy-welcome-name {
    font-size: 22px;
    font-weight: 500;
}

.amy-welcome-role {
    color: var(--amy-muted);
    font-size: 13px;
    margin-top: 2px;
}

.amy-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--amy-muted);
    margin: 28px 0 12px;
}

.amy-muted-box {
    background: var(--amy-bg);
    border-radius: var(--amy-radius);
    padding: 18px;
    color: var(--amy-muted);
    font-size: 14px;
    text-align: center;
}

.amy-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.amy-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
    background: var(--amy-surface);
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    padding: 14px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.amy-list-item:hover {
    border-color: var(--amy-accent);
    background: #fafcfe;
}

.amy-list-item:active { transform: scale(.995); }

.amy-list-hours {
    font-size: 12px;
    color: var(--amy-accent);
    margin-top: 5px;
}

.amy-list-main {
    flex: 1;
    min-width: 0;
}

.amy-list-title {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amy-list-sub {
    font-size: 12px;
    color: var(--amy-muted);
    margin-top: 3px;
}

.amy-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.amy-badge-draft {
    background: #eef1f4;
    color: var(--amy-muted);
}

.amy-badge-completed {
    background: #e4f1e6;
    color: #2b6b38;
}

.amy-badge-submitted {
    background: #e6eefa;
    color: var(--amy-accent);
}

.amy-btn-text {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--amy-muted);
    font-size: 14px;
    padding: 14px;
    margin-top: 28px;
    cursor: pointer;
}

.amy-btn-text:hover { color: var(--amy-danger); }

/* --- Header with a back button --- */
.amy-header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.amy-back {
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.amy-back:hover { background: rgba(255, 255, 255, .22); }

/* --- New-job form --- */
.amy-optional {
    color: var(--amy-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.amy-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.amy-pick-item {
    text-align: left;
    width: 100%;
    background: var(--amy-surface);
    border: 1.5px solid var(--amy-border);
    border-radius: var(--amy-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.amy-pick-item:hover { border-color: #c7cfd8; }

.amy-pick-item.selected {
    border-color: var(--amy-accent);
    background: #eef5fc;
    box-shadow: 0 0 0 3px rgba(29, 111, 184, .12);
}

.amy-pick-title {
    font-size: 16px;
    font-weight: 500;
}

.amy-pick-sub {
    font-size: 12px;
    color: var(--amy-muted);
    margin-top: 2px;
}

/* The project chosen on a boat that has several: it is the line that says which of the
   three the operator is about to write on, so it carries more weight than the subtitle. */
.amy-pick-project {
    font-size: 13px;
    font-weight: 600;
    color: var(--amy-accent);
    margin-top: 2px;
}

.amy-textarea {
    min-height: 84px;
    resize: vertical;
    font-family: inherit;
}

/* --- Job detail --- */
.amy-job-card {
    background: var(--amy-bg);
    border-radius: var(--amy-radius);
    padding: 16px;
}

.amy-job-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.amy-job-name {
    flex: 1;
    font-size: 19px;
    font-weight: 500;
}

.amy-job-meta {
    font-size: 13px;
    color: var(--amy-muted);
    margin-top: 4px;
}

.amy-job-desc {
    font-size: 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--amy-border);
}

/* Hours entry: big touch targets for use on site. */
.amy-hours-block {
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    padding: 14px;
    margin-bottom: 14px;
}

.amy-hours-label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
}

/* Smaller variant for the secondary block: same gestures, less room. */
.amy-hours-block-small {
    padding: 10px 12px;
}

.amy-hours-block-small .amy-hours-label {
    font-size: 13px;
    margin-bottom: 8px;
}

.amy-hours-block-small .amy-stepper {
    gap: 10px;
}

.amy-hours-block-small .amy-step-btn {
    width: 44px;
    height: 44px;
    font-size: 22px;
}

.amy-hours-block-small .amy-step-jump {
    font-size: 15px;
}

.amy-hours-block-small .amy-step-value {
    font-size: 24px;
}

.amy-hours-block-small .amy-step-unit {
    font-size: 14px;
}

.amy-hours-block-small .amy-link-btn {
    padding: 8px 0 0;
    font-size: 12px;
}

.amy-stepper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.amy-step-btn {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border: 1.5px solid var(--amy-border);
    background: var(--amy-surface);
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: var(--amy-navy);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amy-step-btn:hover:not(:disabled) {
    border-color: var(--amy-accent);
    background: #eef5fc;
}

.amy-step-btn:active:not(:disabled) { transform: scale(.94); }

.amy-step-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* Quick jump: same touch target, lighter weight than the main +/- pair. */
.amy-step-jump {
    font-size: 17px;
    font-weight: 600;
    color: var(--amy-accent);
    background: #eef5fc;
    border-color: transparent;
}

.amy-step-jump:hover:not(:disabled) {
    border-color: var(--amy-accent);
}

.amy-step-value {
    flex: 1;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.amy-step-unit {
    font-size: 16px;
    color: var(--amy-muted);
    font-weight: 400;
}

.amy-link-btn {
    background: none;
    border: none;
    color: var(--amy-accent);
    font-size: 13px;
    padding: 10px 0 2px;
    cursor: pointer;
}

.amy-time-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.amy-time-row > div { flex: 1; }

.amy-total-recap {
    background: var(--amy-bg);
    border-radius: var(--amy-radius);
    padding: 14px;
    font-size: 15px;
    text-align: center;
    margin: 4px 0 18px;
}

.amy-total-split {
    display: block;
    font-size: 12px;
    color: var(--amy-muted);
    margin-top: 3px;
}

/* Top bar with an action on the right (e.g. Esci). */
.amy-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.amy-header-titles {
    min-width: 0;
}

.amy-top-btn {
    flex-shrink: 0;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.amy-top-btn:hover { background: rgba(255, 255, 255, .24); }

/* --- Boat picker: closed by default, opens as a sheet with a filter --- */
.amy-picker-open {
    width: 100%;
    text-align: left;
    background: var(--amy-surface);
    border: 1.5px dashed var(--amy-border);
    border-radius: var(--amy-radius);
    padding: 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--amy-muted);
    cursor: pointer;
    margin-top: 6px;
}

.amy-picker-open:hover {
    border-color: var(--amy-accent);
    color: var(--amy-accent);
}

.amy-chosen {
    width: 100%;
    margin-top: 6px;
}

.amy-chosen-change {
    font-size: 11px;
    color: var(--amy-accent);
    margin-top: 6px;
}

.amy-pick-distance {
    float: right;
    font-size: 12px;
    font-weight: 600;
    color: var(--amy-accent);
    background: #eef5fc;
    border-radius: 999px;
    padding: 2px 9px;
}

.amy-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 42, 71, .45);
    z-index: 40;
}

/* Sheets sit in the middle of the screen: they ask for a choice, and the eye is there. */
.amy-sheet {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 420px;
    max-height: 80vh;
    background: var(--amy-surface);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    z-index: 41;
    display: flex;
    flex-direction: column;
}

.amy-sheet-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid var(--amy-border);
}

.amy-sheet-head .amy-field {
    flex: 1;
}

/* Second step of the picker: the boat is settled, so its name titles the sheet. */
.amy-sheet-title {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--amy-navy);
}

.amy-sheet-body {
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Quick entry --- */
.amy-entry-head {
    background: var(--amy-bg);
    border-radius: var(--amy-radius);
    padding: 14px 16px;
}

.amy-entry-head-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Clocked work hours, folded into the header: a line and the stretches, no block. */
.amy-entry-work {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--amy-border);
}

.amy-entry-work-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.amy-entry-work-label {
    font-size: 13px;
    color: var(--amy-muted);
}

.amy-entry-work-value {
    font-size: 16px;
    font-weight: 600;
}

.amy-entry-work-fix {
    margin-left: auto;
    padding: 0;
    font-size: 12px;
}

.amy-entry-work .amy-clock-stretches {
    margin-top: 8px;
}

.amy-entry-head-main {
    flex: 1;
    min-width: 0;
}

/* The day's total, kept to the corner of the header instead of a block of its own. */
.amy-entry-total {
    flex-shrink: 0;
    text-align: right;
}

.amy-entry-total-value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
}

.amy-entry-total-split {
    font-size: 11px;
    color: var(--amy-muted);
    margin-top: 3px;
    white-space: nowrap;
}

.amy-entry-project {
    font-size: 15px;
    font-weight: 500;
}

.amy-entry-day {
    font-size: 13px;
    color: var(--amy-muted);
    margin-top: 3px;
}

.amy-entry-existing {
    color: var(--amy-accent);
}

/* The boat's port, shown read-only: the operator no longer types the place. */
.amy-entry-place {
    font-size: 13px;
    color: var(--amy-muted);
    margin-top: 3px;
}

/* --- Project badge on the home screen (D42) --- */
.amy-badge-card {
    display: flex;
    flex-direction: column;
    background: var(--amy-surface);
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    overflow: hidden;
}

.amy-badge-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* Shown only while a stretch is running: filling the sheet in must not require
   going back through the clock sheet. */
.amy-badge-compile {
    border: none;
    border-top: 1px solid var(--amy-border);
    background: var(--amy-bg);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--amy-navy);
    padding: 11px 15px;
    text-align: center;
    cursor: pointer;
}

.amy-badge-compile:hover {
    background: #e9f1f9;
}

.amy-badge-card:hover {
    border-color: var(--amy-accent);
}

/* Internal work is set apart with a soft left edge, without being a special case. */
.amy-badge-card.internal {
    border-left: 4px solid var(--amy-muted);
}

/* A clocked stretch running here: visible at a glance from the home list (D57). */
.amy-badge-card.running {
    border-left: 4px solid var(--amy-accent);
    background: #f2f8fd;
}

/* --- Several projects open on one boat --- */
/* The boat is stated once, as a heading, and its projects hang under it. Without this
   the operator gets three identical badges and no way to tell which is which. */
.amy-boat-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    background: var(--amy-surface);
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
}

.amy-boat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 3px 2px;
}

.amy-boat-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--amy-navy);
}

.amy-boat-count {
    font-size: 12px;
    color: var(--amy-muted);
    white-space: nowrap;
}

/* Nested badges sit on the group's own surface, so they need their own ground. */
.amy-boat-group .amy-badge-card {
    background: var(--amy-bg);
}

/* A figure in euros at the end of a list row: right-aligned, so a column of them
   can be read down without the eye hunting for the decimal point. */
.amy-money {
    font-size: 15px;
    font-weight: 600;
    color: var(--amy-navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: center;
    padding-left: 12px;
}

/* Where the operator left off on this boat: a hint, never a lock. */
.amy-hours-badge.last {
    background: #e6f1fa;
    color: var(--amy-accent);
    font-weight: 600;
}

/* --- Clock sheet (D57) --- */
.amy-clock-sheet {
    max-width: 400px;
    padding: 16px;
    gap: 10px;
    overflow-y: auto;
}

/* --- Notes sheet on the job screen --- */
.amy-notes-sheet {
    max-width: 420px;
    padding: 16px;
    gap: 10px;
    overflow-y: auto;
}

.amy-notes-field {
    min-height: 140px;
}

/* An action parked at the end of the bar, clear of the screen below. */
.amy-header-nav .amy-top-btn {
    margin-left: auto;
}

/* --- Hours screen: editable stretches --- */
.amy-stretch-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.amy-stretch-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: end;
    background: var(--amy-surface);
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    padding: 10px 12px;
}

.amy-stretch-remove {
    background: none;
    border: none;
    color: var(--amy-muted);
    font-size: 22px;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
}

.amy-stretch-remove:hover {
    color: var(--amy-danger);
}

.amy-clock-head {
    padding-bottom: 4px;
}

.amy-clock-boat {
    font-size: 17px;
    font-weight: 600;
}

.amy-clock-state {
    font-size: 13px;
    color: var(--amy-muted);
    margin-top: 3px;
}

/* --- Materials --- */
.amy-material-qty {
    flex-shrink: 0;
    align-self: center;
    padding-left: 12px;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amy-material-qty span {
    font-size: 12px;
    font-weight: 400;
    color: var(--amy-muted);
}

.amy-material-sheet {
    padding: 0;
    gap: 0;
    overflow-x: hidden;
}

/* The second step is a form: its own padded box, so nothing is 100% wide *and*
   pushed sideways by a margin — which is what produced a horizontal scrollbar. */
.amy-sheet-form {
    padding: 16px;
    overflow-y: auto;
}

.amy-sheet-form > * {
    max-width: 100%;
}

/* The search must be free to shrink, or a wide button beside it widens the sheet. */
.amy-sheet-head .amy-field {
    min-width: 0;
}

/* Typed quantity: the keyboard only when the amount is not a couple of taps away. */
.amy-qty-field {
    flex: 1;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
}

/* --- Two lists in one screen: the catalog and what is still loose text --- */
.amy-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.amy-tab {
    flex: 1;
    background: var(--amy-bg);
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    font-family: inherit;
    font-size: 13px;
    color: var(--amy-muted);
    padding: 10px 8px;
    cursor: pointer;
}

.amy-tab.active {
    background: var(--amy-navy);
    border-color: var(--amy-navy);
    color: #fff;
    font-weight: 600;
}

/* A wording waiting to become a catalog item, with its two ways out. */
.amy-pending-card {
    background: var(--amy-surface);
    border: 1px solid var(--amy-border);
    border-left: 4px solid #c98a12;
    border-radius: var(--amy-radius);
    padding: 12px 14px;
}

.amy-pending-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.amy-pending-actions .amy-mini-btn {
    flex: 1;
}

/* Sits beside the search field: same height, deliberately not a primary action. */
.amy-mini-free {
    flex-shrink: 0;
    white-space: nowrap;
}

.amy-btn-danger {
    color: var(--amy-danger);
}

/* --- Office hours list --- */
.amy-hours-row {
    cursor: default;
}

.amy-hours-row.manual {
    border-left: 4px solid #c98a12;
}

.amy-hours-badge {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 8px;
    vertical-align: middle;
}

.amy-hours-badge.manual {
    background: #fff2d6;
    color: #8a5d05;
}

.amy-hours-badge.clock {
    background: #e6f1fa;
    color: var(--amy-accent);
}

/* Clocked, but timed by the phone: worth less than the server's clock and more than a
   written time, so it sits between the two rather than sounding like an error (D82). */
.amy-hours-row.offline {
    border-left: 4px solid #6b8fb5;
}

.amy-hours-badge.offline {
    background: #eef2f7;
    color: #44617f;
}

/* The clocked total, stated rather than adjustable. */
.amy-clock-total {
    font-size: 26px;
    font-weight: 600;
    margin-top: 6px;
}

.amy-clock-stretches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.amy-clock-chip {
    font-size: 12px;
    color: var(--amy-text);
    background: var(--amy-bg);
    border: 1px solid var(--amy-border);
    border-radius: 999px;
    padding: 4px 10px;
}

.amy-clock-elsewhere,
.amy-clock-pending {
    background: #fff8e6;
    border: 1px solid #f0d79a;
    border-radius: var(--amy-radius);
    padding: 12px 14px;
    font-size: 13px;
}

.amy-clock-pending-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.amy-clock-pending-text {
    color: var(--amy-text);
}

.amy-clock-pending-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.amy-clock-pending-row .amy-field {
    flex: 1;
}

.amy-badge-main {
    flex: 1;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    color: inherit;
    padding: 15px;
    cursor: pointer;
}

.amy-badge-main:hover { background: #fafcfe; }
.amy-badge-main:active { background: #f1f6fb; }
.amy-badge-main:disabled { opacity: .55; cursor: default; }

.amy-badge-name {
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amy-badge-sub {
    font-size: 12px;
    color: var(--amy-muted);
    margin-top: 3px;
}

.amy-badge-hours {
    font-size: 12px;
    color: var(--amy-accent);
    margin-top: 6px;
}

/* Separate target: looking at the project must not start filling it in. */
.amy-view-btn {
    flex-shrink: 0;
    width: 68px;
    background: var(--amy-bg);
    border: none;
    border-left: 1px solid var(--amy-border);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--amy-navy);
    cursor: pointer;
}

.amy-view-btn:hover {
    background: #e8eff7;
    color: var(--amy-accent);
}

/* --- Back-office (D45): kept apart, it moves to a desktop web layout later --- */
.amy-admin-header {
    background: var(--amy-navy-2);
}

.amy-btn-secondary {
    width: 100%;
    background: var(--amy-surface);
    color: var(--amy-navy);
    border: 1.5px solid var(--amy-border);
    border-radius: var(--amy-radius);
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    margin-top: 26px;
}

.amy-btn-secondary:hover {
    border-color: var(--amy-accent);
    background: #f7fafd;
}

/* --- The boat's position, folded into its card --- */
.amy-position-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--amy-border);
}

.amy-position-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--amy-muted);
    font-variant-numeric: tabular-nums;
}

.amy-position-note {
    font-size: 12px;
    color: var(--amy-accent);
    margin-top: 8px;
}

/* --- Ways in that exist before the function behind them does --- */
.amy-soon-row {
    display: flex;
    gap: 8px;
}

.amy-soon-row .amy-btn-secondary {
    flex: 1;
    margin-top: 10px;
}

.amy-soon,
.amy-soon:hover {
    border-style: dashed;
    color: var(--amy-muted);
    background: var(--amy-surface);
    border-color: var(--amy-border);
    cursor: default;
}

/* A row that is not itself tappable, but holds its own action button. */
.amy-list-static {
    cursor: default;
}

.amy-list-static:hover {
    border-color: var(--amy-border);
    background: var(--amy-surface);
}

.amy-mini-btn {
    flex-shrink: 0;
    background: var(--amy-surface);
    border: 1.5px solid var(--amy-border);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--amy-navy);
    cursor: pointer;
}

.amy-mini-btn:hover:not(:disabled) {
    border-color: var(--amy-accent);
    color: var(--amy-accent);
}

.amy-mini-btn:disabled {
    opacity: .5;
    cursor: default;
}

/* --- Blazor framework UI (loader + error bar) --- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--amy-navy);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Caricamento");
}

/* --- Session expired (D80) --- */

/* Above every sheet: until the PIN is in, nothing underneath can be touched. */
.amy-reauth-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 42, 71, .55);
    z-index: 60;
}

.amy-reauth {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 380px;
    background: var(--amy-surface);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    z-index: 61;
    display: flex;
    flex-direction: column;
}

/* Shown while the session is being picked back up at startup. */
.amy-waiting {
    text-align: center;
    padding-top: 40px;
    color: var(--amy-muted);
}

/* --- Da verificare (D84, D85) --- */

.amy-submission {
    cursor: default;
    border-left: 4px solid #6b8fb5;
}

/* The two versions of the day, side by side: the point of the screen is the comparison,
   so they are shown next to each other and wrap on a phone rather than stacking by default. */
.amy-compare {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.amy-compare-side {
    flex: 1 1 160px;
    background: var(--amy-bg);
    border-radius: 10px;
    padding: 10px;
}

.amy-compare-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--amy-muted);
    margin-bottom: 4px;
}

.amy-compare-text {
    font-size: 13px;
    margin-top: 4px;
}

.amy-compare-empty {
    font-size: 13px;
    color: var(--amy-muted);
}

/* --- Senza rete (D82) --- */

/* Sits under the header, across the top of whatever screen is open: the operator has to
   be able to tell at a glance that AMY cannot be reached, and that nothing was lost. */
.amy-offline-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    background: #fff2d6;
    color: #6b4a05;
}

.amy-offline-bar.sending {
    background: #e6f1fa;
    color: #1d4a72;
}

.amy-offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c98a12;
    flex: none;
}

.amy-offline-bar.sending .amy-offline-dot {
    background: var(--amy-accent);
}

.amy-offline-retry {
    margin-left: auto;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

/* --- Pianta della barca (D86) --- */

.amy-plan-row {
    cursor: default;
}

/* The drawing is the point of the row, so it is shown and not merely named. */
/* The box a plan is drawn in. A PDF has no size until it is drawn, so the frame gives it
   a width to fit and the drawing decides its own height (D91). */
.amy-plan-frame {
    width: 100%;
    margin-bottom: 8px;
}

/* In place of the picture, before the plan has ever been opened full screen on this
   device (D109): the picture is made from that first opening, and until then the frame
   says which drawing it is and offers to open it. */
.amy-plan-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 140px;
    padding: 16px;
    border: 1px dashed var(--amy-border);
    border-radius: 8px;
    background: #fff;
    color: var(--amy-text);
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.amy-plan-placeholder-name {
    font-size: 13px;
    color: var(--amy-muted);
    word-break: break-word;
}

.amy-plan-placeholder-open {
    font-weight: 600;
    color: var(--amy-accent);
}

.amy-plan-image {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--amy-border);
    background: #fff;
    margin-bottom: 8px;
}

/* A file picker looks like a button and hides the input, which no styling can tame. */
.amy-file-button {
    display: block;
    text-align: center;
    cursor: pointer;
}

.amy-file-button input[type="file"] {
    display: none;
}

/* --- La pianta a schermo intero (D92) --- */

/* Out of the app's column and over everything: on a phone a drawing of a whole boat needs
   the screen it can get. */
.amy-plan-full {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: #0e2a47;
    display: flex;
    flex-direction: column;
}

.amy-plan-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    color: #fff;
    background: var(--amy-navy);
    flex: none;
}

.amy-plan-name {
    flex: 1;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .85;
}

/* The zoom, as a share of "the whole drawing on screen". Fixed width so the bar does not
   twitch while the number runs during a pinch. */
.amy-plan-zoom {
    flex: none;
    min-width: 58px;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .9);
}

.amy-plan-tool {
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    cursor: pointer;
    flex: none;
}

.amy-plan-tool:hover {
    background: rgba(255, 255, 255, .22);
}

/* The stage holds the drawing and swallows the gestures. touch-action: none is what stops
   the browser from scrolling the page while two fingers are pinching the plan. */
.amy-plan-stage {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #fff;
    touch-action: none;
}

.amy-plan-stage-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.amy-plan-stage-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* I pezzi, su un piano tutto loro (D100). Sta sopra il disegno, è grande quanto lo schermo
   e non viene mai trasformato: così mettere un pezzo ridisegna dei cerchi e non una pianta
   intera, e i pallini restano della stessa dimensione a qualunque ingrandimento.
   I tocchi li riceve lo stage sotto, non questo. */
.amy-plan-markers {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.amy-plan-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--amy-muted);
    font-size: 14px;
    pointer-events: none;
}

.amy-plan-foot {
    flex: none;
    padding: 8px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
    text-align: center;
}

/* The picture in the page invites the tap that opens the viewer. */
.amy-plan-image {
    cursor: zoom-in;
}

/* --- Mettere i pezzi sulla pianta (D95, D99) --- */

/* The panel under the drawing, where the office says which piece it is placing. It takes
   the room it needs and no more: the drawing is what has to stay big. */
.amy-place-panel {
    flex: none;
    max-height: 42vh;
    overflow-y: auto;
    padding: 10px 12px 14px;
    background: var(--amy-navy);
    color: #fff;
}

.amy-place-head {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.amy-place-sub {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

.amy-place-note {
    font-size: 13px;
    line-height: 1.4;
    background: rgba(255, 255, 255, .12);
    border-radius: 9px;
    padding: 8px 10px;
    margin-bottom: 10px;
}

.amy-place-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.amy-place-btn {
    flex: 1 1 46%;
    margin: 0;
}

/* The pieces still to place, as a run of buttons: tapping one says "this is the one I am
   about to point at". */
.amy-place-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.amy-place-chip {
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
}

.amy-place-chip:hover {
    background: rgba(255, 255, 255, .18);
}

/* --- La scheda del pezzo, in Check list (D103) --- */

/* Una riga per fase: il nome a sinistra con chi l'ha segnata, i tre stati a destra. */
.amy-phase-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.amy-phase-name {
    font-size: 14px;
    line-height: 1.3;
}

/* A mark made with no network, still in the queue (D107): the same amber as the offline
   bar, because it is the same thing — recorded here, not yet on the server. */
.amy-waiting-mark {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(201, 138, 18, .25);
    color: #f3c460;
}

.amy-phase-buttons {
    display: flex;
    gap: 6px;
    flex: none;
}

/* Bottoni grandi abbastanza da colpirli con il guanto: in cantiere si lavora così. */
.amy-phase-btn {
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
}

.amy-phase-btn:hover {
    background: rgba(255, 255, 255, .15);
}

/* Lo stato scelto si vede senza leggere: stessi colori dei pallini sulla pianta. */
.amy-phase-btn-on {
    border-color: transparent;
    color: #03173d;
}

.amy-phase-todo {
    background: #ffffff;
}

.amy-phase-done {
    background: #19a974;
    color: #fff;
}

.amy-phase-rework {
    background: #e7401f;
    color: #fff;
}

.amy-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    margin-top: 6px;
}

.amy-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: -1px;
    border: 1px solid rgba(0, 0, 0, .35);
}

.amy-dot-todo {
    background: #ffffff;
}

.amy-dot-partial {
    background: #ffc400;
}

.amy-dot-done {
    background: #19a974;
}

.amy-dot-rework {
    background: #e7401f;
}

/* The provisional PIN, shown once to the office (D114): big enough to read out over the
   phone without mistaking a digit. */
.amy-pin-reveal {
    margin: 18px 0 8px;
    padding: 18px 12px;
    text-align: center;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--amy-navy);
    background: var(--amy-surface);
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
}

/* The map the office picks a boat's position on (D118). */
.amy-map {
    height: 360px;
    margin: 4px 0 8px;
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    overflow: hidden;
}

/* --- Rapportini (D123) --- */

/* Today's closed jobs: one thing they still accept, materials, goes with the signature. */
.amy-report-warning {
    margin-top: 6px;
    font-size: 12px;
    color: #6b4a05;
    background: #fff8e6;
    border-radius: 6px;
    padding: 6px 8px;
}

/* The moment the phone changes hands: said once, at the top of what the signer reads. */
.amy-report-handover {
    font-size: 13px;
    font-weight: 600;
    color: var(--amy-accent);
    margin-bottom: 12px;
}

.amy-report-job {
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 14px;
}

.amy-report-job-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-weight: 600;
}

.amy-report-job-head span:last-child {
    font-weight: 400;
    color: var(--amy-muted);
    white-space: nowrap;
}

.amy-report-job-text {
    margin-top: 4px;
    color: var(--amy-text);
}

.amy-report-job-material {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 13px;
    color: var(--amy-muted);
}

/* As wide as the screen and tall enough for a name: a signature, not a doodle. */
.amy-signature-pad {
    display: block;
    width: 100%;
    height: 220px;
    margin-top: 12px;
    background: #fff;
    border: 1.5px dashed #9aa7b4;
    border-radius: var(--amy-radius);
}

.amy-report-sign-row {
    display: flex;
    justify-content: flex-end;
}

.amy-report-done {
    text-align: center;
    padding: 24px 0 8px;
}

.amy-report-done-title {
    font-size: 20px;
    font-weight: 600;
}

.amy-report-done-number {
    margin-top: 4px;
    font-size: 15px;
    color: var(--amy-muted);
}

.amy-report-cancelled .amy-list-title,
.amy-report-cancelled .amy-list-sub {
    text-decoration: line-through;
    color: var(--amy-muted);
}

/* The office's reminder on an extra (D127): what is waiting for a signature. */
.amy-report-reminder {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #8a5a00;
}

.amy-report-signer {
    font-size: 14px;
    line-height: 1.6;
}

.amy-report-signer a {
    color: var(--amy-accent);
}

/* The signature as it was drawn, on the white it was saved with. */
.amy-report-signature {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    margin-top: 12px;
    border: 1px solid var(--amy-border);
    border-radius: var(--amy-radius);
    background: #fff;
}