/* KSS MyPBX: πρόσθετα στυλ της σελίδας πελατών πάνω από το panel.css (κινητό πρώτα). Karagiannis Security Systems.
   Χωρίς inline styles στα templates (CSP style-src 'self'): ό,τι χρειάζεται μπαίνει εδώ. Χρώματα μόνο από τα tokens
   του panel.css (--bg, --surface, --primary, --ok, --warn, --crit, --info, --muted), ώστε να δουλεύουν και τα δύο θέματα. */
.mypbx-actions { margin-left: auto; gap: .6rem; }
.mypbx-user { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mypbx-inline-form { margin: 0; }
.mypbx-portal .content { margin-left: auto; margin-right: auto; }

/* Βοηθητικά */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mp-page { max-width: 760px; margin: 0 auto; }
.mp-narrow { max-width: 560px; }
.mp-title { margin-bottom: .5rem; }
.mp-back { display: inline-flex; align-items: center; gap: .25rem; min-height: 40px; margin-bottom: .3rem; text-decoration: none; }

/* Μενού λογαριασμού */
.mypbx-portal .usermenu-panel { right: 0; }
.mypbx-portal .usermenu-panel a, .mp-theme-toggle { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.mypbx-portal .usermenu-panel form { margin-top: .4rem; }

/* Φίλτρα λίστας: καρτέλες (radio), αναζήτηση, περίοδος */
.mp-filters { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; min-width: 0; }
/* fieldset: χωρίς min-width 0 απλώνεται στο πλάτος των καρτελών και η σελίδα κυλά πλάγια στο κινητό */
.mp-tabs { display: flex; gap: .35rem; overflow-x: auto; border: 0; padding: 0 0 .1rem; margin: 0; min-width: 0;
  max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mp-tabs::-webkit-scrollbar { display: none; }
.mp-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mp-tabs label { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .9rem; border-radius: 999px;
  background: var(--surface-2); color: var(--text); white-space: nowrap; cursor: pointer; font-weight: 600; font-size: .95rem; }
.mp-tabs input:checked + label { background: var(--primary); color: var(--primary-text); }
.mp-tabs input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }
.mp-filter-row { display: flex; gap: .5rem; align-items: center; }
.mp-filter-row .mp-search { flex: 1 1 auto; min-width: 0; }
.mp-filter-row .mp-period { flex: 0 0 auto; width: auto; max-width: 42vw; }
.mp-search-btn { flex: 0 0 auto; border: 1px solid var(--border); }
.mp-loading { color: var(--muted); font-size: .9rem; margin: .2rem 0 .4rem; }

/* Λίστα κλήσεων */
.mp-day { font-size: .85rem; color: var(--muted); font-weight: 700; margin: 1rem .2rem .35rem; letter-spacing: .02em; }
.mp-day-group:first-child .mp-day { margin-top: .4rem; }
.mp-calls { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; }
.mp-calls > li + li { border-top: 1px solid var(--border); }
.mp-call { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .15rem .7rem; align-items: center;
  min-height: 60px; padding: .6rem .8rem; color: var(--text); text-decoration: none; }
.mp-call:hover, .mp-call:focus-visible { background: var(--surface-2); }
.mp-dir { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--surface-2); flex: none; }
.mp-dir svg { width: 1.2rem; height: 1.2rem; }
.mp-dir-in { color: var(--info); }
.mp-dir-out { color: var(--ok); }
.mp-dir-internal { color: var(--muted); }
.mp-dir.mp-missed { color: var(--crit); }
.mp-call-main { display: flex; flex-direction: column; min-width: 0; }
/* «από → προς»: οι αριθμοί δεν κόβονται ποτέ (αναδιπλώνονται σε δεύτερη γραμμή στο στενό κινητό) */
.mp-call-parties { font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mp-to { white-space: nowrap; }
.mp-call-sub { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.mp-call-sub:empty { display: none; }
.mp-call-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.mp-call-time { font-variant-numeric: tabular-nums; font-size: .9rem; }
.mp-rec { color: var(--primary); line-height: 1; }
.mp-rec svg { width: 1rem; height: 1rem; }
.mp-more { display: flex; justify-content: center; margin: .9rem 0 .4rem; }
.mp-more .btn { min-width: 12rem; }
.mp-empty { margin-top: .4rem; }
.mp-notice { padding: 1rem; border: 1px solid var(--border); border-left: 5px solid var(--warn); border-radius: var(--radius);
  background: var(--surface); margin: .6rem 0; }
.mp-notice-ready { border-left-color: var(--info); }
.mp-notice p { margin: .2rem 0 .6rem; }

/* Λεπτομέρεια κλήσης */
.mp-detail-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mp-detail-head h1 { margin: 0; flex: 1 1 auto; }
.mp-facts dd { font-variant-numeric: tabular-nums; }
.mp-steps { list-style: none; margin: .4rem 0 0 .45rem; padding: 0; border-left: 2px solid var(--border); }
.mp-steps li { position: relative; padding: .25rem 0 .7rem 1rem; }
.mp-steps li::before { content: ""; position: absolute; left: -6px; top: .6rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); }
.mp-steps li:last-child { padding-bottom: .2rem; }
.mp-step-time { display: block; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.mp-recording { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .5rem 0 .8rem;
  border-bottom: 1px solid var(--border); }
.mp-recording-label { font-weight: 600; }
.mp-audio { width: 100%; max-width: 100%; }
.mp-no-recording { margin: .3rem 0 .6rem; }
.mp-transcribe { margin: .8rem 0 .2rem; }
.mp-soon { opacity: .55; cursor: not-allowed; }

/* Λογαριασμός: συσκευές */
.mp-devices { padding: .2rem 1rem; }
.mp-device { align-items: center; }
.mp-device-icon { width: 1.6rem; height: 1.6rem; color: var(--muted); flex: none; }
.mp-device-main { flex: 1 1 auto; min-width: 0; }
.mp-device-name { font-weight: 600; }

/* Χωρίς σύνδεση */
.mp-offline { padding-top: 2rem; }

@media (min-width: 720px) {
  .mp-filters { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .mp-filter-row { flex: 1 1 320px; max-width: 460px; }
  .mp-call { padding: .65rem 1rem; }
}